您现在的位置是:首页 >学无止境 >vue3-admin-template页面网站首页学无止境
vue3-admin-template页面
vue3-admin-template
网页采用技术框架
本管理模板采用vue3开发,使用vue-router来作为路由跳转,将登录成功后产生的菜单,token放入到vuex中存储,通过axios来进行交互,来获取服务端内容,由于没有后端接口api,本管理模板将采用mock来模拟后端接口数据
网页展示
登录页面
采用mock模拟后端接口数据,当用户名与密码都为admin时才跳转到首页,这里用了路由导航守卫进行判断当前用户是否进行登录,如果没有自动跳转到登录界面,因此当在地址栏输入其他页面时也会跳转回登录页面
代码部分
router.beforeEach((to,from,next)=>{
store.commit("gettoken")
//获取token
let token = store.state.user.token
//如果token不存在并且要访问不是登录页
if(!token && to.name !=="login" ){
next({name:"login"})
}else if (token && to.name=== "login"){
next({name:"home"})
}else{
//如果没有匹配到当前路径
if (to.matched.length == 0) { router.push(to.path)}
next()
}
})
当用户名与密码输入正确时就会跳转到首页,首页有着采用element-plus组件构成的侧边栏菜单,面包屑,卡片,等等,并用echart对数据进行可视化展示,有柱状图,折线图,饼图,并且对echart进行封装,使代码看起来更简洁
ehcart代码封装(部分代码)
initChart() {
//赋值
this.initChartData();
//判断echart是否渲染
if (this.echarts) {
this.echarts.setOption(this.option);
} else {
this.echarts = echarts.init(this.$refs.echarts);
this.echarts.setOption(this.option);
}
},
//放入数据
initChartData() {
if (this.isAxisChart) {
this.xAxisoption.xAxis.data = this.chartData.xData;
this.xAxisoption.series = this.chartData.series;
} else {
this.videooption.series = this.chartData.series;
}
},
},
折叠侧边菜单栏
//传入两个参数,一个为state状态,一个是所需要传入的参数
collapseMenus(state){
state.isCollapse = !state.isCollapse
},
由于element组件提供了菜单栏显示,因此我们只需要在vuex的state状态中加入相应的变量以及一个取反的方法即可进行伸缩菜单栏
用户管理列表界面
用户管理界面采用element-plus的表格进行数据展示,在添加按钮中可以新增新的用户,并且在搜索框中可以对姓名进行模糊搜索,在点击编辑按钮时跳出弹框对数据进行回显,由于删除功能没有后端接口的支持,用mock只能模拟流程并不能真正删除数据,分页插件能够随着点击不同页码进行跳转
//确认是增加还是修改
comfirm() {
//确定按钮修改表格数据
if (this.titletype === "add") {
addUserData(this.formData).then((res) => {
console.log(res);
});
this.isshow = false;
this.getlist();
} else {
updateUserData(this.formData).then((res) => {
console.log(res);
this.isshow = false;
this.getlist();
});
}
},
//新增用户信息
adduser() {
this.isshow = true;
this.titletype = "add";
//防止修改回显
this.formData = {
name: "",
addr: "",
age: "",
birthday: "",
sex: "",
};
},
//获取表格数据,由于是mock自动生成这里不需要传入page
getlist(page = 1, name = "") {
console.log(typeof page != "number");
if (typeof page != "number") {
name = page;
page = 1;
} else {
this.config.page = page;
}
getUserList({ page: this.config.page, name: name }).then((res) => {
console.log(res);
this.tableData = res.data.list.map((item) => {
item.sexLabel = item.sex === 0 ? "女" : "男";
item.birthday = item.birth;
return item;
});
this.config.total = res.data.count;
});
},
面包屑
面包屑即点开侧边菜单栏后会显示出标签,如下图所示
其原理是在侧边栏选择路由时调用vuex中的方法push当前路由标签进去,删除时需要注意删除的位置,分为以下几点:
1.由于标签渲染有下标参与,因此在进行删除时传入当前标签的下标,如果与标签list的长度一样则是最右边删除,只需要删除当前标签和前一个标签显示为高亮。
2.如果删除不是本页的标签,即直接删除即可。
3.如果标签在中间,则需要考虑标签高亮向左还是向右,本页面是向右一个标签显示高亮,即删除当前标签后,由于标签长度会减一,而传入进来的标签下标就是右边一个标签,通俗说1是下标,让删除1的标签后原本下标为2的标签瞬间变为1,直接跳转到下一个页面标签即可。
closepage(item, index) {
//获取已点击路由数量
let length = this.tags.length - 1;
if (this.$route.name !== item.name) {
this.deletemenu(index);
return;
}
//如果关闭最右边的变标签
else if (length == index) {
this.deletemenu(index);
this.$router.push({
name: this.tags[length - 1].name,
});
}
//中间的被关闭,下一个成为高亮表示
else {
this.deletemenu(index);
this.$router.push({
name: this.tags[index].name,
});
}
},