一，登陆界面的制作
第一步：利用element-ui按需导入，然后绘制相应的页面：
第二步：配置相应放入路由和路由导航守卫
第三步，登陆成功后的退出登陆功能
二，首页的开发
第一步：顶部和左侧区域的菜单页面
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/sheng.png" alt="">
<span>后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出登陆</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 左侧菜单区域 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu
background-color="#222831"
text-color="#ececec"
active-text-color="#ffd04b">
<!-- 一级菜单 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-1">
<template slot="title">
<i class="el-icon-location"></i>
<span>二级菜单一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧主体区域 -->
<el-container>
<!-- 主体文章内容区域-->
<el-main>Main</el-main>
</el-container>
</el-container>
</el-container>
</template>
<script>
export default{
methods:{
//退出登陆
logout(){
//第一步：销毁sessionStorage中的token值
window.sessionStorage.clear()
//第二步：编程式导航跳转到登陆界面
this.$router.push('/login')
this.$message.success('退出成功')
}
}
}
</script>
<style lang="stylus" scoped>
.el-container >>> .el-menu
border none
.home_container
height 100%
.el-header
background-color: #373d41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
padding 0 20px
div
display flex
align-items center
span
margin-left 15px
.el-aside
background-color: #333744;
.el-main
background-color: #eaedf1;
</style>
因为每次发起请求需要携带token，这样才能判断是否是该用户登陆状态下使用，就需要用到请求拦截器：它可以统一在你发送请求前在请求体里加上token；
```javascript
//导入axios
import axios from 'axios'
//配置axios的全局根路径
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
//设置请求拦截器
axios.interceptors.request.use(config=>{
//为每个请求头添加Authorization属性，存储用户的token
config.headers.Authorization=window.sessionStorage.getItem('token')
return config
})
//把axios挂载到vue的原型对象上，这样所有的vue组件都可以使用axios
Vue.prototype.$http=axios第二步：左侧菜单栏的数据获取与渲染
数据的获取：
methods:{
//获取后台的数据-左侧菜单栏
async getMenuList(){
const{data:res}=await this.$http.get('menus')
this.menuList=res.data
}
},
//利用vue的生命周期函数
created() {
this.getMenuList()
}
第三步：左侧菜单开启折叠和展开
第四步：首页路由的重定向
我们希望登陆成功之后，可以先跳转到后台主页的欢迎界面。它将是home组件内部的子组件，也就是说，需要使用到嵌套路由和路由的重定向。
第五步：左侧菜单区域更改为链接
第六步，左侧菜单状态的保存（利用sessionstorge）
左侧已经变成链接，于是需要把它的选中状态保存在本地的sessionstorge中，以让刷新之后页面还会直接自动选中这个菜单（即记录下这个菜单的上一次选择）。
三，用户列表组件的开发
第一步：利用面包屑导航
第二步：利用axios获取数据：
第三步：创建搜索和添加用户
第四步：用户的列表渲染
第五步：改造状态列的显示效果
这个用户状态是一个布尔值，这是没有办法在页面上直接渲染出来的。而我们希望把它渲染成这样的开关效果：
：data="userlist"把父组件的数据传递给子组件el-table了！实际上el-table里面一定由props接收这个数据，还有v-for遍历，取出其中的每一项，还有属性绑定：row=“取出的每一项”。
于是才有这里的父组件使用slot-scope=stateObj来接收！且每一项的数据才会是stateObj.row，实际上是把每一项的row都是一个对象，slot-scop就是这些对象组成的对象。
第六步：操作区域的写法
因为要获取到每一对应数据的值，才能有针对性地进行修改，所以这里必然又需要使用到作用域插槽。
第七步：页码的实现
第八步：添加用户的实现
第九步：修改用户信息
第十步：删除用户
四，权限列表页面的开发
第一步：新建组件，配置路由，基础的页面创建
第二步：权限列表的创建
element-ui的table组件：
于是页面效果：
五，创建角色列表组件
第一步：新建组件，然后配置嵌套路由，完成基本的页面布局
第二步：列表区域的创建
第三步：操作区域的创建
第四步：展开区域的创建
第五步:添加角色对话框
第六步：编辑角色对话框
第七步：删除角色信息
第八步：分配权限的实现
第九步：在用户列表中增加添加角色的功能
六，商品分类页面的创建
第一步：创建组件，配置路由，完成基本的页面创建
第二步：获取商品列表数据
第三步：用获取到的数据来渲染页面
第四步：分页区域的使用
第五步：添加分类的实现
第六步：级联选择器的实现
第七步：编辑分类信息
第八步，删除角色
七，参数列表组件
其他页面和之前差不多，有差别的地方，就这两个：
第一步：级联选择器：
第二步：tab选项卡的实现
第三步：动态参数列表的渲染---------添加参数按钮的禁用
第四步：参数列表table的渲染
第五步：获取数据，渲染参数列表
第六步：展开区域的渲染：
剩余的和其他一样，不再赘述
八，商品列表的实现
第一步：时间格式的转换
因为我们的时间都是基于ms来的，需要把他们转化成正常的时间。
在入口文件中使用vue的filter
//创建修改时间格式的过滤器
Vue.filter('dataFormat',function(originVal){
const dt =new Date(originVal)
const y=dt.getFullYear()
//padStart用于头部补全,共两位有效数字,不足两位则0补足
const m=(dt.getMonth()+1+'').padStart(2,'0')
const d=(dt.getDate()+'').padStart(2,'0')
const hh=(dt.getHours()+'').padStart(2,'0')
const mm=(dt.getMinutes()+'').padStart(2,'0')
const ss=(dt.getSeconds()+'').padStart(2,'0')
return `${y}-${m}-${d}-${hh}:${mm}:${ss}`
})使用时：
<el-table-column label="创建时间" width="180px">
<template slot-scope="scope">
{{scope.row.add_time | dataFormat}}
</template>
</el-table-column>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
