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

主要模块代码

=========================================================================

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> |

【一线大厂Java面试题解析+核心总结学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开：qq.cn.hn/FTf 免费领取

<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