vue3+ts+vite后台管理模板
支持前后端控制權限，使用uniapp+vue3+ts+elementplus+vite開發，碼雲地址：https://gitee.com/yongqiang0621/uni-admin
rt-uni-admin
請使用hbuilderX編輯器導入項目並打開
安裝依賴
npm i
npm run dev:h5 //或者點擊hbuilderx的菜單，運行到瀏覽器
npm run build:h5 //打包 或者點擊hbuilderx的菜單 發行 網站-pc
項目簡介
##rt-uni-admin是基於uniapp + vue3 + ts + elementplus + uni-ui + vite的pc端后台管理系統空白模板，支持前后端控制權限
目錄簡介
1、api文件夾 ，放置項目下所有請求api，最好對根據模塊設置多個ts文件；例如login.ts、order.ts、menu.ts 根據請求頭不同 封裝了三種方法 get/post/postForm
// get的請求頭
header: { 'content-type': 'application/json', Authorization: uni.getStorageSync('token') }, // post的請求頭 header: { 'content-type': 'application/json', Authorization: uni.getStorageSync('token') }, // postForm的請求頭 header: { 'content-type': 'application/x-www-form-urlencoded', Authorization: uni.getStorageSync('token') }, // api寫法 api/login.ts import uniHttp from 'rt-unipc-utils/request'; // 引入依賴包 //定義user類 class User { // 微信登錄 login(data){ return uniHttp.get('/api/user',data) // get方法 return uniHttp.post('/api/user',data) // post方法 return uniHttp.postForm('/api/user',data) // postForm方法 } } export const user = new User(); // vue頁面寫法 pages/login/login.vue <script setup lang="ts"> import { reactive } from 'vue'; import { user } from '../../../api/login'; const data = reactive({ info: { account:'123456', password:'123456' } }); // 登錄方法 const goLogin = async () => { const res = await user.login(data.info).catch(err => { //如果需要處理異常,請寫在這里 }); if(res.xxx){ console.log('登錄成功') }else{ console.log('登錄失敗') } } </script>
2、config文件夾 配置測試和線上環境的請求接口前綴等
class Config {
// 接口地址前綴 baseUrl = ''; // 請求超時時間 timeout = 10000; // 默認登錄頁 loginPage = '/pages/login/login'; // 必須配置 服務器的statuCode ===401會默認跳轉登錄頁 constructor() { if (process.env.NODE_ENV === 'development') { //開發環境 運行 this.baseUrl = 'http://127.0.0.1:8080'; //測試地址 （ hbuiderx的菜單運行到瀏覽器或者命令npm run dev:h5 請求的接口都是這個地址 ） } else { //生產環境 發行 this.baseUrl = 'http://xxx.xxxx.com'; //正式地址 （ hbuiderx的菜單發行網站-pc或者使用命令npm run build:h5 請求的接口都是這個地址 ） } } } export default new Config();
3、dist文件夾 打包后的h5文件存放位置
4、src文件夾下的compoents文件夾的window文件夾，用來設置后台模板的左側菜單欄和頂部欄 leftWindow.vue無需修改，topWindow.vue里修改或者設置頂部欄目內容：左側的后台logo、文字和頂部右側的文字，修改密碼等
5、src文件夾下的pages文件夾，用來所有頁面 /pages/index/index是首頁，pages/error/error是404頁面，這兩個頁面名稱盡量不要修改，所有無權限的路由都會跳轉到/pages/error/error
6、src文件夾下permission文件夾permission.ts是用來配置路由權限
// name是你的角色是后端返回的角色相對應，page就是可以訪問的頁面
// 前端控制用戶權限 export const permission = { defaultRule: [ { name: '普通用戶', page: ['/pages/index/index'] }, { name: '管理員', page: [ '/pages/index/index', '/pages/menu', '/pages/menu/menu2', '/pages/menu/menu1' ] }, ] }; //后端控制用戶權限 如果是后端返回權限表 盡量把 permission.defaultRule 初始化如下值 (忘記初始化也沒關系，在login.vue 登錄用的時候在初始化也行) export const permission = { defaultRule: [ { name: '', page: [] } ] };
7、src文件夾下 router文件夾的routers文件夾，可以按照模塊存放多個路由例如menu.ts,person.ts，name就是左側菜單顯示名稱 path就是路徑 icon為顯示的圖標 （icon是uni-icons的 圖標 文檔http://vue3-hellouniapp.dcloud.net.cn/pages/extUI/icons/icons） 菜單最多支持三級，最后一級菜單無需設置icon
// menu.ts
export default [ { name: '菜單', icon: 'bars', path: '/pages/menu', children: [ { name: '菜單一', path: '/pages/menu/menu1', }, { name: '菜單二', path: '/pages/menu/menu2', } ] } ];
8、src文件夾下 router文件夾index.ts 默認路由 可以把所有路由都寫到這里，也可以按照如下寫法，將routers文件夾下多個的路由引入
import menu from './routers/menu';
class Router { defaultRouter = [ { name: '首頁', path: '/pages/index/index', icon: 'home-filled', }, ...menu, // 這里是為了代碼簡潔，可以放在routers文件下 ，然后引入 ]; } export default new Router();
9、src文件夾下 router文件夾router-guard.ts 全局路由守衛，攔截瀏覽器默認輸入事件，阻止通過直接輸入網站地址進入無權限的頁面，無需修改
10、src文件夾下 static文件夾 圖片存儲文件夾
11、src文件夾下 uni_modules插件
二、開始使用
！！！很重要 登錄頁的寫法
<script setup lang="ts">
import { permission } from '../../permission/permission'; import { reactive,toRefs } from 'vue'; import { user } from '../../../api/login'; import router from '../../router'; //第一種：前端控制路由權限 const submit = () => { //這里是模擬登錄后返回的角色role 返回數據中必須要有role和token let data = { role: '管理員', id: '21321313131313', token: 'xxxxx' // ... }; // 模擬登錄后返回的token 鍵名必須存為token，根據uni.getStorageSync('token')判斷是否登錄 uni.setStorageSync('token', data.token); //必須將登錄后的個人信息存到本地 根據uni.getStorageSync('userInfo').role 判斷是否有權限; uni.setStorageSync('userInfo', data); //遍歷permission中的路由表 找到自己的路由表 let permit = permission.defaultRule.filter(item => { return item.name === data.role; }); // 必須要加 登錄后刷新重置路由 並將路由存到緩存 routers:默認路由 role:后端返回的角色 permit:遍歷permission中的路由表，返回的符合自己的路由表 uni.$emit('updateRouter', { routers: router.defaultRouter, role: data.role, permit }); uni.setStorageSync('router', router.defaultRouter); uni.$u.route('/pages/index/index') } // 第二種：后台返回路由列表 const submit = () => { // 這里permission是模擬登錄完成后后台返回的路由表 permission最好是數組，格式如下：（這樣菜單頁就不需要有修改了） let data = { role: '普通用戶', id: '21321313131313', token:'xxxxxx', permission: ['/pages/index/index','/pages/menu','/pages/menu/menu2'] }; // 模擬登錄后返回的token 鍵名必須存為token，根據uni.getStorageSync('token')判斷是否登錄 uni.setStorageSync('token', data.token); //必須將登錄后的個人信息存到本地 根據uni.getStorageSync('userInfo').role 判斷是否有權限; uni.setStorageSync('userInfo', data); // 先把permission.ts文件的默認規則置空 permission.defaultRule = [{name:'',page:[]}]; // 把后端返回的路由權限和登錄用戶名稱賦值給 permission.defaultRule permission.defaultRule[0].name = data.role; permission.defaultRule[0].page = data.permission; //遍歷permission中的路由表 找到自己的路由表 let permit = permission.defaultRule.filter(item => { return item.name === data.role; }); //必須要加 登錄后刷新重置路由 並將路由存到緩存 routers:默認路由 role:后端返回的角色 permit:后端返回的路由表 uni.$emit('updateRouter',{ routers: router.defaultRouter, role: data.role, permit }) uni.setStorageSync('router',router.defaultRouter) uni.setStorageSync('permit',permit) uni.$u.route('/pages/index/index') }; </script>
使用uniapp的生命周期
<script setup lang="ts">
import { onLaunch, onShow, onLoad, onPageNotFound } from '@dcloudio/uni-app'; onLaunch(() => { }); onShow(() => { }); onLoad((options) => { console.log("options"); // 傳入的參數 }); onPageNotFound(() => { }); </script>
使用uniapp的路由跳轉
// 第一種 不傳參
uni.navigateTo({ url: '/pages/error/error' }); // 傳參 uni.navigateTo({ url: '/pages/error/error?id=xxx&type=xxxx' }); // 傳參 uni.navigateTo({ url: '/pages/error/error?obj=' + JSON.stringify(obj) }); 注：為了方便簡寫和調用，可以直接傳遞一個url地址替代Object，它只能執行uni.navigateTo類型的地址，不支持跳轉到Tabbar頁面， 如果有參數需要攜帶，以對象形式寫到方法的第二個參數中。 // 簡寫 不傳參 uni.$u.route('/pages/error/error') // 傳參 uni.$u.route('/pages/error/error',{ id: 'xxxxx', type: 'xxxxx' }) // 傳參 uni.$u.route('/pages/error/error',obj) //無需 JSON.stringify(xxx)
#格式化時間 #timeFormat | date(timestamp, format = "yyyy-mm-dd")
該函數必須傳入第一個參數，第二個參數是可選的，函數返回一個格式化好的時間。 time 任何合法的時間格式、秒或毫秒的時間戳 format 時間格式，可選。默認為yyyy-mm-dd，年為"yyyy"，月為"mm"，日為"dd"，時為"hh"，分為"MM"，秒為"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh時MM分ss秒，yyyy/mm/dd/，MM:ss等組合
<template>
<view> <view> 時間為：{{$u.timeFormat(data.timestamp, 'yyyy年mm月dd日')}} </view> <view> 時間為：{{data.time}} </view> </view> </template> <script setup lang="ts"> import { reactive,toRefs } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; const data = reactive({ timestamp: '1581170184', time:'' }) onLoad(()=>{ data.time = uni.$u.timeFormat(data.timestamp, 'yyyy-mm-dd') }) </script>
以集成uview的所有的js工具庫 具體看uview官方文檔 使用時 把this換成uni
節流防抖 對象深度克隆 對象深度合並 時間格式化 路由跳轉 數組亂序 全局唯一標識符 對象轉URL參數 規則校驗 md5加密 隨機數值 去除空格等