Until a certain age, you can survive by using up your body, your wits and your luck. But after a certain age, the things that really get you far are discipline, motivation and hard work. – after the order
preface
If you like this post, please like it or bookmark it. It is said that partners who like or collect can get 99 points of Offer with satisfaction.
Technology stack
The technology stack adopted by the project is based on: VUE + Node + mySQL, the front-end written with VUE-CLI, the back-end application server built with Express, and the database using mySQL.
I. The overall interface effect of the project
1. Web side – Partial effect of project
- Level 1 includes: Home Page, Recommendation, Search, chat, Personal center, Login/registration, shopping cart, etc
- The second level section mainly makes the second and third level shopping process page of the home page. Basically the whole process of the e-commerce project run through.
The technical points used in the mall project mainly include:
2. On the server
The server side mainly uses the Application server built by the Node Express framework, and defines the interface needed in the project by itself, mainly based on POST/GET. The server side did not carry on the in-depth development, mainly realized the data flow of the increase, deletion, change and check, dynamic data support for the client side.
The following figure shows part of the interface defined on the server side
The database is MySQL, not Mongoose, feeling or relational database use a little more flexible. Mainly single table and multiple table associated query, basic SQL statements can be done.
Ii. Pothole record in project development
Although I learned step by step from the video, I still encountered all kinds of strange problems when I was doing it myself. I summarized and recorded the project after I wrote it, on the one hand, it was convenient for me to review it, and on the other hand, other friends could refer to similar problems.
1. Tabbar is hidden at the bottom of the level-2 routing interface
After the complete office routing is configured through vue-Router, tabbar at the bottom is required on the level-1 routing interface in the project, but the transition from level-1 interface to level-2 interface is not required, as shown in the following figure:
Solution: There is a meta attribute in the routing option, you can pass a literal object in this attribute to record whether to display the tabbar at the bottom, and then decide on the page!
2. Duplicate data is obtained in pull and load data
When I was loading the list data of the recommendation section, I wrote the get request interface in the back end, and the front end initiated the GET request. The previous loading was normal, but in the later pull-up loading, multiple repeated data were always pulled down at the same time, as shown in the figure below:
The mint-UI is used to prompt the loading interface, and the action is also set with a callback. As long as the data does not come down, the loading box will not disappear, but the result is still as follows:
Finally, I consulted my teacher and finally solved the problem. The main solution is as follows: each time the client sends a request, it sends the ID of the last local item to the back end, and the back end uses limit to limit the query statement in the interface to ensure that the data is not repeated. It seems that they both write front-end and back-end, need to consider the factors or a lot of!
3. Cross-domain of superpits
Because the address of my server is localhost:3000, WHEN I request the graphic verification code, I use the following method:
However, the problem is that I saved the verification code in session on the server side, which was used for the comparison between the front end and the back end when the front-end request was made. However, each request could not be obtained from the session, which was always undefined. At the moment, my first reaction is to cross domains and check the front page:
The final problem lies in: other requests of my client are uniformly configured path: http://localhost:3000, but the graphic verification code is used in the request: http://127.0.0.1:3000/api/captcha, the backend authentication is localhost: 3000 and 127.0.0.1:3000 representative is not the same client, so always can’t get value, after changed in an instant. A very small detail, careless, careless!
4. Analyze details in the VUEX configuration
At the beginning, I didn’t quite understand why VUEX was used for state and data management, but when I used it, I found it was necessary to use VUEX for data management in medium and large projects. Once you understood its operation mechanism, the process became extremely simple. Here is a picture from the teacher’s class:
Some details to note when using VUEX for state management:
- If the project is large, state, Action and mutation must be divided into independent folders, which will be very convenient for state management in the future. The directory structure can be shown as follows:
- When the action commits data directly to mutation, pay attention to the consistent parameters, otherwise an error will occur, as shown in the following figure:
- When requesting network data, be sure to process it in the action. This is mainly done asynchronously and synchronously with async and await. Mutation is the only place where state is changed, so it is always synchronous.
These are the details to be paid attention to in VUEX, and the rest are handled according to fixed procedures.
5. Data between the node and MySQL is lost
Problem description: When the first request is initiated, the connection to the database is normal. However, when the second interface initiates a request, the database is disconnected and an error is reported indicating that the connection is lost.
Cause analysis: because every operation after the database was shut down the database connection, visit when they can’t find the link again, but the connection can’t afford to shut down, the problem is that I put not connect to the database code in the query function, but on the outside, thus lead to connect generated only once, and shut down after the second request is not connected.
Module. exports = conn; Output, so that each access is a new request.
6. The node connecting to the mysql datapool must be released
Release the data pool when using node to connect to mysql for data interaction. Otherwise, the state of “Always in request” will appear after several requests, and the interaction cannot be completed.
As shown below:
7. After the page is refreshed, the vuEX status is cleared
- Solution 1: localStorage
Using localStorage for data localization, but I feel it is not suitable for e-commerce projects, because localStorage is a long time cache, which may lead to data synchronization.
- Solution 2: Check whether data exists and obtain data from the server again if no data exists, or perform lazy route loading to keep data in memory.
8. The use of nextTick
Problem Description: In the use of custom components, or use third party components (shuffling figure, etc.), because the data is retrieved asynchronously, so will be done before the data acquisition component is initialized, this may lead to component cannot work normally, and then take them by figure for example, the correct writing is in-depth monitoring in the watch, when after the completion of the data request for initialization of the component:
NextTick’s main function is to delay the callback until after the next DOM update cycle.
Use the data immediately after you modify it, and then wait for DOM updates; It is the same as the global method vue.nexttick, except that the this callback is automatically bound to the instance calling it.
conclusion
Share my zero basis into the front end of the learning route, there is a need for friends can refer to: JavaScript –> Ajax –> BS –> Vue –> Node, mall project learning video, project source code, interview notes there is a need for children’s shoes can click [learning front end, not lost]
Finally say: a deep into the front of the sea, all the way!!