Technology stack

This project adopts Vue + ElementUI + Axios + VUE-Router + Vuex

ElementUI article

1. Why elementui

  1. There are big factory endorsement: although the core development only two or three people, but at least do not worry about which day does not maintain, with the sister-in-law ran away
  2. Element was born quietly on March 13, 2016. After four years of development, we have grown from an ele. me internal business component library into one of the most popular UI component libraries in Vue ecosystem.
  3. Continuous iteration: Element has achieved 48200 Github Star and 950,000 NPM downloads per month. More than 530 community contributors contributed to the maintenance, which resulted in 4,400 iterations of updates to the Commit.
  4. Excellent cnOL3 ecosystem and active communities: There are over 250 of them. There are plenty of Elf-UI extension components in the community, as well as many RELATED QQ discussion groups or Gitter.
  5. Community recognition: Element is currently the most open source vUE related star project, reflecting community recognition

2. Installation of NPM

npm i element-ui -D
Copy the code

3. Introduce the Element

  1. A complete introduction
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
Copy the code
  1. Import on demand, that is, import only required components (recommended)
Import {// Element component Message, Form, FormItem} from 'element-ui' let elemtuiArray = [Message, Form, element} FormItem ] elemtuiArray.forEach(item => { Vue.use(item) })Copy the code

Axios article

1. Why Axios

Axios is a Promise-based HTTP library that can be used in browsers and Node.js

It has the following characteristics:

  1. Create XMLHttpRequests from the browser
  2. Create HTTP requests from Node.js
  3. Supporting Promise API
  4. Intercept requests and responses
  5. Transform request data and response data
  6. Cancel the request
  7. Automatically convert JSON data
  8. The client supports XSRF defense

2. Disadvantages of Ajax

  1. Itself is targeted at MVC programming, not in line with the tide of front-end MVVM
  2. Based on the development of native XHR, the architecture of XHR itself is not clear, and there is an alternative plan of FETCH. The whole jquery project is too large, and it is unreasonable to introduce the whole jquery using Ajax alone (personalized packaging plan cannot enjoy CDN service).
  3. Ajax does not support the browser’s back button
  4. Security issues Ajax exposes the details of the server interaction
  5. Search engine support is weak
  6. Break the exception mechanism of the program
  7. Not easy to debug

3. Disadvantages of Fetch

  1. Fetch conforms to separation of concerns and does not mix inputs, outputs, and state tracked by events in one object
  2. Fetchtch reports errors only for network requests, and considers all 400,500 successful requests to be wrapped and processed
  3. The FETCH does not carry cookies by default. Configuration items need to be added
  4. Fetch does not support abort and timeout control. The timeout control implemented by setTimeout and Promise.reject cannot prevent the request process from continuing to run in the background, resulting in a waste of quantity
  5. Fetch has no way of natively monitoring the progress of requests, whereas XHR does.

Installing a plug-in

npm i axios –save-dev

Added request interceptor

  1. New file utils/request.js
import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({ baseURL: '/api', // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // do something before request is sent if (store.getters.token) { // let each request carry token // ['X-Token'] is a custom headers key // please modify it according to the actual situation config.headers['X-Token'] = getToken() } return config }, error => { // do something with request error console.log('request error' + error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( /** * If you want to get http information such as headers or status * Please return response => response */ /** * Determine the request status by Custom code * Here is just an example * You can also judge the status by HTTP status code */ response => {// Handle exceptions as required Here  return response }, error => { console.log('error====' + error.message) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default serviceCopy the code

The new API/API. Js

Export default {/ / validation administrator information interface validateAdminUsers: '/ login/validateAdminUsers'}Copy the code

The new API/index. Js

Import API from './ API 'import Request from '@/utils/request' let inter = { data => { return request.post(api.validateAdminUsers, data) } } export default interCopy the code

Configure cross-domain requirements config/index.js

ProxyTable: {'/ API ': {target: request URL, changeOrigin: true, pathRewrite: {'^/ API ': '}}},Copy the code

Vue – the Router

Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze.

The configuration of routing management will be updated in a separate blog post.

Vuex article

Vuex was developed specifically for vue.js applicationsStatus management mode. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

Vuex configuration instructions will be updated in a separate blog post.

The resources

  1. github: element
  2. Element official Documentation
  3. vue-router
  4. vuex