devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用springboot、vue框架和element ui组件 搭建前后端分离项目_利用idea创建 spring boot vue element 前后端分离 新项目

作者：小蓝xlanll | 2024-02-17 05:07:55

赞

踩

利用idea创建 spring boot vue element 前后端分离 新项目

很简单的一个demo，后续功能如图片上传可以在此基础上完成。

先看一下前后端使用到的目录结构，我在idea中安装了vue插件，所以我前后端文件用的是同一个工具打开

1.前端

2.后端

一、后端 

比较简单，直接照着数据库生成就行，就不说了直接展示关键部分

1.依赖pom.xml文件 后续需要再添，这些现在足以

  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.6.12</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>demo2</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>demo2</name>
  15.     <description>Demo project for Spring Boot</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.         </dependency>
  24.         <dependency>
  25.             <groupId>org.mybatis.spring.boot</groupId>
  26.             <artifactId>mybatis-spring-boot-starter</artifactId>
  27.             <version>2.2.2</version>
  28.         </dependency>
  29.  
  30.         <dependency>
  31.             <groupId>mysql</groupId>
  32.             <artifactId>mysql-connector-java</artifactId>
  33.             <scope>runtime</scope>
  34.         </dependency>
  35.         <dependency>
  36.             <groupId>org.projectlombok</groupId>
  37.             <artifactId>lombok</artifactId>
  38.             <optional>true</optional>
  39.         </dependency>
  40.         <dependency>
  41.             <groupId>org.springframework.boot</groupId>
  42.             <artifactId>spring-boot-starter-test</artifactId>
  43.             <scope>test</scope>
  44.         </dependency>
  45.     </dependencies>
  46.     
  47.  
  48. </project>

2. controller层

 查询结果使用工具类之后就是这样的，测试到这一步说明你后端查询所有的接口已经完成了

code（状态码）

msg（状态信息）

data（返回的数据）

 3.工具类

Result
  1. package com.example.demo2.util;
  2.  
  3. import lombok.Data;
  4.  
  5. import java.io.Serializable;
  6.  
  7. /**
  8.  * Author: didiplus
  9.  * Email: 972479352@qq.com
  10.  * CreateTime: 2022/4/24
  11.  * Desc: Ajax 返 回 JSON 结 果 封 装 数 据
  12.  */
  13.  
  14. @Data
  15. public class Result<T> implements Serializable {
  16.  
  17.     /**
  18.      * 错误状态
  19.      */
  20.     private Integer code;
  21.  
  22.     /**
  23.      * 错误信息
  24.      */
  25.     private String msg;
  26.  
  27.     /**
  28.      * 返回数据
  29.      */
  30.     private T data;
  31.  
  32.     /**
  33.      * 成 功 操 作 , 携 带 数 据
  34.      */
  35.     public static <T> Result<T> success(T data) {
  36.         return success(ResultCode.RC100.getMsg(), data);
  37.     }
  38.  
  39.     /**
  40.      * 成 功 操 作, 携 带 消 息
  41.      */
  42.     public static <T> Result<T> success(String message) {
  43.         return success(message, null);
  44.     }
  45.  
  46.     /**
  47.      * 成 功 操 作, 携 带 消 息 和 携 带 数 据
  48.      */
  49.     public static <T> Result<T> success(String msg, T data) {
  50.         return success(ResultCode.RC100.getCode(), msg, data);
  51.     }
  52.  
  53.     /**
  54.      * 成 功 操 作, 携 带 自 定 义 状 态 码 和 消 息
  55.      */
  56.     public static <T> Result<T> success(int code, String msg) {
  57.         return success(code, msg, null);
  58.     }
  59.  
  60.     public static <T> Result<T> success(int code, String msg, T data) {
  61.         Result<T> result = new Result<T>();
  62.         result.setCode(code);
  63.         result.setMsg(msg);
  64.         result.setData(data);
  65.         return result;
  66.     }
  67.  
  68.     /**
  69.      * 失 败 操 作, 默 认 数 据
  70.      */
  71.     public static <T> Result<T> failure() {
  72.         return failure(ResultCode.RC300.getMsg());
  73.     }
  74.  
  75.     /**
  76.      * 失 败 操 作, 携 带 自 定 义 消 息
  77.      */
  78.     public static <T> Result<T> failure(String msg) {
  79.         return failure(msg, null);
  80.     }
  81.  
  82.     /**
  83.      * 失 败 操 作, 携 带 自 定 义 消 息 和 数 据
  84.      */
  85.     public static <T> Result<T> failure(String msg, T data) {
  86.         return failure(ResultCode.RC300.getCode(), msg, data);
  87.     }
  88.  
  89.     /**
  90.      * 失 败 操 作, 携 带 自 定 义 状 态 码 和 自 定 义 消 息
  91.      */
  92.     public static <T> Result<T> failure(int code, String msg) {
  93.         return failure(ResultCode.RC300.getCode(), msg, null);
  94.     }
  95.  
  96.     /**
  97.      * 失 败 操 作, 携 带 自 定 义 状 态 码 , 消 息 和 数 据
  98.      */
  99.     public static <T> Result<T> failure(int code, String msg, T data) {
  100.         Result<T> result = new Result<T>();
  101.         result.setCode(code);
  102.         result.setMsg(msg);
  103.         result.setData(data);
  104.         return result;
  105.     }
  106.  
  107.     /**
  108.      * Boolean 返 回 操 作, 携 带 默 认 返 回 值
  109.      */
  110.     public static <T> Result<T> decide(boolean b) {
  111.         return decide(b, ResultCode.RC100.getMsg(), ResultCode.RC300.getMsg());
  112.     }
  113.  
  114.     /**
  115.      * Boolean 返 回 操 作, 携 带 自 定 义 消 息
  116.      */
  117.     public static <T> Result<T> decide(boolean b, String success, String failure) {
  118.         if (b) {
  119.             return success(success);
  120.         } else {
  121.             return failure(failure);
  122.         }
  123.     }
  124. }
ResultCode
  1. package com.example.demo2.util;
  2.  
  3.  
  4. import lombok.Getter;
  5.  
  6. /**
  7.  * Author: didiplus
  8.  * Email: 972479352@qq.com
  9.  * CreateTime: 2022/4/24
  10.  * Desc: 统 一 返 回 状 态 码
  11.  */
  12. public enum ResultCode {
  13.     /**操作成功**/
  14.     RC100(200,"操作成功"),
  15.     /**操作失败**/
  16.     RC300(300,"操作失败"),
  17.     /**服务限流**/
  18.     RC200(100,"服务开启限流保护,请稍后再试!"),
  19.     /**服务降级**/
  20.     RC201(201,"服务开启降级保护,请稍后再试!"),
  21.     /**热点参数限流**/
  22.     RC202(202,"热点参数限流,请稍后再试!"),
  23.     /**系统规则不满足**/
  24.     RC203(203,"系统规则不满足要求,请稍后再试!"),
  25.     /**授权规则不通过**/
  26.     RC204(204,"授权规则不通过,请稍后再试!"),
  27.     /**access_denied**/
  28.     RC403(403,"无访问权限,请联系管理员授予权限"),
  29.     /**access_denied**/
  30.     RC401(401,"匿名用户访问无权限资源时的异常"),
  31.     /**服务异常**/
  32.     RC500(500,"系统异常，请稍后重试"),
  33.  
  34.     INVALID_TOKEN(2001,"访问令牌不合法"),
  35.     ACCESS_DENIED(2003,"没有权限访问该资源"),
  36.     CLIENT_AUTHENTICATION_FAILED(1001,"客户端认证失败"),
  37.     USERNAME_OR_PASSWORD_ERROR(1002,"用户名或密码错误"),
  38.     UNSUPPORTED_GRANT_TYPE(1003, "不支持的认证模式");
  39.  
  40.     /**自定义状态码**/
  41.     @Getter
  42.     private final int code;
  43.  
  44.     /**
  45.      * 携 带 消 息
  46.      */
  47.     @Getter
  48.     private final String msg;
  49.     /**
  50.      * 构 造 方 法
  51.      */
  52.     ResultCode(int code, String msg) {
  53.  
  54.         this.code = code;
  55.  
  56.         this.msg = msg;
  57.     }
  58.  
  59. }

二、前端

这里比较复杂的可能就是使用脚手架在创建的时候不知道怎么手动配置项目，一开始我也配置错了

后来成功了，设置成了预设，下次直接点

运行一下出现这个页面算是成功了，注意我框出来的地方，这是前端端口号

 在刚开始的时候，给你们看的是完成demo后的前端项目结构，现在看一下，刚创建好的前端目录结构两者对比，因为这个教程是后面出的，我又新建了一个前端项目（demo1）方便对比，所以名字不一样不要弄混了，

 看的出来我删除了一些vue文件和改动了一些js文件，接下来就是一步步的完成，我也会在新建的demo1一步步的演示出来

1.vue.config.js配置一下后端端口的代理

大家留意一下我在用Postman测试后端接口的时候，后端的端口号是多少；然后vue项目创建成功了第一次测试运行的时候前端的初始初始端口号是多少，将路径改成你们自己的路径，其他的可不改

  1. const { defineConfig } = require('@vue/cli-service')
  2. let proxyObj = {};
  3.  
  4. proxyObj['/'] = {
  5.   ws: false,
  6.   target: 'http://127.0.0.1:8081', //代理对象
  7.   changeOrigin: true,
  8.   pathRewrite: {
  9.     '^/': ''
  10.   }
  11. }
  12.  
  13. // vue项目启动端口
  14. module.exports = defineConfig({
  15.       transpileDependencies: true,
  16.       devServer: {
  17.         host: "localhost",
  18.         port: 8085,
  19.         proxy: proxyObj
  20.       }
  21.     },
  22. )

直接复制过来可能会有这种错误，中文环境下错误已经很明显了，不用再说了吧，除了点击这个弹出框的链接，还可以直接使用命令安装element ui依赖记得还有axios依赖，方法很多，达到目的就行。

 2.App.vue 这个文件改动看自己，我这么改是我后面要用一些功能所以加上去

  1. <template>
  2.   <div id="app">
  3.     <router-view v-if="isRouteAlive"/>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8.  
  9. export default {
  10.   name: 'App',
  11.   computed: {},
  12.   watch: {},
  13.   //加入provide
  14.   provide() {
  15.     return{
  16.       //返回reload方法，该方法为全局方法
  17.       reload: this.reload,
  18.     }
  19.   },
  20.   data() {
  21.     return {
  22.       isRouteAlive:true
  23.     };
  24.   },
  25.   methods: {
  26.     //刷新页面
  27.     reload() {
  28.       this.isRouteAlive = false;
  29.       this.$nextTick(function () {
  30.         this.isRouteAlive = true;
  31.       })
  32.     }
  33.   }
  34. };
  35. </script>

 3.main.js文件

 这里需要注意

import 'element-ui/lib/theme-chalk/index.css'依赖

element ui样式不显示的时候我加上去的，位置不能在下面

4.删除这个三个vue文件，并在views目录下新建一个UserPicture

直接复制内容会报错，等所有操作完成后复制

  1. <template>
  2.   <div>
  3.     <el-table
  4.         :data="tableData"
  5.         style="width: 100%">
  6.       <el-table-column
  7.           prop="date"
  8.           label="日期"
  9.           width="180">
  10.       </el-table-column>
  11.       <el-table-column
  12.           prop="name"
  13.           label="姓名"
  14.           width="180">
  15.       </el-table-column>
  16.       <el-table-column
  17.           prop="address"
  18.           label="地址">
  19.       </el-table-column>
  20.     </el-table>
  21.  
  22.     <el-table
  23.         :data="userList"
  24.         style="width: 100%">
  25.       <el-table-column
  26.           prop="noId"
  27.           width="180">
  28.       </el-table-column>
  29.       <el-table-column
  30.           prop="pictureName"
  31.           label="照片名称"
  32.           width="180">
  33.       </el-table-column>
  34.       <el-table-column
  35.           prop="relativePath"
  36.           label="存储相对路径"
  37.           width="180">
  38.       </el-table-column>
  39.       <el-table-column
  40.           prop="createTime"
  41.           label="创建时间">
  42.       </el-table-column>
  43.     </el-table>
  44.   </div>
  45.  
  46. </template>
  47.  
  48. <script>
  49.  
  50. import {listUserBase} from "@/api/user";
  51.  
  52. export default {
  53.   name: "UserPicture",
  54.   data() {
  55.     return {
  56.       tableData: [{
  57.         date: '2016-05-02',
  58.         name: '王小虎',
  59.         address: '上海市普陀区金沙江路 1518 弄'
  60.       }, {
  61.         date: '2016-05-04',
  62.         name: '王小虎',
  63.         address: '上海市普陀区金沙江路 1517 弄'
  64.       }, {
  65.         date: '2016-05-01',
  66.         name: '王小虎',
  67.         address: '上海市普陀区金沙江路 1519 弄'
  68.       }, {
  69.         date: '2016-05-03',
  70.         name: '王小虎',
  71.         address: '上海市普陀区金沙江路 1516 弄'
  72.       }],
  73.       userList:[],
  74.     }
  75.   },
  76.   created() {
  77.     this.getList();
  78.   },
  79.   methods:{
  80.     getList() {
  81.       listUserBase().then(response => {
  82.         this.userList = response.data;
  83.       })
  84.     }
  85.   },
  86. }
  87. </script>
  88.  
  89. <style scoped>
  90.  
  91. </style>

5.router目录下的js文件

 6.新建util目录和api目录，注意顺序，不然会报错，无视错误新建后面报错也会消除，看个人

util目录下的request.js

  1. import axios from 'axios'
  2. import {Message} from 'element-ui'
  3.  
  4.  
  5.  
  6. // 创建axios实例
  7. export const request = axios.create({
  8.     // axios中请求配置有baseURL选项，表示请求URL公共部分
  9.     baseURL: process.env.VUE_APP_BASE_API,
  10.     // 超时
  11.     timeout: 10000
  12. })
  13. //request拦截器
  14. request.interceptors.response.use(success => {
  15.         //data.msg 是后端RespBean中响应的信息
  16.         if (success.status && success.status == -1 && success.data.status == 500) {
  17.             Message.error({message: success.data.msg})
  18.             return;
  19.         }
  20.         //data.msg 是后端RespBean中响应的信息
  21.         if (success.data.msg) {
  22.             Message.success({message: success.data.msg})
  23.         }
  24.         return success.data;
  25.     }, error => {
  26.         if (error.response.data.msg) {
  27.             Message.error({message: error.response.data.msg})
  28.         } else {
  29.             Message.error({message: '未知错误'})
  30.         }
  31.         return;
  32.     }
  33. )

api目录下的user.js

然后直接运行，前面记得把内容粘贴上去

 这就算搭建成功，增删改查功能后续完善吧 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/100317?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号