xiaoxiuqing_bo
/
RoleManage_Sys
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'基础配置'

Browse Source
main
fwb 2 months ago
parent 0baa3620c1
commit 14e03415f6
10 changed files with 188 additions and 203 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 124
      mock/user.ts
  2. 14
      src/App.vue
  3. 20
      src/api/user/index.ts
  4. 46
      src/api/user/type.ts
  5. 12
      src/components/Pagination/index.vue
  6. 2
      src/components/SvgIcon/index.vue
  7. 21
      src/components/index.ts
  8. 17
      src/main.ts
  9. 68
      src/utils/request.ts
  10. 59
      vite.config.ts

124
mock/user.ts
Unescape View File

@ -1,70 +1,70 @@
//用户信息数据 //虚假的mock用户信息数据，用于测试
//createuserList:次函数执行会返回一个数组,数组里面包含两个用户信息 //createuserList:次函数执行会返回一个数组,数组里面包含两个用户信息
function createUserList() { function createUserList() {
return [ return [
{ {
userId: 1, userId: 1,
avatar: avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'admin', username: 'admin',
password: '111111', password: '111111',
desc: '平台管理员', desc: '平台管理员',
roles: ['平台管理员'], roles: ['平台管理员'],
buttons: ['cuser.detail'], buttons: ['cuser.detail'],
routes: ['home'], routes: ['home'],
token: 'Admin Token', token: 'Admin Token',
}, },
{ {
userId: 2, userId: 2,
avatar: avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'system', username: 'system',
password: '111111', password: '111111',
desc: '系统管理员', desc: '系统管理员',
roles: ['系统管理员'], roles: ['系统管理员'],
buttons: ['cuser.detail', 'cuser.user'], buttons: ['cuser.detail', 'cuser.user'],
routes: ['home'], routes: ['home'],
token: 'System Token', token: 'System Token',
}, },
] ]
} }
export default [ export default [
// 用户登录接口 // 用户登录接口
{ {
url: '/api/user/login',//请求地址 url: '/api/user/login', //请求地址
method: 'post',//请求方式 method: 'post', //请求方式
response: ({ body }) => { response: ({ body }) => {
//获取请求体携带过来的用户名与密码 //获取请求体携带过来的用户名与密码
const { username, password } = body; const { username, password } = body
//调用获取用户信息函数,用于判断是否有此用户 //调用获取用户信息函数,用于判断是否有此用户
const checkUser = createUserList().find( const checkUser = createUserList().find(
(item) => item.username === username && item.password === password, (item) => item.username === username && item.password === password,
) )
//没有用户返回失败信息 //没有用户返回失败信息
if (!checkUser) { if (!checkUser) {
return { code: 201, data: { message: '账号或者密码不正确' } } return { code: 201, data: { message: '账号或者密码不正确' } }
} }
//如果有返回成功信息 //如果有返回成功信息
const { token } = checkUser const { token } = checkUser
return { code: 200, data: { token } } return { code: 200, data: { token } }
},
}, },
// 获取用户信息 },
{ // 获取用户信息
url: '/api/user/info', {
method: 'get', url: '/api/user/info',
response: (request) => { method: 'get',
//获取请求头携带token response: (request) => {
const token = request.headers.token; //获取请求头携带token
//查看用户信息是否包含有次token用户 const token = request.headers.token
const checkUser = createUserList().find((item) => item.token === token) //查看用户信息是否包含有次token用户
//没有返回失败的信息 const checkUser = createUserList().find((item) => item.token === token)
if (!checkUser) { //没有返回失败的信息
return { code: 201, data: { message: '获取用户信息失败' } } if (!checkUser) {
} return { code: 201, data: { message: '获取用户信息失败' } }
//如果有返回成功信息 }
return { code: 200, data: {checkUser} } //如果有返回成功信息
}, return { code: 200, data: { checkUser } }
}, },
},
] ]

14
src/App.vue
Unescape View File

@ -4,14 +4,12 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import request from "@/utils/request"; import request from '@/utils/request'
import {onMounted} from 'vue'; import { onMounted } from 'vue'
import {reqLogin} from "@/api/user"; import { reqLogin } from '@/api/user'
onMounted(()=>{ onMounted(() => {
reqLogin({username:'admin',password:'111111'}) reqLogin({ username: 'admin', password: '111111' })
}) })
</script> </script>
<style scoped> <style scoped></style>
</style>

20
src/api/user/index.ts
Unescape View File

@ -1,19 +1,17 @@
//统一管理项目相关信息 //统一管理项目相关信息
import request from "@/utils/request"; import request from '@/utils/request'
import type { import type { loginForm, loginResponseDate, userReponseData } from './type'
loginForm,
loginResponseDate,
userReponseData,
} from './type'
//统一管理接口 //统一管理接口
enum API { enum API {
LOGIN_URL = '/user/login', LOGIN_URL = '/user/login',
USERINFO_URL = '/user/info', USERINFO_URL = '/user/info',
// LOGOUT_URL = '/admin/acl/index/logout', // LOGOUT_URL = '/admin/acl/index/logout',
} }
//登录接口 //登录接口
export const reqLogin = (data: loginForm) => request.post<any,loginResponseDate>(API.LOGIN_URL, data) export const reqLogin = (data: loginForm) =>
request.post<any, loginResponseDate>(API.LOGIN_URL, data)
//获取用户信息 //获取用户信息
export const reqUserInfo = () =>request.get<any,userReponseData>(API.USERINFO_URL) export const reqUserInfo = () =>
request.get<any, userReponseData>(API.USERINFO_URL)
//退出登录 //退出登录
// export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL) // export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

46
src/api/user/type.ts
Unescape View File

@ -1,33 +1,33 @@
//登录接口需要携带参数ts类型 //登录接口需要携带参数ts类型
export interface loginForm{ export interface loginForm {
username:string, username: string
password:string password: string
} }
interface dataType{ interface dataType {
token:string token: string
} }
//登录接口返回数据类型 //登录接口返回数据类型
export interface loginResponseDate{ export interface loginResponseDate {
code:number, code: number
date:dataType date: dataType
} }
//定义服务器返回用户信息相关数据类型 //定义服务器返回用户信息相关数据类型
interface userInfo{ interface userInfo {
userId:number, userId: number
avatar:string, avatar: string
username:string, username: string
password:string, password: string
desc:string, desc: string
roles:string[], roles: string[]
buttons:string[], buttons: string[]
routes:string[], routes: string[]
token:string token: string
} }
interface user{ interface user {
checkUser:userInfo checkUser: userInfo
} }
export interface userReponseData{ export interface userReponseData {
code:number, code: number
date:user date: user
} }

12
src/components/Pagination/index.vue
Unescape View File

@ -1,11 +1,5 @@
<template> <template></template>
</template> <script setup></script>
<script setup> <style scoped></style>
</script>
<style scoped>
</style>

2
src/components/SvgIcon/index.vue
Unescape View File

@ -9,7 +9,7 @@
</svg> </svg>
</div> </div>
</template> </template>
<script setup > <script setup>
//接受父组件传递过来的参数 //接受父组件传递过来的参数
defineProps({ defineProps({
//xlink:href属性值的前缀 //xlink:href属性值的前缀

21
src/components/index.ts
Unescape View File

@ -1,17 +1,16 @@
//引入项目中全部的全局组件 //引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue' import SvgIcon from './SvgIcon/index.vue'
import Pagination from'./Pagination/index.vue' import Pagination from './Pagination/index.vue'
//全局对象 //全局对象
const allGloablComponent={SvgIcon,Pagination }; const allGloablComponent = { SvgIcon, Pagination }
//对外暴露插件对象 //对外暴露插件对象
export default { export default {
//务必叫做insta1l方法 //务必叫做insta1l方法
install(app) { install(app) {
//注册项目全部的全局组件 //注册项目全部的全局组件
Object.keys(allGloablComponent).forEach(key => { Object.keys(allGloablComponent).forEach((key) => {
//注册为全局组件 //注册为全局组件
app.component(key, allGloablComponent[key])
app.component(key, allGloablComponent[key]); })
}); },
}
} }

17
src/main.ts
Unescape View File

@ -18,16 +18,15 @@ app.use(ElementPlus, {
// console.log(import.meta.env, '===========') // console.log(import.meta.env, '===========')
//测试axios数据 //测试axios数据
import axios from "axios"; import axios from 'axios'
axios({ axios({
url:'/api/user/login', url: '/api/user/login',
method:'post', method: 'post',
data:{ data: {
username:'admin', username: 'admin',
password:'111111' password: '111111',
} },
}) })
//svg插件需要配置代码 //svg插件需要配置代码
import 'virtual:svg-icons-register' import 'virtual:svg-icons-register'

68
src/utils/request.ts
Unescape View File

@ -1,46 +1,48 @@
//进行axios二次封装：使用请求与响应拦截器 //进行axios二次封装：使用请求与响应拦截器
//1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数) //1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
// 2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误) // 2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
import axios from "axios"; import axios from 'axios'
import { ElMessage } from "element-plus"; import { ElMessage } from 'element-plus'
//创建axios实例 //创建axios实例
let request = axios.create({ let request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000 timeout: 5000,
}) })
//请求拦截器 //请求拦截器
request.interceptors.request.use(config => { request.interceptors.request.use((config) => {
//config配置对象，headers属性请求头，经常给服务器端携带公共参数 //config配置对象，headers属性请求头，经常给服务器端携带公共参数
return config; return config
}); })
//响应拦截器 //响应拦截器
request.interceptors.response.use((response) => { request.interceptors.response.use(
return response.data; (response) => {
}, (error) => { return response.data
},
(error) => {
//处理网络错误 //处理网络错误
let msg = ''; let msg = ''
let status = error.response.status; let status = error.response.status
switch (status) { switch (status) {
case 401: case 401:
msg = "token过期"; msg = 'token过期'
break; break
case 403: case 403:
msg = '无权访问'; msg = '无权访问'
break; break
case 404: case 404:
msg = "请求地址错误"; msg = '请求地址错误'
break; break
case 500: case 500:
msg = "服务器出现问题"; msg = '服务器出现问题'
break; break
default: default:
msg = "无网络"; msg = '无网络'
} }
ElMessage({ ElMessage({
type: 'error', type: 'error',
message: msg message: msg,
}) })
return Promise.reject(error); return Promise.reject(error)
}); },
export default request; )
export default request

59
vite.config.ts
Unescape View File

@ -5,40 +5,35 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock' import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import path from 'path' import path from 'path'
export default defineConfig(({command})=>{ export default defineConfig(({ command }) => {
return{ return {
plugins: [
vue(),
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
viteMockServe({
enable: command === 'serve', //保证开发阶段可以使用mock接口
}),
],
resolve: {
plugins: [ alias: {
vue(), '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
createSvgIconsPlugin({ },
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
viteMockServe({
enable: command === 'serve',//保证开发阶段可以使用mock接口
}),
],
resolve: {
alias: {
'@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
}, },
},
//scss全局变量的配置 //scss全局变量的配置
css: { css: {
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
javascriptEnabled: true, javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";', additionalData: '@import "./src/styles/variable.scss";',
},
}, },
}, },
}, }
} })
}
)

Write Preview
Loading…
Cancel
Save