过完年刚上班，总结下忙碌的年前的项目，首先这个是我个人自己从头到尾开发的，中间也遇到一些小问题，总之，对我来说是个提升...
话不多说，直接上代码
先把后台管理系统的界面截个图吧，要不然直说云里雾里的...
登录页面
内页：赛区配置，还有作品审核，以及管理员用户管理功能
该项目是一个赛事配置系统后台，有管理员的审核，页面的配置，以及多渠道，多语言的切换
1、技术：使用最新的vue全家桶
1、vue-cli3.x +vue全家桶（vuex vue-router axios）
2、框架使用iview
3、插件 qs vue2-editor dayjs nprogress
4、css预处理器 sass
如图这是些插件
2、从搭整体框架开始
首先 这里我之前写过教程，Vue-cli3.x 配置
3、使用yarn 包管理工具
4、整体目录结构
这里养成习惯，为了以后更好的代码规范吧
5、axios的封装
一个完整的前端项目，必然会利用ajax去调用后台的交互接口，这里，我把我这个项目的axios封装，晒出来，axios是vue官方推荐的一个请求接口的，不支持jsonp ，不过功能已经很强大了， get、 post、put、delete、patch 这些请求方法
import axios from "axios";import { Message } from "iview";import router from "@/router.js";import store from "@/store";// 创建axios实例，同时设置20秒延时时间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, `请求出错 - ${message}`); break; case 401: handleLogin(); // token过期自动退出 errorTip(2, "token失效，请重新登录"); break; case 403: // 无权限 sessionStorage.removeItem("userInfo"); handleLogin(); errorTip(2, "无权限请求，已自动退出"); break; case 404: errorTip(2, "请求出错，该接口不存在"); break; case 405: errorTip(2, `请求出错 - ${message}`); break; default: errorTip(2, message); break; }};// 添加请求拦截器ajax.interceptors.request.use( config => { if (sessionStorage.getItem("userInfo")) { const AUTH_TOKEN = JSON.parse(sessionStorage.getItem("userInfo")).token; AUTH_TOKEN && (config.headers["Authorization"] = AUTH_TOKEN); } // 在发送请求之前做些什么 return config; }, error => Promise.reject(error));// 添加响应拦截器ajax.interceptors.response.use( response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response), // 对响应数据做点什么 error => { const { response } = error; if (!response) { Message.error({ content: "服务器异常..." }); return false; } if (response.status < 500) { handleError(response.status, response.statusText); } else { Message.error({ content: response.statusText }); } return Promise.reject(response); });export default ajax;
// 地址的公共js
export 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";如何使用呢？
类似这样，封装成一个方法，然后去调用，
最后在集成起来，直接甩给main里面 挂载到vue实例上，
哈哈，这样用起来，也方便，只要把注释注释好，哪些地方使用什么接口，一目了然
6、轻量级的一个日期插件 day.js（2kb）
因为需要有些时间的转换，
例如：
使用day.js 特别好用
这里参考这个
如何使用
// 安装dayjs
yarn add dayjs -S
import dayjs from "dayjs";Vue.prototype.$dayjs = dayjs; // 挂载到vue实例上去，全局
