Shulou(Shulou.com)06/03 Report--

Springboot combined with vue to achieve addition, deletion, modification and paging query operation, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

1: first of all. Create a springboot project, where I use and build the scaffolding of the basic framework, and open it like this:

Result class: wrapper classes with three return types have been encapsulated: code,msg,data

2: create a database called mytest (you can choose your own name)

CREATE TABLE `user` (`id` bigint (20) NOT NULL AUTO_INCREMENT COMMENT 'serial number', `name` varchar (20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'name', `age`int (11) DEFAULT NULL COMMENT 'age', `sex`varchar (1) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'gender', `adderss` varchar (255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'address', `phone`varchar (255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'phone' `creat_ time` varchar (20) COLLATE utf8mb4_unicode_ci DEFAULT NULL, PRIMARY KEY (`id`) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

3: write entity classes: entity- > User class

* * first add @ Table annotation to tell us which table we want, and then add @ Entity to mark that User is an entity,@Data method to generate getset.

**

Package com.example.entity;import lombok.Data;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.Table;@Table (name= "user") @ Entity@Datapublic 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;}

You can add your own get and set methods here. I have directly added lombok annotations to pom.

Org.projectlombok lombok

Don't be afraid to add the user error here.

@ Id @ GeneratedValue (strategy = GenerationType.IDENTITY) / / indicates that ID is independent and automatically increments

4: write UserDao layer: write database interface

Package com.example.dao;import com.example.entity.User;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.stereotype.Repository;@Repositorypublic interface UserDao extends JpaRepository {}

5: write service layer, add, delete, change and search methods (using springdataJPA)

Package com.example.service;import com.example.dao.UserDao;import com.example.entity.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 @ Servicepublic class UserService {/ / 1: import database interface (JPA helps us write a lot of interfaces, we just need to call) @ Resource private UserDao userDao / / these two methods are merged into one, because they are both called save. The difference is that ID will not be passed in when it is added. When it is updated, the framework will help us distinguish / add / / public void add (User user) {/ / userDao.save (user); / /} / modify / / public void updata (User user) {/ / userDao.save (user) / / add + modify public void save (User user) {userDao.save (user);} / delete public void del (Long id) {userDao.deleteById (id);} / / find public User findById (Long id) {return userDao.findById (id) .orElse (null) / / return null} / / Paging query public Page 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);}}

Paging query statements need to be written in the UserDao layer along the way

Package com.example.dao;import com.example.entity.User;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.data.domain.Pageable;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.Query;import org.springframework.stereotype.Repository;@Repositorypublic interface UserDao extends JpaRepository {@ Query (value = "select * from user where name like%? 1%", nativeQuery = true) Page findNameLike (String name, Pageable pageRequest);}

6: write UserController as the interface access layer

Package com.example.controller;import com.example.common.Result;import com.example.entity.User;import com.example.service.UserService;import org.springframework.data.domain.Page;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource / * * @ author ${Fan Tao} * @ Description * @ create 2021-09-20 12:19 * / @ RestController / / indicates that all methods return json data @ RequestMapping ("/ user") public class UserController {@ Resource private UserService userService; / add @ PostMapping public Result add (@ RequestBody User user) {userService.save (user); return Result.success () } / / Update @ PutMapping public Result update (@ RequestBody User user) {userService.save (user); return Result.success ();} / Delete user: / user/1 @ DeleteMapping ("/ {id}") public Result delete (@ PathVariable Long id) {userService.del (id); return Result.success () } / / query the user @ GetMapping ("/ {id}") public Result findById (@ PathVariable Long id) {return Result.success (userService.findById (id)) according to id } / / paging query @ GetMapping public Result 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: write the front-end interface, write index.html in static, and test run

8: introduce styles by using elementui

9: write index.html files

User information table added Male and female Cancel the deterministic 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) {/ / Edit $.ajax ({url:'/ user', type: 'put', contentType:' application/json' Data: data}) .then (res = > {this.dialogVisible = false) This.loadTable (1) })} else {/ / add $.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) })})

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.