SpringBoot+Vue实现页面的简单增删改查：
后端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 findUserByName(String userName);
/**
* 查找所有的员工名字的信息
* @return 所有的员工
*/
public List ListUser();
/**
* 分页查询员工信息
* @param starRows
* @return 每一页的员工信息的集合
*/
public List 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 findByName(String userName) {
return userMapper.findUserByName(userName);
}
public List ListUser() {
return userMapper.ListUser();
}
public List 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 ListUser() {
return userService.ListUser();
}
/**
* 通过名字查询 模糊查询
*
* @param userName
* @return
*/
@RequestMapping(value = "/ListByName")
@ResponseBody
public List ListUserByName(String userName) {
return userService.findByName(userName);
}
/**
* 查询页数
* @param page
* @return
*/
@RequestMapping(value ="/page")
@ResponseBody
public List page(Integer page) {
int pageNow = page == null ? 1 : page;//传入的页数是null 就查询第一页 否则就根据传入的页数进行查询
int pageSize=5;
int startRows = pageSize * (pageNow - 1);//开始的行数
List 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层：
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};
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---依赖层：
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.2.2.RELEASE
com
demo
0.0.1-SNAPSHOT
demo
Demo project for Spring Boot
1.8
1.2.0
5.1.39
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-jdbc
org.springframework.boot
spring-boot-starter-web
mysql
mysql-connector-java
${mysql-connector}
org.mybatis.spring.boot
mybatis-spring-boot-starter
${mybatis-spring-boot}
junit
junit
4.12
org.springframework.boot
spring-boot-starter-test
test
org.junit.vintage
junit-vintage-engine
org.springframework.boot
spring-boot-maven-plugin
10--数据库设计：
vue部分：
1---config包下:index.js文件修改：
proxyTable: {
'/': {
target:'http://localhost:8081', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写，
'^/': '' // 替换target中的请求地址
}
}
},2---增删改查主页面：
vue to complish CRUD
查询
刷新
添加
{{ scope.row.userId }}
{{ scope.row.userDate }}
姓名: {{ scope.row.userName }}
住址: {{ scope.row.userAddress }}
日期：{{ scope.row.userDate }}
{{ scope.row.userName }}
{{ scope.row.userAddress }}
编辑
删除
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文件：
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: '项目效果：
