SpringBoot+Vue前后端分离简易开发

本文主要是学习于B站的Spring Boot+Vue前后端分离开发,技术主要采用Springboot + Vue + Element Ui,来完成基本的数据表格操作。

前端

界面



代码

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

//element-ui的全部组件
import ElementUI from 'element-ui'
//element-ui的css
import 'element-ui/lib/theme-chalk/index.css'
//使用elementUI
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

router

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/PageOne'
import Add from '../views/PageTwo'
import Update from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import Index from '../views/index.vue'

Vue.use(VueRouter)

const routes = [{
path: "/",
name: "用户管理",
component: Index,
redirect: "/List",
show: true,
children: [{
path: "/List",
name: "查询用户",
component: List
},
{
path: "/Add",
name: "添加用户",
component: Add
},
{
path: "/update",
name: "修改用户",
component: Update
}
]
},
{
path: "/authority",
name: "权限管理",
// 利用v-show隐藏此模块
show: false
}
]

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

export default router

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div>
<router-view></router-view>
</div>
</template>

<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}

.el-aside {
color: #333;
}
</style>

<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
};
return {
tableData: Array(20).fill(item)
};
}
};
</script>

views

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<div>
<!-- 构建整个页面框架 -->
<el-container style="height: 500px; border: 1px solid #eee">
<!-- 构建左侧菜单 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- 左侧菜单内容,
常用属性 :default-openeds默认展开的菜单,通过菜单的index直来关联
default-active:默认选中的菜单,通过菜单的index值来关联-->
<!-- <el-menu :default-openeds="['1', '3']">
可展开的菜单,常用属性,index:菜单的下标,文本类型,不能是数值类型
<el-submenu index="1">
对应el-submenu的菜单名
<template slot="title">
i:设置菜单图标,通过class属性实则. 如:el-icon-menu,el-icon-message,el-icon-setting
<i class="el-icon-message"></i>导航一
</template>
菜单的子节点,不可再展开,常用属性. index:菜单的下标,文本类型,不能是数值类型
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-submenu index="1-3">
<template slot="title">
<i class="el-icon-message"></i>选项3
</template>
<el-menu-item index="1-3-1">选项3-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu> -->

<!-- menu 与 router的绑定:
1.<el-menu>标签添加router属性
2.在页面中添加<router-view>标签,它是一个容器,动态渲染你选择的router
3.<el-menu-item>标签的index值就是要跳转的router
-->
<el-menu router :default-openeds="['0', '1']">
<!-- Custom elements in iteration require 'v-bind:key' directives. -->
<!-- 在el-menu-item 及el-submenu 标签上面,必须要加上 index属性,如果没有则报错。
:key属性为了避免点击菜单全部展开-->
<el-submenu v-for="(item,index) in $router.options.routes" :index="index + ''" :key="index + ''" v-show="item.show">
<template slot="title"><i class="el-icon-message"></i>{{index}}-{{item.name}}</template>
<el-menu-item v-for="(item2,index2) in item.children"
:class="$route.path == item2.path ? 'isActive':''" :index="item2.path" v-bind:key="index + '-' + index2">
<!-- <router-link :to="/路径"></router-link> -->
{{item2.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>

<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>

<!-- 构建页面主体内容 -->
<el-main>
<!-- <el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>

<style scoped>
.isActive:hover {
color: aquamarine;
font-weight: bold;
}
</style>

PageOne.vue-页面展示数据表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
<!-- 必须都套在一个div里 -->
<div>
<el-table :data="tableData" border style="width: 50%">
<el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="gender" label="性别" width="120"></el-table-column>
<el-table-column prop="age" label="年龄" width="120"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="deleteUserById(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- :total 默认每页十条记录数,总记录数是100,就是十页
:page-size: 每页数据量(即记录数),默认10-->
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page"
></el-pagination>
</div>
</template>

<script>
export default {
name: "PageOne",
methods: {
edit(row) {
this.$router.push({
path: '/update',
query: {
id: row.id
}
})
},
deleteUserById(row) {
alert(row.id)
const _this = this;
axios
.delete("http://localhost:8181/user/delete?id=" + row.id)
.then(function(resp) {
alert("成功");
window.location.reload();
}).catch(err => {
alert("失败")
});
},
page(currentPage) {
const _this = this;
axios
.get("http://localhost:8181/user/findAll/" + (currentPage - 1) + "/6")
.then(function(resp) {
_this.tableData = resp.data.content;
_this.pageSize = resp.data.size;
_this.total = resp.data.totalElements;
});
}
},
data() {
return {
pageSize: 1,
total: 17,
tableData: []
};
},
created() {
const _this = this;
axios.get("http://localhost:8181/user/findAll/0/5").then(function(resp) {
_this.tableData = resp.data.content;
_this.pageSize = resp.data.size;
_this.total = resp.data.totalElements;
});
}
};
</script>

<style scoped>
</style>

PageTwo-页面添加功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<div>
<!-- ref:不能少,相当于form表单的name属性 -->
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="用户性别" prop="gender">
<el-input v-model="ruleForm.gender"></el-input>
</el-form-item>
<el-form-item label="用户年龄" prop="age">
<el-input v-model="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="test()">Test</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "PageTwo",
data() {
return {
ruleForm: {
name: "",
age: "",
gender: ""
// region: "",
// date1: "",
// date2: "",
// delivery: false,
// type: [],
// resource: "",
// desc: ""
},
// 定义rules对象,在rules对象中设置表单各个选项的校验规则:
// trigger:触发事件,如 blur失焦
rules: {
id: [
{ required: true, message: "请输入用户编号", trigger: "blur" },
{ min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
],
name: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
]
}
};
},
methods: {
test() {
// 不能拼接 "内容" +,会变成Object
console.log(this.ruleForm);
},
submitForm(formName) {
const _this = this;
this.$refs[formName].validate(valid => {
if (valid) {
// axios.post('http://localhost:8181/user/add', this.ruleForm)
// .then(function (response) {
// console.log(response);
// })
axios({
url: "http://localhost:8181/user/add",
params: {
name: this.ruleForm.name,
age: this.ruleForm.age,
gender: this.ruleForm.gender
},
method: "post"
}).then(res => {
_this.$alert("《" + _this.ruleForm.name + "》添加成功", "消息", {
confirmButtonText: "确定",
callback: action => {
_this.$router.push("/List");
}
});
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>

PageThree-页面修改功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<div>
<!-- ref:不能少,相当于form表单的name属性 -->
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户编号">
<el-input v-model="ruleForm.id"></el-input>
</el-form-item>
<el-form-item label="用户姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="用户性别" prop="gender">
<el-input v-model="ruleForm.gender"></el-input>
</el-form-item>
<el-form-item label="用户年龄" prop="age">
<el-input v-model="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "PageThree",
data() {
return {
ruleForm: {
id: "",
name: "",
age: "",
gender: ""
// region: "",
// date1: "",
// date2: "",
// delivery: false,
// type: [],
// resource: "",
// desc: ""
},
// 定义rules对象,在rules对象中设置表单各个选项的校验规则:
// trigger:触发事件,如 blur失焦
rules: {
id: [
{ required: true, message: "请输入用户编号", trigger: "blur" },
{ min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
],
name: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
{ min: 2, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
]
}
};
},
methods: {
submitForm(formName) {
const _this = this;
this.$refs[formName].validate(valid => {
if (valid) {
// axios.post('http://localhost:8181/user/add', this.ruleForm)
// .then(function (response) {
// console.log(response);
// })
axios({
url: "http://localhost:8181/user/update",
params: {
id: this.ruleForm.id,
name: this.ruleForm.name,
age: this.ruleForm.age,
gender: this.ruleForm.gender
},
method: "put"
}).then(res => {
_this.$alert("《" + _this.ruleForm.name + "》修改成功", "消息", {
confirmButtonText: "确定",
callback: action => {
_this.$router.push("/List");
}
});
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
const _this = this;
alert(this.$route.query.id);
axios
.get("http://localhost:8181/user/findById/" + this.$route.query.id)
.then(function(response) {
_this.ruleForm = response.data;
});
}
};
</script>

后端

UserInfo.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package cn.blue.demo.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

/**
* @author Blue
* @date 2020/2/11
**/
@Data
@Entity
public class UserInfo {
/**
* 设置自增
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;

private String name;

private String gender;

private Integer age;
}

UserInfoRepository.java

1
2
3
4
5
6
7
8
9
10
11
12
package cn.blue.demo.repository;

import cn.blue.demo.entity.UserInfo;
import org.springframework.data.jpa.repository.JpaRepository;

/**
* @author Blue
* @date 2020/2/11
**/
public interface UserInfoRepository extends JpaRepository<UserInfo, Integer> {
//右键 goto,创建测试类
}

UserInfoController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
package cn.blue.demo.controller;

import cn.blue.demo.entity.UserInfo;
import cn.blue.demo.repository.UserInfoRepository;
import org.apache.catalina.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
* @author Blue
* @date 2020/2/11
**/
@RestController
@RequestMapping("/user")
public class UserInfoController {
@Autowired
private UserInfoRepository userInfoRepository;

/**
*
* @param page 当前页数
* @param size 每页显示数据量
* @return 用户列表信息;倘若让其直接通过访问user就请求此方法就是404
*/
@GetMapping("/findAll/{page}/{size}")
public Page<UserInfo> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
PageRequest pageRequest = PageRequest.of(page, size);
return userInfoRepository.findAll(pageRequest);
}

@PostMapping("/add")
@ResponseBody
public String add(UserInfo userInfo) {
UserInfo user = userInfoRepository.save(userInfo);
if (user != null) {
return "success";
} else {
return "error";
}
}

@GetMapping("findById/{id}")
public UserInfo findById(@PathVariable("id") Integer id) {
return userInfoRepository.findById(id).get();
}

@PutMapping("/update")
public String update(UserInfo userInfo) {
if(userInfoRepository.save(userInfo) != null) {
return "success";
} else{
return "error";
}
}

@DeleteMapping("/delete")
public String delete(@RequestParam("id") Integer id) {
try {
UserInfo userInfo = new UserInfo();
userInfo.setId(id);
userInfoRepository.delete(userInfo);
return "success";
} catch (Exception e) {
e.printStackTrace();
return "error";
}
}
}

配置类CorsConfig: 解决跨域问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package cn.blue.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
* @author Blue
* @date 2020/2/11
* 解决跨域的问题
**/
@Configuration
public class CorsConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}

pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
点击查看

本文标题:SpringBoot+Vue前后端分离简易开发

文章作者:Liuyang

发布时间:2020年02月21日 - 15:16:36

最后更新:2020年02月21日 - 16:17:24

原始链接:http://yoursite.com/2020/02/21/SpringBoot-Vue%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E7%AE%80%E6%98%93%E5%BC%80%E5%8F%91/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
0%