Vue 腳手架構建前後端分離入門項目

前端部分源碼：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 對象：