vue3+ts+vite后台管理模板

支持前后端控制权限，使用uniapp+vue3+ts+elementplus+vite开发，码云地址：https://gitee.com/yongqiang0621/uni-admin

github 地址 https://github.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.tsimport 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.tsexport 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和tokenlet 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.defaultRulepermission.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加密随机数值去除空格等

如有不懂请加qq 965969604

vue3+ts+vite后台管理模板相关推荐

基于Vue3.0+ElementPlus后台精简模板
前言欢迎使用VUE3.0 + ElementPlus 后台管理模板 UI库文档: https://element-plus.gitee.io/#/zh-CN 该项目基于Vuecli 使用Vue3 + ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...
《vue3+ts+element-plus 后台管理系统系列》之微前端版本
系列文章目录 <vue3+ts+element-plus 后台管理系统系列一>之简介 <vue3+ts+element-plus 后台管理系统系列二>之布局 <vue3+ ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
大量多风格多功能后台管理模板
最近在做网站后台,在网上找了大量的后台的模版,觉得还不错,拿出来给大家分享一哈.... 1. 点击下载多风格多功能后台管理模板 2. 点击下载专业银行结算系统后台模板 3. ...
蓝色企业CMS网站后台管理模板
介绍: 蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作,自适应分辨率,兼容PC端和移动端,全套模板,包括产品管理.资讯类别.资讯管理.友情链接.用户留言管理.用户管理.修改密码等 ...

vue3+ts+vite后台管理模板

rt-uni-admin

请使用hbuilderX编辑器导入项目并打开

安装依赖

项目简介

目录简介

二、开始使用

！！！很重要登录页的写法

使用uniapp的生命周期

使用uniapp的路由跳转

以集成uview的所有的js工具库具体看uview官方文档使用时把this换成uni

如有不懂请加qq 965969604

vue3+ts+vite后台管理模板相关推荐

最新文章

热门文章

vue3+ts+vite后台管理模板

rt-uni-admin

请使用hbuilderX编辑器导入项目并打开

安装依赖

项目简介

目录简介

二、开始使用

！！！很重要 登录页的写法

使用uniapp的生命周期

使用uniapp的路由跳转

以集成uview的所有的js工具库 具体看uview官方文档 使用时 把this换成uni

如有不懂请加qq 965969604

vue3+ts+vite后台管理模板相关推荐

最新文章

热门文章

！！！很重要登录页的写法

以集成uview的所有的js工具库具体看uview官方文档使用时把this换成uni