I Project introduction

1. project introduction

• Visual data module order quantity user quantity commodity quantity
• Commodity management module commodity adding commodity information modifying commodity viewing deleting commodities and adding commodity pictures searching commodities
• The category management module modifies the name of level 1 category level 2 category level 1 category level 2 category. View subcategory
• List display of order search in order management module
• List display of users in user management module

2. technology stack

vue  vue-cli2  vue-router element-ui axios

II What have you learned

Configure cross domain secondary encapsulation of axios in the environment of vue-cli2 element UI is introduced to configure history routing on demand

1. how to configure cross domain

Index Cross domain config uration in JS

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        "/login":{
          target:"",    //Proxy address
          changeOrigin:true,    //Enable agent
          pathRewrite:{ //Rewrite path /api is the proxy address
            '^/login':''
          }
        }
    },

2. after cross domain configuration, perform secondary encapsulation on axios

Create utils folder in src directory create Axios in utils folder js

At axios The Axios timeout time is configured in JS. Address request interception and response interception are finally thrown

import axios from "axios"

const service = axios.create(()=>{
//     baseURL:"/api"
//     timeout:3000
})

service.interceptors.request.use((config)=>{
        //request interceptor 
        return config
})
service.interceptors.response.use((config)=>{
        //Response interceptor
        return config
})


 export default service

3. configure cross domain and axios request interfaces

Create the request folder in the src directory, and create http js

At http JS to introduce the service thrown by axios

import  service from "../utils/request"

// Login interface;
export const login = (obj) =>{ // Obj = > configuration parameters
    return service ({
        url:"/login", // /login is the configured cross domain address
        method:"post", // method is used to select whether to pass parameters by post or get
        data:obj    // If it is post parameter transfer = > data if it is get parameter transfer = >params
    })
}

2.element-ui import on demand

First, you need to download element UI cnpm I element UI -s from the command line

Create element JS (it doesn't matter what the file name is, but what matters is that it can be understood)

At elelment Introducing Vue into JS

Then introduce the style provided by element UI

import 'element-ui/lib/theme-chalk/index.css';

Then import what you need on demand. This will reduce the pressure on the server!

import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';
import {
    Button
  } from 'element-ui';

  Vue.use(Button)

3. configure history routing mode

Select Vue router when creating the project. The default is hash routing mode

How to change the routing mode? Switch through the mode attribute

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/leftMenu/HelloWorld'

Vue.use(Router)

export default new Router({
    mode:history,
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
           title:"home page"
      }
    }
  ]
})

4. how to dynamically change the page header

Add a meta object while configuring the route, and add a custom attribute name and attribute value in the object

Then modify through global route navigation

router.beforeEach((to, from, next) => {
           document.title = to.meta.title
    })

III Project summary

Project cycle: three and a half days

Project difficulty: rich text editor cross domain and some components of element UI

Personal summary: this project is not very difficult. There are some unused components that are a little headache. The rest is to transfer the data calling interface to the id calling interface. Thank you for watching the summary