Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）

前端部分源码：https://github.com/szluyu99/vue-cli-users_1
后端部分源码：https://github.com/szluyu99/vue-cli-users_2

前端笔记目录：前端学习笔记

项目简介与预览

这是一个 Vue 结合 SpringBoot 实现 前后端分离 的入门项目；

主要就是实现了简单的增删改查的模板项目；

访问项目：

点击 主页：

点击 用户管理：可以实现简单的增删改查功能。

数据库建表

建立一个数据库：vue

然后建立数据库表：

create table t_user(
  id int(6) primary key auto_increment,
	name varchar(40),
	age int(3),
	bir TIMESTAMP
)

主要模块代码

index.js 路由代码

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home";
import User from "../views/User"
import Student from "../views/Student";
import UserAdd from "../components/UserAdd";
import UserEdit from "../components/UserEdit";

Vue.use(VueRouter);

const routes = [
  {path: "/", redirect: "/home"},
  {path: "/home", component: Home},
  {
    path: "/user", component: User,
    children: [ // 嵌套路由
      {path: "add", component: UserAdd},
      {path: "edit", component: UserEdit}
    ]
  },
  {path: "/student", component: Student},
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

User.vue 用户组件

<template>
  <div>
    <h1>用户列表</h1>
    <table border="1">
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>生日</td>
        <td>操作</td>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
        <td>{{user.bir}}</td>
        <td> <a href="#" @click="delRow(user.id)">删除</a> | 
          <router-link :to="'/user/edit?id=' + user.id" tag="a">修改</router-link> </td>
      </tr>
    </table> 
    <router-link to="/user/add" tag="a">添加</router-link>    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      users: []
    }
  },
  methods: {
    findAll() { // 查询所有
      this.$http.get("http://localhost:8989/vue/user/findAll?page=1&rows=4").then((res) => {
        // console.log(this);
        this.users = res.data.results;
        // console.log(res.data.results);
      });
    },
    delRow(id) { // 删除
      //console.log(id);
      this.$http.get("http://localhost:8989/vue/user/delete?id=" + id).then((res) => {
        if (res.data.success) {
          alert(res.data.msg + ",点击确定刷新当前数据!")
          this.findAll(); // 删除完后刷新
        }
      });
    }
  },
  components: {
  },
  created() {
    this.findAll();
  },
  watch: { // 监听路由的变化 
    $route: {
      handler: function (val) {
        // console.log(val);
        if (val.path == "/user") { 
          this.findAll();
        }
      },
      // 深度观察监听
      deep: true
    }
   }
};
</script>

RAP2 创建接口进行测试

RAP2 官网：http://rap2.taobao.org/

这个网站很牛逼，可以创建后端接口，自定义请求和响应，可以创建返回 Json 格式数据的 URL，然后拿这个 URL 给前端开发人员进行测试。

切换路由组件的显示: this.$router.push("/xxx")

使用 this.$router.push("/user") 切换路由组件的显示；

saveUserInfo() {
  console.log(this.user);
  this.$http.post("http://rap2.taobao.org:38080/app/mock/259261/user/add", this.user).then((res) => {
    if (res.data.success) { // 添加成功
      this.$router.push("/user"); // 切换路由
    }
  });
}

组件中监听路由的变化

watch: { // 监听路由的变化 
  $route: {
    handler: function (val, oldVal) {
      console.log(val);
      if (val.path == "/user") { 
        // this.findAll();
      }
    },
    // 深度观察监听
    deep: true
  }
 }

@RequestBody 的作用

@RequestBody 作用：将前端传递的 Json格式数据 转换为 Java对象。

前端传递 Json格式数据：

后台控制器用 @RequestBody 将 Json 转为 Java 对象：

项目的打包、部署到 SpringBoot

Vue 脚手架项目打包

在项目根目录中执行如下命令：

npm run build

注：Vue脚手架打包的项目必须在服务器上运行，不能直接双击运行；

在打包之后项目中出现 dist 目录，dist 目录就是 Vue脚手架项目的生产目录（直接部署目录）。

部署到 springboot 项目

打包完后，如何将项目部署到 SpringBoot 项目上呢？

将打包好的 dist 目录放到 SpringBoot 项目的 static 目录下；

由于我在配置文件中配置了项目路径：（没有访问路径则不需要修改）

server.servlet.context-path=/vue

所以要修改一下 index.html 中引入资源文件的路径；

通过以下路径访问部署的前端页面：

http://localhost:8989/vue/dist/index.html