Vue project — spider movie (step analysis)

Time:2022-8-4

Project Description

Spider movie is mainly a vue project of imitation cat's eye movie
The main function:
1. City positioning
2. Show the movies that are currently showing
3. Show upcoming movies
4. Search
5. Show Theater
6. My page
7. Movie Details

Project development environment

 Compilation tool: vscode
Operating system: win10
Node environment: node 12.18.3 npm6.14.6
Vue leg support: vue-cli 4.5.4
Version management tool: git bash 2.28.0
Server software: Tomcat9.0 (I set the address corresponding to the Tomcat server to: localhost:8082)

Project development process

1. Project requirements analysis
2. Project duration assessment
3. Division of project responsibilities
   front end:
      static page creation
      Front-end frame selection
      Front-end page architecture
   rear end:
      database development
      API interface documentation
      API interface implementation

Create project

Open cmd in the corresponding project directory
Create a project with Vue-cli: (I chose the Vue3.x version)
vue create project name
After creation, a bunch of folders and files will be generated:

Vue project --- spider movie (step analysis)

Create a remote repository corresponding to the project in gitee
Vue project --- spider movie (step analysis)

Associate a local library with a remote library
Vue project --- spider movie (step analysis)

Push the initial project files/directories in the master branch to the remote warehouse
Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Create and switch to the dev branch, and push the initial project file/directory of the dev branch to the remote warehouse
Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Create and switch to a new branch (createComponents) dedicated to creating components
Vue project --- spider movie (step analysis)

The following parts are developed on the createComponents branch↓↓↓↓↓↓

Initialize routing configuration—movie page, theater page, my page

There are three pages in total: Movie Page, Cinema Page, My Page
Route configuration for movie page:

Vue project --- spider movie (step analysis)

The routing configuration of the theater page:

Vue project --- spider movie (step analysis)

Routing configuration for my page:

Vue project --- spider movie (step analysis)

Import each route in the main routing configuration page (index.js):

Vue project --- spider movie (step analysis)

Route redirection configuration

When the redirected route does not exist, redirect to the movie page by default (path: /movie)
Redirect: redirect: 'jump route'
Configure index.js in the router folder:

Vue project --- spider movie (step analysis)

Make some modifications to the initial index.html file in the project

//Added user-scalable=no, which does not allow users to zoom in and out of the page
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  
//Introduce public css styles
<link rel="stylesheet" href="<%= BASE_URL %>css/common.css">  
// import icon
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2446917_rga2fsr9ns.css">

Modification of App.vue file

Leave a route exit:<router-view />
Add the keep-alive tag: realize the page caching effect, because the performance will be affected when the switching component is re-rendered, which will significantly improve the user experience (inactive components will be cached)

Vue project --- spider movie (step analysis)

Create the header component

Create a header folder under the components folder and create an index.vue file under this folder
1. Write relevant HTML and CSS code
2. In order to realize the switching of dynamic values ​​(corresponding to the corresponding title of the page) (to realize data transfer between parent and child components), props in Vue can be used (one-way data transfer. The value of the parent component will change the value of the child component, and the value of the child component will be changed. Value changes will not affect the parent component)
   Define a name title, the type is String, the default value is 'Spider Movie'
   Then in the corresponding label (<h1></h1> ), write {{title}} to the content in the ), and receive the passed data

Vue project --- spider movie (step analysis)

Create the tail component

Create a footer folder under the components folder and create an index.vue file under this folder
Write the corresponding HTML, CSS code

Vue project --- spider movie (step analysis)

Create page component—movie page

Create a movie folder under the views folder and create an index.vue file under this folder
1. Initialize the page code
2. Introduce the head component and the tail component in the script tag
   import Header from "@/components/header";
   import Footer from "@/components/footer";
3. In order to switch the title in the header component, add the attribute title to the Header tag, the value is 'spider movie', and pass it to the header component
4. Write the corresponding HTML, CSS code
   HTML is divided into two parts:
   1) Movie menu bar (city location, hot, upcoming, search)
   2) Showing and upcoming movies page display (rendering accordingly through router-view tag)                  
5. Use the router-link label for each function of the movie menu bar to jump to the corresponding sub-route

Vue project --- spider movie (step analysis)

Configure sub-routes in movies page

The sub-routes in the movie page are: 'city' (city), 'showing' (currently showing), 'coming' (coming soon), 'search' (search)
Use children to configure sub-routing (it will be spliced ​​after /movie)
When on the movie page, the page that is currently being shown is displayed by default, that is, the route redirects to '/movie/showing'

Vue project --- spider movie (step analysis)

Movie Pages — Components for Creating Cities

Create a city folder under the components folder and create an index.vue file under this folder
1. Write the corresponding HTML and CSS code
   HTML is divided into three parts:
   1) Popular cities
   2) City classification
   3) Initial sidebar

Vue project --- spider movie (step analysis)

Movie Pages—Create a component that is currently being shown

Create a showing folder under the components folder and create an index.vue file under this folder
1. Write the corresponding HTML and CSS code
   Sections in HTML into each movie
   Each movie area is divided into three parts:
   1) Movie pictures
   2) Movie information: movie name, movie score, starring role, theater screenings
   3) Buy ticket button

Vue project --- spider movie (step analysis)

Movie Page — Create Upcoming Component

Create a coming folder under the components folder and create an index.vue file under this folder
1. Write the corresponding HTML and CSS code
   Sections in HTML into each movie
   Each area of ​​the movie is divided into three parts:
   1) Movie pictures
   2) Movie information: movie name, number of people you want to watch, director, starring, release time
   3) Pre-sale button

Vue project --- spider movie (step analysis)

Movies page – component to create search

Create a search folder under the components folder and create an index.vue file under this folder
1. Write the corresponding HTML and CSS code
   HTML is divided into two parts:
   1) Search input box
   2) Search result display area: major genres, information corresponding to each movie (movie picture, movie name, movie score, movie English name, movie type, movie date)

Vue project --- spider movie (step analysis)

Create a page component—theatrical page

Create a cinema folder under the views folder and create the index.vue file under this folder
1. Initialize the page code
2. Introduce the head component and the tail component in the script tag
   import Header from "@/components/header";
   import Footer from "@/components/footer";
3. To switch the title in the header component, add the attribute title to the Header tag with the value 'Spider Cinema' and pass it to the header component
4. Write the corresponding HTML, CSS code
   HTML is divided into two parts:
   1) Cinema menu bar (full city, brand, feature)
   2) Cinema page display (rendering correspondingly through the router-view tag)

Vue project --- spider movie (step analysis)

Theater Pages — create components that display theaters

Create a cinemalist folder under the components folder and create the index.vue file under this folder
1. Write the corresponding HTML and CSS code
   HTML divided into areas for each theater
   Each theater area is divided into 3 parts:
   1) Theater name and price
   2) Address and distance
   3) Some discount cards and the like

Vue project --- spider movie (step analysis)

Create Page Component—My Page

Create a mine folder under the views folder and create an index.vue file under this folder
1. Initialize the page code
2. Introduce the head component and the tail component in the script tag
   import Header from "@/components/header";
   import Footer from "@/components/footer";
3. To switch the title in the header component, add the attribute title to the Header tag with the value 'my spider' and pass it to the header component
4. Write the corresponding HTML, CSS code
   A component that renders a login page in HTML

Vue project --- spider movie (step analysis)

my page — create login component

Create a login folder under the components folder and create an index.vue file under this folder
1. Write the corresponding HTML and CSS code
   HTML is divided into five parts
   1) Account name input box
   2) Password
   3) Verification code
   4) Login button
   5) Recover password and register now

Vue project --- spider movie (step analysis)

So far, the development on the createComponents branch is probably complete, you can merge the things on this branch into the dev branch and push them to the remote warehouse

1. In the createComponents branch: git add ., git commit commits the code to the local library
2. Switch to the dev branch: git checkout dev
3. Merge to the dev branch: git merge createComponents --no-ff
4. Push the code to the remote repository of gitee: git push origin dev
5. You can delete the createComponents branch: git branch -d createComponents

Next, the corresponding development can be continued.

Create a new branch setData, dedicated to rendering data

Create and switch branch setData: git checkout -b setData

The following operations are developed on the setData branch↓↓↓↓↓↓

I put the api files of the relevant data on the server built by Tomcat, because the ip address of the data is localhost:8082, and the ip address of the project is localhost:8081
So there is a cross-domain problem when rendering data

Solve cross-domain problems

Create a new file in the project directory: vue.config.js
Writing: (remember to restart the project after writing, it will take effect)

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Use axios to make an ajax request when rendering data

1. Install axios: npm i -S axios
2. Introduce axios:
   Write import axios from 'axios' in main.js file
3. Add axios to the Vue prototype, and use this to directly call axios during development:
   createApp(App).config.globalProperties.$axios=axios;
4. Use axios: (use the ctx of the getCurrentInstance method to call the mounted axiox)
   import { getCurrentInstance } from "vue";
   const { ctx } = getCurrentInstance();
   ctx.$axios.xxx

City component—rendering city data

Some city data:

Vue project --- spider movie (step analysis)

1. Define two data in data(){return {}}: hotlist array (receive the passed popular city data), citylist array (receive the passed ordinary city data)

Vue project --- spider movie (step analysis)

2. In the city component, in the hook function whose life cycle is mounted, use the get request of axios to get the city data

Vue project --- spider movie (step analysis)

3. Then render the data to the page (using v-for)

Vue project --- spider movie (step analysis)

4. Write a method in methods so that clicking the letter in the sidebar can jump to the city list corresponding to the first letter, and the background color of the letter corresponding to the click changes to gray (add a touchstart event to the li corresponding to the letter in the sidebar Listen, this method is handleToIndex)
   handleToIndex method idea:
   1) First add the ref attribute to the div with class city_sort, and set the attribute value to city_sort, so that this element can be easily obtained in js
   2) Use this.$refs.xxx (attribute value) to get this div element
   3) Obtain its child element h2 according to the div element obtained in the previous step (that is, the area where the first letter is obtained)
   4) Use the offsetTop method to get the distance that each initial letter reaches the top
   5) Use the scrollTop method to change the scrolling distance to the top for the wrapping layer of the city list (that is, the div whose class is city_list, which represents the parent node of the div obtained in the second step), and the value is the distance value obtained in the fourth step.
   6) Then change the background color of each item in the letters of the sidebar by clicking
   7) Add the ref attribute to the div with class city_index, and set the attribute value to city_index
   8) Use this.$refs.xxx (attribute value) to get this div element
   9) Get its child element li (that is, each letter item) according to the div element obtained in the previous step
   10) First use the for loop to change the background color of all li to transparent color
   11) Change the background color of the clicked li to gray (using xxx.style.background='xxxx')

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

On-the-fly component—renders the movie data that is on-going

Some of the current movie data:

Vue project --- spider movie (step analysis)

1. Define a data in data(){return {}}: movielist array (receive the movie data that is being passed over)

Vue project --- spider movie (step analysis)

2. In the showing component, in the hook function whose life cycle is mounted, use the get request of axios to obtain the movie data that is being shown.

Vue project --- spider movie (step analysis)

3. Then render the data to the page (using v-for)
   The passed image path needs to be processed with some width and height settings (using the filtering method of Vue3.x (written in the main.js file))
   There is also a picture that shows what version of the logo can be judged by v-if

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Upcoming Component — Renders upcoming movie data

Some of the upcoming movie stats:

Vue project --- spider movie (step analysis)

1. Define a data in data(){return {}}: the cominglist array (receive the upcoming movie data passed in)

Vue project --- spider movie (step analysis)

2. In the coming component, in the hook function whose life cycle is mounted, use the get request of axios to obtain the upcoming movie data

Vue project --- spider movie (step analysis)

3. Then render the data to the page (using v-for)
   The passed image path needs to be processed with some width and height settings (using the filtering method of Vue3.x (written in the main.js file))
   There is also a picture that shows what version of the logo can be judged by v-if

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Search component — data that renders search results

Movie data for some search results: (only data about letters a, b, aaa are provided here)

Vue project --- spider movie (step analysis)

1. Define a data in data(){return {}}: message string (the value of the input box), movielist array (receive the passed movie data)

Vue project --- spider movie (step analysis)

2. In the search component, in the hook function of the watch, if the message changes, use the get request of axios to obtain the movie data obtained by the search (in the watch, function throttling, Ajax asynchronous data acquisition, and DOM manipulation can be performed; Depends on fixed data types, etc. A data that already exists, executes the function when it changes)
   1) In the input tag, use v-model to bind message data bidirectionally and monitor the value of the input box
   2) Make axios get request in listening message

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

3. Then render the data to the page (using v-for)
   The passed image path needs to be processed with some width and height settings (using the filtering method of Vue3.x (written in the main.js file))

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

4. In the case of the real-time monitoring data of the input data in the input box, as long as the result of the last confirmation, the previous ones are cleared. (That is, axios will trigger multiple requests during this period, and the unused requests should be interrupted)
At this time, a method of function anti-shake is used:
1. How to use the timer
2. You can also use some methods of axios to terminate the request
   1) At the beginning, it can be judged whether the function to terminate the request already exists, and if so, it will be terminated
   2) Create a new instance of cancelToken in the second parameter of axios (using the constructor CancelToken of axios) (making the request with cancelable function)

Vue project --- spider movie (step analysis)

cinemalist component — renders the data of the cinema

Data of some theaters: (only the theater data of Jiangmen and Chengdu are provided here)

Vue project --- spider movie (step analysis)

1. Define a data in data(){return {}}: cinemalist array (receive the passed cinema data)

Vue project --- spider movie (step analysis)

2. In the cinemalist component, in the hook function whose life cycle is mounted, use the get request of axios to obtain the cinema data

Vue project --- spider movie (step analysis)

3. Then render the data to the page (using v-for)
   It also shows how small cards can be judged by v-if

Vue project --- spider movie (step analysis)

4. In the following steps, the cinema data of different regions will be rendered according to different urban areas

So far, the development on the setData branch is probably complete, and the things on this branch can be merged into the dev branch and pushed to the remote warehouse

1. In the setData branch: git add ., git commit commits the code to the local library
2. Switch to the dev branch: git checkout dev
3. Merge to the dev branch: git merge setData --no-ff
4. Push the code to the remote repository of gitee: git push origin dev
5. You can delete the setData branch: git branch -d setData

Next, the corresponding development can be continued.

Create a new branch getCity, dedicated to the function of city association data (different cities associate different theater data)

Create and switch branch getCity: git checkout -b getCity

The following operations are developed on the getCity branch↓↓↓↓↓↓

Globally encapsulate the berrter-scroll component

effect:
1. Makes rolling smoothly, not so stiff
2. Solve the problem that the click event will not be triggered when sliding (a way to realize the tap event, and you can also use zepto, vue-touch to achieve)

Prerequisites for the component to take effect:
1. The height or width of the wrapping container must be less than the height and width of the content
2. Wait for the content to be triggered to be rendered

step:
1. Install the better-scroll plugin first: npm i -S better-scroll
2. Create a scroller folder in the components folder and create the index.vue file in this folder
3. Write HTML, CSS part
   The HTML part has a wrapper layer with a slot slot (displaying the corresponding HTML module)
4. Introduce better-scroll plugin: import BScroll from &quot;better-scroll&quot;;
5. Write in the hook function mounted:
   1) Create a new instance of better-scroll: this.scroll = new BScroll('corresponding wrapping layer element', {some related configurations})
   2) To achieve pull-up refresh, you need to bind a scroll event: this.scroll.on(&quot;scroll&quot;, (pos) =&gt; {})
      Execute the method to implement the pull-up refresh in the scroll event (using props to receive the method passed from the parent component): handleToScroll(){}
      Also bind a touchend event (triggered at the end of the slide) to indicate successful loading: this.scroll.on(&quot;touchEnd&quot;, (pos) =&gt; {})
      Execute the corresponding method in the touchEnd event (using props to receive the method passed by the parent component): handleToTouchEnd(){};
   All of the above will be triggered after the content is loaded, so you need to use .$nextTick(()=&gt;{}) in vue, and the content in mounted is added to the function here for execution
6. Write in the hook function updated:
   this.scroll.refresh(); //Recalculate the sliding value when the data is updated
7. When this sliding component is used in the city component, you will find that the letters in the sidebar cannot control the jump of the corresponding letter area.
   Because better-scroll is controlling this area at this time, the corresponding method cannot take effect.
   So to take advantage of the method in better-scroll (scrollTo(x,y)), add this method in better-scroll: toScrollTop(y) {this.scroll.scrollTo(0, y);}
   Then call the method in the city component
   1) Add the ref attribute to the scroller element, the attribute value is city_list
   2) Call the method on it by getting the element
8. Register this component globally, making it readily available in the file. Write in main.js file:

Vue project --- spider movie (step analysis)

Better-scroll component global writing:

Vue project --- spider movie (step analysis)

The call of the better-scroll component:

Vue project --- spider movie (step analysis)

Globally encapsulate the loading component

Since some content has to be loaded through requests, while waiting for the data response, you can add a loading component during the loading process, which will look more beautiful and the user experience will be better.

1. Create a loading folder in the components folder and create the index.vue file in this folder
2. Write HTML, CSS part
   (You can write it yourself, or you can directly find some CSS3 components to achieve loading effect. Recommended website: https://codepen.io/trending)
3. Register this component globally so that it can be used at any time in the file. Write in main.js file:

Vue project --- spider movie (step analysis)

The global writing of the loading component:

Vue project --- spider movie (step analysis)

Loading component call:
(You can define a Boolean type of data in data: isLoading, if true, the loading component will be displayed, otherwise the better-scroll component will be displayed)

Vue project --- spider movie (step analysis)

Set up local storage and state management of city data

For some data that does not change much, it can be stored locally (eg: localStorage)

Local storage of city data: (using localStorage)
1. After the data obtained through ajax request, use window.localStorage.stetItem('xx',xx) to store the data (note that the JSON.stringfy method should be used to convert it into a string before storing it)
2. Before the ajax request, you can make a judgment first. If there is relevant data in the local storage, assign the value directly (note that the JSON.parse method is used to convert the data into a JSON object before assigning it), otherwise, perform ajax request data

Vue project --- spider movie (step analysis)

State management of city data: (here we will use the things under the store folder)
1. First create a new folder named city under the store folder, and create a new index.js file under the city folder (specially used for state management of city data)
2. In the index.js file of the store, import the above city module file: import city from './city'
3. Add the city submodule introduced above to modules
4. Configuration in the city file: (each submodule has its own state, mutation, action, etc.)
   1) Define two variables in state: nm (city name), id (city id)
   2) Define a method in mutation to receive the passed value and update the value in the state:
      CITY_INFO(state,payload){
            state.nm=payload.nm;
            state.id=payload.id;
      }
    3) Configuration of exports default{}:
       export default {
           namespaced:true, // Make it a namespaced module. Make sure to add a parent name splicing when the variable names are the same (add the module name when using mutations, getters, actions and properties in the module)
           state,
           actions,
           mutations
       }

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

5. In the city label display of the movie component (movie), obtain the city name of the city module in the store state to realize the dynamic display of city data (get the corresponding attribute value: $store.state.module name.module attribute)

Vue project --- spider movie (step analysis)

6. In the city component, click on each city to update the current city status information and store it
   1) Bind the click event for each city li and execute the handleToCity() method
   2) In the handleToCity method:
      Through this.$store.commit(&quot;module name/mutations in the module&quot;, {corresponding value}) method, the received corresponding city name and city id are passed to the city's state management and update
      Use localStorage to store the city name and city id of the current state
      After selecting the city, use this.$router.push('router path') to automatically jump to the movie page that is being shown

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Render related upcoming movie data and theater data by the id association of the current city

The data rendered here only provides Chengdu and Jiangmen areas
If you want to re-render the relevant data after selecting the corresponding city, it is nothing more than re-initiating the ajax request to receive the data
But in the life cycle mounted, once the cache system keep-alive exists, the request will not be triggered again.
So it is necessary to make related requests in the actived life cycle
(The activated life cycle is called when the keep-alive component is activated)
Generally speaking, it should be executed in the activated life cycle, but I have to execute it in the mounted life cycle to take effect (I don't know the reason for this at present, it's strange)

Some steps to render upcoming movie data and theater data for the corresponding city:
1. If there is no switch city, we do not need to send an ajax request
   1) In data, define a new data prevCityId (representing the last selected city id), and assign it to -1 at the beginning
   2) Obtain the city id in the city state management through the this.$store.state method
   3) Compare the prevCityId with the city id obtained in the current state. If they are equal (that is, the city has not been switched), return and exit directly, without sending a request, and directly render the cached data
2. If the city is switched and a request is to be sent, the requested address must be spliced ​​with the city id of the current state to request data, and the city id of the current state must be assigned to prevCityId

Vue project --- spider movie (step analysis)

Globally encapsulate popup components

If you use vue to create this component, it will be a bit troublesome to pass parameters or reuse, so we can use JS to encapsulate this component and receive the corresponding parameters
1. Create a folder named JS under the components folder, create an index.js file (as the JS main module file) under the JS folder, create a folder named msgBox under the JS file, and create a folder named msgBox under the JS file. Create an index.vue in the folder

2. Edit the HTML and CSS parts of the pop-up window in index.vue corresponding to msgBox

3. Write the index.js file corresponding to JS
   1) Introduce the createApp and h functions corresponding to vue: import { createApp,h } from 'vue'
   2) Introduce the msgBox vue component just written: import msgBox from './msgBox'
   3) Define and export a closure function named messageBox to provide an interface for introducing this component: export var messageBox=(function(){})()
   4) In this closure function, first define a variable with default configuration: defaults
   5) The next step is to write a function that returns
   6) Receive the passed configuration parameters and overwrite the default parameters
   7) Define the corresponding dynamic components and mount them on the DOM (the Vue.extend({}) method can be used in Vue2.0, and the createApp({}) method can be used in Vue3.0)
      i) Use createApp to define an instance named app: const app=createApp({})
      ii) Use render(){return h()} to render components and related props properties and slot properties, etc.
        (h returns a &quot;virtual node&quot; containing information describing to Vue what kind of node it should render on the page, including descriptions of all child nodes. Receives a total of three parameters: 1. HTML tag name, component or async component. Use A function returning null will render an annotation (required), 2. an object corresponding to the attributes, props and events we will use in the template (optional), 3. a child VNode, generated using h(), Or use a string to get a &quot;text VNode&quot;, or an object with a slot (optional))
      iii) Create a new div node, add this component to the body, and mount it

Vue project --- spider movie (step analysis)

4. Then continue to write the index.vue file corresponding to msgBox
   To receive the passed slot attribute value, you can use the cooperation of v-slot and slot
   To receive the value of props, first define the two function values ​​in props:{}, and call the corresponding function method through this.$props.xxx

Vue project --- spider movie (step analysis)

Here is a small improvement on the pop-up window:
1. In the area corresponding to cancel and ok, determine which area has a value (using v-if)
2. After clicking the ok area, remove the pop-up window and unbind it
3. The cancel and ok values ​​are passed in as props properties and received in the corresponding msgBox vue component

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Realize city positioning

The positioning of the city is done in the movie component (movie page)
The method of realizing city positioning is realized through the open API of AutoNavi Map (for details, please refer to the website: https://blog.csdn.net/qq_42817227/article/details/98303058?ops_request_misc=%7B%22request%5Fid%22% 3A%22161728232116780357267112%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&amp;request_id=161728232116780357267112&amp;biz_id=0&amp;utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-98303058.first_rank_v2_pc_rank_v29&amp;utm_term= Use the Gaode map to locate)

1. In the movie component, first introduce the popup component: import { messageBox } from &quot;@/components/JS&quot;;

2. Define a method handleOk (a method for positioning) in methods. The premise of writing this method is to introduce the corresponding js link in index.html in the public folder
   The function method of handleOk:
   1) Write the corresponding positioning function method provided
   2) In the successfully obtained function method, store the located city name and city id in localStorage, and use the this.$store.commit() method to update the current state of the city
   
3. In the life cycle mounted, first execute the handleOk method to locate, and then determine whether the current city status is equal to the currently located city, if not, a pop-up window will pop up to prompt you to switch the location (after 2s)
   The parameter value of the popup window:
   messageBox({
       title: &quot;Location&quot;,
       content: this.nowCityName,
       cancel: &quot;Cancel&quot;,
       ok: &quot;Switch positioning&quot;,
       handleOk: () => {
         this.handleOk();
         window.location.reload();
       },
    });
    
 4. In the updated life cycle, when the data is updated, re-judg whether the current city status is equal to the currently positioned city to see if it needs to be repositioned

Vue project --- spider movie (step analysis)

So far, the development on the getCity branch is probably complete, you can merge the things on this branch into the dev branch and push them to the remote warehouse

1. In the getCity branch: git add ., git commit commits the code to the local library
2. Switch to the dev branch: git checkout dev
3. Merge to the dev branch: git merge getCity --no-ff
4. Push the code to the remote repository of gitee: git push origin dev
5. You can delete the getCity branch: git branch -d getCity

Next, the corresponding development can be continued.

Create a new branch detailPage, dedicated to developing movie detail pages

Create and switch branch detailPage: git checkout -b detailPage

The following operations are developed on the detailPage branch↓↓↓↓↓↓

Create Component—Movie Details Page Component

1. The rendering entry of the movie details page:
The component rendering of the movie details page can be rendered by commanding the view through router-view in the movie component
But in this way, it will conflict with the router-view of the component that is currently being rendered and the component that is about to be released. At this time, we can distinguish them by name (namely, name the view), so that they will not be rendered. confusion
We set the name of the command view that renders the movie detail component to detail

Vue project --- spider movie (step analysis)

2. Next, set the routing of the details page in the routing of the movie
Due to the use of named views, the writing method will be slightly different when rendering components corresponding to sub-routes
In addition, the movie id value obtained on the movie page can be passed to the movie details page through routing parameters. The movie details page receives the passed id value through props, and can request the corresponding movie details data and render it.
The following picture is the relevant routing configuration

Vue project --- spider movie (step analysis)

3. Write the components of the movie detail page
  1) In the movie folder under the views folder, create a new file named detail.vue
  2) Write relevant HTML, CSS
     Introduce the header component, because a fallback function needs to be added to the left side of the header, so an icon needs to be added, and a new slot is added to the header component to render the icon

Vue project --- spider movie (step analysis)

3) Define the props attribute to receive the movie id passed from the movie page (what is the attribute name defined in the route, what is the props attribute name here)
  4) Define a handleToBack method to return to the previous route, and use the this.$router.back() method to achieve
  5) Then use the ajax request to receive the data, and obtain the corresponding movie details data by cooperating with the received movie id
  6) Among them, in the display of the cast and crew, we can use the swiper plug-in to realize the sliding display on the mobile terminal (the CSS and JS files related to the swiper need to be introduced)
     (swiper Chinese website: https://www.swiper.com.cn/)

Vue project --- spider movie (step analysis)

So far, the development on the detailPage branch is probably complete, and the things on this branch can be merged into the dev branch and pushed to the remote warehouse

1. In the detailPage branch: git add ., git commit commit the code to the local library
2. Switch to the dev branch: git checkout dev
3. Merge into the dev branch: git merge detailPage --no-ff
4. Push the code to the remote repository of gitee: git push origin dev
5. You can delete the detailPage branch: git branch -d detailPage

The above is basically some development of the client, you can also improve some other functions by yourself

You can also perform a real machine test, that is, browse the developed project on the mobile phone

The premise of the real machine test is that the mobile phone and the computer should be connected to the same network
View the address of the Network when running the project, enter this address directly in the mobile browser to view

Vue project --- spider movie (step analysis)

If the Network address shown here is unavailable
Solution:
In the vue.config.js file, add a public attribute, the attribute value is the IPv4 address of the network, and add the corresponding port number, restart the project, and it will be displayed.

Vue project --- spider movie (step analysis)

Some optimizations of the project

1. You can add an animation waiting to be loaded at the beginning of this project (add it in the index.html file)
2. Modify the basic public root path (you can specify a root directory, and access all files and components in this directory)
   Use publicPath to modify the basic public root path of production mode and development mode (configured under the vue.config.js file)
   Here is my configuration modification:

Vue project --- spider movie (step analysis)

Packaging of the project

Project packaging command: npm run build
The packaged files are placed in the dist directory

Vue project --- spider movie (step analysis)

The following is the operation of the back end↓↓↓↓↓↓

The technologies we need to use for our back-end development

1. Node.js
2. Express
3. MongoDB
4. Other modules

Prerequisites for back-end development

In order to realize the corresponding function of my page, it is necessary to develop the background management, and use the database to store the corresponding information of the user
Install node (see my other article: About node)
Install express: npm i -s express
Express-generator can be installed globally: npm install -g express-generator
(express-generator will quickly create the application framework)

In the same level directory of the project directory spider, open cmd
Enter the command: express -e service frame name

Vue project --- spider movie (step analysis)

Then a corresponding directory will be generated

Vue project --- spider movie (step analysis)

Enter this directory, open the package.config file, if you want to modify (listen) the file in real time
You can change &quot;start&quot;: &quot;node ./bin/www&quot; in scripts to &quot;start&quot;: &quot;nodemon ./bin/www&quot; (provided that this plugin of nodemon is installed)
After running, enter the corresponding address in the browser (the port I set here is 3000), if the following figure appears, it proves that it has been opened successfully

Vue project --- spider movie (step analysis)

Since we are going to use a database to store our user data, we will use the MongoDB database here
We can install the mongoose module and use express to manipulate data on it
Install mongoose: npm i -S mongoose
Then create a new folder named db in the spiderserver directory to store the database data
Open the database: (If you have configured the global path of mongodb, you can enter the command anywhere. If not, open cmd in the bin directory of the corresponding mongodb and enter the command)
Enter the command: mongod --dbpath=path to the db folder
We can create a new folder named untils, and create a new file named config.js under this folder. This file is specially used to write the related configuration of the database and some modules.
Write the config.js file:

Vue project --- spider movie (step analysis)

Then introduce the mongoose module file just written in the app.js file: var {Mongoose}=require('./untils/config');
And call its connect database method: Mongoose.connect();
Then we can create our corresponding database through the command line or the visual database tool Robo 3T (for specific operations, see my other article &quot;About MongoDB&quot;)
I use visual database tools here to create

Vue project --- spider movie (step analysis)

After the creation is complete, we can start our server again to see if the database is connected successfully. If the following figure appears, it means that the connection is successful.

Vue project --- spider movie (step analysis)

About the relevant interface that my page needs to write

1. login: login interface
2. register: register interface
3. logout: logout excuse
4. verify: verify the interface
5. getUser: interface for obtaining user information
6. findPassword: the interface to retrieve the password
...

Since the back end adopts the MVC framework, we need to separate the data from the controller. We can create corresponding folders models and controllers in this directory to process related things and write related interfaces respectively.
controllers are used to write related processing methods
Models are used to manage related database data
Create a new file users.js in these two folders

Write the interface of my page—verify the interface verify

Our verification interface here is to send verification code verification through email (the nodemailer module will be used)
Prepare a mailbox for sending verification codes (enable SMTP service) and a mailbox for receiving verification codes
Write the configuration for sending the email verification code in the config.js file under the untils folder (introduce the nodemailer module first):

Vue project --- spider movie (step analysis)

In the users.js file under the controllers folder, first introduce the Email object of the users.js module under untils, and then write the processing method of the verify interface:

Vue project --- spider movie (step analysis)

In the index.js file under the routers folder, first introduce the controllers file module, call the processing method of its verify interface, and then configure the route of the verify interface: (get request)

Vue project --- spider movie (step analysis)

Set the validity of the verification code:
1. Add a method to get the current time in the Email object under spiderserver/config/untils

Vue project --- spider movie (step analysis)

2. In the verification interface processing method under spiderserver/controllers/users.js, save the time of sending the verification code into the session

Vue project --- spider movie (step analysis)

3. In the processing method of the registration interface under spiderserver/controllers/users.js, use the current time to subtract the time for sending the verification code stored in the session just now, and judge whether it has exceeded 60 seconds. If it exceeds 60 seconds, the verification code will be proved. expired

Vue project --- spider movie (step analysis)

Write the interface of my page—register the interface register

In order to get the verification code at the time of registration, the data needs to be persisted and stored in the session (using the express middleware express-session)
Install express-session: npm i -S express-session
Introduce the express-session module in the app.js file: var session=require('express-session');
After the module is introduced, related configuration can be performed: (remember to configure before routing declaration)

Vue project --- spider movie (step analysis)

In the verification interface, the receiving email and verification code are stored in the session:
req.session.verify=verify; 
req.session.email=email; 

Because the user's registration information needs to be saved in the database, the related writing is performed under models/users.js:
1. Define the database skeleton of the registration interface
2. Define the corresponding database model (note the practice of making unique values ​​effective)
3. Define a method for data storage

Vue project --- spider movie (step analysis)

Then write the processing method of the registration interface under controllers/users.js:
1. Introduce the database model you just defined
2. Obtain the registration data of the user's post request
3. Determine whether the incoming mailbox or verification code is equal to the one stored in the session
4. Use the defined data saving method to save the corresponding user name, password, email
5. Then judge whether the registration is successful according to the saved result

Vue project --- spider movie (step analysis)

Configure the routing of the register interface in the index.js file under the routers folder: (post request)
router.post('/register',usersController.register);

Write the interface of my page—login interface login

Write a method for finding data in the database under models/users.js:

Vue project --- spider movie (step analysis)

Write the processing method of the registration interface under controllers/users.js:
1. Get the login data of the user's post request
2. Search and match in the database according to the login data passed by the user
3. Then judge whether the login is successful according to the result of the search, and if the login is successful, store the username in the session

Vue project --- spider movie (step analysis)

Configure the route of the login interface in the index.js file under the routers folder: (post request)
router.post('/login',usersController.login);

The interface for writing my page—the interface for logging out logout

Write the logout processing method under controllers/users.js: directly change the username stored in the session to empty

Vue project --- spider movie (step analysis)

Configure the routing of the logout interface in the index.js file under the routers folder: (get request)
router.get('/logout',usersController.logout);

The interface for writing my page—the interface getUser for obtaining user information

Write a processing method for obtaining user information under controllers/users.js:
Determine whether the username in the session is empty, if it is not empty, the acquisition is successful and the corresponding user data is stored in the session, otherwise the acquisition fails

Vue project --- spider movie (step analysis)

Configure the route of the getUser interface in the index.js file under the routers folder: (get request)
router.get('/getUser',usersController.getUser);

The interface to write my page—the interface to retrieve the password findPassword

Write a method for updating database data under models/users.js: (update according to the corresponding mailbox passed in)

Vue project --- spider movie (step analysis)

Write the processing method to retrieve the password under controllers/users.js:
1. Obtain the relevant data of the user's post request
2. Determine whether the email address and verification code passed in are the same as those stored in the session
3. If the same, call the updatePassword method under usreModel to modify the password, otherwise it will fail

Vue project --- spider movie (step analysis)

As of now, the user interface for my page has been written
Next, continue to develop the components of my page↓↓↓↓↓↓

Configure child routes for my page

Configure my page-related sub-routes in src/router/mine/index.js (including login components, personal center components, registration components, and password retrieval components)
When showing my page, redirect route to personal center page

Vue project --- spider movie (step analysis)

Refine the functionality of the previously created login component

1. Define two data in data: username (user name), password (password)
2. Both the username input box and the password input box use v-model to bind the username and password data in both directions.
3. Add a touchstart event to the login button and execute the handleToLogin method
4. Write the handleToLogin method:
   1) Make an ajax request to the previously written login login interface (remember to perform the corresponding reverse proxy first, otherwise there will be a problem of cross-domain inaccessibility. The locally written interface is best placed in the front of the reverse proxy, so as to avoid some inconsistencies. necessary errors)
   2) Determine whether the login is successful according to the status (if the login is successful, it will jump to the page of the personal center)
   3) Introduce the pop-up window component and use the pop-up window component to perform a feedback function on it

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Set some state management for users

Create a new folder named user under the store folder, create a new index.js file under this folder and write it. Then import the file module in store/index.js

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

Create my page related components—personal center component

1. Create a new file named center.vue under views/mine
2. Write the corresponding HTML, CSS
   In the HTML section, the current username is displayed through $stor.state.xxx.xxx

Vue project --- spider movie (step analysis)

3. Add a touchstart event to the exit button and write the handleToLogout method:
4. By making an ajax request to the logout interface, the status is used to determine whether the logout is successful. If the logout is successful, it will jump to the login page and update the user name of the user status management.

Vue project --- spider movie (step analysis)

5. Before entering the personal center page, you can use the &quot;navigation guard&quot; to judge the current user's login status and then decide whether to enter this component (the user's login status can be judged by sending a request to the getUser interface)
   If the user is in the login status at this time, you can enter the personal center page and update the user name of the user status management with the current user's username, otherwise, jump to the login page

Vue project --- spider movie (step analysis)

Create relevant components of my page—register components

1. Create a new folder named register in components, and create a new index.vue file in this folder
2. Write the corresponding HTML, CSS

Vue project --- spider movie (step analysis)

3. Define six data in data: username (user name), password (password), email (mailbox), verify (verification code), verifyInfo (verification code related information), disabled (judging whether the button is disabled)
4. The user name input box, password input box, mailbox input box and verification code input box use v-model to bind the username, password, email, and verify data in both directions respectively.
5. Introduce the pop-up window component, and use the pop-up window component to perform a feedback function on it
6. Add a touchstart event to the button that sends the verification code, and write the handleToVerify method: (use ajax to request the verify interface)
   The countDown method is triggered after clicking OK

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

7. Add a touchstart event to the registered button, and write the handleToRegister method: (use ajax to request the register interface)

Vue project --- spider movie (step analysis)

Create the relevant components of my page—modify the password component

1. Create a new folder named findPassword in components, and create a new index.vue file under this folder
2. Write the corresponding HTML, CSS

Vue project --- spider movie (step analysis)

3. Define three data in data: password (password), email (mailbox), verify (verification code)
4. For the password input box, the mailbox input box and the verification code input box, v-model is used to bind the password, email and verify data in both directions respectively.
5. Introduce the pop-up window component, and use the pop-up window component to perform a feedback function on it
6. Add a touchstart event to the button that sends the verification code, and write the handleToVerify method: (use ajax to request the verify interface)

Vue project --- spider movie (step analysis)

7. Add a touchstart event to the button that confirms the modification, and write the handleToPassword method: (use ajax to request the findPassword interface)

Vue project --- spider movie (step analysis)

Next is the development background management page↓↓↓↓↓↓

Set the administrator interface and permissions for background management

1. First add a value of isAdmin to the database skeleton in spiderserver/models/users.js, which is of type Boolean. Used to determine whether you have administrative rights

Vue project --- spider movie (step analysis)

2. In spiderserver/contorllers/user.js, in the processing method of the login interface, when the login is successful, the value of its management authority is also stored in the session, so as to determine whether there is management authority in the future. In the processing method of obtaining the user information interface, when the acquisition is successful, the value of its management authority is stored in the data

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

3. Create a new file named admin.js under spiderserver/routes to configure the interface routing of the management page
   1) First set up an interceptor to determine the user's management authority before entering the management page
   2) Configure the home page route of the management page

Vue project --- spider movie (step analysis)

4. Introduce the route of the management page in spiderserver/app.js

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

The background management page is built using the element-ui component library

element-ui Chinese official website: https://element-plus.gitee.io/#/zh-CN
1. Install the element-ui plugin: npm i -S element-ui
2. Introduce element-ui in the main.js file:
   import ElementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';
   app.use(ElementPlus);

Configure the route of the background management page

Create a folder named admin under spider/src/router and create an index.js file under this folder
Its sub-routes include user management page routing, movie management page routing, theater management page routing

Vue project --- spider movie (step analysis)

Then import the routing file module under the index.js file under spider/src/router

Vue project --- spider movie (step analysis)

Create management background components—main page components

1. Create a new folder named admin under spider/src/views, and create a new index.vue file under this folder
2. Write the corresponding HTML, CSS (the layout is the head, sidebar, main area)

Vue project --- spider movie (step analysis)

3. Under spider/store/user/index.js, add a new user's administrator status value isAdmin, the default value is false

Vue project --- spider movie (step analysis)

4. On the personal center page, render the user's identity according to whether it is an administrator. If it is an administrator, add a router-link tag to jump to the background management page.
   1) After obtaining the user information, update the value of the user's management authority to the user's state management
   2) When logging out, the value of the administrative authority in the user status management is false

Vue project --- spider movie (step analysis)
Vue project --- spider movie (step analysis)

5. On the main page of the management background, use the navigation guard to determine whether the current user has management rights to enter the management background

Vue project --- spider movie (step analysis)

Create a management background component—user management component

1. Create a new user.vue file under spider/src/views/admin

2. Write the corresponding HTML and CSS (the table area is divided into account creation date, user name, email, operation (not frozen and deleted))

Vue project --- spider movie (step analysis)

3. Define a data in data: tableData (array, used to store all user information)

4. In the mounted life cycle, use ajax to initiate a request to the user management interface (render all the obtained user data to the page using tableData data)

5. Listen for a click event to the button of the freeze operation, and execute the written handleToFreeze method:
   1) Incoming parameters (using properties on scope: scope.$index, scope.row)
   2) Use ajax to initiate a request to the interface of the freezing account operation, judge whether the freezing operation is successful according to the value of status, and use the information pop-up window component of element-ui to feedback information (if the freezing operation is successful, the corresponding isFreeze value is reversed. Can)
   
6. Listen for a click event to the button of the delete operation, and execute the written handleToDelete method:
   1) Incoming parameters (using properties on scope: scope.$index, scope.row)
   2) Use ajax to initiate a request to the interface of the delete account operation, judge whether the delete operation is successful according to the value of status, and use the information pop-up window component of element-ui to feedback information (if the delete operation is successful, use the splice method to specify the corresponding tableData The index item is deleted)

Vue project --- spider movie (step analysis)

7. For a frozen account, when logging in, it should prompt that the account has been frozen and the login fails
   Write some corresponding judgments under spiderserver/controllers/users.js

Vue project --- spider movie (step analysis)

In the login component, the corresponding information should also be fed back in the pop-up window

Vue project --- spider movie (step analysis)

8. element-ui paginates data
   1) Introduce paging component

Vue project --- spider movie (step analysis)

2) Define two data in data: currentPage (current page), pageSize (data displayed on each page)
   3) Calculate the data rendered by each page of nowTableData according to the current page and the data displayed on each page. At this time, the table should be the data that renders nowTableData

Vue project --- spider movie (step analysis)

4) Write the handleCurrentChange method to change the value of the current page

Vue project --- spider movie (step analysis)

Create a management background interface—user management interface

In the user management interface, there are three methods to implement:
1. Method to display all user data
   1) Write a method under spiderserver/models/users.js that returns and displays all user data

Vue project --- spider movie (step analysis)

2) Write a processing method for the operation of displaying all user information under spiderserver/controllers/admin.js (introduce the method just written in models)

Vue project --- spider movie (step analysis)

3) Configure the interface route to display user data under spiderserver/routes/admin.js: router.get('/userList', adminController.userList);

2. The method of account freezing operation
   1) In the database skeleton of spiderserver/models/users.js, add a value of isFreeze, which is of type Boolean. Used to determine whether the user account is frozen

Vue project --- spider movie (step analysis)

Write a method to update the frozen status of the account under spiderserver/models/users.js (use the mailbox number as the identifier to update the value of isFreeze)

Vue project --- spider movie (step analysis)

2) Under spiderserver/controllers/admin.js, write the processing method for updating the frozen state of the account (introduce the method just written in models)

Vue project --- spider movie (step analysis)

3) Configure the interface route of account freezing under spiderserver/routes/admin.js: router.post('/updateFreeze', adminController.updateFreeze);

3. How to delete the account
   1) Write a method for deleting user accounts in the database under spiderserver/models/users.js (delete with the mailbox number as the identifier)

Vue project --- spider movie (step analysis)

2) Write the processing method for deleting the user account in spiderserver/controllers/admin.js (introduce the method just written in models)

Vue project --- spider movie (step analysis)

3) Configure the interface route for account deletion under spiderserver/routes/admin.js: router.post('/deleteUser', adminController.deleteUser);

About the operation of uploading user avatars

Write an interface for uploading user avatars:
1. Add a value of userHead to the database skeleton under spiderserver/models/users.js, the type is String, and the default value is http://localhost:3000/images/default.jpg, which represents the user's avatar

Vue project --- spider movie (step analysis)

2. Write a method to update user avatar in database under spiderserver/models/users.js

Vue project --- spider movie (step analysis)

3. Write the basic public path for uploading user avatars under spiderserver/untils/config.js

Vue project --- spider movie (step analysis)

4. Write a method for updating user avatar under spiderserver/controllers/users.js (first introduce the Head object of config.js just written, fs module)

Vue project --- spider movie (step analysis)

5. You can use the multer module in node to upload things in the backend (for details, please refer to the document: http://expressjs.com/en/resources/middleware/multer.html)
   1) Introduce the multer module under spiderserver/routes/users.js and specify the upload path of the avatar

Vue project --- spider movie (step analysis)

2) Configure the route of the upload file interface

Vue project --- spider movie (step analysis)

Front-end operations:
1. Add a state quantity userHead to the user's management state, the initial value is an empty string

Vue project --- spider movie (step analysis)

2. Before entering the personal center page, if the entry is successful, also update the value of the user's avatar status

Vue project --- spider movie (step analysis)

3. When logging out of the page, change the status value of the user's avatar status to an empty string

Vue project --- spider movie (step analysis)

4. Add an area to the personal center page component, which is responsible for the above avatar file

Vue project --- spider movie (step analysis)

5. Bind a touchstart event to the button for uploading files and execute the handleToUpload method written
   It should be noted that when calling this interface for uploading user avatars, you need to pass in the relevant parameters of the file (using the FormData() object, for more FormData usage, please refer to: https://www.cnblogs.com/wssdx/p/ 11244766.html) and the value of the incoming &quot;Content-Type&quot; is &quot;multipart/form-data&quot;
   When updating the status value of the user avatar, remember to add a random number to the back to clear the cache

Vue project --- spider movie (step analysis)

6. In the background management page, add a new column to store the avatar uploaded by the user

Vue project --- spider movie (step analysis)

Project optimization—password encryption

Encryption can use the crypto module in node
1. Create a new base.js under spiderserver/untils to write encryption related methods
   1) Introduce the crypto module: const crypto = require('crypto');
   2) Write an encryption method setCrypto

Vue project --- spider movie (step analysis)

2. In spiderserver/controllers/users.js, first introduce the file module written above, and then set the storage password to encrypted password form
   like:

Vue project --- spider movie (step analysis)

Project optimization—Anti-attack verification code when logging in

Generate graphical captcha using node's trek-captcha module
1. Introduce the trek-captcha module under spiderserver/untils/base.js, and then write the graphic verification code generation method

Vue project --- spider movie (step analysis)

2. In spiderserver/controllers/users.js, first introduce the file module written above, and then write the processing method for generating the graphic verification code

Vue project --- spider movie (step analysis)

3. Configure the interface route for generating the graphic verification code under spiderserver/routes/users.js:

Vue project --- spider movie (step analysis)

Use this component in the login component:
1. Add a new area in HTML: fill in the verification code

Vue project --- spider movie (step analysis)

2. Bind a touchstart event to the img tag, and execute the prepared handleToVerifyImg method to click the image to update the verification code

Vue project --- spider movie (step analysis)

3. When the login fails and click OK, refresh the image verification code (add a ref attribute to the img tag, the attribute value is verImg, which is used to obtain the img element)

Vue project --- spider movie (step analysis)

Online deployment of the project

Give the packaged project to the backend, and the backend needs to select a web server (http server)
One of the web servers we chose this time is nginx
What is nginx?
Why choose nginx?
What are the benefits of nginx?
The above problems can be moved to another article &quot;About nginx&quot;!!!

For online projects, you need a cloud server (corresponding domain name or an IP address), you can go to Alibaba Cloud, Tencent Cloud, etc.

After the cloud servers are set up, you can connect to the remote server through the remote connection of Windows, install nginx in the remote server, and configure the corresponding reverse proxy

Up to now, you can access the public IP address on the browser, and you can access our project.

Some problems encountered during the project

1. When gitee created the remote repository, the item of the readme initialization repository was not removed, resulting in that the remote repository at the beginning was not an empty repository, so the initial project in the local repository could not be pushed to the remote repository, and it was stuck all the time.
   The error when git push occurs: (probably as follows)

Vue project --- spider movie (step analysis)

The solution can also refer to the website: https://blog.csdn.net/cuomer/article/details/81142159

2. When writing route redirection in index.js under router, if there is any unmatched route, it will jump to the movie route
   The path value I originally wrote was '/*' to indicate any unmatched route, which was valid before, but not when I was working on a project this time.
   So I found a solution on the Internet, changing the value of path to '/:catchAll(.*)'
   
3. To solve the cross-domain problem, when writing the vue.config.js file, I wrote the output module in the form of export default{}, but I got an error when I re-run the project. Maybe I didn't add some new modules to support this es6 writing method. , so changed to the form of module.exports={}
    require: imports supported by both node and es6 (CommonJS spec)
    export / import / export default: only export import supported by es6
    module.exports / exports: only exports supported by node (CommonJS spec)
    
4. Vue3.x mounts the global and calls the method on the mount
   In the past, you can directly use the following methods to mount globally
   import Vue from 'vue'
   Vue.prototype.xxx=xxx;
   When I wanted to mount axios globally, I used the above method and reported an error
   I searched the Internet and found that Vue in Vue3.x cannot directly mount the global like this. The following is the method of mounting:
   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).config.globalProperties.$xxx=xxx;
   Call the method in the global mount: this.$xxx
   
5. Definition and use of filters for Vue3.x
   In Vue2.x, define the filter:
   import Vue from 'vue'
   Vue.filter('Filter method name',(xx)=&gt;{
     return xxx;
   })
   When using xx | filter method name (xx)
   When I render the component that is being heated, I want to set a filter to change the width and height of the passed image. Using the above method results in an error.
   It turns out that in Vue3.x, this method has been abolished
   The following is the method used in Vue3.x:
   Define a filter method and mount it globally:
   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).config.globalProperties.$filters = {
          filter method name(xx) {
            return xxx;
          }
    }
    When used: $filters.Filter method name(xx)
    
6. The difference between computed and watch:
   For details, please refer to the website: https://blog.csdn.net/weixin_42757570/article/details/112214606

7. When better-scroll is encapsulated as a global component, the scroll event monitored will not take effect
   Check out some reasons why the scroll event does not take effect:
   1) DOM hierarchical relationship (there cannot be multiple divs of the same level in the wrapper. If there are multiple divs of the same level, a div needs to be wrapped)
   2) Whether the content has been successfully added with scrolling related styles
   3) Scrolling is only possible when the height of the content is greater than the height of the wrapper
   4) The position to be given on the .wrapper element
   But debugging and debugging, it seems that these are not the reasons
   Then try to see if it is possible that the data has been updated, resulting in no recalculation of better-scroll. As a result, this.scroll.refresh() is added to the hook function updated, and that's it.
   (Be sure to call when the DOM structure changes to ensure that the scrolling effect is normal)
    
8. Originally, when there is a keep-alive cache system to update data, all operations such as requests should be executed in the activated life cycle. But I can execute it in mounted, and only execute it once in activated, which is strange (some big guys who know the cause of this problem can comment in the comment area!!!)

9. Modify the base public root path:
   Versions prior to vue-cli 3.3 can utilize the baseUrl property
   Versions after vue-cli 3.3 can take advantage of the publicPath property
   (baseURL is deprecated in versions later than vue-cli_3.3)
   
10. When configuring the session in the app.js file, pay attention to placing it before the routing declaration, otherwise it will not take effect

The above is the general content of the spider movie project, there are more functions that can be improved by yourself
Finally, a general mind map of this project is attached:
Vue project --- spider movie (step analysis)

If there is any inappropriate expression, please point it out and make progress together! ! !