vue3管理系统常用代码总结

管理系统常用基本模块，可满足大部分管理系统的基础模块需求。

技术选型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.设置各个界面的参数