preface

My sister engineer a mobile terminal development, because the company project need to use the front-end technology (mainly the vue), for a period of time, their self-study recently spent more than half a month after work finally oneself write down and perfect the whole front end mall project (of course is with a live online project class, don’t laugh at me). Do not know oneself calculate not front end entry, 🤭. 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. Preview the overall effect of the project

1. Web side – part of the project effect demonstration

Vue-router was used to build global routing for the overall structure of the project. The first-level sections included: home page, recommendation, search, chat, personal center, login/registration, shopping cart, etc. In the second-level sections, I mainly made the second-level and third-level shopping process pages 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

On the server side, I mainly used the Node Express framework to build the application server, and defined the interface needed in the project by myself, 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.

2.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!

Front-end page processing:

2.2 Repeated data acquisition in pull-up Loading 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!

2.3 Cross-domain of pits

Because the address of my server is localhost:3000, WHEN I request the graphic verification code, I use the following method:

And it’s OK to access it through a browser:

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:

No problem, so check the cross-domain configuration of the back end:

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!

2.4 VuEX Configuration Details

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.

2.5 Node Connection data 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.

2.6 Node connection to 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:

2.7 The VUEX status is cleared after the Page is refreshed

  • Solution 1: localStorage uses 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.

2.8 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:

It can also be handled by callbacks, mainly to delay initialization so that the component can function properly.

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.

Third, concluding remarks

  • There are a lot of backend server development pits, deep optimization of the project, in the next chapter to write.
  • Write technical article for the first time, inadequacy place asks much advice!

Share my learning route from zero foundation to big front end, friends in need can refer to: JavaScript –> Ajax –> BS –> Vue –> Node, watching teacher Ye’s free video course on B station, really good, very nice, mall project is with Teacher Ye’s Tencent classroom live class, now has ended. However, there are recorded hd video: address 1, address 2, the lecture idea is very clear, the content is super much, there is a need for children’s shoes can look at oh!