# yq-uni-admin

**Repository Path**: yongqiang0621/yq-uni-admin

## Basic Information

- **Project Name**: yq-uni-admin
- **Description**: yq-uni-admin是基于uniapp + vue3 + ts + elementplus + uni-ui + vite的pc端后台管理系统空白模板，支持前后端控制路由权限
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: alpha
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 75
- **Forks**: 16
- **Created**: 2022-02-09
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: backend

**Tags**: vue3, TypeScript, uni-app, 后台管理系统, vite

## README

## vue3后台管理模板 yq-uni-admin是使用 uniapp + elementplus + unicloud（unicloud也可以换成传统服务器）的pc端后台管理系统空白模板，支持后端控制权限，根据角色分配菜单，支持地址栏路由拦截，集成状态管理pinia

- 技术栈：uniapp、vue3、ts、elementplus、pinia、vite
- 菜单权限：支持后端按角色分配；支持地址栏拦截
- 按钮权限：支持后端按角色分配
- pinia使用模块化，支持持久化存储
- 封装uni.request，方便易用
- 路由配置：pages.json修改，配置简单


## [yq-uni-admin体验地址](https://static-mp-bed742be-5cd0-413d-b7a5-c1bdcda83cd2.next.bspapp.com)
## [yq-uni-admin备用体验地址](https://static-mp-b7242594-ef25-466e-aa71-74d27d7b067f.next.bspapp.com/#/)
 
## 请在码云上下载或者拉取代码，不要在插件市场直接导入

[码云地址](https://gitee.com/yongqiang0621/yq-uni-admin)

## 安装依赖

```
pnpm i 
```

```
pnpm run dev:h5 //或者点击hbuilderx的菜单，运行到浏览器
```
```
pnpm run build:h5 //打包 或者点击hbuilderx的菜单 发行 网站-pc
```

# 封装request promise写法 async+await 支持 GET，POST，PUT，DELETE，CONNECT，HEAD，OPTIONS，TRACE;
# 自定义请求头，更加灵活，自定义层业务层错误处理函数，支持多种外部url接口
# 使用方法 App.vue代码如下
``` vue
<script>
export default {
	globalData: {
		baseUrl:'',
		devUrl: 'http://devUrl.com',
		proUrl: 'http://proUrl.com',
		baiduUrl:'http:baidu.com',
		httpSuccessCodes:[200, 201, 202, 203, 204, 205, 206], // http请求成功的状态码（必须是数组）
		/**
		 * 业务层错误处理函数
		 */
		systemError(res) {
			if (res.code === 401 || res.code === 403) {
				uni.showToast({
					title: '登录过期',
					icon: 'error'
				});
				uni.clearStorageSync();
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}, 1500);
				return '登录过期';
			}
			if (res.code === 500) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					duration: 2500
				});
				return res.message;
			}
		},

		/**
		 * 设置请求头
		 */
		setHeader(url,auth,formData) {
			//也可以根据url的不同，动态设置header
			let header = {
				'content-type': 'application/json',
				clientType: 'C',
				communityId: uni.getStorageSync('communityId'),
				Authorization:uni.getStorageSync('token')
			};
			// 一些项目的post的请求头需要设置为x-www-form-urlencoded，可以在接口里设置为formData = true
			if (formData) {
				header = {
					...header,
					'content-type': 'application/x-www-form-urlencoded',
				};
			}
			// auth代表是否鉴权，默认是，如果不需要传Authorization等，可以在接口里设置为auth = false
			if (!auth) {
				delete header.Authorization;
			}
			return header
		}
	},
	onLaunch: function () {
		this.setBaseUrl();
	},
	onShow: function () {
		console.log('App Show');
	},
	onHide: function () {
		console.log('App Hide');
	},
	methods: {
		/**
		 * 请求配置
		 */
		setBaseUrl() {
			if (process.env.NODE_ENV === 'development') {
				// 开发环境 运行
				this.globalData.baseUrl = location.origin; // 需要处理跨域的选这个，然后在vite.config.js配置跨域代理
				// this.globalData.baseUrl = this.globalData.devUrl; // 如果后端处理好了跨域，就选这个
			} else {
				// 生产环境 发行
				this.globalData.baseUrl = this.globalData.proUrl;
			}
		}
	}
};
</script>

<style>
/*每个页面公共css */
</style>

```

# 根目录创建apis文件夹，用来放置接口文件
# 以apis文件的index.js为例，代码如下

```javascript
import { request } from '@/utils/request';

/**
 * 首页商品列表接口
 */
export const goodsPageApi = (data) =>
	request({
		api: '/api/goodsPage',
		method:'post',
		header:{'X-Custom-Header': 'custom-value'}, //支持自定义请求header，这里的header会替换qpp.vue中的全局header
		data,
	});
/**
 * 首页商品列表接口 post的formData形式
 */
export const goodsApi = (data) =>
	request({
		api: '/api/goodsPage',
		method:'post',
		formData:true,
		data
	});

/**
 * 首页商品列表接口 post的json形式
 */
export const goodsJsonApi = (data) =>
	request({
		api: '/api/goodsPage',
		method:'post',
		data
	});

/**
 * 首页公示公告列表接口 get
 */
export const newsApi = () =>
	request({
		api: "/api/listIndex",
	});
	
/**
 * 外部接口 get 不需要鉴权auth设置为false
 */
export const mapApi = () =>
	request({
		url:getApp().globalData?.baiduUrl, // 示例url
		api: "/api/listIndex",
		auth:false
	});	
	
```

# 在index.vue中使用 (vue3写法)

```vue
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
	</view>
</template>

<script setup>
import { goodsApi, newsApi } from '@/apis/index';
import { onShow } from '@dcloudio/uni-app';

/**
 * 获取商品
 */
const getGoods = async () => {
	const res = await goodsApi();
	console.log('res', res);
};

/**
 * 获取公示公告
 */
const getNews = async () => {
	const res = await newsApi();
	console.log('res', res);
};

onShow(() => {
	getGoods();
	getNews();
});
</script>


```

# 在index.vue中使用 (vue2写法)

```vue
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
	</view>
</template>

<script>
import { goodsApi, newsApi } from '@/apis/index';
export default {
	data(){
		return {
			
		}
	},
	methods:{
		/**
		 * 获取商品
		 */
		 async getGoods() {
			const res = await goodsApi();
			console.log('res', res);
		},
	},
	onShow() {
		this.getGoods()
	}
}

</script>
```

```json
"pages": [ 
	{
		"path": "pages/login/login",
		"style": {
			"navigationBarTitleText": "登录",
			"leftWindow": false,
			"topWindow": false
		},
		"isMenu": false  //不是菜单
	}, {
		"path": "pages/error/error",
		"style": {
			"navigationBarTitleText": "404"
		},
		"isMenu": false //不是菜单

	}, {
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页"
		},
		"icon": "index" //阿里巴巴矢量图复制svg代码，不要直接下载svg，否则无法修改颜色，放在static/svg下，修改文件名为icon的值，就可以使用了
	}, {
		"path": "pages/setting/role-management",
		"style": {
			"navigationBarTitleText": "角色管理"
		},
		"parentMenu": "系统管理", // 父菜单的名称
		"parentPath": "pages/setting", // 父菜单的路径（截取子菜单的路径部分就行，不可与子菜单路一样）
		"icon": "setting",
		"buttons": [{ // 页面的按钮，用来控制按钮权限，不需要按钮权限的话，去掉就行
			"label": "增加",
			"value": "role_add"
		}, {
			"label": "删除",
			"value": "role_del"
		}]

	},
	{
		"path": "pages/detail/detail",
		"style": {
			"navigationBarTitleText": "详情页"
		},
		"showMenu": false // 是否显示在左侧菜单栏
	},
	{
		"path": "pages/setting/user",
		"style": {
			"navigationBarTitleText": "人员管理"
		},
		"parentMenu": "系统管理",
		"parentPath": "pages/setting",
		"icon": "setting"
	},
	{
		"path" : "pages/weburl/weburl",
		"style" : 
		{
			"navigationBarTitleText" : "外部链接"
		},
		"webUrl":"http://www.baidu.com", // 外部链接的url
		"icon": "map"
	}
],

```
# 如果插件对您有一点帮助，请在码云给个star[码云地址](https://gitee.com/yongqiang0621/yq-uni-admin)，感谢支持！