管理系统常用基本模块，可满足大部分管理系统的基础模块需求。 技术选型vue3+typescript
1.登录功能
// 登录
const ruleFormRef = ref<FormInstance>();
const router=useRouter()//-->$router
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
// 对表单的内容进行验证
// valid布尔类型，为true表示验证成功，反之
formEl.validate((valid) => {
if (valid) {
// console.log("submit!");
login(data.ruleForm).then((res) => {
// console.log(res);
// 将token进行保存
localStorage.setItem("token", res.data.token);
// 跳转页面，首页
router.push('/') //路由跳转到其他vue界面
});
} else {
console.log("error submit!");
return false;
}
});
// console.log(formEl);
};
// 重置输入框的账号密码
const resetForm = () => {
data.ruleForm.username = "";
data.ruleForm.password = "";
};
2.查询功能
// 查询
const onSubmit = () => {
// console.log(data.selectData.title);
// console.log(data.selectData.introduce);
let arr: ListInt[] = []; //定义数组，用来接受查询过后要展示的数据
if (data.selectData.title || data.selectData.introduce) {
//判断两个是否其中一个有值
if (data.selectData.title) {
arr = data.list.filter((value) => {
//将过滤出来数组赋值给arr
return value.title.indexOf(data.selectData.title) !== -1;
});
}
if (data.selectData.introduce) {
arr = data.list.filter((value) => {
//将过滤出来数组赋值给arr
return value.introduce.indexOf(data.selectData.introduce) !== -1;
});
}
} else {
arr = data.list;
}
data.selectData.count = arr.length;
data.list = arr;
};
// 监听输入框的两个属性 当输入框里没有值的时候，会显示出未搜索前的数据
watch(
[() => data.selectData.title, () => data.selectData.introduce],
() => {
if (data.selectData.title == "" && data.selectData.introduce == "") {
getGoods();
}
}
);
3.添加角色权限
可以查看左边导航栏哪些功能的权限
const addRole = () => { //用了element的ElMessageBox组件
ElMessageBox.prompt("请输入角色名称", "添加", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(({ value }) => {//value表示你在输入中填写的值
if(value){//判断输入框中有值，就将对应的值添加到列表中
data.list.push({roleId:data.list.length+1,roleName:value,authority:[]})
}
ElMessage({
type: "success",
message: `${value}角色添加成功`,
});
})
.catch(() => {
ElMessage({
type: "info",
message: "取消操作",
});
});
};
4.改变角色权限
可以查看左边导航栏哪些功能的权限
const changeRole=(row:ListInt)=>{
router.push({
name:"authority",
params:{
id:row.roleId,
authority:row.authority
}
})
}
5.创建axios实例，登录拦截
在目录/request/index.ts
import axios from 'axios'
// 创建axios实例
const service=axios.create({
baseURL:"https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api",
timeout:5000,
headers:{
"Content-Type":"application/json;charset=utf-8"
}
})
// 请求拦截
service.interceptors.request.use((config)=>{
config.headers=config.headers || {}
if(localStorage.getItem('token')){
config.headers.token=localStorage.getItem('token') || ""
}
return config
})
// 响应拦截
service.interceptors.response.use((res)=>{
const code:number=res.data.code
if(code!=200){
return Promise.reject(res.data)
}
return res.data
},(err)=>{
console.log(err);
})
export default service
6.路由配置
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView,
redirect:"goods",//设置重定向
children:[
{
path:"goods",
name:"goods",
meta:{
isShow:true,
title:"商品列表"
},
component: () => import(/* webpackChunkName: "goods" */ '../views/GoodsView.vue')
},
{
path:"user",
name:"user",
meta:{
isShow:true,
title:"用户列表"
},
component: () => import(/* webpackChunkName: "user" */ '../views/UserView.vue')
}
,
{
path:"role",
name:"role",
meta:{
isShow:true,
title:"角色列表"
},
component: () => import(/* webpackChunkName: "role" */ '../views/RoleView.vue')
}
,
{
path:"authority",
name:"authority",
meta:{
isShow:false,
title:"权限列表"
},
component: () => import(/* webpackChunkName: "authority" */ '../views/AuthorityView.vue')
}
]
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/login',
name: 'login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "login" */ '../views/LoginView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
//导航守卫
router.beforeEach((to,from,next)=>{
const token: string | null =localStorage.getItem('token')
if(!token && to.path!=='/login'){
next('/login')
}else{
next()
}
})
export default router
7.设置api接口
在目录/request/api.ts
import service from "."; //service是axios里的后端接口
interface loginData{
username:string,
password:string
}
// 登录接口
export function login(data:loginData){
return service({
url:"/login",
method:"post",
data
})
}
// 商品列表接口
export function getGoodsList(){
return service({
url:"/getGoodsList",
method:"get"
})
}
// 用户列表接口
export function getUserList(){
return service({
url:"/getUserList",
method:"get"
})
}8.设置各个界面的参数
