2024-01-09

项目中使用nodejs-express提供的接口

1.框架结构（部分）

image.png

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')