After the New Year just went to work, summarize the busy project before the year, first of all, this is my own development from beginning to end, there are some small problems in the middle, in a word, it is a promotion for me…
Without further ado, get right to the code
First the background management system interface cut a picture, or say the clouds in the fog…
The login page
Inside page: competition area configuration, work review, and administrator user management functions
This project is a background of the event configuration system, including administrator’s review, page configuration, and multi-channel and multi-language switching
1. Technology: Use the latest VUE bucket
Vuex VuE-Router Axios (vuex Vue-router Axios)
2. The framework uses iView
Plugin QS vue2- Editor dayjs nProgress
4. CSS preprocessor SASS
Here are some plugins
2. Start with the overall framework
First of all, here is the vuE-CLI3.x configuration that I wrote a tutorial on before
3. Use the YARN package management tool
4. Overall directory structure
Form a habit here for better code specification in the future
5. Encapsulation of AXIos
A complete front-end project is bound to use Ajax to call the interaction interface of the background. Here, I encapsulate and publish axios of my project. Axios is a request interface recommended by VUE officially, and it does not support JSONP, but its function is very powerful. Request methods include GET, POST, PUT, Delete, and patch
import axios from "axios";import { Message } from "iview";import router from "@/router.js";import store from "@/store";// Create an instance of axios with a 20-second delay const ajax = axios.create({timeout: 1000 * 20}); const methods = ["patch", "put", "post"]; methods.forEach(() => { ajax.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded; charset=UTF-8"; }); let handleLogin = () => { store.dispatch("isLogin", { loginStatus: false, userInfo: {} }); store.dispatch("getActivitySeason", null); sessionStorage.removeItem("activitySeason"); sessionStorage.removeItem("userInfo"); Router.replace ("/login"); }; */const errorTip = (duration = 2, content = "") => message. error({duration, content}); Const handleError = (status, message) => {switch (status) {case 400: errorTip(2, 'Request error - ${message}'); break; case 401: handleLogin(); ErrorTip (2, "Token is invalid, please log in again "); break; Case: 403 / / no permissions sessionStorage. RemoveItem (" the userInfo "); handleLogin(); ErrorTip (2, "No permission request, exit automatically "); break; Case 404: errorTip(2, "Request error, the interface does not exist "); break; Case 405: errorTip(2, 'request error - ${message}'); break; default: errorTip(2, message); break; }}; / / add request interceptor ajax. Interceptors. Request. Use (config = > {the if (sessionStorage. The getItem (" the userInfo ")) {const AUTH_TOKEN = JSON.parse(sessionStorage.getItem("userInfo")).token; AUTH_TOKEN && (config.headers["Authorization"] = AUTH_TOKEN); } // what to do before sending the request }, error => Promise.reject(error)); / / add the response interceptor ajax. Interceptors. Response. Use (response = > response. The status = = = 200? Promise. Resolve (response) : Reject (response), // do something with the response data error => {const {response} = error; if (! Response) {message. error({content: "Server exception... }); return false; } if (response.status < 500) { handleError(response.status, response.statusText); } else { Message.error({ content: response.statusText }); } return Promise.reject(response); }); export default ajax;
Copy the code// Public js of the addressexport const baseUrl = "/jzds/api/v1/";export const uploadUrl = process.env.VUE_APP_REALEASE === "production" ? "//image_upload.mini1.cn/api/image/uploadCommon" : "//image-test.mini1.cn/api/image/uploadCommon";Copy the codeHow do you use it?
Something like that, encapsulate a method, and then call it,
Finally, after the integration, dump it directly into main and mount it to the vue instance.
Ha ha, so used, also convenient, as long as the annotations annotations, where to use what interface, at a glance
6. Lightweight date plugin day.js (2KB)
Because it takes some time to transition,
Such as:
Day.js is especially useful
I’ll refer to this
How to use
/ / dayjs installation
yarn add dayjs -S
import dayjs from "dayjs"; Vue.prototype.$dayjs = dayjs;// Mount to vue instance globallyCopy the code