vue和java实现页面增删改_SpringBoot-Vue实现增删改查及分页小DEMO
前言
主要通過后端 Spring Boot 技術和前端 Vue 技術來簡單開發一個demo，實現增刪改查、分頁功能以及了解Springboot搭配vue完成前后端分離項目的開發流程。
開發棧
前端
開發工具：WebStorm
開發框架：vue + axios
包管理工具: npm
打包工具：webpack
后端
開發工具：IDEA
開發框架：Springboot + mybatis
打包工具：maven
數據庫： MySQL
PS：假設以上的的工具你都安裝好啦，寫CRUD小DEMO時進坑了，這篇blog參考一下，僅供參考，僅供參考😤，，如有不足請不吝賜教。
后端開發環境搭建
1、File->New->Project...
2、選擇 Spring Initializr ，然后選擇默認的 url 點擊next
3、勾選Spring Web、SQL模板，next
4、點擊finish，搭建完成
后端開發過程
1、更新pom.xml如下：
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
4.0.0
com.example
demo
0.0.1-SNAPSHOT
springboot-mybatis
org.springframework.boot
spring-boot-starter-parent
2.1.3.RELEASE
1.2.0
5.1.39
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.mybatis.spring.boot
mybatis-spring-boot-starter
${mybatis-spring-boot}
mysql
mysql-connector-java
${mysql-connector}
junit
junit
4.12
2、新建 demo\src\main\java\com\example\demo\entity\User.java
package com.example.demo.entity;
public class User {
private int userId;
private String userDate;
private String userName;
private String userAddress;
//省略get() and set()
}
3、更新demo\src\main\resources\application.properties
## 數據源配置
spring.datasource.url=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
## Mybatis 配置
mybatis.typeAliasesPackage=org.spring.springboot.domain
mybatis.mapperLocations=classpath:mapper/*.xml
## 端口
server.port=8081
4、新建demo\src\main\java\com\example\demo\mapper\UserMapper.java
package com.example.demo.mapper;
import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
Mapper
public interface UserMapper {
public List findUserByName(String userName);
public List ListUser();
public List queryPage(Integer startRows);
public int getRowCount();
public int insertUser(User user);
public int delete(int userId);
public int Update(User user);
}
5、新建demo\src\main\resources\mapper\UserMapper.xml
/p>
"-//mybatis.org//DTD com.example.Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
SELECT * FROM user
SELECT * FROM user
where userName like concat(concat('%',#{userName}),'%')
order by userId desc
select * from user
order by userId desc
limit #{startRows},5
select count(*) from user
INSERT INTO user
(
userId,userDate,userName,userAddress
)
VALUES (
#{userId},
#{userDate, jdbcType=VARCHAR},
#{userName, jdbcType=VARCHAR},
#{userAddress, jdbcType=VARCHAR}
)
delete from user where userId=#{userId}
update user
set user.userDate=#{userDate},user.userName=#{userName},user.userAddress=#{userAddress}
where user.userId=#{userId}
6、新建demo\src\main\java\com\example\demo\service\UserService.java
package com.example.demo.service;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
Service
public class UserService {
@Autowired
private UserMapper userMapper;
public List findByName(String userName) {
return userMapper.findUserByName(userName);
}
public List queryPage(Integer startRows) {
return userMapper.queryPage(startRows);
}
public int getRowCount() {
return userMapper.getRowCount();
}
public User insertUser(User user) {
userMapper.insertUser(user);
return user;
}
public List ListUser(){
return userMapper.ListUser();
}
public int Update(User user){
return userMapper.Update(user);
}
public int delete(int userId){
return userMapper.delete(userId);
}
}
7、新建demo\src\main\java\com\example\demo\controller\UserCtrl.java
package com.example.demo.controller;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
RestController
public class UserCtrl {
@Autowired
private UserService userService;
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public Integer delete(Integer userId) {
System.out.println(userId);
int result = userService.delete(userId);
return result;
}
@RequestMapping(value = "/update", method = RequestMethod.POST)
@ResponseBody
public String update(User user) {
int result = userService.Update(user);
if (result >= 1) {
return "修改成功";
} else {
return "修改失敗";
}
}
@RequestMapping(value = "/insert", method = RequestMethod.POST)
public User insert(User user) {
return userService.insertUser(user);
}
@RequestMapping("/ListUser")
@ResponseBody
public List ListUser() {
return userService.ListUser();
}
@RequestMapping("/ListByName")
@ResponseBody
public List ListUserByName(String userName) {
return userService.findByName(userName);
}
/**
* 分頁
* @return
*/
@RequestMapping(value="/page")
@ResponseBody
public List page(Integer page){
int pageNow = page == null ? 1 : page;
int pageSize = 5;
int startRows = pageSize*(pageNow-1);
List list = userService.queryPage(startRows);
return list;
}
/**
* rows
* @return
*/
@RequestMapping(value="/rows")
@ResponseBody
public int rows(){
return userService.getRowCount();
}
}
8、啟動MySQL數據庫，新建或執行如下表：
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`userId` int(20) NOT NULL AUTO_INCREMENT,
`userDate` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`userName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`userAddress` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
PRIMARY KEY (`userId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 71 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (15, '2019-09-29T03:17:12.000Z', '王老三', '上海市普陀區金沙江路 1515 弄');
INSERT INTO `user` VALUES (16, '2019-09-29T03:27:05.000Z', '張小四', '上海市普陀區金沙江路 1514 弄');
INSERT INTO `user` VALUES (17, '2019-09-29T03:30:04.000Z', '王老五', '上海市普陀區金沙江路 1513弄');
INSERT INTO `user` VALUES (18, '2019-09-29T03:33:15.000Z', '小六子', '上海市普陀區金沙江路 1512弄');
INSERT INTO `user` VALUES (20, '2019-09-29T03:33:15.000Z', '王老八', '上海市普陀區金沙江路 1512弄');
INSERT INTO `user` VALUES (21, '2019-09-29T05:42:52.000Z', '王大拿', '上海市普陀區金沙江路 1511弄');
INSERT INTO `user` VALUES (22, '2019-09-29T05:43:50.000Z', '小九九', '上海市普陀區金沙江路 1510弄');
INSERT INTO `user` VALUES (23, '2019-09-29T05:43:50.000Z', '劉詩詩', '上海市普陀區金沙江路 1499弄');
INSERT INTO `user` VALUES (24, '2019-09-29T05:46:07.000Z', '扎昂四四', '上海市大灣區科技路');
INSERT INTO `user` VALUES (25, '2019-09-29T05:46:07.000Z', '扎昂四四新東方', '上海市大灣區科技路2001號');
INSERT INTO `user` VALUES (26, '2019-09-29T05:46:07.000Z', '王小虎', '上海市大灣區科技路2002號');
INSERT INTO `user` VALUES (27, '2019-09-29T05:46:07.000Z', '抽拉吧唧', '上海市大灣區科技路2003號');
INSERT INTO `user` VALUES (28, '2019-09-29T05:46:07.000Z', '年啦編輯', '上海市大灣區科技路2004號');
INSERT INTO `user` VALUES (29, '2019-09-29T05:46:07.000Z', '你多少', '上海市普陀區金沙江路 1211弄');
INSERT INTO `user` VALUES (30, '2019-09-29T05:46:07.000Z', '反發達', '上海市普陀區金沙江路 1212弄');
INSERT INTO `user` VALUES (31, '2019-09-29T05:51:20.000Z', '發官方', '上海市普陀區金沙江路 1213弄');
INSERT INTO `user` VALUES (32, '2019-09-29T05:51:20.000Z', '方還有', '上海市普陀區金沙江路 1214弄');
INSERT INTO `user` VALUES (33, '2019-09-29T05:51:20.000Z', '過不分', '上海市普陀區金沙江路 1498弄');
INSERT INTO `user` VALUES (34, '2019-09-29T05:51:20.000Z', '菜市場', '上海市普陀區金沙江路 1497弄');
INSERT INTO `user` VALUES (35, '2019-09-29T05:51:20.000Z', '權威的', '上海市普陀區金沙江路 1496弄');
INSERT INTO `user` VALUES (36, '2019-09-29T05:55:09.000Z', '岡反對的', '上海市大灣區科技路2001號');
INSERT INTO `user` VALUES (37, '2019-09-29T05:55:09.000Z', '岡反對', '上海市大灣區科技路2003號');
INSERT INTO `user` VALUES (38, '2019-09-29T05:55:09.000Z', '偶哦里面', '上海市大灣區科技路2004號');
INSERT INTO `user` VALUES (39, '2019-09-29T05:55:09.000Z', '偶哦韓大蘇打', '上海市大灣區科技路2005號');
INSERT INTO `user` VALUES (40, '2019-09-29T05:55:09.000Z', '偶哦勻', '上海市大灣區科技路2006號');
INSERT INTO `user` VALUES (41, '2019-09-29T05:55:09.000Z', '敢哦勻', '上海市大灣區科技路2006號');
INSERT INTO `user` VALUES (42, '2019-09-29T05:55:09.000Z', '敢孩', '上海市大灣區科技路2006號');
INSERT INTO `user` VALUES (43, '2019-09-29T05:55:09.000Z', '敢女孩', '上海市大灣區科技路2007號');
INSERT INTO `user` VALUES (45, '2019-09-29T05:55:09.000Z', '工行行', '上海市大灣區科技路2008號');
INSERT INTO `user` VALUES (46, '2019-09-29T05:55:09.000Z', '家好嗎', '上海市大灣區科技路2008號');
INSERT INTO `user` VALUES (47, '2019-09-29T05:55:09.000Z', '的程度', '上海市大灣區科技路2009號');
INSERT INTO `user` VALUES (48, '2019-09-29T05:55:09.000Z', '稱得上', '上海市大灣區科技路2009號');
INSERT INTO `user` VALUES (49, '2019-09-29T05:55:09.000Z', '韓國和', '上海市大灣區科技路2010號');
INSERT INTO `user` VALUES (50, '2019-09-29T05:55:09.000Z', '韓好', '上海市大灣區科技路2010號');
INSERT INTO `user` VALUES (51, '2019-09-29T05:55:09.000Z', '韓吧', '上海市大灣區科技路2011號');
INSERT INTO `user` VALUES (52, '2019-09-29T05:55:09.000Z', '韓吧吧', '上海市大灣區科技路2012號');
INSERT INTO `user` VALUES (53, '2019-09-29T05:55:09.000Z', '長度是', '上海市大灣區科技路2013號');
INSERT INTO `user` VALUES (54, '2019-09-29T05:55:09.000Z', '比如合', '上海市大灣區科技路2014號');
INSERT INTO `user` VALUES (55, '2019-09-29T05:55:09.000Z', '如合境', '上海市大灣區科技路2015號');
INSERT INTO `user` VALUES (56, '2019-09-29T05:55:09.000Z', '如合國', '上海市大灣區科技路2016號');
INSERT INTO `user` VALUES (57, '2019-09-29T05:55:09.000Z', '如更好', '上海市大灣區科技路2017號');
INSERT INTO `user` VALUES (58, '2019-09-29T05:55:09.000Z', '如更法', '上海市大灣區科技路2018號');
INSERT INTO `user` VALUES (59, '2019-09-29T05:55:09.000Z', '反對', '上海市大灣區科技路2019號');
INSERT INTO `user` VALUES (60, '2019-09-29T05:55:09.000Z', '如國部', '上海市大灣區科技路2019號');
INSERT INTO `user` VALUES (61, '2019-09-29T06:04:15.000Z', '奇熱網', '上海市普陀區金沙江路 1496弄');
INSERT INTO `user` VALUES (62, '2019-09-29T06:04:33.000Z', '反對法', '上海市普陀區金沙江路 1495弄');
INSERT INTO `user` VALUES (63, '2019-09-29T06:04:33.000Z', '的風格', '上海市普陀區金沙江路 1494弄');
INSERT INTO `user` VALUES (64, '2019-09-29T06:04:33.000Z', '廣泛同', '上海市大灣區科技路2020號');
INSERT INTO `user` VALUES (65, '2019-09-10T06:04:33.000Z', '但仍然', '上海市普陀區金沙江路 1493弄');
INSERT INTO `user` VALUES (66, '2019-09-29T06:10:28.000Z', 'vdfv', '放到電飯鍋的');
INSERT INTO `user` VALUES (67, '2019-09-14T16:00:00.000Z', '朱老六', '上海市高新區上海中心');
INSERT INTO `user` VALUES (69, '2019-09-10T16:00:00.000Z', '是的', ' 學生的三十四分');
INSERT INTO `user` VALUES (70, '2019-09-29T07:51:44.000Z', '張小子', '上海市浦東區1234號');
SET FOREIGN_KEY_CHECKS = 1;
9、后端就寫完了，整體結構如下：
10、run 'DemoApplication'啟動項目，控制臺沒報錯就用瀏覽器測試一下，在瀏覽器中輸入http://localhost:8081/page?page=3 如果能出現如下字符串就👌，已安裝postman的可以每個方法都試一下：
前端開發環境搭建
1、win+R->cmd->進入項目目錄依次執行命令：vue init webpack projectName、cd projectName、npm install、npm run dev如圖所示：
2、打開瀏覽器輸入：http://localhost:8080，效果如圖：
3、用WebStorm打開項目：File->Open...->vue01(projectName)
4、Vue-cli項目結構如圖：
前端開發過程
1、在項目根目錄安裝axios執行命令npm install axios，安裝element ui 執行命令npm i element-ui -S
2、更新vue01\src\App.vue
export default {
name: 'App',
data() {
return {
}
},
methods: {
}
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
padding: 0px;
}
3、更新vue01\src\main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'
Vue.use(elementUI)
import axios from 'axios'
Vue.prototype.axios = axios
import qs from 'qs';
Vue.prototype.qs = qs;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
4、更新vue01\src\components\HelloWorld.vue
v-model="search"
class="search_name"
size="mini"
placeholder="輸入姓名查詢">
type="text"
@click="onSearch()"
class="el-icon-search">查詢
class="el-icon-refresh"
type="text"
@click="refreshData">刷新
class="el-icon-circle-plus-outline"
type="text"
@click="dialogVisible = true">添加
:data="tableData"
highlight-current-row
border
style="width: 100%">
label="編號">
{{ scope.row.userId }}
label="日期">
{{ scope.row.userDate }}
label="姓名">
姓名: {{ scope.row.userName }}
住址: {{ scope.row.userAddress }}
日期：{{ scope.row.userDate }}
{{ scope.row.userName }}
label="住址">
{{ scope.row.userAddress }}
label="操作"
fixed="right"
width="200">
size="mini"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)">編輯
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)">刪除
title="添加"
:append-to-body='true'
:visible.sync="dialogVisible"
width="80%"
:before-close="handleClose">
取 消
確 定
title="編輯"
:append-to-body='true'
:visible.sync="dialogUpdate"
width="80%"
:before-close="handleClose">
取 消
確 定
background
:disabled = "disablePage"
:current-page.sync="currentPage"
small
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange">
export default {
data() {
return {
ruleForm: {
userId: '',
userName: '',
userDate: '',
userAddress: ''
},
rules: {
userName: [
{ required: true, message: '請輸入姓名', trigger: 'blur' },
{ min: 2, max: 7, message: '長度在 2 到 7 個字符', trigger: 'blur' }
],
userAddress: [
{ required: true, message: '請輸入住址', trigger: 'blur' },
{ min: 5, message: '長度大于 5 個字符', trigger: 'blur' }
],
},
tableData: [],
search: '',
dialogVisible: false,
dialogUpdate: false,
pageSize: 5,
currentPage: 1,
total: 0,
disablePage: false
}
},
methods: {
handleEdit(index, row) {
this.dialogUpdate = true;
this.ruleForm = Object.assign({}, row); //這句是關鍵！！！
},
handleDelete(index, row) {
console.log(index, row);
this.$confirm('刪除操作, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let postData = this.qs.stringify({
userId: row.userId,
});
this.axios({
method: 'post',
url:'/delete',
data:postData
}).then(response =>
{
this.getPages();
this.currentPage = 1;
this.axios.post('/page').then(response =>
{
this.tableData = response.data;
}).catch(error =>
{
console.log(error);
});
this.$message({
type: 'success',
message: '刪除成功!'
});
console.log(response);
}).catch(error =>
{
console.log(error);
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
handleClose(done) {
this.$confirm('確認關閉？')
.then(_ => {
done();
})
.catch(_ => {});
},
handleCurrentChange() {
console.log(`當前頁: ${this.currentPage}`);
let postData = this.qs.stringify({
page: this.currentPage
});
this.axios({
method: 'post',
url:'/page',
data:postData
}).then(response =>
{
this.tableData = response.data;
}).catch(error =>
{
console.log(error);
});
},
cancel() {
this.dialogUpdate = false;
this.dialogVisible = false;
this.emptyUserData();
},
emptyUserData(){
this.ruleForm = {
userName: '',
userDate: '',
userAddress: ''
}
},
addUser() {
let postData = this.qs.stringify({
userDate: this.ruleForm.userDate,
userName: this.ruleForm.userName,
userAddress: this.ruleForm.userAddress
});
this.axios({
method: 'post',
url:'/insert',
data:postData
}).then(response =>
{
this.axios.post('/page').then(response =>
{
this.tableData = response.data;
this.currentPage = 1;
this.$message({
type: 'success',
message: '已添加!'
});
}).catch(error =>
{
console.log(error);
});
this.getPages();
this.dialogVisible = false
console.log(response);
}).catch(error =>
{
console.log(error);
});
},
updateUser() {
let postData = this.qs.stringify({
userId: this.ruleForm.userId,
userDate: this.ruleForm.userDate,
userName: this.ruleForm.userName,
userAddress: this.ruleForm.userAddress
});
this.axios({
method: 'post',
url:'/update',
data:postData
}).then(response =>
{
this.handleCurrentChange();
this.cancel();
this.$message({
type: 'success',
message: '更新成功!'
});
console.log(response);
}).catch(error =>
{
this.$message({
type: 'success',
message: '更新失敗!'
});
console.log(error);
});
},
onSearch() {
let postData = this.qs.stringify({
userName: this.search
});
this.axios({
method: 'post',
url: '/ListByName',
data: postData
}).then(response =>
{
this.tableData = response.data;
this.disablePage = true;
}).catch(error =>
{
console.log(error);
});
},
getPages() {
this.axios.post('/rows').then(response =>
{
this.total = response.data;
}).catch(error =>
{
console.log(error);
});
},
refreshData() {
location.reload();
}
},
created() {
/*this.axios.get('static/user.json').then(response =>
{
this.tableData = response.data.tableData;
this.total = response.data.tableData.length;
// console.log(JSON.parse(JSON.stringify(response.data))['tableData'])
});*/
this.axios.post('/page').then(response =>
{
this.tableData = response.data;
}).catch(error =>
{
console.log(error);
});
this.axios.post('/rows').then(response =>
{
this.total = response.data;
}).catch(error =>
{
console.log(error);
});
},
}
.search_name{
width: 200px;
}
.pages{
margin: 0px;
padding: 0px;
text-align: right;
}
前后端整合
方式一：
在vue01\config\index.js文件中配置proxyTable{}，如下：
proxyTable: {
'/': {
target:'http://localhost:8081', // 你請求的第三方接口
changeOrigin:true, // 在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite:{ // 路徑重寫，
'^/': '' // 替換target中的請求地址
}
}
},
方式二：
在vue-cli項目根目錄執行命令npm run build，編譯完成后將dist/static文件夾copy至springboot項目的src/main/resources/static目錄下然后直接啟動springboot項目就OK了。
實現效果
總結
大材小用，?這篇博客の源碼在我的GitHub上。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue和java实现页面增删改_SpringBoot-Vue实现增删改查及分页小DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 5.6.14 win32_m
- 下一篇： subscribe error不执行_你