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

忘是亡心i 2023-02-21 04:54 42阅读 0赞

### Vue 脚手架构建前后端分离项目 ###

*  项目简介与预览
 *  数据库建表
 *  主要模块代码
 *   *  index.js 路由代码
     *  User.vue 用户组件
 *  RAP2 创建接口进行测试
 *  切换路由组件的显示: this.$router.push("/xxx")
 *  组件中监听路由的变化
 *  @RequestBody 的作用
 *  项目的打包、部署到 SpringBoot
 *   *  Vue 脚手架项目打包
     *  部署到 springboot 项目

> 前端部分源码：[https://github.com/szluyu99/vue-cli-users\_1][https_github.com_szluyu99_vue-cli-users_1]  
> 后端部分源码：[https://github.com/szluyu99/vue-cli-users\_2][https_github.com_szluyu99_vue-cli-users_2]

> 前端笔记目录：[前端学习笔记][Link 1]

# 项目简介与预览 #

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

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

访问项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]  
点击 **主页**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]  
点击 **用户管理**：可以实现简单的增删改查功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]

# 数据库建表 #

建立一个数据库：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/][http_rap2.taobao.org]

这个网站很牛逼，可以创建后端接口，自定义请求和响应，可以创建返回 Json 格式数据的 URL，然后拿这个 URL 给前端开发人员进行测试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

# 切换路由组件的显示: 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格式数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]  
后台控制器用 `@RequestBody` 将 Json 转为 Java 对象：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]

# 项目的打包、部署到 SpringBoot #

## Vue 脚手架项目打包 ##

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

npm run build

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

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

## 部署到 springboot 项目 ##

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

将打包好的 `dist` 目录放到 SpringBoot 项目的 `static` 目录下；  
![在这里插入图片描述][20200628221838665.png]  
由于我在配置文件中配置了项目路径：（没有访问路径则不需要修改）

server.servlet.context-path=/vue

所以要修改一下 index.html 中引入资源文件的路径；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]  
通过以下路径访问部署的前端页面：

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

[https_github.com_szluyu99_vue-cli-users_1]: https://github.com/szluyu99/vue-cli-users_1
[https_github.com_szluyu99_vue-cli-users_2]: https://github.com/szluyu99/vue-cli-users_2
[Link 1]: https://blog.csdn.net/weixin_43734095/article/details/106910854
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702004547137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702004615332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200702004629324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[http_rap2.taobao.org]: http://rap2.taobao.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628223330498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200628223903788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200628224014885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[20200628221838665.png]: https://img-blog.csdnimg.cn/20200628221838665.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200628221948822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70