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