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 對象: