使用springboot、vue框架和element ui组件搭建前后端分离项目

小雄芯

已于 2022-11-14 15:31:05 修改

阅读量633

点赞数

文章标签： 1024程序员节 java spring boot vue.js

于 2022-10-24 12:26:34 首次发布

本文链接：https://blog.csdn.net/liugaoyuans/article/details/127487721

版权

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

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

1.前端

2.后端

一、后端

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

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

<?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.6.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo2</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo2</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <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.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <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>
    </dependencies>
    

</project>

2. controller层

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

code（状态码）

msg（状态信息）

data（返回的数据）

3.工具类

Result

package com.example.demo2.util;

import lombok.Data;

import java.io.Serializable;

/**
 * Author: didiplus
 * Email: 972479352@qq.com
 * CreateTime: 2022/4/24
 * Desc: Ajax 返 回 JSON 结 果 封 装 数 据
 */

@Data
public class Result<T> implements Serializable {

    /**
     * 错误状态
     */
    private Integer code;

    /**
     * 错误信息
     */
    private String msg;

    /**
     * 返回数据
     */
    private T data;

    /**
     * 成 功 操 作 , 携 带 数 据
     */
    public static <T> Result<T> success(T data) {
        return success(ResultCode.RC100.getMsg(), data);
    }

    /**
     * 成 功 操 作, 携 带 消 息
     */
    public static <T> Result<T> success(String message) {
        return success(message, null);
    }

    /**
     * 成 功 操 作, 携 带 消 息 和 携 带 数 据
     */
    public static <T> Result<T> success(String msg, T data) {
        return success(ResultCode.RC100.getCode(), msg, data);
    }

    /**
     * 成 功 操 作, 携 带 自 定 义 状 态 码 和 消 息
     */
    public static <T> Result<T> success(int code, String msg) {
        return success(code, msg, null);
    }

    public static <T> Result<T> success(int code, String msg, T data) {
        Result<T> result = new Result<T>();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }

    /**
     * 失 败 操 作, 默 认 数 据
     */
    public static <T> Result<T> failure() {
        return failure(ResultCode.RC300.getMsg());
    }

    /**
     * 失 败 操 作, 携 带 自 定 义 消 息
     */
    public static <T> Result<T> failure(String msg) {
        return failure(msg, null);
    }

    /**
     * 失 败 操 作, 携 带 自 定 义 消 息 和 数 据
     */
    public static <T> Result<T> failure(String msg, T data) {
        return failure(ResultCode.RC300.getCode(), msg, data);
    }

    /**
     * 失 败 操 作, 携 带 自 定 义 状 态 码 和 自 定 义 消 息
     */
    public static <T> Result<T> failure(int code, String msg) {
        return failure(ResultCode.RC300.getCode(), msg, null);
    }

    /**
     * 失 败 操 作, 携 带 自 定 义 状 态 码 , 消 息 和 数 据
     */
    public static <T> Result<T> failure(int code, String msg, T data) {
        Result<T> result = new Result<T>();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }

    /**
     * Boolean 返 回 操 作, 携 带 默 认 返 回 值
     */
    public static <T> Result<T> decide(boolean b) {
        return decide(b, ResultCode.RC100.getMsg(), ResultCode.RC300.getMsg());
    }

    /**
     * Boolean 返 回 操 作, 携 带 自 定 义 消 息
     */
    public static <T> Result<T> decide(boolean b, String success, String failure) {
        if (b) {
            return success(success);
        } else {
            return failure(failure);
        }
    }
}

ResultCode

package com.example.demo2.util;


import lombok.Getter;

/**
 * Author: didiplus
 * Email: 972479352@qq.com
 * CreateTime: 2022/4/24
 * Desc: 统 一 返 回 状 态 码
 */
public enum ResultCode {
    /**操作成功**/
    RC100(200,"操作成功"),
    /**操作失败**/
    RC300(300,"操作失败"),
    /**服务限流**/
    RC200(100,"服务开启限流保护,请稍后再试!"),
    /**服务降级**/
    RC201(201,"服务开启降级保护,请稍后再试!"),
    /**热点参数限流**/
    RC202(202,"热点参数限流,请稍后再试!"),
    /**系统规则不满足**/
    RC203(203,"系统规则不满足要求,请稍后再试!"),
    /**授权规则不通过**/
    RC204(204,"授权规则不通过,请稍后再试!"),
    /**access_denied**/
    RC403(403,"无访问权限,请联系管理员授予权限"),
    /**access_denied**/
    RC401(401,"匿名用户访问无权限资源时的异常"),
    /**服务异常**/
    RC500(500,"系统异常，请稍后重试"),

    INVALID_TOKEN(2001,"访问令牌不合法"),
    ACCESS_DENIED(2003,"没有权限访问该资源"),
    CLIENT_AUTHENTICATION_FAILED(1001,"客户端认证失败"),
    USERNAME_OR_PASSWORD_ERROR(1002,"用户名或密码错误"),
    UNSUPPORTED_GRANT_TYPE(1003, "不支持的认证模式");

    /**自定义状态码**/
    @Getter
    private final int code;

    /**
     * 携 带 消 息
     */
    @Getter
    private final String msg;
    /**
     * 构 造 方 法
     */
    ResultCode(int code, String msg) {

        this.code = code;

        this.msg = msg;
    }

}

二、前端

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

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

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

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

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

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

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

const { defineConfig } = require('@vue/cli-service')
let proxyObj = {};

proxyObj['/'] = {
  ws: false,
  target: 'http://127.0.0.1:8081', //代理对象
  changeOrigin: true,
  pathRewrite: {
    '^/': ''
  }
}

// vue项目启动端口
module.exports = defineConfig({
      transpileDependencies: true,
      devServer: {
        host: "localhost",
        port: 8085,
        proxy: proxyObj
      }
    },
)

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

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

<template>
  <div id="app">
    <router-view v-if="isRouteAlive"/>
  </div>
</template>

<script>

export default {
  name: 'App',
  computed: {},
  watch: {},
  //加入provide
  provide() {
    return{
      //返回reload方法，该方法为全局方法
      reload: this.reload,
    }
  },
  data() {
    return {
      isRouteAlive:true
    };
  },
  methods: {
    //刷新页面
    reload() {
      this.isRouteAlive = false;
      this.$nextTick(function () {
        this.isRouteAlive = true;
      })
    }
  }
};
</script>

3.main.js文件

这里需要注意

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

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

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

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

<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <el-table
        :data="userList"
        style="width: 100%">
      <el-table-column
          prop="noId"
          width="180">
      </el-table-column>
      <el-table-column
          prop="pictureName"
          label="照片名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="relativePath"
          label="存储相对路径"
          width="180">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>

import {listUserBase} from "@/api/user";

export default {
  name: "UserPicture",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      userList:[],
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      listUserBase().then(response => {
        this.userList = response.data;
      })
    }
  },
}
</script>

<style scoped>

</style>

5.router目录下的js文件

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

util目录下的request.js

import axios from 'axios'
import {Message} from 'element-ui'



// 创建axios实例
export const request = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
})
//request拦截器
request.interceptors.response.use(success => {
        //data.msg 是后端RespBean中响应的信息
        if (success.status && success.status == -1 && success.data.status == 500) {
            Message.error({message: success.data.msg})
            return;
        }
        //data.msg 是后端RespBean中响应的信息
        if (success.data.msg) {
            Message.success({message: success.data.msg})
        }
        return success.data;
    }, error => {
        if (error.response.data.msg) {
            Message.error({message: error.response.data.msg})
        } else {
            Message.error({message: '未知错误'})
        }
        return;
    }
)

api目录下的user.js