一、项目介绍：

用于每天的菜品数据分析，客户的管理，员工的管理，查看订单信息，菜品的添加或者下架管理

二、项目使用技术栈：

vue2全家桶、element-ui、axios、js、es6、echarts

三、主页效果图：

 四、二次封装axios：

 这个项目的token需要加密，这里用到了Base64，

下载方式：npm install -- save js-base64

import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "../router"
import { Base64 } from 'js-base64'
// 封装loading开启和结束函数
let loading;
const baseUrl = 'https://meituan.thexxdd.cn/apit'
function startLoading(){loading = Loading.service({lock:true,text:'拼命加载中...',background:'rgba(0,0,0,0.7)'})
}
function endLoading(){loading.close()
}function getToken() {const token = localStorage.Token || ''//后端和前端的约定 const base64_token = Base64.encode(token + ':')return 'Basic ' + base64_token
}//1: 创建axios实例
const service = axios.create({//基地址baseURL:baseUrl,//baseURL:env.dev.baseUrl,settimeout: 5000,
});//2:请求拦截
service.interceptors.request.use((config) => {//在发送请求之前做些什么，比如验证token之类的if(localStorage.Token){config.headers.Authorization = getToken()}//开启loadingstartLoading();return config;},(error) => {//对错误请求做些什么//关闭loadingendLoading();return Promise.reject(error)})//3:响应拦截
service.interceptors.response.use((response) =>{//关闭loadingendLoading();return response;},(error) => {//对错误请求做些什么const {status} = error.responseif(status == 401){Message.error('用户过期，请重新登录！')localStorage.removeItem("Token")router.push("/login")}//关闭loadingendLoading();//提示信息Message.error(error.response.data.msg)return Promise.reject(error)
})
//4:抛出axios对象实例
export default  service;

封装api：

// 引入封装好的接口
import request from "./request"const RequestApi = {// 登录login(data) {return request({url: "/login",method: "POST",data,})},
}
//抛出
export { RequestApi }

五、首页

效果图：

登录和注册基本一致，可以用一个页面完成，具体实现方法用v-if判断和三元表达式

用三元表达式改变文字

 v-if判断变量，true显示登录  false显示注册，他们的点击事件用最简单的方式，写两个点击事件

 登录

 注册

跟登录一致，只不过登录接口换成了注册接口

 六：鉴权

 七：退出登录

 八、数据分析

效果图：

 这个效果就去Echarts官方去找配置

主要就是接受后台的数据，其中折线图，和柱状图需要抽离数据，这两个图都可以用一下的方法是实现 

九、用户列表

这个页面没什么难的，就是把请求数据。渲染数据，用element-ui把参数字段写对就行

page是第几页，后台的第一页下标是从0开始的，我定义的page是1，所以我在请求数据的时候减一

 十、订单页面

效果图：

 进入页面请求数据，渲染数据

 筛选就是将发送后台数据修改成筛选的的数据，可根据上面的图一起看

这里用到的是element 的时间模块，他返回的是一个数组，后台需要字符串类型的，所以需要转换一下

详情菜单效果图：

 点击获取当前数据的id，调用接口将这个id发送给后台，获取详情数据

 后台返回的数据是数组类型，所以要在外面在写一层v-for

 十一、菜单管理（难点，上传图片）

效果图：

获取数据，渲染数据

 下架菜品

 添加数据（难点）

 都是一些用v-model实现的数据双星绑定，主要说一些图片上传

用element 的组件，用到的配置我在图片注释了，想要了解更多去官网查看

 获取本地的token 请求头 和图片上传的接口路径

 上传： ：on-success  文件上传成功时的钩子

 删除图片：on-remove 文件列表移除文件时的钩子

 后台需要的数据

 点击提交，将后台需要的数据发送过去

 编辑  跟以上的方式一样，可以用一个页面完成，技术不好可以将这个页面复制到另一个页面来写编辑

点击编辑，将当前行所有的数据传入的编辑页面

 在编辑页面接受并转换为数组

 修改数据完成后点击提交，调用编辑接口