前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。

项目文件夹预览

前端项目的基本目录结构我将参照若依，但是具体的演示截图，我将使用我自己的项目。一般情况下我们只需要看下图中的四个部分就可以，下文依次进行。

依赖——package.json

此部分并无过多解释，重点集在依赖项的书写方式、版本对应关系，引擎打包工具等设定，基于ruoyi的二次开发的情况下，可以暂且不深入研究，直接套用即可。截取部分展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"scripts": {
  "dev": "vite",
  "build:prod": "vite build",
  "build:stage": "vite build --mode staging",
  "preview": "vite preview"
},
"repository": {
  "type": "git",
  "url": "https://gitee.com/y_project/RuoYi-Vue.git"
},
"dependencies": {
  "@element-plus/icons-vue": "2.3.1",
  "@vueup/vue-quill": "1.2.0",
  "@vueuse/core": "10.6.1",
  "axios": "0.27.2",
  "clipboard": "^2.0.11",
  "moment": "^2.30.1",
  "nprogress": "0.2.0",
  "pinia": "2.1.7",
  "vue": "3.4.0",
  "vue-cropper": "1.1.1",
  "vue-router": "4.2.5",
},

项目配置

vite.config.js

目前需要注意的有两个地方：

  • 前端服务端口: port
  • 后端转发端口: ‘/dev-api’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vite 相关配置
server: {
  port: 80,
  host: true,
  open: true,
  proxy: {
    // https://cn.vitejs.dev/config/#server-proxy
    '/dev-api': {
      target: 'http://localhost:8080',
      // target: 'https://api.wzs.pub/mock/13',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/dev-api/, '')
    }
  }
},

前端的这些页面也需要一个（IP+端口）去访问（浏览器访问这个端口80看到的就是前端网站咯）

后端转发端口就是后端服务器所在的位置，此处是一个类似于Key：Value的形式，项目内部可以直接使用。

baseURL: process.env.VUE_APP_BASE_API

我们一直在说前端转发到后端，转发的地址，就是上一段我们要写明的后端的（IP+端口），本地开发我们只需要关注端口不要冲突（spring boot自带的tomcat服务器，端口默认：8080，也可更改）

在ruoyi-ui/src/api文件夹下全是前端想要找后端办事的方法，在这些方法里面我们写的请求路径都是不完整的，例如登录方法：

ruoyi-ui/src/api/login.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false,
      repeatSubmit: false
    },
    method: 'post',
    data: data
  })
}

这个request经过拦截器修修改改，其中就包括把baseURL添加到方法的url前面。最终被转发的路径就是：baseURL + /login

ruoyi-ui/src/utils/request.js

1
2
3
4
5
6
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

前端向后端发送的请求都要经过axios这个东西（类也好、函数也罢，反正是个工具），这个工具在request.js文件中写了两个方法，对于所有要发出去的请求，拦下来先检查，添加完整路径、添加信息，再放行转发；对于后端来的响应，也进行检查，检查通过再给到具体的页面。

这里面还有一个东西；process，算是nodejs的一个关键字，用来管理一些全局的常量。对于常用的公共变量进行定义，在此处着重体现就是预定义后端的套接字（IP+端口）

水果篮子——public/index.html

明确一个点，Vue文件都是些“组件”，组件都得放入一个筐里才能显示，而这个筐就是public/index.html，特别注意这个html文件中的id=“app”组件，Vue3的项目通过更换不断替换这个模块，或者说，将不同的Vue页面放到这个组件上，实现多页面的展示。

1
2
3
4
5
6
7
8
9
10
11
<body>
  <div id="app">
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

各色水果（以及水果包装袋）

  • api部分已经解释过了，此次不展开。反正就是一些找后端的函数罢了。
  • router，路由，现在需要把哪个水果放进筐里进行展示，就是它决定的。
  • utils中主要就是request.js，关于拦截器的一些设置。前文有解释，暂且足够了。
  • views，各色水果 == 各个不同的页面。
  • App.vue，暂且可以理解为水果包装袋，router的结果先装进这个袋子里。
  • main.js，准备一些装饰品（函数工具等）放入水果篮（index.html），把包装好的App.vue挂载到html的app组件上。

前端整体结构