Summary of practical knowledge points of Shangpinhui VUE project

Vue is still a Silicon Valley project

The implementation process of a module component:
1. Store data in vuex
2. Write static pages
3. Split components
4. Obtain server data
5. Display data
6. Develop dynamic services

1. Scaffolding directory

• Public: generally place static resources (pictures)
• Src: programmer's code file
• Assets: The resources in the folder will be packaged into a module by webpack and put into the js folder
• components: generally place non-routing components (or components shared by projects)
• Pages: put routing components
• App.vue is the only root component
• main.js entry file [the file that the program executes first]
• babel.config.js: babel configuration file
• package.json: see the project description, project dependencies, and project operation instructions
• README.md: project description file

2. Setting the alias of the src folder

The advantage of setting the alias of the src folder is that it will be easier to find the file
Create a jsconfig.json file

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

3. Configuration of routing components

a. The difference between the front and the background:
For the background:
K is the URL address (network resource locator)
V is the corresponding middleware
http://localhost:8080/0607

app.get("/0607",(res,req)=>{
   res.send('我是祖国的老花骨朵');
});

Front-end routing:
K is the URL (network resource locator)
and V is the corresponding routing component

b. Commodity exchange front-end page: the core of the SPA page

• Routing components: generally fixed there (Home, Search, Login)
  • 1. Create a routing component [generally placed in the views|pages folder]
  • 2. Configure routing, configure the four routing components in the router folder

// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用路由插件
Vue.use(VueRouter)

// 引入路由组建
import Home from '@/pages/Home'
import Login from '../pages/Login'

// 配置路由
export default new VueRouter({
    // 配置路由
    routes:[
        {
            path:"/home",
            component:Home,
            meta:{
                show:true
            }
        },

• Non-routing components: switch pages ((Header, Footer) (in the components folder)
  • 1. Global components (global registration on the main page)
    - What is the function of the component name attribute?
    1. The name of the component can be seen in the developer tool
    2. When registering a global component, the name of the corresponding component can be obtained through the component instance
  • 2. Non-global components
  • The use of non-routing components is divided into several steps:
    - Step 1: Definition
    - Step 2: Introduction
    - Step 3: Registration
    - Step 4: Use

c. Construction of the routing component structure:

• 1. Structure + style + image resources
• 2. Put the corresponding component label in the corresponding position

d. Routing jump

• There are two forms of routing jumps: declarative navigation (router-link: must have to attribute)
  programmatic navigation push||replace
• Programmatic navigation is better: because you can write your own business logic
• $router: Routing jump for programmatic navigation
  • this.$router.push|this.$router.replace
  • $route: You can get routing information|parameters
  • this.$route.path
  • this.$route.params|query
  • this.$route.meta

e. Routing parameters

• params parameter: The route needs to occupy a place, and the program will collapse, which is part of the URL?keyword
• Query parameter: The route does not need to occupy space, and the writing method is similar to the query parameter in ajax
  . Small problems:

1) The programmatic navigation route jumps to the current route (the parameters remain unchanged), and multiple executions will throw a NavigationDuplicated warning error?
Note: Only programmatic navigation (push|replace) will have this exception, and declarative navigation There is no such problem, because the declarative navigation has already solved this problem internally.
This exception has no effect on the program.
Why this phenomenon occurs:
Since the latest version 3.5.2 of vue-router introduces promise, when the parameter is passed multiple times and repeated, an exception will be thrown, so the above phenomenon occurs. The first solution: it is
for the push function. Pass in the corresponding successful callback and failed callback.
The first solution can temporarily solve the current problem, but similar phenomena will still occur when using push|replace later, so we need to rewrite (reconfigure the push and replace methods)

1:重写push与replace方法
工作的时候想处理掉，不想处理对于你的程序没有任何影响
function push(){
    return new Promise(resolve,reject){

    }
}

Jump and parameter transfer of d+e route

1. The first type of declarative navigation: Why is there a lag when using the router-link component?
router-link is a component: it is equivalent to an instance object of the VueComponent class. There are many instances (1000+) of new VueComponent in an instant
, which consumes a lot of memory, which leads to lag.
{ { c1. categoryName }}

2. The second programmatic navigation: push|replace

The three-level classification uses programmatic navigation because it will freeze when using router-link.
Because there are a lot of cascading, obtained by the v-for loop, during the loop process, the callback function will also be optimized in turn
: the bubbling principle of programmatic navigation + event delegation will bind a callback function, and it will be corresponding mapped to each child node

When routing jumps [home->search]: it is necessary to pass routing parameters [name of category, id of first, second, and third categories]

this.$router.push()
{
    
    
 name:'search',
 query:{
    
    
    categoryName:'电子书',
    category2Id:4
 }
}

// 三级联动路由跳转和传递参数的业务
    goSearch(event) {
    
    
      // alert(444)
      // 问题1：如何判断点击子节点的是A标签
      // 答：把子节点当中的a标签，加上自定义的属性，其余子节点是没有的（自定义属性：浏览器会将驼峰命名转换为一般的命名）
      // 问题2：如何判断是几级的目录？
      // 答：也是根据自定义属性加上的自身的ID值进行条件判断
      // 问题3：如何获取当前的事件 答：event

      // event.target :获取到的是触发事件的元素（h3,a,dt,dl）
      let node = event.target;
      // 节点有一个属性dataset属性，可以获取自定义属性与属性值 (这里一定要小写，不是给你说了么，浏览器会将自定义属性变为全部小写)
      let {
    
     categoryname, category1id, category2id, category3id } =
        node.dataset;
      console.log(event);
      // 当这个标签是A标签的时候才会进入判断
      if (categoryname) {
    
    
        /*         {
        name:'search',
        query:{
            categoryName:'电子书',
            category2Id:4
        } */
        // 准备路由跳转的参数 设置对象
        let location = {
    
     name: "search" };
        let query = {
    
     categoryname: categoryname };
        // 一级目录
        if (category1id) {
    
    
          query.category1id = category1id;
        } else if (category2id) {
    
    
          query.category2Id = category2id;
        } else {
    
    
          query.category3id = category3id;
        }

        // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }
    },

4.Vuex:

In the previous basic courses, the operation of sending a request is as follows: write axios.get||post in the mounted component, get the data and store it in the data of the component for use

• mounted: The template has become a real DOM [but there is no data, the display is blank], because ajax is asynchronous and takes time.
• created: a little bit better (not a big deal)
  now:
• vuex: A plug-in officially provided by Vue, the plug-in can manage project shared data.
• vuex: When the project is large, there needs to be a place to "unify the request data in the small warehouse and manage the data" is the warehouse store
• Vuex core concepts: state, actions, mutations, getters, modules (three chains)
• state
• actions
• mutations
• getters
• modules

5. The background effect of the first level classification

The first solution: CSS hover is so simple and how it works
The second solution: JS logic solution 20 episodes Shang Silicon Valley completes three-level linkage dynamic background color

6. Complete the dynamic display 2|3 linkage structure

At first, display and hide
the JS method through css display: none and display block: :style="{display:currentIndex == index?'block':'none'}" dynamic binding style

7. Three-level linkage and transition animation in the search module

In the home module, a three-level linkage function is used---->[typeNav]
In the search module, a three-level linkage function is also used------->[typeNav]

a. TypeNav component business analysis?

• The three-level linkage is displayed normally in the home module
• The three-level linkage is displayed for a while and hidden for a while in search—solution: control the display and hiding of the three-level linkage through a responsive attribute
  b. Question 1
  Problems during development: display and hide should not appear under the home module Effect
• Now this problem [three-level linkage: the search module itself should have display and hide services], but the display and hide services should not appear under the home module. To put it bluntly: you need to let the three-level
  linkage component know who is using it.
• Use $route to distinguish which module the component is in.
  When working in the future, if a certain component appears, it needs to distinguish which module it is currently in [home, search]

c. Solution
1. Add v-show to the TypeNav component for dynamic binding
2. Set the initial value of show in the data method
3. Distinguish through $route routing information

    // 当鼠标移入时，全部商品分类列表进行展示
    enterShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = true;
      }
    },
    // 当鼠标离开的时候，全部商品类别进行影藏
    leaveShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = false;
      }

• When the route jumps, the corresponding component will be destroyed and recreated ----[kepp-alive]

d. Transition effect

• When I first came into contact with it: CSS3
• There are also transition animation effects in Vue—transition built-in components are completed

 HTML：<transition name="sort"> 相应的节点和组件</transition>
 CSS：// 过渡动画的样式
    // 开始进入状态
    .sort-enter {
    
    
      height: 0;
    }
    // 结束状态
    .sort-enter-to {
    
    
      height: 461px;
    }
    // 定义动画的时间和速率
    .sort-enter-active {
    
    
      transition: all 0.5s linear;
    }

• Note 1, in Vue, you can add transition animation effects to (a certain node) | (a certain component)
• The node|component must have the v-if|v-show instruction before it can be used.
  e. TypeNav three-level linkage performance optimization?
  Project: switch home to search or search to home, the component is frequently sending requests to the server to obtain three-level linkage data for display.
  If you frequently send requests to the server in the project, the performance is very good, so we need to optimize it.

Why do you frequently send requests to the server to obtain the data of the three-level linkage?
The data of the three-level linkage is a global component, and jumps are made in the used components, because when the route jumps, the components will be destroyed [created of the home component : The action is dispatched to vuex, so the data of the three-level linkage is obtained frequently]
Only one request is required to obtain the data of the three-level linkage, and there is no need for multiple times.
Final solution: Moutend in App will only be executed once.
Although main is also executed once, it is not a component. Without this, components only have the $store property

8. Merge parameters

When you enter the search page, you need to pass various parameters so that you can send a request to the server to obtain the corresponding data
1) Merge parameters *****
Why do you need to merge parameters (query|params): because these parameters are useful for search , because search
sends a request to the server through these parameters, these parameters need to be carried to the server, the server will return the corresponding user's search data, and search can display it.

1.1: The developed three-level linkage business, when you click the a label, it will jump to the route, and pass the product name and id to the search module ---- (query) 1.2: When the search button is clicked, the
user The entered keywords will be passed to the search module through the params parameter when the button is clicked -----(params)
1.3 Routing jump (home->search), two places, three-level linkage (typeNav), Header component (search button)

 // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }

9. mock data

Function : generate random data, intercept Ajax request:
intercept ajax request : request to publish [browser will intercept: stupid thinking, because of the server], it is just the local play data in the project.
For the project : real interface/api/xxxx simulated data/mock/xxxx
simulated data JSON : no spaces, it is best to use a formatting plug-in for formatting.
Note:
mock (simulated data) data needs to use the mockjs module, which can help us simulate data.
mockjs [not mock.js mock-js]
http://mockjs.com/ Official address
The simulated data is general: object, array
{ 'a|1-10':'I love you' } Steps to use:

Step 1: Install the dependency package mockjs

Part 2: Create a folder under the src folder, the folder mock folder.

Step 3: Prepare the simulated data
Place the pictures required for the mock data in the public folder! The public folder will pack the corresponding resources into the dist folder intact.
For example: the data of the carousel in the listContainer
[
{id:1,imgUrl:'xxxxxxxxx'},
{id:2,imgUrl:'xxxxxxxxx '},
{id:3,imgUrl:'xxxxxxxxx'},
]
Step 4: Create a server.js file in the mock folder
Note: In the server.js file, the data of banner.json||floor.json Not exposed, but available in the server module.
For some modules in webpack: images and json, there is no need to expose them to the outside world, because they are exposed to the outside world by default.

Step 5: Simulate the data through the mock module

Simulate data through the Mock.mock method

mock->servers:
// 这里使用mock模拟数据
// 1.引入mock
import Mock from 'mockjs'
// 2.把json数据引入进来  JSON数据不需要暴露
// webpack默认对外暴露：JSON 图片
import banner from './banner.json'
import floor from './floor.json'

// 3.mock数据:第一个请求数据是地址地址一定要写对 第二个参数：请求数据
Mock.mock("/mock/banner",{
    
    code:200,data:banner}) //模拟首页轮播图的数据
Mock.mock("/mock/floor",{
    
    code:200,data:floor})

Step 6: Go back to the entry main file and import
the data required by the serve.js mock | After writing the relevant mock code page, you need to execute serve.js once in the mock.
If you don’t execute it, it’s the same as if you didn’t write it.

// 引入mockServe.js
import "@/mock/mockServe"

Step 7: Create a mockRequest [axios instance: baseURL:'/mock'] in the API folder
to obtain an axios instance for mock data.

api->mockAjax(mock对应axios的二次封装)
const requests = axios.create({
    
    
    // create里面可以传配置对象

    // 配置对象
    // 基础路径：baseURL就是给每个请求的路径上自动加上所配置的，就不用自己再去书写
    baseURL: '/mock', //基础路径更改即可
    // 请求超时的时间
    timeout: 5000
})

api->index(// 这个文件进行统一的API管理)
//获取floor的数据/floor后台接口路径
export const reqGetFloor = ()=>mockrequest.get('/floor')

// 获取search的数据   这个函数需要不需要外部传递的参数？要给服务器带参进行params给服务器传递参数 调这个函数得有相应的参数     错错错需要接收home页传递过来的params数据和query数据/api/list
// 当前这个接口。给服务器发请求的时候，至少得是一个空对象
export const reqGetSearchInfo = (params)=>requests({
    
    

When developing a project: remember, unit testing, when a certain function is completed, be sure to test whether it is OK

10. What is the basic use of swiper?

The commonly used scene is the carousel----[carousel: carousel], which can be used on the mobile terminal of swiper and also on the PC terminal.

Steps to use Swiper:

• Install swiper into the project
• Step 1: Import the dependent package into the corresponding component [swiper.js|swiper.css]
• Step 2: The structure in the static page must be complete [container, wrap, slider], and the class name cannot be written indiscriminately
• (Before initializing the swiper instance, there must be nodes (structures) in the page)
• Step 3: Initialize the swiper instance

import Swiper from "swiper"

Notice!

• Many components of the home module use swiper.css. It is not necessary to introduce styles once in each component,
  but only once in the entry file.

// 引入swiper样式
import "swiper/css/swiper.css"

1. Where to initialize the swiper instance?

• For a Vue component, mounted[the component is mounted: the corresponding structure is not there yet]
  mounted–>the component is mounted

2. Why didn't the dynamic effect come out?

• Swiper needs to obtain the node DOM of the carousel graph in order to add dynamic effects to the swiper carousel,
  because no nodes are obtained.

3. The first solution, delayer (not a perfect solution)
in created: created execution and mounted execution, the time difference may be 2ms, in vain
updated: if the component has a lot of responsive (data), as long as there is one attribute value If there is a change, updated will be executed again, and the instance will be initialized again.

Summary: The first solution can use a delayer (asynchronous) to solve the problem,
but this solution has risks (it is impossible to determine how long the user request will take), so there is no way to determine
the delayer time.

4. Swiper uses perfect solution in Vue project

• Where is the problem with the first solution: v-for, the traversal comes from Vuex (data: send a request to the server through ajax, there is asynchronous)

• watch: monitor the attribute, watch can detect the change of the attribute value, when the attribute value changes, it can start once.

• The warehouse data bannerList in Vuex (the component is in use):
  Has the bannerList warehouse data changed?
  There must be: the initial value of the bannerList is an empty array, and when the data from the server is returned, the attribute value stored in its bannerList will change [becoming the data returned by the server] The component instance is using the bannerList in the warehouse, and the attribute bannerList of the
  component There must have been a change, and the watch can monitor it.
  But it is not allowed to write directly in the watch!
  Reason: 1. There is only data at this time, but the traversal of v-for also takes time to traverse the data rendering structure (there is no guarantee that the traversal of v-for is completed)

组件实例的一个方法:$nextTick + watch
this.$nextTick(()=>{
    
    

})

5. NextTick official website explanation:
After the next DOM update, after the cycle ends, the delayed callback is executed. Use this method immediately after modifying the data to get the updated DOM.
Function: It can ensure that the structure of the page is certain. (The DOM already exists)
Note: The $nextTick method of the component instance is often used in work, and is often used in conjunction with third-party plug-ins to obtain updated DOM nodes

11. Develop Floor components (communication between components)

Develop Floor components: Floor components are reused (reuse twice)

1. The Floor component obtains the mock data, where is the action for sending the request written?

Answer: The dispatching action should be written in the life cycle function of the parent component when the component is mounted, because the parent component needs to notify Vuex to send the request, the parent component obtains the mock data, and generates multiple floor components through v-for traversal, thus achieving complex Used for.
2. The parent component dispatches an action, notifies Vuex to send a request, and the Home parent component obtains the data of the warehouse, and traverses multiple Floor components through v-for
3.v-for|v-show|v-if|These instructions can be customized
4. Why initialize the SWiper instance carousel in the mounted of the Floor component. Answer: Because the mounted of the
parent component sends a request to obtain the Floor component, when the mounted of the parent component executes.
The Floor component structure may not be complete, but the Floor component structure must be completed after the server data comes back, so v-for is traversing the data from the server. If the server data exists, the Floor structure must be complete.
Otherwise, you will not see the Floor component

12. carousel global components (splitting of global components, communication between parent and child)

If there are similar functions in the project, and they are reused, encapsulate them as global components----[It is also possible without encapsulation]
In order to encapsulate the global carousel component: Let the codes in the Floor and listContainer components be the same, if they are the same, they can be completely independent Packaged out as a global component.
At this time, the floor and the new carousel global components also have communication between components between parents and children.