SpringBoot + Vue 项目创建详细步骤
目录
一、本地开发环境
二、后端创建
三、前端创建
一、本地开发环境
- 后端开发软件：IntelliJ IDEA 2022.1.3
- 后端框架：SpringBoot
- 前端框架：@vue/cli 5.0.8 + Element UI
- 后端语言：Java
- jdk版本：1.8.0_371
- 数据库：Oracle 19c
- 数据库操作：PLSQL Developer 15 (64 bit)
- 接口测试工具：Postman
二、后端创建
1、New Project 开始创建新项目
2、配置项目的名称、存储位置、语言、jdk等信息
3、选择对应的依赖，少选多选都没事，创建完了可以在配置文件里面加，选完了就点击 create
4、这是加载完成的情况
6、在pom文件里改一下 java 的版本，为了每个模块的版本不发生冲突，统一改成了适配 jdk1.8 的情况 （有的版本冲突是启动不了的）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.rabbitsystem</groupId>
<artifactId>carrot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>rabbit-system</name>
<description>rabbit-system</description>
<url/>
<licenses>
<license/>
</licenses>
<developers>
<developer/>
</developers>
<scm>
<connection/>
<developerConnection/>
<tag/>
<url/>
</scm>
<properties>
<java.version>1.8</java.version> <!-- 保持 JDK 1.8 -->
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
</dependency>
<dependency>
<groupId>com.oracle.database.jdbc</groupId>
<artifactId>ojdbc8</artifactId> <!-- 使用适合 JDK 1.8 的 ojdbc8 -->
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter-test</artifactId>
<version>2.2.0</version> <!-- 使用与 Spring Boot 2.7.x 兼容的 MyBatis 版本 -->
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.12.0</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.16</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.7.12</version> <!-- 降级到适用于 JDK 1.8 的版本 -->
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
7、把 application.properties 文件的后缀改成 yml，并进行项目配置
## 指定web容器访问端口号
rabbit:
name: 兔子系统
version: v-1.0
## web容器端口号
server:
port: 8080
## 配置数据库连接
spring:
datasource:
driver-class-name: oracle.jdbc.OracleDriver
url: jdbc:oracle:thin:@//localhost:1521/ORCL
username: 用户名
password: 密码
## 配置mybatis中mapper.xml文件扫描
mybatis:
type-aliases-package: com.rabbitSystem.carrot.pojo.sel.*
mapper-locations: classpath:mapper/*.xml # mapper.xml文件映射
8、在数据库建一个用户表（这里是拿来示范的，建完表可以加一些测试数据）
-- 创建用户表
CREATE TABLE CUSTOMER (
ID VARCHAR2(32) NOT NULL,
ACCOUNT VARCHAR2(9) NOT NULL,
ROLE VARCHAR2(1) DEFAULT '2' NOT NULL,
HEAD_PROTRAIT_NAME VARCHAR2(200) NOT NULL,
HEAD_PROTRAIT_FILE VARCHAR2(200) NOT NULL,
NICK_NAME VARCHAR2(32) NOT NULL,
PASSWORD VARCHAR2(64) NOT NULL,
SALT VARCHAR2(32) NOT NULL,
BIRTHDAY Date,
AGE VARCHAR2(3),
SEX VARCHAR(1),
SAFETY1_QUESTION VARCHAR2(64)，
SAFETY2_QUESTION VARCHAR2(64)，
SAFETY3_QUESTION VARCHAR2(64)，
SAFETY1_ANSWER VARCHAR2(32)，
SAFETY2_ANSWER VARCHAR2(32)，
SAFETY3_ANSWER VARCHAR2(32)，
CREATE_TIME Date DEFAULT SYSDATE NOT NULL,
UPDATE_TIME Date DEFAULT SYSDATE NOT NULL,
IS_DELETE varchar(1) DEFAULT 'N' NOT NULL
);
-- 各个字段的注释
COMMENT ON TABLE CUSTOMER IS '用户表';
COMMENT ON COLUMN CUSTOMER.ID IS '用户表ID';
COMMENT ON COLUMN CUSTOMER.ACCOUNT IS '账号';
COMMENT ON COLUMN CUSTOMER.ROLE IS '角色 0 超级管理员；1 管理员；2 普通用户';
COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_NAME IS '头像图片名字';
COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_FILE IS '头像二进制文件';
COMMENT ON COLUMN CUSTOMER.NICK_NAME IS '昵称';
COMMENT ON COLUMN CUSTOMER.PASSWORD IS '密码';
COMMENT ON COLUMN CUSTOMER.SALT IS '盐加密';
COMMENT ON COLUMN CUSTOMER.BIRTHDAY IS '出生日期';
COMMENT ON COLUMN CUSTOMER.AGE IS '年龄';
COMMENT ON COLUMN CUSTOMER.SEX IS '性别 1 女；0 男；2 保密';
COMMENT ON COLUMN CUSTOMER.SAFETY1_QUESTION IS '安全问题1id';
COMMENT ON COLUMN CUSTOMER.SAFETY2_QUESTION IS '安全问题2id';
COMMENT ON COLUMN CUSTOMER.SAFETY3_QUESTION IS '安全问题3id';
COMMENT ON COLUMN CUSTOMER.SAFETY1_ANSWER IS '安全问题1答案';
COMMENT ON COLUMN CUSTOMER.SAFETY2_ANSWER IS '安全问题2答案';
COMMENT ON COLUMN CUSTOMER.SAFETY3_ANSWER IS '安全问题3答案';
COMMENT ON COLUMN CUSTOMER.CREATE_TIME IS '创建时间';
COMMENT ON COLUMN CUSTOMER.UPDATE_TIME IS '更新时间';
COMMENT ON COLUMN CUSTOMER.IS_DELETE IS '是否删除 Y 已删除；N 未删除';
9、连接数据库（我这里是Oracle）
这里面的sid可以在数据库里面查
这样就可以直接在 IDEA 里面看到Oracle数据库了
10、在运行类的同级目录下创建四个包：controller（控制层）、service（业务层）、mapper（映射层/持久层）、pojo（模型层）、resources 下面的数据访问层及对应的类（工具包里面的AjaxResult工具类下面会提供）
11、快捷生成实体类，右击数据库的表
选择生成的包下就可以了
11、使用@Data注解代替get/set方法（下面的那些就可以删掉了），我这里是单独建了一个查询用的类，因为有时候联查的时候字段是不止一个表的，所以之后查用户信息就直接用这个类，缺什么字段就补什么，不会乱
13、控制层
控制层会用到一个返回ajax类型数据的工具类，我提供在下面
package com.rabbitSystem.carrot.common.core;
import com.rabbitSystem.carrot.common.utils.StringUtils;
import java.util.HashMap;
/**
* 操作消息提醒
*
* @author ruoyi
*/
public class AjaxResult extends HashMap<String, Object> {
private static final long serialVersionUID = 1L;
/**
* 状态码
*/
public static final String CODE_TAG = "code";
/**
* 返回内容
*/
public static final String MSG_TAG = "msg";
/**
* 数据对象
*/
public static final String DATA_TAG = "data";
/**
* 数据总数量
*/
public static final String DATA_COUNT = "count";
/**
* 状态类型
*/
public enum Type {
/**
* 成功
*/
SUCCESS(200),
/**
* 警告
*/
WARN(301),
/**
* 校验失败
*/
FAILED(-1),
/**
* 错误
*/
ERROR(500);
private final int value;
Type(int value) {
this.value = value;
}
public int value() {
return this.value;
}
}
/**
* 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。
*/
public AjaxResult() {
}
/**
* 初始化一个新创建的 AjaxResult 对象
*
* @param type 状态类型
* @param msg 返回内容
*/
public AjaxResult(Type type, String msg) {
super.put(CODE_TAG, type.value);
super.put(MSG_TAG, msg);
}
/**
* 初始化一个新创建的 AjaxResult 对象
*
* @param type 状态类型
* @param msg 返回内容
* @param data 数据对象
*/
public AjaxResult(Type type, String msg, Object data) {
super.put(CODE_TAG, type.value);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data)) {
super.put(DATA_TAG, data);
}
}
/**
* 初始化一个新创建的 AjaxResult 对象
* @param type 状态类型
* @param msg 返回内容
* @param data 数据对象
* @param count 数据总数量
*/
public AjaxResult(Type type, String msg, Object data,Integer count) {
super.put(CODE_TAG, type.value);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data)) {
super.put(DATA_TAG, data);
}
if(count!=null){
super.put(DATA_COUNT,count);
}
}
/**
* 方便链式调用
*
* @param key 键
* @param value 值
* @return 数据对象
*/
@Override
public AjaxResult put(String key, Object value) {
super.put(key, value);
return this;
}
/**
* 返回成功消息
*
* @return 成功消息
*/
public static AjaxResult success() {
return AjaxResult.success("操作成功");
}
/**
* 返回成功数据
*
* @return 成功消息
*/
public static AjaxResult success(Object data) {
return AjaxResult.success("操作成功", data);
}
/**
* 返回成功消息
*
* @param msg 返回内容
* @return 成功消息
*/
public static AjaxResult success(String msg) {
return AjaxResult.success(msg, null);
}
/**
* 返回成功消息
*
* @param msg 返回内容
* @param data 数据对象
* @return 成功消息
*/
public static AjaxResult success(String msg, Object data) {
return new AjaxResult(Type.SUCCESS, msg, data);
}
/**
* 返回警告消息
*
* @param msg 返回内容
* @return 警告消息
*/
public static AjaxResult warn(String msg) {
return AjaxResult.warn(msg, null);
}
/**
* 返回警告消息
*
* @param msg 返回内容
* @param data 数据对象
* @return 警告消息
*/
public static AjaxResult warn(String msg, Object data) {
return new AjaxResult(Type.WARN, msg, data);
}
/**
* 返回错误消息
*
* @return
*/
public static AjaxResult error() {
return AjaxResult.error("操作失败");
}
/**
* 返回错误消息
*
* @param msg 返回内容
* @return 警告消息
*/
public static AjaxResult error(String msg) {
return AjaxResult.error(msg, null);
}
/**
* 返回错误消息
*
* @param msg 返回内容
* @param data 数据对象
* @return 警告消息
*/
public static AjaxResult error(String msg, Object data) {
return new AjaxResult(Type.ERROR, msg, data);
}
}
控制层
package com.rabbitSystem.carrot.controller;
import com.rabbitSystem.carrot.common.core.AjaxResult;
import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
import com.rabbitSystem.carrot.service.CustomerService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
* 标识控制层
* @RestController 组合注解, @Controller + @ResponseBody ,
* 在类头部指定@RestController注解,就表示该控制器下所有的方法均以 json格式类型从服务端响应给客户端(前台)
*/
@RestController
/**
* 处理 HTTP 请求
*/
@RequestMapping("/CustomerController")
/**
* 用户的控制层
*/
public class CustomerController {
/**
* 调用业务访问层对象
*/
@Resource
private CustomerService customerService;
/**
* GetMapping：处理 GET 请求（查询一般用 get 请求）
* 查询所有用户信息的方法
*/
@GetMapping("/selCustomers")
public AjaxResult selCustomers(){
List<CustomerSelPojo> customerSelPojoList = customerService.selCustomers();
int i = 200;
if (customerSelPojoList == null){
i = 0;
};
String msg = i == 200 ? "查询成功！" : "查询失败！";
return new AjaxResult(i == 200 ? AjaxResult.Type.SUCCESS : AjaxResult.Type.ERROR,msg, customerSelPojoList);
}
}
14、业务层
package com.rabbitSystem.carrot.service;
import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
import java.util.List;
public interface CustomerService {
List<CustomerSelPojo> selCustomers();
}
15、业务层实现类
package com.rabbitSystem.carrot.service.impl;
import com.rabbitSystem.carrot.mapper.CustomerMapper;
import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
import com.rabbitSystem.carrot.service.CustomerService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class CustomerImpl implements CustomerService {
//创建数据访问层对象
@Resource
private CustomerMapper customerMapper;
@Override
public List<CustomerSelPojo> selCustomers() {
List<CustomerSelPojo> customerSelPojo= customerMapper.selCustomers();
return customerSelPojo;
}
}
16、映射层
package com.rabbitSystem.carrot.mapper;
import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface CustomerMapper {
List<CustomerSelPojo> selCustomers();
}
17、数据访问层
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.rabbitSystem.carrot.mapper.CustomerMapper">
<resultMap id="customerResultMap" type="com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo">
<id property="id" column="ID"/>
<result property="account" column="ACCOUNT"/>
<result property="role" column="ROLE"/>
<result property="headProtraitName" column="HEAD_PROTRAIT_NAME"/>
<result property="headProtraitFile" column="HEAD_PROTRAIT_FILE"/>
<result property="nickName" column="NICK_NAME"/>
<result property="password" column="PASSWORD"/>
<result property="salt" column="SALT"/>
<result property="birthday" column="BIRTHDAY"/>
<result property="age" column="AGE"/>
<result property="sex" column="SEX"/>
<result property="safety1Question" column="SAFETY1_QUESTION"/>
<result property="safety2Question" column="SAFETY2_QUESTION"/>
<result property="safety3Question" column="SAFETY3_QUESTION"/>
<result property="safety1Answer" column="SAFETY1_ANSWER"/>
<result property="safety2Answer" column="SAFETY2_ANSWER"/>
<result property="safety3Answer" column="SAFETY3_ANSWER"/>
<result property="createTime" column="CREATE_TIME"/>
<result property="updateTime" column="UPDATE_TIME"/>
<result property="isDelete" column="IS_DELETE"/>
</resultMap>
<select id="selCustomers" resultMap="customerResultMap">
select T.ID,T.ACCOUNT,T.ROLE,T.HEAD_PROTRAIT_NAME,
T.HEAD_PROTRAIT_FILE,T.NICK_NAME,T.PASSWORD,T.SALT,TO_CHAR(T.BIRTHDAY, 'YYYY-MM-DD') AS BIRTHDAY,
T.AGE,T.SEX,T.SAFETY1_QUESTION,T.SAFETY2_QUESTION,T.SAFETY3_QUESTION,
T.SAFETY1_ANSWER,T.SAFETY2_ANSWER,T.SAFETY3_ANSWER,
T.CREATE_TIME,T.UPDATE_TIME,
T.IS_DELETE from CUSTOMER T
</select>
</mapper>
18、后端校验
启动服务，下面就是成功了
打开 Postman 接口测试工具，输入地址（控制层对应的），然后点击 send 发送请求，返回的状态码是200就表示成功了
三、前端创建
1、检测一下vue是否安装好了，直接查看vue的版本，正常出来的话就没问题
2、构建vue
3、成功后，项目的目录下就会出现刚才创建的文件夹
4、我这里是觉得在IDEA里面比较方便，大家也可以用其他软件打开，然后进入命令行模式启动
5、这是启动好的样子，有两个网址，可以复制第一个地址去浏览器打开，看到 Welcome to Your Vue.js App 就表示成功了
6、关闭的时候，按 Ctrl + C ，然后输入 Y 回车就好了，关闭之后刚才的网页就打不开了，接下来就可以写前端的代码了
7、在 Vue 组件中使用axios或fetch发送 HTTP 请求。例如：安装axios，在命令行模式下执行这段语句
npm install axios
安装好之后可以在该文件目录下找到这个文件
8、安装Element Plus（基于 Vue 3 的 UI 组件库，可以加快开发速度并提高用户界面的美观性和一致性）
npm install element-plus
9、安装vue插件，这样可以更好的适配vue的语法结构
10、修改配置文件vue.config.js
const { defineConfig } = require('@vue/cli-service');
const { DefinePlugin } = require('webpack');
module.exports = defineConfig({
// 配置开发服务器
devServer: {
port: 8082, // 设置开发服务器的端口号为 8082
},
// 是否转译依赖（依赖于 babel）
transpileDependencies: true,
// 配置公共路径，根据环境变量设置不同的路径
publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/',
// 配置 webpack
configureWebpack: {
plugins: [
new DefinePlugin({
// 定义全局常量，用于在生产环境中关闭 Vue 的生产模式水合不匹配的详细信息
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
}),
],
},
});
11、修改配置文件main.js
import { createApp } from 'vue';
import RabbitSystemVueApp from './RabbitSystemVueApp'; // 引入主 Vue 组件
import router from './router'; // 引入路由配置
import ElementPlus from 'element-plus'; // 引入 Element Plus UI 库
import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
// 创建 Vue 应用实例
const app = createApp(RabbitSystemVueApp);
// 使用插件
app.use(router); // 注册路由插件
app.use(ElementPlus); // 注册 Element Plus 插件
// 挂载应用到 DOM 元素
app.mount('#app'); // 将 Vue 应用挂载到 id 为 'app' 的 DOM 元素上
12、这里看一下最后的结构
13、配置路由（访问地址）
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import App from '@/App'; // 示例主页组件
// import RabbitSystemVueApp from '@/RabbitSystemVueApp'; // 示例根组件
import CustomerPage from '@/module/rabbit-system/views/CustomerPage';
import NotFound from '@/NotFoundPage';
const routes = [
{ path: '/', component: App },
// { path: '/app', component: RabbitSystemVueApp },
{ path: '/CustomerPage', component: CustomerPage },
{ path: '/:pathMatch(.*)*', component: NotFound } // 404 路由,匹配所有未定义的路径
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
14、前端代码CustomerPage.vue
<template>
<!-- 用户列表表格 -->
<el-table v-loading="loading" :data="customerList">
<el-table-column type="index" label="序号" width="100px" align="center" />
<el-table-column label="账号" align="center" prop="account"/>
<el-table-column label="角色" align="center" prop="role"/>
<!-- <el-table-column label="头像" align="center" prop="customerHeadProtrait"/>-->
<el-table-column label="昵称" align="center" prop="nickName"/>
<el-table-column label="出生日期" align="center" prop="birthday"/>
<el-table-column label="年龄" align="center" prop="age"/>
<el-table-column label="性别" align="center" prop="sex"/>
<el-table-column label="创建时间" align="center" prop="createTime"/>
<el-table-column label="更新时间" align="center" prop="updateTime"/>
<el-table-column label="是否正常使用" align="center" prop="isDelete"/>
</el-table>
</template>
<script>
import { ref, onMounted } from 'vue';
import { selCustomersJs } from '@/module/rabbit-system/api/customer';
export default {
name: 'CustomerPage',
setup() {
const loading = ref(true);
const customerList = ref([]);
// 页面加载时调用方法
onMounted(() => {
selCustomersVue();
});
// 批量处理数字英文转换
const processCustomerData = (customers) => {
customers.forEach(customer => {
// 处理 role
if (customer.role === "1") {
customer.role = "超级管理员";
} else if (customer.role === "2") {
customer.role = "管理员";
} else if (customer.role === "3") {
customer.role = "普通用户";
}
// 处理 sex
if (customer.sex === "0") {
customer.sex = "女";
} else if (customer.sex === "1") {
customer.sex = "男";
} else if (customer.sex === "2") {
customer.sex = "保密";
}
// 处理 isDelete
if (customer.isDelete === "N") {
customer.isDelete = "是";
} else if (customer.isDelete === "Y") {
customer.isDelete = "否";
}
});
return customers;
};
// 获取用户数据
const selCustomersVue = async () => {
loading.value = true;
try {
const response = await selCustomersJs();
// 批量处理数据
const customers = processCustomerData(response.data.data);
customerList.value = customers;
} catch (error) {
console.error('Error fetching customers:', error);
} finally {
loading.value = false;
}
};
return {
loading,
customerList,
};
},
};
</script>
<style scoped>
/* 添加样式 */
</style>
15、跳转后端用的customer.js
import axios from 'axios'; // 导入 axios 库，用于发起 HTTP 请求
// 创建 axios 实例
const instance = axios.create({
baseURL: 'http://localhost:8081', // 设置请求的基础 URL
timeout: 10000, // 请求超时时间（毫秒）
});
// 定义一个异步函数，用于获取客户数据
export async function selCustomersJs() {
try {
// 发起 GET 请求，获取客户数据
const response = await instance.get('/CustomerController/selCustomers', {
headers: {
'Content-Type': 'application/json', // 设置请求头的内容类型为 JSON
'Authorization': 'Bearer YOUR_TOKEN' // 如果需要授权，设置 Bearer Token（请替换 YOUR_TOKEN 为实际的 Token）
}
});
// 返回响应的数据
return response.data;
} catch (error) {
// 捕获并处理请求错误
console.error('Error fetching customers:', error); // 打印错误信息到控制台
throw error; // 重新抛出错误，以便调用者可以进一步处理
}
}
16、App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
17、RabbitSystemVueApp.vue，这里就相当于一个组件，把其他页面加载到这里面（这里有点强迫症了，为了保留原来的 vue8080 页面，这里单独建了一个）
<template>
<router-view >
</router-view> <!-- 渲染匹配的路由组件 -->
</template>
<script>
</script>
<style scoped>
</style>
18、然后这边还配置了一个404的页面，返回首页会回到 CustomerPage 页面
<!-- src/components/NotFound.vue -->
<template>
<div class="not-found">
<div class="container">
<h1>404</h1>
<p>哎呀！我们找不到你要的页面。</p>
<router-link class="home-link" to="/CustomerPage">返回首页</router-link>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
.not-found {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(135deg, #61E7FFFF, #d7a1b2);
color: #fff;
font-family: 'Arial', sans-serif;
}
.container {
text-align: center;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
padding: 40px;
max-width: 500px;
width: 100%;
}
h1 {
font-size: 120px;
margin: 0;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
p {
font-size: 18px;
margin: 20px 0;
line-height: 1.5;
}
.home-link {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
color: #fff;
background-color: #42b983;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s, transform 0.3s;
}
.home-link:hover {
background-color: #359d77;
transform: scale(1.05);
}
.home-link:focus {
outline: none;
}
</style>
当访问地址不正确的时候，会到这个页面
19、为了解决前后端跨域的问题，这里建了一个工具类
package com.rabbitSystem.carrot.common.core;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
/**
* 解决跨域问题
*/
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*") // 允许任意域名访问，或者替换为特定的域名
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
.allowedHeaders("Content-Type", "Authorization") // 允许的请求头
.maxAge(3600); // 可选的，设置预检请求的缓存时间
}
}
20、这样就差不多了，最后重启一下前后端，这里展示一下最后页面的效果
由于篇幅的原因，这里就展示到这个位置（如果这边代码有遗漏的也可以在评论区说一下，后面会尽快补上），后续会继续完善代码，奉献给大家（因为之前学过，虽然现在没有做开发，但是还是不想荒废了，所以还是想练练，如果有不对或者有需要修改优化的还请大佬指教，谢谢）
结束…