后台管理项目介绍
一、项目结构的搭建
封装axios
首先要安装axios
,一般我会在项目的src
目录中,新建一个network
文件夹,作为我们的网络请求模块,然后在里面新建一个http.js
和一个api.js
文件和一个reques.js
。http.js
文件用来封装我们的axios
,api.js
用来统一管理我们的接口url
在request.js
中添加请求拦截
和响应拦截
。在请求拦截
中,会给请求头添加token字段
,还有loading动画的开启
。在响应拦截
中,可以做一些loading动画的关闭
,还有可以根据后端
返回的状态码
,做一些检验token是否有效或者过期
的操作。接着就是做一些axios
进行的api
接口的封装,这里我用到了async
,await
封装请求接口函数,这样可以将异步操作同步化操作,代码更加友好,避免回调地域的出现。
具体封装步骤可以去看axios的封装
多环境变量的配置
在项目根目录中新建.env.*
.env.development
本地开发环境配置
.env.staging
测试环境配置
.env.production
正式环境配置
配置对应环境的变量,,用户可以根据需求修改,根据环境不同,变量就会不同了
具体封装步骤可以去看多环境变量
二、开发流程
- 用户管理模块
登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换 - 权限管理模块
添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换 - 商品管理模块
添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类 - 订单管理模块
数据渲染、分页 - 数据统计模块
echarts图表、数据渲染
1.登录以及退出
登录的业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证后,根据后台的响应状态跳转到项目主页
登录业务的相关技术点
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态
token原理分析
登陆页面的布局
用到了以下的elment ui组件
- el-form
- el-form-item
- el-input
- el-button
- 字体图标
创建登陆组件
在components文件夹中新建Login.vue组件
template,script,style标签,style标签中的scoped可以防止组件之间的样式冲突
<template>
<div>
<!-- 头像 -->
<!-- 登录区域 -->
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="less" scoped>
</style>
实现登录功能
给登录按钮添加点击事件,当用户点击登录按钮时,如果当前所输入的账号信息合法,则允许向服务器发送登录请求,服务器根据请求信息检查当前账号是否正确,并返回响应信息,客户端通过返回的响应信息做出相应响应,即若账号密码错误则提示登陆失败,反之,登陆成功,将当前的token存储至本地并跳转至后台主页。
退出
- 清空token
- 跳转到登录页
// 给退出的按钮绑定一个logout事件
logout() {
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router