用element创建vue项目（3）主页整体布局+用户列表
目录
一、整体布局
二、整体进一步细化
1.头部布局
2.左侧菜单布局
3.通过接口获取菜单数据
4.发起请求获取左侧菜单数据
5.左侧菜单UI绘制
6.左侧菜单的优化
7.左侧菜单的折叠和展开功能
8.首页路由重定向
9.左侧菜单改造为路由链接
三、用户列表开发
1.新增用户列表组件页面
2.绘制用户列表的基本UI结构
3.获取用户列表数据
4.渲染用户列表数据
5.改造状态列的显示效果
6.插槽形式自定义列的渲染
7.实现数据分页效果
8.实现用户状态的修改
9.实现搜索功能
10.实现添加用户的功能
11.渲染一个添加用户的表单
12.实现自定义校验规则
13.实现添加用户表单的重置功能
14.添加用户的预验证功能
15.发起请求添加一个新用户
16.添加用户修改的操作
17.根据ID查询用户信息
18.绘制修改用户的表单
19.修改表单取消后的重置操作
20.提交修改之前表单预验证操作
21.修改用户信息的操作
22.实现删除用户的操作
23.完成删除用户的操作
24.提交用户列表功能代码
一、整体布局
先上下划分，再左右划分。
跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式
Header退出
Aside
Main
.home-container {
height: 100%;
}
.el-header{
background-color:#373D41;
}
.el-aside{
background-color:#333744;
}
.el-main{
background-color:#eaedf1;
}二、整体进一步细化
1.头部布局
电商后台管理系统
退出
.el-header{
background-color:#373D41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
> div {
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}2.左侧菜单布局
导航一
导航一
3.通过接口获取菜单数据
通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
//为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem("token")
return config
})4.发起请求获取左侧菜单数据
data() {
return {
//左侧菜单数据
menulist: []
}
},
created() {
this.getMenuList()
}, // 获取所有的菜单
async getMenuList() {
const {data: res} = await this.$http.get('menus')
if(res.meta.status !== 200) return this.$message.error(res.meta.msg);
this.menulist = res.data
console.log(res)
}5.左侧菜单UI绘制
{{item.authName}}
{{subItem.authName}}
6.左侧菜单的优化
{{item.authName}}
{{subItem.authName}}
data() {
return {
//左侧菜单数据
menulist: [],
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
}
}
},7.左侧菜单的折叠和展开功能
//点击按钮，切换菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
}8.首页路由重定向
新建一个Welcome.vue
Welcome
在路由里面导入
import Welcome from '../components/Welcome.vue'设置路由规则
{
path: '/home',
component:Home,
redirect: '/welcome',
children: [{ path: '/welcome', component: Welcome}]
} Home.vue里面设置路由占位符
9.左侧菜单改造为路由链接
将el-menu的router设置为true，开启路由跳转。
二级菜单的menu设置为：
:index="'/' + subItem.path"三、用户列表开发
1.新增用户列表组件页面
用户列表组件
在路由里面引用并且设置路由规则
PS：解决颜色问题：
给每个二级菜单设一个点击事件，用一个函数将跳转的路由链接保存到sessionStorage中。设置一个被激活的链接地址为activePath，在create函数中就进行赋值，动态赋值给default-active。在切换不同的二级菜单时，还要在点击事件里面给activePath重新赋值，来实现不同二级菜单的动态切换。
2.绘制用户列表的基本UI结构
首页
用户管理
用户列表
添加用户
3.获取用户列表数据
data() {
return {
// 获取用户列表的参数对象
querInfo: {
query: '',
pagenum: 1,
pagesize: 2
},
userList: [],
total: 0
}
},
created() {
this.getUserList()
},
methods: {
async getUserList() {
const {data :res} = await this.$http.get('users', {
params: this.querInfo
} )
if(res.meta.status != 200) {
return error('获取用户列表失败')
}
this.userList = res.data.users
this.total = res.data.total
console.log(this.userList,this.total)
}
}4.渲染用户列表数据
5.改造状态列的显示效果
6.插槽形式自定义列的渲染
7.实现数据分页效果
// 监听 pagesize 改变的事件
handleSizeChange(newSize) {
console.log(newSize)
this.querInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值 改变的事件
handleCurrentChange(newPage) {
console.log(newPage)
this.querInfo.pagenum = newPage
this.getUserList()
}8.实现用户状态的修改
//监听 switch 开关状态的改变
async userStateChange(userInfo) {
console.log(userInfo)
const { data: res} = await this.$http.put(
`users/${userInfo.id}/state/$
{userInfo.mg_state}`
)
if(res.meta.status != 200){
userInfo.mg_state = !userInfo.mg_state
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功')
}9.实现搜索功能
为文本框绑定数据，为搜索按钮绑定事件getUserList。
为input输入框加clearable @clear="getUserList"实现可清空的功能
10.实现添加用户的功能
这是一段信息
// 控制添加用户对话框的显示与隐藏
addDialogVisible: false11.渲染一个添加用户的表单
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{required: true,message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 10, message: '用户名的长度在3-10个字符之间',
trigger: 'blur'}
],
password: [
{required: true,message: '请输入密码', trigger: 'blur'},
{min: 6, max: 15, message: '密码的长度在6-15个字符之间',
trigger: 'blur'}
],
email: [
{required: true,message: '请输入邮箱', trigger: 'blur'},
],
mobile: [
{required: true,message: '请输入手机', trigger: 'blur'},
],
}12.实现自定义校验规则
先定义一个箭头函数，代表一个校验规则。在具体的规则中通过validator来使用自定义的规则
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (regEmail.test(value)) {
// 合法的邮箱
return cb()
}
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
if (regMobile.test(value)) {
// 合法的手机号
return cb()
}
cb(new Error('请输入合法的手机号'))
}
email: [
{required: true,message: '请输入邮箱', trigger: 'blur'},
{validator: checkEmail, trigger: 'blur'}
],
mobile: [
{required: true,message: '请输入手机', trigger: 'blur'},
{validator: checkMobile, trigger: 'blur'}
]13.实现添加用户表单的重置功能
监听对话框的close事件
@close="addDialogClosed"// 监听添加用户对话框的关闭事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
}14.添加用户的预验证功能
确 定
addUser() {
this.$refs.addFormRef.validator(vaild => {
if(vaild) return
// 可以发起添加用户的网络请求
})
}15.发起请求添加一个新用户
// 可以发起添加用户的网络请求
const {data: res} = await this.$http.post('users', this.addForm)
if(res.meta.status != 201) {
this.$message.error('添加用户失败')
}
this.$message.success('添加用户成功')
// 隐藏添加用户的对话框
this.addDialogVisible = false
// 重新获取用户列表数据
this.getUserList()16.添加用户修改的操作
// 控制修改用户对话框的显示和隐藏
editDialogVisible: false
// 展示编辑用户的对话框
showEditDialog() {
this.editDialogVisible = true
}
17.根据ID查询用户信息
@click="showEditDialog(scope.row.id)"// 展示编辑用户的对话框
async showEditDialog(id) {
// console.log(id)
const { data: res} = await this.$http.get('/users/' + id)
if(res.meta.status != 200) {
return this.$message.error('查询用户信息失败')
}
this.editForm = res.data
this.editDialogVisible = true
}
// 查询到的用户信息对象
editForm: {}18.绘制修改用户的表单
//修改表单的验证规则对象
editFormRules: {
email: [
{required: true,message: '请输入修改后的邮箱', trigger: 'blur'},
{validator: checkEmail, trigger: 'blur'}
],
mobile: [
{required: true,message: '请输入修改后的手机', trigger: 'blur'},
{validator: checkMobile, trigger: 'blur'}
]
}19.修改表单取消后的重置操作
// 监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
} 20.提交修改之前表单预验证操作
确 定 // 修改用户信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(vaild => {
// console.log(vaild)
if(!vaild) return
// 发起修改用户信息的数据请求
})
}21.修改用户信息的操作
// 发起修改用户信息的数据请求
const {data: res} = await this.$http.put('/users/' + this.editForm.id, {
email:this.editForm.email,
mobile: this.editForm.mobile
})
if(res.meta.status != 200) {
this.$message.error('更新用户失败')
}
// 隐藏更新用户的对话框
this.editDialogVisible = false
// 重新获取用户列表数据
this.getUserList()
// 提示修改用户成功
this.$message.success('更新用户成功')22.实现删除用户的操作
需要挂载一个$confirm
Vue.prototype.$confirm = MessageBox.confirm// 根据id删除对于的用户信息
async removeUserById(id) {
// 弹框询问用户是否删除
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消了删除，则返回值为字符串 cancel
// console.log(confirmResult)
if(confirmResult != 'confirm') {
return this.$message.info('已取消删除')
}
//删除
}
23.完成删除用户的操作
//删除
const { data: res } = await this.$http.delete('users/' + id)
if(res.meta.status != 200) {
this.$message.error('删除用户失败')
}
this.$message.success('删除用户成功')
this.getUserList()24.提交用户列表功能代码
检查分支状态
git branch创建新分支
git checkout -b user把本地的user分支推送到云端originzg仓库中，同时以user分支来进行保存
git add .
git commit -m "完成用户列表功能的开发"
git push -u origin user把user里面的所以代码合并到master主分支中
切换到master主分支
git checkout master合并
git merge user推送到云端主分支
git push