项目中使用nodejs-express提供的接口
1.框架结构（部分）
2.框架组成
2-1 api
2-1-1 base.js
/***
- 存放所有网络请求地址
*/
const base = {
baseUrl:"http://localhost:3000", //公共地址
login:"/api/login", //登录地址
router:"/api/router", //用户权限地址
line:"/api/line", //图表line地址
projectInfo:"/api/project/all", //项目信息请求
search:"/api/project/search", //模糊搜索查询
total:"/api/project/total", //获取数据总条数
addProject:"/api/project/add", //添加隧道
delProject:"/api/project/del", //删除项目信息
preUpdateProject:"/api/project/update/pre", //预更新项目信息
updateProject:"/api/project/update/", //更新项目信息
tunnelList:"/api/tunnel/list", //隧道设计信息-tree-一级
tunnelListChild:"/api/tunnel/list/child", //隧道设计信息-tree-二级
tunnelContent:"/api/tunnel/content", //隧道设计信息-内容
uploadTunnelContent:"/api/tunnel/content/url", //隧道设计信息-上传
pdfPreview:"/api/tunnel/pdf", //PDF预览
userList:"/api/user/list", //用户列表
userSearch:"/api/user/search", //用户搜索
userAdd:"/api/user/add", //用户添加
userDel:"/api/user/del", //用户删除
userPreview:"/api/user/preview", //用户预更新
userUpdate:"/api/user/update", //用户更新
}
export default base
2-1-2 index.js
import axios from "../utils/request.js";
import base from "./base.js";
const api = {
/**
* 登录
/
getLogin(params){
// console.log(params);
return axios.post(base.baseUrl + base.login,params)
},
/*
* 用户权限
/
getRouter(params){
return axios.get(base.baseUrl + base.router,{
params
})
},
/**
* 获取图表line数据
/
getLine(params){
return axios.get(base.baseUrl + base.line,{
params
})
},
/**
* 读取项目信息
/
projectInfo(params){
return axios.get(base.baseUrl + base.projectInfo,{
params
})
},
/*
* 模糊搜索
/
getSearch(params){
return axios.get(base.baseUrl + base.search,{
params
})
},
/*
* 获取数据总条数
/
getTotal(){
return axios.get(base.baseUrl + base.total)
},
/*
* 添加项目信息
/
getAddProject(params){
return axios.get(base.baseUrl + base.addProject,{
params
})
},
/*
* 删除项目信息
/
getDelProject(params){
return axios.get(base.baseUrl + base.delProject,{
params
})
},
/*
* 预更新项目信息
/
getRreUpdateProject(params){
return axios.get(base.baseUrl + base.preUpdateProject,{
params
})
},
/*
* 更新项目信息
/
getUpdateProject(id,params){
return axios.put(base.baseUrl + base.updateProject + id,params)
},
/*
* 隧道设计信息 tree 一级
/
getTunnelList(){
return axios.get(base.baseUrl + base.tunnelList)
},
/*
* 隧道设计信息 tree 二级
/
getTunnelListChild(params){
return axios.get(base.baseUrl + base.tunnelListChild,{
params
})
},
/*
* 隧道设计信息 内容
/
getTunnelContent(params){
return axios.get(base.baseUrl + base.tunnelContent,{
params
})
},
/*
* 隧道设计信息 上传
/
getUploadTunnelContent(params){
return axios.get(base.baseUrl + base.uploadTunnelContent,{
params
})
},
/*
* PDF预览
*/
getPdfPreview(params){
return axios.get(base.baseUrl + base.pdfPreview,{
params
})
},
/**
* 用户列表
*/
getUserList(){
return axios.get(base.baseUrl + base.userList)
},
/**
* 用户搜索
*/
getUserSearch(params){
return axios.get(base.baseUrl + base.userSearch,{
params
})
},
/**
* 用户添加
*/
getUserAdd(params){
return axios.get(base.baseUrl + base.userAdd,{
params
})
},
/**
* 用户删除
*/
getUserDel(params){
return axios.get(base.baseUrl + base.userDel,{
params
})
},
/**
* 用户预更新
*/
getUserPreview(params){
return axios.get(base.baseUrl + base.userPreview,{
params
})
},
/**
* 用户更新
*/
getUserUpdate(params){
return axios.get(base.baseUrl + base.userUpdate,{
params
})
}
}
export default api
2-2 router
2-2-1 dynamicRoute_SM.js
const manageSM = {
path: '/system',
name: 'system',
component: () => import("../views/SystemManage/index.vue"),
meta: {
requiresAuth: true,
key: "系统信息管理"
}
}
export default manageSM
2-2-2 dynamicRoute.js
const manage = {
path: '/work',
name: 'work',
component: () => import("../views/WorkManage/index.vue"),
meta: {
requiresAuth: true,
key: "工作监督管理"
}
}
export default manage
2-2-3 index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView/index.vue'
import layout from '../views/layout.vue'
import LoginInfo from "../views/LoginInfo/index.vue"
import { useLoginStore } from '@/stores/loginStore'
import { useMenuStore } from '@/stores/menuStore.js'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "layout",
component:layout,
meta:{
requiresAuth:true
},
children:[
{
path: '/',
name: 'home',
component: HomeView,
meta:{
requiresAuth:true,
key:"首页"
}
},
{
path: '/project',
name: 'project',
component: () =>import("../views/ProjectInfo/index.vue"),
meta:{
requiresAuth:true,
key:"项目基础信息"
}
},
{
path: '/tunnel',
name: 'tunnel',
component: () =>import("../views/TunnelInfo/index.vue"),
meta:{
requiresAuth:true,
key:"隧道设计信息"
}
},
{
path: '/build',
name: 'build',
component: () =>import("../views/BuildManage/index.vue"),
meta:{
requiresAuth:true,
key:"施工监控检测"
}
},
{
path: '/geological',
name: 'geological',
component: () =>import("../views/GeologicalInfo/index.vue"),
meta:{
requiresAuth:true,
key:"超前地址预报"
}
},
{
path: '/ucenter',
name: 'ucenter',
component: () =>import("../views/UserCenter/index.vue"),
meta:{
requiresAuth:true,
key:"个人中心"
}
},
{
path: '/plan',
name: 'planTest',
component: () =>import("../views/BuildManage/PlanTest/index.vue"),
meta:{
requiresAuth:true,
key:"监测计划"
}
},
{
path: '/section',
name: 'section',
component: () =>import("../views/BuildManage/SectionTest/index.vue"),
meta:{
requiresAuth:true,
key:"切面检测"
}
}
]
},
{
path:"/login",
name:"login",
component:LoginInfo
},
{
path:"/pdf/:id",
name:"pdf",
component:() =>import("../views/TunnelInfo/PDFViewer/index.vue")
},
{
//404路径匹配规则 没有找到对应的路径地址
path:"/:pathMatch(.*)*",
name:"notFound",
component:() => import("../views/NotFound/index.vue")
}
]
})
/***
- 路由权限
*/
router.beforeEach((to,from,next) =>{
if (to.meta.requiresAuth) {
// 需要验证登录
const loginStore = useLoginStore()
if (!loginStore.token) {
next({
path:"/login"
})
}else{
next()
}
}else{
next()
}
})
router.afterEach((to,from) =>{
// 存储路径信息
localStorage.setItem("active",to.path);
if (to.meta.key) {
const menuStore = useMenuStore()
menuStore.breadcrumb = to.meta.key
}
})
export default router
2-3 utils
2-3-1 request.js
import axios from "axios"
import qs from "querystring"
const errorHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义错误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器请求拒绝执行");
break;
case 404:
console.log("请检查网路请求地址");
break;
case 500:
console.log("服务器发生意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
/**
- 创建Axios对象
*/
const instance = axios.create({
timeout:5000
})
instance.interceptors.request.use(
config =>{
if(config.method === 'post' || config.method === "put"){
config.data = qs.stringify(config.data)
}
return config
},
error => Promise.reject(error)
)
instance.interceptors.response.use(
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error =>{
const { response } = error;
if(response){
errorHandle(response.status,response.info)
}else{
console.log("网络请求被中断了");
}
}
)
export default instance
2-3-2 utils.js
export function dateFormater(value) {
let date = new Date(value)
let year = date.getFullYear()
let month = date.getMonth() + 1 < 10 ? 0${date.getMonth() + 1} : date.getMonth() + 1
let day = date.getDate() < 10 ? 0${date.getDate()} : date.getDate()
return ${year}-${month}-${day}
}
3.main.js配置
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import piniaPersist from 'pinia-plugin-persist'
import elementIcon from './plugins/icons'
import echarts from './plugins/echarts'
import i18n from './locales/i18n.js'
import ElementPlus from 'element-plus'
import zh from "element-plus/dist/locale/zh-cn.mjs"
import en from "element-plus/dist/locale/en.mjs"
import '@/assets/init.css'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(echarts)
app.use(pinia)
app.use(router)
app.use(elementIcon)
app.use(i18n)
app.use(ElementPlus,{
locale:localStorage.getItem("lang") === 'zh' ? zh : en
})
app.mount('#app')
