山西省城乡住房和建设厅网站,简约wordpress模板,网络营销策划目标,视频广告后台管理项目介绍
一、项目结构的搭建 封装axios多环境变量的配置 二、开发流程 1.登录以及退出 登录的业务流程登录业务的相关技术点 token原理分析 登陆页面的布局 用到了以下的elment ui组件 创建登陆组件实现登录功能退出 2.主页面布局、用户列表功能 主页面布局侧边栏的…后台管理项目介绍
一、项目结构的搭建 封装axios多环境变量的配置 二、开发流程 1.登录以及退出 登录的业务流程登录业务的相关技术点 token原理分析 登陆页面的布局 用到了以下的elment ui组件 创建登陆组件实现登录功能退出 2.主页面布局、用户列表功能 主页面布局侧边栏的布局以及渲染 请求数据侧边栏菜单的伸缩用户列表功能面包屑导航区域卡片视图区域、搜索框、添加按钮搜索功能的实现获取用户列表数据分页 3.权限管理模块 权限列表角色列表 4.商品管理 商品分类 5.订单管理6.数据统计 打包
一、项目结构的搭建
封装axios
首先要安装axios一般我会在项目的src目录中新建一个network文件夹,作为我们的网络请求模块然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axiosapi.js用来统一管理我们的接口url
在request.js中添加请求拦截和响应拦截。在请求拦截中会给请求头添加token字段还有loading动画的开启。在响应拦截中可以做一些loading动画的关闭还有可以根据后端返回的状态码做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装这里我用到了asyncawait封装请求接口函数这样可以将异步操作同步化操作代码更加友好避免回调地域的出现。
具体封装步骤可以去看axios的封装
多环境变量的配置
在项目根目录中新建.env.* .env.development本地开发环境配置 .env.staging 测试环境配置 .env.production 正式环境配置 配置对应环境的变量用户可以根据需求修改根据环境不同变量就会不同了
具体封装步骤可以去看多环境变量 二、开发流程
用户管理模块 登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换权限管理模块 添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换商品管理模块 添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类订单管理模块 数据渲染、分页数据统计模块 echarts图表、数据渲染
1.登录以及退出
登录的业务流程
在登录页面输入用户名和密码调用后台接口进行验证通过验证后根据后台的响应状态跳转到项目主页
登录业务的相关技术点
通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态
token原理分析 登陆页面的布局 用到了以下的elment ui组件
el-formel-form-itemel-inputel-button字体图标
创建登陆组件
在components文件夹中新建Login.vue组件
templatescriptstyle标签,style标签中的scoped可以防止组件之间的样式冲突
templatediv!-- 头像 --!-- 登录区域 --/div
/templatescript
export default {data() {return {}}
}
/scriptstyle langless scoped/style实现登录功能
给登录按钮添加点击事件当用户点击登录按钮时如果当前所输入的账号信息合法则允许向服务器发送登录请求服务器根据请求信息检查当前账号是否正确并返回响应信息客户端通过返回的响应信息做出相应响应即若账号密码错误则提示登陆失败反之登陆成功将当前的token存储至本地并跳转至后台主页。
退出 清空token 跳转到登录页 // 给退出的按钮绑定一个logout事件 logout() { // 清空token window.sessionStorage.clear() // 跳转到登录页 this.$router.push(’/login’) },
2.主页面布局、用户列表功能
主页面布局 结构布局采用了element ui里的container组件
侧边栏的布局以及渲染 请求数据
在element-ui中也提供了相应的组件在NavMenu导航菜单中可以找到相应的组件对应的区域
data中定义一个数组menulist来接收左侧菜单数据
// 获取所有菜单async getMenuList() {const {data: res} await this.$http.get(menus)if (res.meta.status ! 200) return this.this.$message.error(res.meta.msg)this.menulist res.dataconsole.log(res);},侧边栏菜单的伸缩
定义isCollapse属性默认false点击切换状态
el-aside :widthisCollapse ? 64px : 200pxdiv classtoggle-button clicktoggleCollapsse??/div
12
// 点击按钮 切换菜单的折叠与展开toggleCollapsse() {this.isCollapse !this.isCollapse},用户列表功能 用到了以下element ui组件记得按需导入在element.js中注册
BreadCRUMB面包屑导航Card卡片视图Form表单Table表格DIalog对话框Pagination分页Switch开关MessageBox
面包屑导航区域
!-- 面包屑导航 --el-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item :to{ path: /home }首页/el-breadcrumb-itemel-breadcrumb-item用户管理/el-breadcrumb-itemel-breadcrumb-item用户列表/el-breadcrumb-item/el-breadcrumb卡片视图区域、搜索框、添加按钮
!-- 卡片试图区域 --el-card!-- 搜索与添加 --el-row :gutter20el-col :span8el-input placeholder请输入内容 v-modelqueryInfo.query clearable cleargetUserListel-button slotappend iconel-icon-search clickgetUserList /el-button/el-input/el-col!-- 按钮 --el-col :span4el-button typeprimary clickaddDialogVisible true添加用户/el-button/el-col/el-row
/el-card搜索功能的实现
将值利用绑定到queryInfo.query
// 获取用户列表的参数对象queryInfo: {query: ,// 当前的页数pagenum: 1,// 当前每页显示多少条数据pagesize: 2,
},获取用户列表数据
script
export default {data() {return {//获取查询用户信息的参数queryInfo: {query: ,pagenum: 1,pagesize: 2},//保存请求回来的用户列表数据userList:[],total:0}},created() {this.getUserList()},methods: {async getUserList() {//发送请求获取用户列表数据const { res: data } await this.$http.get(users, {params: this.queryInfo})//如果返回状态为异常状态则报错并返回if (res.meta.status ! 200)return this.$message.error(获取用户列表失败)//如果返回状态正常将请求的数据保存在data中this.userList res.data.users;this.total res.data.total;}}
}
/script分页
element.js中导入组件Pagination更改组件中的绑定数据 size-change: 监听pagesize改变的事件 current-change: 监听页码值改变的事件 :current-page: 当前页 :page-sizes一页的的信息条数 :page-size: 当前的页数 layout: 控制显示内容 :total总共的信息条数 3.权限管理模块
权限列表 权限等级可以利用插槽和v-if v-else-if来判断 el-table :datalist stylewidth: 100% borderel-table-column typeindex label# width50 /el-table-columnel-table-column propauthName label权限名称 width180/el-table-columnel-table-column proppath label路径 width180/el-table-columnel-table-column label权限等级template #defaultscopeel-tag v-ifscope.row.level 0一等权限/el-tagel-tag v-else-ifscope.row.level 1 typesuccess二级权限/el-tagel-tag v-else-ifscope.row.level 2 typewarning三级权限/el-tag/template/el-table-column/el-table角色列表 角色列表页面一个重点就是利用了element ui中的 table表格的展开行 分配权限也是利用利用了element ui中的 tree树形控件来完成的
4.商品管理
在商品管理页面又被分为了:商品分类 分类参数 商品列表三个页面
商品分类
在这个页面我们用了一个新的组件tree-table 树形表格 首先我们要下载
cnpm i vue-table-with-tree-grid --S在main.js引入
import TreeTable from vue-table-with-tree-grid
Vue.component(tree-table, TreeTable)具体代码如下 5.订单管理 6.数据统计
使用echarts 绘制图标 echarts官网 echarts是一款基于JavaScript的数据可视化图表库提供直观生动可交互可个性化定制的数据可视化图表 然后通过lodsh的_.merge()来合并请求到的数据。 lodsh的安装 npm i --save lodash 引用import _ from lodash 打包
(懒得写了 以后再补)
