vue相关
路径配置
1.根目录下的vite.config.js
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
cors: true,
open: true,
port: 7000,
proxy: {
'/api': {
target: 'http://localhost:7070',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
其中port为端口号，proxy为代理配置，rewrite为重写路径`
上面的 /api 为代理前缀，http://localhost:7070 为代理目标地址
2.根目录下的src/App.vue
是进入口，显示进入vue后的主页面
3.根目录下的src/router/index.js
是路由配置，可以配置路由，路由跳转等
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: () => import('../views/loginView.vue')
},
{
path: '/home',
component: () => import('../views/HomeView.vue'),
children: [
{
path: '/main',
name: 'main',
component: () => import('../views/ShouView.vue'),
meta: {
title: '首页'
}
}]
}
]
- 其中
path为路由路径，component为路由组件，children为子路由，name为路由名称，meta为路由元信息，title为路由标题 path为/时，表示根路径，重定向到/login路由component为() => import('../views/loginView.vue')时，表示引入loginView.vue组件`children为子路由metea为路由元信息，可以自定义属性，如title为路由标题
获取后端数据
1.使用页面
import {ref} from 'vue'
import {getAllCustomer} from '@/api/people.js'
const CustomerList = ref([])
const tableData = ref({
name: '',
state: '',
address: '',
country: '',
postalCode: '',
phone: '',
customerID: '',
city: '',
email: ''
})
const getArticleList = async () => {
const res = await getAllCustomer(tableData.value)
CustomerList.value = res.data.data
}
getArticleList()
ref为响应式数据，getAllCustomer为获取后端数据的方法，tableData为查询条件，getArticleList为获取后端数据的方法getArticleList为获取后端数据的方法，CustomerList为获取后端数据的结果getArticleList()为在进入页面前引用，相当于mounted钩子函数
2.api页面
import request from '@/utils/request'
// 获取所有客户信息
export const getAllCustomer = () => request.get('/selectCA')
// 品行考核
export const getCharacterByNameLikeAndOvs = (name, ovs) =>
request.get('/selectCharacterByNameLikeAndOvs?name=' + name + '&ovs=' + ovs)
request为封装的axios请求方法，getAllCustomer为获取所有客户信息的方法- 品行考核函数中,后端使用的为
getMapping
函数,具体为public Result selectCharacterByNameLikeAndOvs(String name, String ovs) - 获取所有客户信息的方法中，后端使用的为
RequestMapping
函数,具体方法类似public Result insertMlat(@RequestBody Mlat mlat)
3.封装axios请求方法
import axios from 'axios'
import {ElMessage} from 'element-plus'
// import router from '@/router'
const baseURL = '/api'
const instance = axios.create({
// 基础地址，超出时间
baseURL,
timeout: 10000
})
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 携带token
return config
},
(err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use(
(res) => {
// TODO 3.处理业务失败
// TODO 4.摘取核心响应数据
if (res.data.code === 1) {
return res
}
// 处理业务失败，给出错误提示，抛出错误
ElMessage.error(res.data.msg || '服务异常')
return Promise.reject(res.data)
},
(err) => {
// if (err.response?.status == 401) {
// router.push('/login')
// }
ElMessage.error(err.response.data.msg || '服务异常')
return Promise.reject(err)
}
)
export default instance
export {baseURL}
- 需要修改的部分
baseURL为后端地址(res.data.code === 1)中的 1 为处理业务成功代码，code = 1时才能在页面显示成功ElMessage.error(res.data.msg || '服务异常')为处理业务失败时，给出错误提示(err.response?.status == 401)为处理token失效时，跳转到登录页
CSS相关
1.全局样式
body {
margin: 0;
background-color: #f5f5f5;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
transform: translateX(-30px);
opacity: 0;
}
.fade-slide-leave-to {
transform: translateX(30px);
opacity: 0;
}
body为全局样式，设置背景颜色为#f5f5f5fade-slide为全局样式，设置动画效果为fade-slidefade-slide-leave-active为全局样式，设置动画效果为fade-slide-leave-active
2.主页样式
#home {
min-height: 100vh;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.el-main {
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.el-aside {
background-color: #ffffff;
height: 100vh;
}
/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 3px;
}
#home为主页样式，设置高度为100vh,高度为视口高度.el-main为主页样式，设置位置为绝对，设置左边距为200px，设置右边距为0，设置上边距为0，设置下边距为0
，设置滚动条为auto.el-aside为主页样式，设置背景颜色为#ffffff，设置高度为100vh::-webkit-scrollbar为全局样式，设置滚动条的宽度为8px::-webkit-scrollbar-thumb为全局样式，设置滚动条的背景颜色为#ffffff，设置滚动条的圆角为3pxposition: absolute;为全局样式，设置位置为绝对-moz-user-select等后三个为全局样式，设置鼠标选中为禁止