Github project address

rendering

Landing page

The query

new

Modify the

delete

Details page

Technology stack

vue axios vue-router express mongo element iconfont scss

preface

Half a year ago, I wrote a express+mongodb+vue project, which roughly showed the technical points and ideas needed to build a front and background project from scratch, as well as some pits encountered in the development process.

Later, I received some private messages from my friends, including the issue proposed on Github. The summary is the following two points.

1. Project startup error
2. Expect richer cases (paging, conditional queries)

The project error 404 is reported because the project is a front and back end project, not only need to passnpm run devTo start the front end, you also need to go through the terminalnode app.jsStart the background. Everybody must pay attention here!

This version is the upgraded version of the previous version. Some codes have been optimized in the project, and some new modules and function points have been added to make the project more perfect. There are roughly the following modules.

The new module

• Landing page
• Conditions of the query
• Paging query
• The local cache
• The icon to use
• SCSS use
• .

prompt

This article mainly focuses on the introduction of some new technical points in this version. I’m not going to give you too much of an idea of how to implement the whole front and back end project. If you don’t have a clear idea of how to build the whole project, I suggest you read the previous express+mongodb+vue release first.

I highly recommend going to minegithubDownload the project to the local, start the project, follow the ideas of this article and I have a discussion in the depths of the soul, if you have any questions, welcome to private message me!

The body of the

Encapsulate common utility class functions

In real projects, we need to frequently use Ajax to obtain data. In the previous version, VUe-Resource was used to complete the work. However, as the official government no longer maintains it, axiOS, which is officially recommended, is used in this version. We can easily implement custom AXIos instances, interceptors, request to add fields, and more.

Under the SRC directory, there is an utils folder for utility class functions that should be generic. That is, they can be referenced in different component pages. Achieve the purpose of defining once and using many times. The specific classification of utility functions has the following points.

• Axios instance
• Regular checksum function commonly used
• Cookie, sessionStorage add, obtain, delete method
• .

In short, students engaged in development must have the thinking of simplifying business logic, frequently used modules, independent.

File naming and function naming as far as possible a standard point, do not think of what is what, try to use the corresponding English to name, English is not good to Baidu Bai, whetdao not mistakenly cut wood workers!

That whole landing page thing

The logical logics for logging in are the following:

1. Users need to log in before querying the heroes list; otherwise, they are redirected to the login page
2. For users already logged in, the list page can be accessed directly

To implement the above logic, we can use the front-guard navigation beforeEach provided in vue-Router with route redirection. Refer to the permission.js file for the code.

Use next in route navigation. Passing and not passing parameters has different effects. Because of this, I encountered an infinite loop pit in the development process.

Richer icon selection

Although some common ICONS are provided in Element, the front-end framework used in this project, they cannot be satisfied in real development scenarios. If you are still using images to implement icon, I just want to give you two words – awesome!

Alibaba Iconfont icon library can help us solve the problem that the framework provides imperfect ICONS. There are three ways to use them, and the advantages and disadvantages between them can be understood by ourselves. Unicode is used in this project.

Before we develop a project, we can create a new project on Alibaba Iconfont, and then go to the icon library to find the corresponding icon and add it to the project. Then download it locally and introduce it into the project.

The assets folder under the project SRC directory mainly stores static resources, such as CSS Image ICONS.

Then import the corresponding icon CSS file in the main.js file.

#main.js

import "./assets/icon/iconfont.css"
Copy the code

Tips: For the icon library prefix naming and icon naming must be standardized, otherwise the later may encounter great trouble. Important thing to say three times: naming conventions! Naming conventions! Naming conventions!

The use of SCSS

In previous versions, styles were named using CSS, which resulted in the following situation…

.container{
    width:...
    margin:...
}

.container header{
    padding:...
    border-radius:...
    box-shadow:...
}
.container header .title{
    background:...
    color:...
    font-size:...
}
Copy the code

This is fine, but it’s a pain to write, and once you have a lot of code that looks like this, your code will look ugly.

In order to make the performance better, force higher, code more beautiful, so I went to learn how to use SCSS, roughly divided into the following three steps:

NPM install sas-loader --save-dev NPM install node-sass --sava-dev Add {test: /\.scss$/, loaders: ['style', 'CSS ', 'sass']} step 3: add lang= "SCSS" to the style tag when using SCSS, otherwise errorCopy the code

Using SCSS syntax to write the CSS rules above, the following format would appear:

.container{ width:... margin:... header:{ padding:... border-radius:... box-shadow:... .title{ background:... color:... font-size:... }}}Copy the code

The difference between the two styles and the pros and cons, I believe that without much to say, you should understand.

Tips: CSS preprocessors include LESS, SASS, SCSS, etc. They have their own characteristics and styles, but all you need to do is learn the basic skills of CSS.

SessionStorage implements local caching

For example, when the user jumps from the list page to the details page and returns to the list page, the query conditions and results of the list page should still be there. Instead of requiring users to enter query conditions again for a second query, the benefits of doing this mainly include the following two points:

More in line with the actual use of the scenario, reduce the user cost

After all, the front-end engineer is to use their greatest technical ability to make the user experience better and superior!

Here’s my thinking:

2. The user clicks the trust button of a certain data to jump to the details page (at this time, we need to save the user's query conditions and the current page number) 3. In the Mounted hook function, check whether cached data exists in the cache. If yes, delete the cache after each query. Otherwise, the cache may still exist after the user refreshes the page. Here we add the cache at (the moment the user clicks the details button)Copy the code

General code:

ToDetail (id){var queryParmas = {... . . }; / / in the local cache storage sessionStorage. The query condition queryParmas = JSON. The stringify (queryParmas); } # query function search(){... . . / / after each query data, delete the cache sessionStorage. RemoveItem (" queryParmas "); Var sessionObj = sessionStorage.getitem ("queryParmas") {var sessionObj = sessionStorage.getitem ("queryParmas"); If (sessionObj){if(sessionObj){if(sessionObj){Copy the code

Tips: There are some holes in the use of pagination in Element, and some page number bugs may occur when querying with cached data above. I haven’t gone into detail here, but I can fix the bug by using the $nextTick method in Vue to control the implicit pagination. Specific interest can be understood.

# # to summarize

This article focuses on some function points and solution implementations, as well as some personal recommendations. If you are careful, you will find that many of the points I have extracted can be carried out around front-end performance optimization. There are a lot of interesting things to learn, including HTTP browser rendering mechanism rearrangement, redraw function throttling, anti-shaking and so on, which will motivate us to constantly optimize our programs. The end result is better code!

Last wishes

Sky blue and so on misty rain, and I am waiting for you! Move your ☝️️️ and give it a thumbs up!

2019 is coming, wish all of you awesome! Here give you 🙏 early years!

Original is not easy, and 👣 and cherish!

Making portal

☝ ️ ☝ ️ ☝ ️ ☝ ️ ☝ ️

[email protected]

☝️☝️☝️☝️☝️ have any questions, welcome email private letter me!