用jquery做网站好吗,沈阳模板建站系统,零基础学全屋定制设计,做p2p网站的主页模板模板说明
下载
git clone https://github.com/AIxiaoHanBao/vue-template.gitmodule参数
node版本 16
UI组件库 element-plus
持久化 pinia
网络请求 axios
路由 vue-router
使用说明
权限管理目录access资源目录assets组件目录components页面目录pages网络请求目录re…模板说明
下载
git clone https://github.com/AIxiaoHanBao/vue-template.gitmodule参数
node版本 16
UI组件库 element-plus
持久化 pinia
网络请求 axios
路由 vue-router
使用说明
权限管理目录access资源目录assets组件目录components页面目录pages网络请求目录request路由目录router全局变量目录store
一、权限管理
accessEnum存放的是权限名的枚举
checkAccess是用于检验权限的
重点说明checkAccess
import ACCESS_ENUM from /access/accessEnum;/*** 检查权限判断当前登录用户是否具有某个权限* param loginUser 当前登录用户* param needAccess 需要有的权限* return boolean 有无权限*/
const checkAccess (loginUser: any, needAccess ACCESS_ENUM.NOT_LOGIN) {// 获取当前登录用户具有的权限如果没有 loginUser则表示未登录console.log(权限验证通过)return true;
};export default checkAccess;自行设置条件
App.vue中自行修改
// 路由权限校验
router.beforeEach(async (to, from, next){if (checkAccess(JSON.parse(localStorage?.getItem(token)??)?.token??),to.meta.needAccess){next()}
})二、网络请求管理
需要修改的地方
request.ts中请求头设置
//http request 拦截器
axios.interceptors.request.use(config {// 配置请求头// ts-ignoreconfig.headers {// Content-Type:application/json;charsetUTF-8,Authorization:localStorage.getItem($_token)};return config;},error {return Promise.reject(error);}
);使用整合模板的请求示例代码userService.ts
import { request } from ../request.ts
export class UserService{static async getUserInfo(id:number){return await request(/user/info,{id},POST)}
}三、路由管理
router/index.ts是存储主要所有路由的想要自己添加路由在routes中自行添加
import {createRouter, createWebHashHistory } from vue-router
import mainRouter from ./mainRouter.ts;const router createRouter({// history: createWebHistory(process.env.BASE_URL),// history: createWebHashHistory(process.env.BASE_URL),history: createWebHashHistory(),routes: [...mainRouter]
})
export default router模板路由创建mainRouter.ts
import {RouteRecordRaw} from vue-router;
import Test1 from ../pages/Test1.vue;
import Test2 from ../pages/Test2.vue;
import ACCESS_ENUM from ../access/accessEnum.ts;const mainRouter: ArrayRouteRecordRaw [{name: Test1,path: /test1,component: Test1,meta: {needAccess: ACCESS_ENUM.NOT_LOGIN,}},{name: Test2,path: /text2,component: Test2,meta: {needAccess: ACCESS_ENUM.NOT_LOGIN,}},
]
export default mainRouter四、全局变量管理
UserStore.ts中的模板自行修改
