SpringBoot+Vue实现页面的简单增删改查：
程序员文章站
2022-06-13 19:05:18
...
后端SpringBoot部分：
1---目录结构：
2---实体类：
package com.demo.entity;
import lombok.Data;
/**
* Created by houyuanbo
* on 2019/12/9 13:50
*
* @Description ：实体类
*/
@Data
public class User {
private int userId;
private String userDate;
private String userName;
private String userAddress;
}
3---mapper类：
package com.demo.mapper;
import com.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/**
* Created by houyuanbo
* on 2019/12/9 13:57
*
* @Description ：数据库接口mapper接口类
*/
@Mapper
public interface UserMapper {
/**
* 通过名字查找信息
* @param userName
* @return 相同名字的信息的集合
*/
public List<User> findUserByName(String userName);
/**
* 查找所有的员工名字的信息
* @return 所有的员工
*/
public List<User> ListUser();
/**
* 分页查询员工信息
* @param starRows
* @return 每一页的员工信息的集合
*/
public List<User> queryPage(Integer starRows);
/**
* 每一行的个数
* @return
*/
public int getRowCount();
/**
* 插入员工信息
* @param user
* @return 是否成功
*/
public int insertUser(User user);
/**
* 通过id删除员工信息
* @param userId
* @return 是否成功
*/
public int delete(int userId);
/**
* 更新员工信息
* @param user
* @return 是否成功
*/
public int Update(User user);
}
4---service层：
package com.demo.service;
import com.demo.entity.User;
import com.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* Created by houyuanbo
* on 2019/12/9 14:23
*
* @Description ：
*/
@Service
public class UserService {
@Autowired
UserMapper userMapper;
public List<User> findByName(String userName) {
return userMapper.findUserByName(userName);
}
public List<User> ListUser() {
return userMapper.ListUser();
}
public List<User> queryPage(Integer starRows) {
return userMapper.queryPage(starRows);
}
public int getRowCount() {
return userMapper.getRowCount();
}
public User insertUser(User user) {
userMapper.insertUser(user);
return user;
}
public int delete(int userId) {
return userMapper.delete(userId);
}
public int Update(User user) {
return userMapper.Update(user);
}
}
5---controller层：
package com.demo.controller;
import com.demo.entity.User;
import com.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* Created by houyuanbo
* on 2019/12/9 14:34
*
* @Description ：
*/
@CrossOrigin
@RestController
public class UserController {
@Autowired
UserService userService;
/**
* 通过员工id删除员工
*
* @param userId
* @return
*/
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public Integer delete(Integer userId) {
System.out.println(userId);
int result = userService.delete(userId);
return result;
}
/**
* 更新员工
*
* @param user
* @return
*/
@RequestMapping(value = "/update", method = RequestMethod.POST)
@ResponseBody
public String update(User user) {
int result = userService.Update(user);
if (result >= 1) {
return "修改成功";
} else {
return "修改失败";
}
}
/**
* 插入员工
*
* @param user
* @return
*/
@RequestMapping(value = "/insert", method = RequestMethod.POST)
public User insert(User user) {
return userService.insertUser(user);
}
/**
* 查询所有
*
* @return
*/
@RequestMapping(value = "/ListUser")
@ResponseBody
public List<User> ListUser() {
return userService.ListUser();
}
/**
* 通过名字查询 模糊查询
*
* @param userName
* @return
*/
@RequestMapping(value = "/ListByName")
@ResponseBody
public List<User> ListUserByName(String userName) {
return userService.findByName(userName);
}
/**
* 查询页数
* @param page
* @return
*/
@RequestMapping(value ="/page")
@ResponseBody
public List<User> page(Integer page) {
int pageNow = page == null ? 1 : page;//传入的页数是null 就查询第一页 否则就根据传入的页数进行查询
int pageSize=5;
int startRows = pageSize * (pageNow - 1);//开始的行数
List<User> list = userService.queryPage(startRows);
return list;
}
@RequestMapping(value ="rows")
@ResponseBody
public int rows(){
return userService.getRowCount();
}
}
6---启动类：
package com.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
7---mapper.xml层：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.UserMapper">
<resultMap id="result" type="com.demo.entity.User">
<result property="userId" column="userId"></result>
<result property="userDate" column="userDate"></result>
<result property="userName" column="userName"></result>
<result property="userAddress" column="userAddress"></result>
</resultMap>
<!--查询所有的方法-->
<select id="ListUser" resultMap="result">
select * from user;
</select>
<!--通过员工姓名查找员工-->
<select id="findUserByName" parameterType="String" resultMap="result">
select * from user where userName like concat(concat('%',#{username},'%')) order by userId desc;
</select>
<!--分页查询-->
<select id="queryPage" parameterType="Integer" resultMap="result">
select * from user order by userId desc limit #{startRows},5;
</select>
<!--查询用户的总条数-->
<select id="getRowCount" resultType="Integer">/*返回值类型是Integer*/
select count(*) from user;
</select>
<!--插入数据-->
<insert id="insertUser" parameterType="com.demo.entity.User">
insert into user(userId,userDate,userName,userAddress) values (
#{userId},
#{userDate,jdbcType=VARCHAR},
#{userName,jdbcType=VARCHAR},
#{userAddress,jdbcType=VARCHAR}
)
</insert>
<!--删除-->
<delete id="delete" parameterType="int">
delete from user where userId=#{userId}
</delete>
<!--更新-->
<update id="Update" parameterType="com.demo.entity.User">
update user
set user.userDate=#{userDate},
user.userName=#{userName},
user.userAddress=#{userAddress}
where user.userId=#{userId};
</update>
</mapper>8---配置层：
##数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
##mybatis配置
mybatis.type-aliases-package=org.spring.springboot.domain
mybatis.mapper-locations=classpath:mapper/*.xml
##改变端口号
server.port=8081
9---依赖层：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<mybatis-spring-boot>1.2.0</mybatis-spring-boot>
<mysql-connector>5.1.39</mysql-connector>
</properties>
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--SpringBoot Web依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mysql连接驱动依赖-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql-connector}</version>
</dependency>
<!--SpringBoot mybatis依赖-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis-spring-boot}</version>
</dependency>
<!--Junit 单元测试依赖-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
<!--SpringBoot Test依赖-->
<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>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
10--数据库设计：
vue部分：
1---config包下:index.js文件修改：
proxyTable: {
'/': {
target:'http://localhost:8081', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写，
'^/': '' // 替换target中的请求地址
}
}
},2---增删改查主页面：
<template>
<div>
<!--标题-->
<el-form class="title">
vue to complish CRUD
</el-form>
<!--导航栏设计-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="search" class="search_name" size="mini" placeholder="输入姓名查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="text" @click="onSearch()" class="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button class="el-icon-refresh" type="text" @click="refreshData">刷新</el-button>
</el-form-item>
<el-form-item>
<el-button class="el-icon-circle-plus-outline" type="text" @click="dialogVisible = true">添加</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" highlight-current-row border style="width: 100%">
<el-table-column label="编号">
<template slot-scope="scope">
<span>{{ scope.row.userId }}</span>
</template>
</el-table-column>
<el-table-column label="日期">
<template slot-scope="scope">
<i class="el-icon-time hidden-sm-and-down"></i>
<span>{{ scope.row.userDate }}</span>
</template>
</el-table-column>
<el-table-column label="姓名">
<template slot-scope="scope">
<el-popover trigger="hover" placement="right">
<p>姓名: {{ scope.row.userName }}</p>
<p>住址: {{ scope.row.userAddress }}</p>
<p>日期：{{ scope.row.userDate }}</p>
<div slot="reference" class="name-wrapper">
<el-button type="text">{{ scope.row.userName }}</el-button>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="住址">
<template slot-scope="scope">
<span>{{ scope.row.userAddress }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="190">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--添加对话框开始-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
<el-dialog title="添加" :append-to-body='true' :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
<el-input type="hidden" v-model="ruleForm.userId"/>
<el-form-item label="时间" prop="userDate">
<el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.userDate" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="userName">
<el-input v-model="ruleForm.userName"></el-input>
</el-form-item>
<el-form-item label="住址" prop="userAddress">
<el-input v-model="ruleForm.userAddress"></el-input>
</el-form-item>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()" size="medium">取 消</el-button>
<el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
</span>
</el-dialog>
</el-form>
<!--添加对话框结束-->
<!--编辑对话框开始-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
<el-dialog title="编辑" :append-to-body='true' :visible.sync="dialogUpdate" width="50%" :before-close="handleClose">
<el-input type="hidden" v-model="ruleForm.userId"/>
<el-form-item label="时间" prop="userDate">
<el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.userDate" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="姓名" prop="userName">
<el-input v-model="ruleForm.userName"></el-input>
</el-form-item>
<el-form-item label="住址" prop="userAddress">
<el-input v-model="ruleForm.userAddress"></el-input>
</el-form-item>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()" size="medium">取 消</el-button>
<el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
</span>
</el-dialog>
</el-form>
<!--编辑对话框结束-->
<br>
<div class="pages">
<el-pagination background :disabled = "disablePage" :current-page.sync="currentPage" small layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
userId: '',
userName: '',
userDate: '',
userAddress: ''
},
rules: {
userName: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 7, message: '长度在 2 到 15 个字符', trigger: 'blur' }
],
userAddress: [
{ required: true, message: '请输入住址', trigger: 'blur' },
{ min: 5, message: '长度大于 3 个字符', 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);
console.log("========"+index);
console.log("======="+row);
this.$confirm('删除操作, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let postData = this.qs.stringify({
userId: row.userId,
});
this.axios({
method: 'post',
url:'http://localhost:8081/delete',
data:postData
}).then(response =>
{
this.getPages();
this.currentPage = 1;
this.axios.post('http://localhost:8081/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:'http://localhost:8081/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:'http://localhost:8081/insert',
data:postData
}).then(response =>
{
this.axios.post('http://localhost:8081/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:'http://localhost:8081/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: 'http://localhost:8081/ListByName',
data: postData
}).then(response =>
{
this.tableData = response.data;
this.disablePage = true;
}).catch(error =>
{
console.log(error);
});
},
getPages() {//-----------------------------------------------------获取页码操作
this.axios.post('http://localhost:8081/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('http://localhost:8081/page').then(response =>
{
this.tableData = response.data;
}).catch(error =>
{
console.log(error);
});
this.axios.post('http://localhost:8081/rows').then(response =>
{
this.total = response.data;
}).catch(error =>
{
console.log(error);
});
},
}
</script>
<style scoped>
.title{
text-align: center;
font-size:35px;
color: #8cc5ff;
font-weight: bold;
}
.search_name{
width: 200px;
}
.pages{
margin: 0px;
padding: 0px;
text-align: right;
}
</style>
3---router中index.js文件：
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../components/Login";
import HelloWorld from "../components/HelloWorld";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',/*根目录下直接显示*/
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',/*根目录下直接显示*/
name: 'login',
component: Login
}
]
})
4---App.vue文件：
<template>
<div id="app">
<el-row type="flex" justify="center">
<el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="18">
<router-view/>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
}
},
methods:{
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
padding: 0px;
}
</style>
5---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: '<App/>'
})
项目效果：
下一篇： Maven打包编译出错