0
0

SpringBoot + Vue 项目创建详细步骤

一、本地开发环境

  1. 后端开发软件：IntelliJ IDEA 2022.1.3
  2. 后端框架：SpringBoot
  3. 前端框架：@vue/cli 5.0.8 + Element UI
  4. 后端语言：Java
  5. jdk版本：1.8.0_371
  6. 数据库：Oracle 19c
  7. 数据库操作：PLSQL Developer 15 (64 bit)
  8. 接口测试工具：Postman

二、后端创建

1、New Project 开始创建新项目

2、配置项目的名称、存储位置、语言、jdk等信息

3、选择对应的依赖，少选多选都没事，创建完了可以在配置文件里面加，选完了就点击 create

4、这是加载完成的情况

6、在pom文件里改一下 java 的版本，为了每个模块的版本不发生冲突，统一改成了适配 jdk1.8 的情况 （有的版本冲突是启动不了的）

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.rabbitsystem</groupId>
  12.     <artifactId>carrot</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>rabbit-system</name>
  15.     <description>rabbit-system</description>
  16.     <url/>
  17.     <licenses>
  18.         <license/>
  19.     </licenses>
  20.     <developers>
  21.         <developer/>
  22.     </developers>
  23.     <scm>
  24.         <connection/>
  25.         <developerConnection/>
  26.         <tag/>
  27.         <url/>
  28.     </scm>
  29.     <properties>
  30.         <java.version>1.8</java.version> <!-- 保持 JDK 1.8 -->
  31.     </properties>
  32.     <dependencies>
  33.         <dependency>
  34.             <groupId>org.springframework.boot</groupId>
  35.             <artifactId>spring-boot-starter-jdbc</artifactId>
  36.         </dependency>
  37.         <dependency>
  38.             <groupId>org.springframework.boot</groupId>
  39.             <artifactId>spring-boot-starter-web</artifactId>
  40.         </dependency>
  41.         <dependency>
  42.             <groupId>org.mybatis.spring.boot</groupId>
  43.             <artifactId>mybatis-spring-boot-starter</artifactId>
  44.             <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
  45.         </dependency>
  47.         <dependency>
  48.             <groupId>com.oracle.database.jdbc</groupId>
  49.             <artifactId>ojdbc8</artifactId> <!-- 使用适合 JDK 1.8 的 ojdbc8 -->
  50.             <scope>runtime</scope>
  51.         </dependency>
  52.         <dependency>
  53.             <groupId>org.projectlombok</groupId>
  54.             <artifactId>lombok</artifactId>
  55.             <optional>true</optional>
  56.         </dependency>
  57.         <dependency>
  58.             <groupId>org.springframework.boot</groupId>
  59.             <artifactId>spring-boot-starter-test</artifactId>
  60.             <scope>test</scope>
  61.         </dependency>
  62.         <dependency>
  63.             <groupId>org.mybatis.spring.boot</groupId>
  64.             <artifactId>mybatis-spring-boot-starter-test</artifactId>
  65.             <version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
  66.             <scope>test</scope>
  67.         </dependency>
  68.         <dependency>
  69.             <groupId>org.apache.commons</groupId>
  70.             <artifactId>commons-lang3</artifactId>
  71.             <version>3.12.0</version>
  72.         </dependency>
  73.         <dependency>
  74.             <groupId>log4j</groupId>
  75.             <artifactId>log4j</artifactId>
  76.             <version>1.2.16</version>
  77.         </dependency>
  78.     </dependencies>
  80.     <build>
  81.         <plugins>
  82.             <plugin>
  83.                 <groupId>org.springframework.boot</groupId>
  84.                 <artifactId>spring-boot-maven-plugin</artifactId>
  85.                 <version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
  86.                 <configuration>
  87.                     <excludes>
  88.                         <exclude>
  89.                             <groupId>org.projectlombok</groupId>
  90.                             <artifactId>lombok</artifactId>
  91.                         </exclude>
  92.                     </excludes>
  93.                 </configuration>
  94.             </plugin>
  95.         </plugins>
  96.     </build>
  98. </project>

7、把 application.properties 文件的后缀改成 yml，并进行项目配置

  1. ## 指定web容器访问端口号
  2. rabbit:
  3.   name: 兔子系统
  4.   version: v-1.0
  5. ## web容器端口号
  6. server:
  7.   port: 8080
  8. ## 配置数据库连接
  9. spring:
  10.   datasource:
  11.     driver-class-name: oracle.jdbc.OracleDriver
  12.     url: jdbc:oracle:thin:@//localhost:1521/ORCL
  13.     username: 用户名
  14.     password: 密码
  15. ## 配置mybatis中mapper.xml文件扫描
  16. mybatis:
  17.   type-aliases-package: com.rabbitSystem.carrot.pojo.sel.*
  18.   mapper-locations: classpath:mapper/*.xml   # mapper.xml文件映射

8、在数据库建一个用户表（这里是拿来示范的，建完表可以加一些测试数据）

  1. -- 创建用户表
  2. CREATE TABLE CUSTOMER (
  3.   ID VARCHAR2(32) NOT NULL,
  4.   ACCOUNT VARCHAR2(9) NOT NULL,
  5.   ROLE VARCHAR2(1) DEFAULT '2' NOT NULL,
  6.   HEAD_PROTRAIT_NAME VARCHAR2(200) NOT NULL,
  7.   HEAD_PROTRAIT_FILE VARCHAR2(200) NOT NULL,
  8.   NICK_NAME VARCHAR2(32) NOT NULL,
  9.   PASSWORD VARCHAR2(64) NOT NULL,
  10.   SALT VARCHAR2(32) NOT NULL,
  11.   BIRTHDAY Date,
  12.   AGE VARCHAR2(3),
  13.   SEX VARCHAR(1),
  14.   SAFETY1_QUESTION VARCHAR2(64)，
  15.   SAFETY2_QUESTION VARCHAR2(64)，
  16.   SAFETY3_QUESTION VARCHAR2(64)，
  17.   SAFETY1_ANSWER VARCHAR2(32)，
  18.   SAFETY2_ANSWER VARCHAR2(32)，
  19.   SAFETY3_ANSWER VARCHAR2(32)，
  20.   CREATE_TIME Date DEFAULT SYSDATE NOT NULL, 
  21.   UPDATE_TIME Date DEFAULT SYSDATE NOT NULL,
  22.   IS_DELETE varchar(1) DEFAULT 'N' NOT NULL
  23. );
  24. -- 各个字段的注释
  25. COMMENT ON TABLE CUSTOMER IS '用户表';
  26. COMMENT ON COLUMN CUSTOMER.ID IS '用户表ID';
  27. COMMENT ON COLUMN CUSTOMER.ACCOUNT IS '账号';
  28. COMMENT ON COLUMN CUSTOMER.ROLE IS '角色 0 超级管理员；1 管理员；2 普通用户';
  29. COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_NAME IS '头像图片名字';
  30. COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_FILE IS '头像二进制文件';
  31. COMMENT ON COLUMN CUSTOMER.NICK_NAME IS '昵称';
  32. COMMENT ON COLUMN CUSTOMER.PASSWORD IS '密码';
  33. COMMENT ON COLUMN CUSTOMER.SALT IS '盐加密';
  34. COMMENT ON COLUMN CUSTOMER.BIRTHDAY IS '出生日期';
  35. COMMENT ON COLUMN CUSTOMER.AGE IS '年龄';
  36. COMMENT ON COLUMN CUSTOMER.SEX IS '性别 1 女；0 男；2 保密';
  37. COMMENT ON COLUMN CUSTOMER.SAFETY1_QUESTION IS '安全问题1id';
  38. COMMENT ON COLUMN CUSTOMER.SAFETY2_QUESTION IS '安全问题2id';
  39. COMMENT ON COLUMN CUSTOMER.SAFETY3_QUESTION IS '安全问题3id';
  40. COMMENT ON COLUMN CUSTOMER.SAFETY1_ANSWER IS '安全问题1答案';
  41. COMMENT ON COLUMN CUSTOMER.SAFETY2_ANSWER IS '安全问题2答案';
  42. COMMENT ON COLUMN CUSTOMER.SAFETY3_ANSWER IS '安全问题3答案';
  43. COMMENT ON COLUMN CUSTOMER.CREATE_TIME IS '创建时间';
  44. COMMENT ON COLUMN CUSTOMER.UPDATE_TIME IS '更新时间';
  45. COMMENT ON COLUMN CUSTOMER.IS_DELETE IS '是否删除 Y 已删除；N 未删除';

9、连接数据库（我这里是Oracle） 这里面的sid可以在数据库里面查 这样就可以直接在 IDEA 里面看到Oracle数据库了

10、在运行类的同级目录下创建四个包：controller（控制层）、service（业务层）、mapper（映射层/持久层）、pojo（模型层）、resources 下面的数据访问层及对应的类（工具包里面的AjaxResult工具类下面会提供）

11、快捷生成实体类，右击数据库的表

  1.     选择生成的包下就可以了

11、使用@Data注解代替get/set方法（下面的那些就可以删掉了），我这里是单独建了一个查询用的类，因为有时候联查的时候字段是不止一个表的，所以之后查用户信息就直接用这个类，缺什么字段就补什么，不会乱

13、控制层

  1.     控制层会用到一个返回ajax类型数据的工具类，我提供在下面![](https://i-blog.csdnimg.cn/direct/025473b0d79d4a35a47a8784df06dbe0.png)
  1. package com.rabbitSystem.carrot.common.core;
  3. import com.rabbitSystem.carrot.common.utils.StringUtils;
  5. import java.util.HashMap;
  7. /**
  8.  * 操作消息提醒
  9.  *
  10.  * @author ruoyi
  11.  */
  12. public class AjaxResult extends HashMap<String, Object> {
  13.     private static final long serialVersionUID = 1L;
  15.     /**
  16.      * 状态码
  17.      */
  18.     public static final String CODE_TAG = "code";
  20.     /**
  21.      * 返回内容
  22.      */
  23.     public static final String MSG_TAG = "msg";
  25.     /**
  26.      * 数据对象
  27.      */
  28.     public static final String DATA_TAG = "data";
  30.     /**
  31.      * 数据总数量
  32.      */
  33.     public static final String DATA_COUNT = "count";
  35.     /**
  36.      * 状态类型
  37.      */
  38.     public enum Type {
  39.         /**
  40.          * 成功
  41.          */
  42.         SUCCESS(200),
  43.         /**
  44.          * 警告
  45.          */
  46.         WARN(301),
  47.         /**
  48.          * 校验失败
  49.          */
  50.         FAILED(-1),
  51.         /**
  52.          * 错误
  53.          */
  54.         ERROR(500);
  55.         private final int value;
  57.         Type(int value) {
  58.             this.value = value;
  59.         }
  61.         public int value() {
  62.             return this.value;
  63.         }
  64.     }
  66.     /**
  67.      * 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。
  68.      */
  69.     public AjaxResult() {
  70.     }
  72.     /**
  73.      * 初始化一个新创建的 AjaxResult 对象
  74.      *
  75.      * @param type 状态类型
  76.      * @param msg  返回内容
  77.      */
  78.     public AjaxResult(Type type, String msg) {
  79.         super.put(CODE_TAG, type.value);
  80.         super.put(MSG_TAG, msg);
  81.     }
  83.     /**
  84.      * 初始化一个新创建的 AjaxResult 对象
  85.      *
  86.      * @param type 状态类型
  87.      * @param msg  返回内容
  88.      * @param data 数据对象
  89.      */
  90.     public AjaxResult(Type type, String msg, Object data) {
  91.         super.put(CODE_TAG, type.value);
  92.         super.put(MSG_TAG, msg);
  93.         if (StringUtils.isNotNull(data)) {
  94.             super.put(DATA_TAG, data);
  95.         }
  96.     }
  98.     /**
  99.      * 初始化一个新创建的 AjaxResult 对象
  100.      * @param type  状态类型
  101.      * @param msg   返回内容
  102.      * @param data  数据对象
  103.      * @param count 数据总数量
  104.      */
  105.     public AjaxResult(Type type, String msg, Object data,Integer count) {
  106.         super.put(CODE_TAG, type.value);
  107.         super.put(MSG_TAG, msg);
  108.         if (StringUtils.isNotNull(data)) {
  109.             super.put(DATA_TAG, data);
  110.         }
  111.         if(count!=null){
  112.             super.put(DATA_COUNT,count);
  113.         }
  114.     }
  116.     /**
  117.      * 方便链式调用
  118.      *
  119.      * @param key   键
  120.      * @param value 值
  121.      * @return 数据对象
  122.      */
  123.     @Override
  124.     public AjaxResult put(String key, Object value) {
  125.         super.put(key, value);
  126.         return this;
  127.     }
  129.     /**
  130.      * 返回成功消息
  131.      *
  132.      * @return 成功消息
  133.      */
  134.     public static AjaxResult success() {
  135.         return AjaxResult.success("操作成功");
  136.     }
  138.     /**
  139.      * 返回成功数据
  140.      *
  141.      * @return 成功消息
  142.      */
  143.     public static AjaxResult success(Object data) {
  144.         return AjaxResult.success("操作成功", data);
  145.     }
  147.     /**
  148.      * 返回成功消息
  149.      *
  150.      * @param msg 返回内容
  151.      * @return 成功消息
  152.      */
  153.     public static AjaxResult success(String msg) {
  154.         return AjaxResult.success(msg, null);
  155.     }
  157.     /**
  158.      * 返回成功消息
  159.      *
  160.      * @param msg  返回内容
  161.      * @param data 数据对象
  162.      * @return 成功消息
  163.      */
  164.     public static AjaxResult success(String msg, Object data) {
  165.         return new AjaxResult(Type.SUCCESS, msg, data);
  166.     }
  168.     /**
  169.      * 返回警告消息
  170.      *
  171.      * @param msg 返回内容
  172.      * @return 警告消息
  173.      */
  174.     public static AjaxResult warn(String msg) {
  175.         return AjaxResult.warn(msg, null);
  176.     }
  178.     /**
  179.      * 返回警告消息
  180.      *
  181.      * @param msg  返回内容
  182.      * @param data 数据对象
  183.      * @return 警告消息
  184.      */
  185.     public static AjaxResult warn(String msg, Object data) {
  186.         return new AjaxResult(Type.WARN, msg, data);
  187.     }
  189.     /**
  190.      * 返回错误消息
  191.      *
  192.      * @return
  193.      */
  194.     public static AjaxResult error() {
  195.         return AjaxResult.error("操作失败");
  196.     }
  198.     /**
  199.      * 返回错误消息
  200.      *
  201.      * @param msg 返回内容
  202.      * @return 警告消息
  203.      */
  204.     public static AjaxResult error(String msg) {
  205.         return AjaxResult.error(msg, null);
  206.     }
  208.     /**
  209.      * 返回错误消息
  210.      *
  211.      * @param msg  返回内容
  212.      * @param data 数据对象
  213.      * @return 警告消息
  214.      */
  215.     public static AjaxResult error(String msg, Object data) {
  216.         return new AjaxResult(Type.ERROR, msg, data);
  217.     }
  218. }
  1.      控制层
  1. package com.rabbitSystem.carrot.controller;
  3. import com.rabbitSystem.carrot.common.core.AjaxResult;
  4. import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
  5. import com.rabbitSystem.carrot.service.CustomerService;
  6. import org.springframework.web.bind.annotation.CrossOrigin;
  7. import org.springframework.web.bind.annotation.GetMapping;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RestController;
  10. import javax.annotation.Resource;
  11. import java.util.List;
  13. /**
  14.  * 标识控制层
  15.  * @RestController 组合注解, @Controller +  @ResponseBody ,
  16.  * 在类头部指定@RestController注解,就表示该控制器下所有的方法均以 json格式类型从服务端响应给客户端(前台)
  17.  */
  18. @RestController
  19. /**
  20.  * 处理 HTTP 请求
  21.  */
  22. @RequestMapping("/CustomerController")
  23. /**
  24.  * 用户的控制层
  25.  */
  26. public class CustomerController {
  28.     /**
  29.      * 调用业务访问层对象
  30.      */
  31.     @Resource
  32.     private CustomerService customerService;
  34.     /**
  35.      * GetMapping：处理 GET 请求（查询一般用 get 请求）
  36.      * 查询所有用户信息的方法
  37.      */
  38.     @GetMapping("/selCustomers")
  39.     public AjaxResult selCustomers(){
  40.         List<CustomerSelPojo> customerSelPojoList = customerService.selCustomers();
  41.         int i = 200;
  42.         if (customerSelPojoList == null){
  43.             i = 0;
  44.         };
  45.         String msg = i == 200 ?  "查询成功！" : "查询失败！";
  46.         return new AjaxResult(i == 200 ? AjaxResult.Type.SUCCESS : AjaxResult.Type.ERROR,msg, customerSelPojoList);
  47.     }
  48. }

14、业务层

  1. package com.rabbitSystem.carrot.service;
  3. import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
  5. import java.util.List;
  7. public interface CustomerService {
  9.     List<CustomerSelPojo> selCustomers();
  11. }

15、业务层实现类

  1. package com.rabbitSystem.carrot.service.impl;
  3. import com.rabbitSystem.carrot.mapper.CustomerMapper;
  4. import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
  5. import com.rabbitSystem.carrot.service.CustomerService;
  6. import org.springframework.stereotype.Service;
  8. import javax.annotation.Resource;
  9. import java.util.List;
  11. @Service
  12. public class CustomerImpl implements CustomerService {
  14.     //创建数据访问层对象
  15.     @Resource
  16.     private CustomerMapper customerMapper;
  18.     @Override
  19.     public List<CustomerSelPojo> selCustomers() {
  20.         List<CustomerSelPojo>  customerSelPojo= customerMapper.selCustomers();
  21.         return customerSelPojo;
  22.     }
  23. }

16、映射层

  1. package com.rabbitSystem.carrot.mapper;
  3. import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
  4. import org.apache.ibatis.annotations.Mapper;
  6. import java.util.List;
  8. @Mapper
  9. public interface CustomerMapper {
  10.      List<CustomerSelPojo> selCustomers();
  11. }

17、数据访问层

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.rabbitSystem.carrot.mapper.CustomerMapper">
  7.     <resultMap id="customerResultMap" type="com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo">
  8.         <id property="id" column="ID"/>
  9.         <result property="account" column="ACCOUNT"/>
  10.         <result property="role" column="ROLE"/>
  11.         <result property="headProtraitName" column="HEAD_PROTRAIT_NAME"/>
  12.         <result property="headProtraitFile" column="HEAD_PROTRAIT_FILE"/>
  13.         <result property="nickName" column="NICK_NAME"/>
  14.         <result property="password" column="PASSWORD"/>
  15.         <result property="salt" column="SALT"/>
  16.         <result property="birthday" column="BIRTHDAY"/>
  17.         <result property="age" column="AGE"/>
  18.         <result property="sex" column="SEX"/>
  19.         <result property="safety1Question" column="SAFETY1_QUESTION"/>
  20.         <result property="safety2Question" column="SAFETY2_QUESTION"/>
  21.         <result property="safety3Question" column="SAFETY3_QUESTION"/>
  22.         <result property="safety1Answer" column="SAFETY1_ANSWER"/>
  23.         <result property="safety2Answer" column="SAFETY2_ANSWER"/>
  24.         <result property="safety3Answer" column="SAFETY3_ANSWER"/>
  25.         <result property="createTime" column="CREATE_TIME"/>
  26.         <result property="updateTime" column="UPDATE_TIME"/>
  27.         <result property="isDelete" column="IS_DELETE"/>
  28.     </resultMap>
  30.     <select id="selCustomers" resultMap="customerResultMap">
  31.         select T.ID,T.ACCOUNT,T.ROLE,T.HEAD_PROTRAIT_NAME,
  32.                T.HEAD_PROTRAIT_FILE,T.NICK_NAME,T.PASSWORD,T.SALT,TO_CHAR(T.BIRTHDAY, 'YYYY-MM-DD') AS BIRTHDAY,
  33.                T.AGE,T.SEX,T.SAFETY1_QUESTION,T.SAFETY2_QUESTION,T.SAFETY3_QUESTION,
  34.                T.SAFETY1_ANSWER,T.SAFETY2_ANSWER,T.SAFETY3_ANSWER,
  35.                T.CREATE_TIME,T.UPDATE_TIME,
  36.                T.IS_DELETE from CUSTOMER T
  37.     </select>
  39. </mapper>

18、后端校验

  1.     启动服务，下面就是成功了![](https://i-blog.csdnimg.cn/direct/9f44a70576424cb389a53fd6173720dd.png)
  3.     打开 Postman 接口测试工具，输入地址（控制层对应的），然后点击 send 发送请求，返回的状态码是200就表示成功了

三、前端创建

1、检测一下vue是否安装好了，直接查看vue的版本，正常出来的话就没问题

2、构建vue

3、成功后，项目的目录下就会出现刚才创建的文件夹

4、我这里是觉得在IDEA里面比较方便，大家也可以用其他软件打开，然后进入命令行模式启动

5、这是启动好的样子，有两个网址，可以复制第一个地址去浏览器打开，看到 Welcome to Your Vue.js App 就表示成功了

6、关闭的时候，按 Ctrl + C ，然后输入 Y 回车就好了，关闭之后刚才的网页就打不开了，接下来就可以写前端的代码了

7、在 Vue 组件中使用 

  1. axios

或 

  1. fetch

发送 HTTP 请求。例如：安装 

  1. axios，在命令行模式下执行这段语句
  1. npm install axios
  1.      安装好之后可以在该文件目录下找到这个文件![](https://i-blog.csdnimg.cn/direct/0a143e3568724bda82ba9584a659bb92.png)

8、安装 Element Plus（基于 Vue 3 的 UI 组件库，可以加快开发速度并提高用户界面的美观性和一致性）

  1. npm install element-plus

9、安装vue插件，这样可以更好的适配vue的语法结构


10、修改配置文件vue.config.js

  1. const { defineConfig } = require('@vue/cli-service');
  2. const { DefinePlugin } = require('webpack');
  4. module.exports = defineConfig({
  5.   // 配置开发服务器
  6.   devServer: {
  7.     port: 8082, // 设置开发服务器的端口号为 8082
  8.   },
  9.   // 是否转译依赖（依赖于 babel）
  10.   transpileDependencies: true,
  12.   // 配置公共路径，根据环境变量设置不同的路径
  13.   publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/',
  15.   // 配置 webpack
  16.   configureWebpack: {
  17.     plugins: [
  18.       new DefinePlugin({
  19.         // 定义全局常量，用于在生产环境中关闭 Vue 的生产模式水合不匹配的详细信息
  20.         __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
  21.       }),
  22.     ],
  23.   },
  24. });

11、修改配置文件main.js

  1. import { createApp } from 'vue';
  2. import RabbitSystemVueApp from './RabbitSystemVueApp'; // 引入主 Vue 组件
  3. import router from './router'; // 引入路由配置
  4. import ElementPlus from 'element-plus'; // 引入 Element Plus UI 库
  5. import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
  7. // 创建 Vue 应用实例
  8. const app = createApp(RabbitSystemVueApp);
  10. // 使用插件
  11. app.use(router); // 注册路由插件
  12. app.use(ElementPlus); // 注册 Element Plus 插件
  14. // 挂载应用到 DOM 元素
  15. app.mount('#app'); // 将 Vue 应用挂载到 id 为 'app' 的 DOM 元素上

12、这里看一下最后的结构

13、配置路由（访问地址）

  1. // src/router/index.js
  2. import { createRouter, createWebHistory } from 'vue-router';
  3. import App from '@/App'; // 示例主页组件
  4. // import RabbitSystemVueApp from '@/RabbitSystemVueApp'; // 示例根组件
  5. import CustomerPage from '@/module/rabbit-system/views/CustomerPage';
  6. import NotFound from '@/NotFoundPage';
  8. const routes = [
  9.     { path: '/', component: App },
  10.     // { path: '/app', component: RabbitSystemVueApp },
  11.     { path: '/CustomerPage', component: CustomerPage },
  12.     { path: '/:pathMatch(.*)*', component: NotFound } // 404 路由,匹配所有未定义的路径
  13. ];
  15. const router = createRouter({
  16.     history: createWebHistory(process.env.BASE_URL),
  17.     routes,
  18. });
  20. export default router;

14、前端代码CustomerPage.vue

  1. <template>
  2.   <!-- 用户列表表格 -->
  3.   <el-table v-loading="loading" :data="customerList">
  4.     <el-table-column type="index" label="序号" width="100px" align="center" />
  5.     <el-table-column label="账号" align="center" prop="account"/>
  6.     <el-table-column label="角色" align="center" prop="role"/>
  7. <!--    <el-table-column label="头像" align="center" prop="customerHeadProtrait"/>-->
  8.     <el-table-column label="昵称" align="center" prop="nickName"/>
  9.     <el-table-column label="出生日期" align="center" prop="birthday"/>
  10.     <el-table-column label="年龄" align="center" prop="age"/>
  11.     <el-table-column label="性别" align="center" prop="sex"/>
  12.     <el-table-column label="创建时间" align="center" prop="createTime"/>
  13.     <el-table-column label="更新时间" align="center" prop="updateTime"/>
  14.     <el-table-column label="是否正常使用" align="center" prop="isDelete"/>
  15.   </el-table>
  16. </template>
  18. <script>
  19. import { ref, onMounted } from 'vue';
  20. import { selCustomersJs } from '@/module/rabbit-system/api/customer';
  22. export default {
  23.   name: 'CustomerPage',
  24.   setup() {
  25.     const loading = ref(true);
  26.     const customerList = ref([]);
  27.     // 页面加载时调用方法
  28.     onMounted(() => {
  29.       selCustomersVue();
  30.     });
  32.     // 批量处理数字英文转换
  33.     const processCustomerData = (customers) => {
  34.       customers.forEach(customer => {
  35.         // 处理 role
  36.         if (customer.role === "1") {
  37.           customer.role = "超级管理员";
  38.         } else if (customer.role === "2") {
  39.           customer.role = "管理员";
  40.         } else if (customer.role === "3") {
  41.           customer.role = "普通用户";
  42.         }
  43.         // 处理 sex
  44.         if (customer.sex === "0") {
  45.           customer.sex = "女";
  46.         } else if (customer.sex === "1") {
  47.           customer.sex = "男";
  48.         } else if (customer.sex === "2") {
  49.           customer.sex = "保密";
  50.         }
  51.         // 处理 isDelete
  52.         if (customer.isDelete === "N") {
  53.           customer.isDelete = "是";
  54.         } else if (customer.isDelete === "Y") {
  55.           customer.isDelete = "否";
  56.         }
  57.       });
  58.       return customers;
  59.     };
  61.     // 获取用户数据
  62.     const selCustomersVue = async () => {
  63.       loading.value = true;
  64.       try {
  65.         const response = await selCustomersJs();
  66.         // 批量处理数据
  67.         const customers = processCustomerData(response.data.data);
  68.         customerList.value = customers;
  69.       } catch (error) {
  70.         console.error('Error fetching customers:', error);
  71.       } finally {
  72.         loading.value = false;
  73.       }
  74.     };
  76.     return {
  77.       loading,
  78.       customerList,
  79.     };
  80.   },
  81. };
  82. </script>
  84. <style scoped>
  85. /* 添加样式 */
  86. </style>

15、跳转后端用的 customer.js

  1. import axios from 'axios'; // 导入 axios 库，用于发起 HTTP 请求
  3. // 创建 axios 实例
  4. const instance = axios.create({
  5.     baseURL: 'http://localhost:8081', // 设置请求的基础 URL
  6.     timeout: 10000, // 请求超时时间（毫秒）
  7. });
  9. // 定义一个异步函数，用于获取客户数据
  10. export async function selCustomersJs() {
  11.     try {
  12.         // 发起 GET 请求，获取客户数据
  13.         const response = await instance.get('/CustomerController/selCustomers', {
  14.             headers: {
  15.                 'Content-Type': 'application/json', // 设置请求头的内容类型为 JSON
  16.                 'Authorization': 'Bearer YOUR_TOKEN' // 如果需要授权，设置 Bearer Token（请替换 YOUR_TOKEN 为实际的 Token）
  17.             }
  18.         });
  19.         // 返回响应的数据
  20.         return response.data;
  21.     } catch (error) {
  22.         // 捕获并处理请求错误
  23.         console.error('Error fetching customers:', error); // 打印错误信息到控制台
  24.         throw error; // 重新抛出错误，以便调用者可以进一步处理
  25.     }
  26. }

16、App.vue

  1. <template>
  2.   <img alt="Vue logo" src="./assets/logo.png">
  3.   <HelloWorld msg="Welcome to Your Vue.js App"/>
  4. </template>
  6. <script>
  7. import HelloWorld from './components/HelloWorld.vue'
  9. export default {
  10.   name: 'App',
  11.   components: {
  12.     HelloWorld
  13.   }
  14. }
  15. </script>
  17. <style>
  18. #app {
  19.   font-family: Avenir, Helvetica, Arial, sans-serif;
  20.   -webkit-font-smoothing: antialiased;
  21.   -moz-osx-font-smoothing: grayscale;
  22.   text-align: center;
  23.   color: #2c3e50;
  24.   margin-top: 60px;
  25. }
  26. </style>

17、RabbitSystemVueApp.vue，这里就相当于一个组件，把其他页面加载到这里面（这里有点强迫症了，为了保留原来的 vue8080 页面，这里单独建了一个）

  1. <template>
  2.   <router-view >
  4.   </router-view> <!-- 渲染匹配的路由组件 -->
  5. </template>
  7. <script>
  9. </script>
  11. <style scoped>
  13. </style>

18、然后这边还配置了一个404的页面，返回首页会回到 CustomerPage 页面

  1. <!-- src/components/NotFound.vue -->
  2. <template>
  3.   <div class="not-found">
  4.     <div class="container">
  5.       <h1>404</h1>
  6.       <p>哎呀！我们找不到你要的页面。</p>
  7.       <router-link class="home-link" to="/CustomerPage">返回首页</router-link>
  8.     </div>
  9.   </div>
  10. </template>
  12. <script setup>
  13. </script>
  15. <style scoped>
  16. .not-found {
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20.   height: 100vh;
  21.   background: linear-gradient(135deg, #61E7FFFF, #d7a1b2);
  22.   color: #fff;
  23.   font-family: 'Arial', sans-serif;
  24. }
  26. .container {
  27.   text-align: center;
  28.   background: rgba(0, 0, 0, 0.6);
  29.   border-radius: 10px;
  30.   padding: 40px;
  31.   max-width: 500px;
  32.   width: 100%;
  33. }
  35. h1 {
  36.   font-size: 120px;
  37.   margin: 0;
  38.   font-weight: bold;
  39.   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  40. }
  42. p {
  43.   font-size: 18px;
  44.   margin: 20px 0;
  45.   line-height: 1.5;
  46. }
  48. .home-link {
  49.   display: inline-block;
  50.   padding: 10px 20px;
  51.   margin-top: 20px;
  52.   font-size: 16px;
  53.   color: #fff;
  54.   background-color: #42b983;
  55.   border-radius: 5px;
  56.   text-decoration: none;
  57.   transition: background-color 0.3s, transform 0.3s;
  58. }
  60. .home-link:hover {
  61.   background-color: #359d77;
  62.   transform: scale(1.05);
  63. }
  65. .home-link:focus {
  66.   outline: none;
  67. }
  68. </style>
  1.     当访问地址不正确的时候，会到这个页面![](https://i-blog.csdnimg.cn/direct/bf795b0d855643588de420496813c60a.png)

19、为了解决前后端跨域的问题，这里建了一个工具类

  1. package com.rabbitSystem.carrot.common.core;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. @Configuration
  8. /**
  9.  * 解决跨域问题
  10.  */
  11. public class CorsConfig implements WebMvcConfigurer {
  13.     @Override
  14.     public void addCorsMappings(CorsRegistry registry) {
  15.         registry.addMapping("/**")
  16.                 .allowedOrigins("*") // 允许任意域名访问，或者替换为特定的域名
  17.                 .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
  18.                 .allowedHeaders("Content-Type", "Authorization") // 允许的请求头
  19.                 .maxAge(3600); // 可选的，设置预检请求的缓存时间
  20.     }
  21. }

20、这样就差不多了，最后重启一下前后端，这里展示一下最后页面的效果

  1.     由于篇幅的原因，这里就展示到这个位置（如果这边代码有遗漏的也可以在评论区说一下，后面会尽快补上），后续会继续完善代码，奉献给大家（因为之前学过，虽然现在没有做开发，但是还是不想荒废了，所以还是想练练，如果有不对或者有需要修改优化的还请大佬指教，谢谢）

结束...

标签： spring boot vue.js java
本文转载自: https://blog.csdn.net/weixin_54851039/article/details/141636291
版权归原作者 当代红领巾 所有， 如有侵权，请联系我们删除。
登录后发布评论

“SpringBoot + Vue 项目创建详细步骤”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？