菜单 搜索
首页 前端知识 SpringBoot Vue 项目创建详细步骤

SpringBoot Vue 项目创建详细步骤

2025-03-03 13:03:09 前端知识 前端哥 140 22 我要收藏

目录

一、本地开发环境

二、后端创建

三、前端创建

一、本地开发环境

  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 的情况 （有的版本冲突是启动不了的）

<?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、这样就差不多了，最后重启一下前后端，这里展示一下最后页面的效果

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

结束...

转载请注明出处或者链接地址：https://www.qianduange.cn//article/22502.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【Linux笔记】基础IO(上)

2025-03-27 13:03:40

Windows11离线安装wsl2(适用于 Linux 的 Windows 子系统)和Ubuntu

2025-03-27 13:03:39

Linux 服务器运维常用命令大全

2025-03-27 13:03:38

深入了解 Ubuntu 中的 build-essential：开发者的必备工具

2025-03-27 13:03:36

RagFlow Docker Desktop Ollama DeepSeek-R1本地部署自己的本地AI大模型工具

2025-03-27 13:03:35

Linux 学习必杀技：从菜鸟到高手的蜕变密码

2025-03-27 13:03:35

Trae AI 全新功能 SSHremote助力开发者个人产品打造，高效构建全栈应用

2025-03-27 13:03:34

Python Selenium全栈指南：从自动化入门到企业级实战

2025-03-27 13:03:33

Spring Cloud之负载均衡之LoadBalance

2025-03-27 13:03:33

【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

2025-03-27 13:03:33

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
浏览器升级提示：您的浏览器版本较低，建议您立即升级为知了极速浏览器，极速、安全、简约，上网速度更快！立即下载
复制成功！