springboot+vue实现增删改查+分页查询

springboot+vue实现增删改查+分页查询

0：源码在最后！！

1：首先。创建一个springboot项目，这里我使用以及构建好基本框架的脚手架，打开是这个样子：

Result类：已经封装好了三种返回类型的包装类：code，msg，data

2：创建数据库叫mytest(可以自己取名字)

CREATE TABLE `user` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '序号',`name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '姓名·',`age` int(11) DEFAULT NULL COMMENT '年龄',`sex` varchar(1) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '性别',`adderss` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',`phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '电话',`creat_time` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

3：编写实体类：entity->User类

**首先加@Table注解告诉我们要哪个表，然后加@Entity标注这个User是一个entity，@Data生成getset方法
**

ity;import lombok.Data;import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;@Table(name="user")
@Entity
@Data
public class User {private  Long id;private  String name;private  Integer age;private  String sex;private  String adderss;private  String phone;@Column(name = "creat_time")    private  String creatTime;}

这里可以自己添加get和set方法，我这里是直接在pom里面添加了lombok注解

  <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>

这里user报错不要怕 在下面加上

    @Id@GeneratedValue(strategy = GenerationType.IDENTITY)  //表示ID是主见并且自动递增

4：编写UserDao层：写数据库接口

ample.dao;ity.User;
import org.springframework.pository.JpaRepository;
import org.springframework.stereotype.Repository;@Repository
public interface UserDao extends JpaRepository<User,Long> {
}

5：编写service层，编写增删改查方法（使用了springdataJPA）

ample.service;ample.dao.UserDao;
ity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.Optional;@Service
public class UserService {//1:导入数据库接口  (JPA帮助我们编写了大量的接口，我们只需要调用就好)@Resourceprivate UserDao userDao;//   这两个方法合并成了一个，因为都是调用的save,区别就是新增的时候不会传ID进来，更新的时候会,框架会帮我们区分
//    // 增加
//    public void add(User user){
//        userDao.save(user);
//    }
//
//    //修改
//    public  void  updata(User user){
//        userDao.save(user);
////新增+修改public void save(User user){userDao.save(user);}//删除public  void  del(Long id){userDao.deleteById(id);}//查找public User findById(Long id){return userDao.findById(id).orElse(null);  //没有数据则返回null}//分页查询public Page<User> findPage(Integer pageNum, Integer pageSize,String name){Sort sort = Sort.by(Sort.Direction.DESC,"creat_time");Pageable request = PageRequest.of(pageNum-1,pageSize,sort);return userDao.findNameLike(name,request);}
}

中途需要在UserDao层编写分页查询语句

ample.dao;ity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.pository.JpaRepository;
import org.springframework.pository.Query;
import org.springframework.stereotype.Repository;@Repository
public interface UserDao extends JpaRepository<User,Long> {@Query(value = "select * from  user where  name like %?1%",nativeQuery = true)Page<User> findNameLike(String name, Pageable pageRequest);
}

6：编写UserController作为接口访问层

ller;amplemon.Result;
ity.User;
ample.service.UserService;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;/*** @author ${范涛之}* @Description* @create 2021-09-20 12:19*/
@RestController     //表明所有方法都是返回json数据
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService;// 新增@PostMappingpublic Result add(@RequestBody User user){userService.save(user);return  Result.success();}//更新@PutMappingpublic Result update(@RequestBody User user){userService.save(user);return  Result.success();}//删除用户 ： /user/1@DeleteMapping("/{id}")public Result delete(@PathVariable Long id){userService.del(id);return  Result.success();}//根据id查询用户@GetMapping("/{id}")public Result<User> findById(@PathVariable Long id){return  Result.success( userService.findById(id));}//分页查询@GetMappingpublic Result<Page<User>> findById(@RequestParam(required = false,value ="1" )Integer pageNum,@RequestParam(required = false,value ="10" )Integer PageSize,@PathVariable(required = false) String name){return  Result.success( userService.findPage(pageNum,PageSize,name));}}

7：编写前端界面，在static里面写index.html，测试运行

8：通过使用elementui引入样式

9：编写index.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户信息</title><!-- 引入样式 --><link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto"><h2>用户信息表</h2><el-row><el-col :span="6" style="margin-bottom: 10px"><el-button type="primary" @click="add">新增</el-button><el-input v-model="name" style="width: 70%" &#native="loadTable(1)"></el-input></el-col></el-row><el-table:data=&#t"stripeborderstyle="width: 100%"><el-table-columnprop="name"label="用户名"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="phone"label="电话"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="small" circle @click="w)"></el-button><el-button type="danger" icon="el-icon-delete" size="small" circle @click="w.id)"></el-button></template></el-table-column></el-table><el-row type="flex" justify="center" style="margin-top: 10px"><el-paginationlayout="prev, pager, next":page-size="pageSize":current-page="pageNum"@prev-click="loadTable"@current-change="loadTable"@next-click="loadTable":total=&#alElements"></el-pagination></el-row><el-dialogtitle="用户信息":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="用户名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="form.age"></el-input></el-form-item><el-form-item label="性别"><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio></el-form-item><el-form-item label="地址"><el-input v-model="form.address"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></span></el-dialog></div><script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="element.js"></script><script>new Vue({el: '#app',data: {page: {},name: '',pageNum: 1,pageSize: 8,dialogVisible: false,form: {}},created() {this.loadTable(this.pageNum);},methods: {loadTable(num) {this.pageNum = num;$.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {this.page = res.data;});},add() {this.dialogVisible = true;this.form = {};},edit(row) {this.form = row;this.dialogVisible = true;},save() {let data = JSON.stringify(this.form);if (this.form.id) {// 编辑$.ajax({url: '/user',type: 'put',contentType: 'application/json',data: data}).then(res => {this.dialogVisible = false;this.loadTable(1);})} else {// 新增$.ajax({url: '/user',type: 'post',contentType: 'application/json',data: data}).then(res => {this.dialogVisible = false;this.loadTable(1);})}},del(id) {$.ajax({url: '/user/' + id,type: 'delete',contentType: 'application/json'}).then(res => {this.loadTable(1);})}}})
</script>
</body>
</html>

完结撒花:

源码：