springboot与vue实现简单的CURD过程详析

springboot与vue实现简单的CURD过程详析

数据库

后端项目搭建：

entity

dao层

@Repository

public interface UserRepositorOkdqwZay extends JpaRepository {

@Query(value = "select * from user where name like %?1%", nativeQuery = true)

Page findByNameLike(String name, Pageable pageRequest);

}

service

@SpringBootApplication

public class Demo33Application {

public static void main(String[] args) {

SpringApplication.run(Demo33Application.class, args);

}

}

controller

@RestController

@RequestMapping("/user")

public class UserController {

@Resource

private UserService userService;

// 新增用户

@PostMapping

public Result add(@RequestBody User user) {

userService.save(user);

return Result.success();

}

// 修改用户

@PutMapping

public Result update(@RequestBody User user) {

userService.save(user);

return Result.success();

}

// 删除用户

@DeleteMapping("/{id}")

public void delete(@PathVariable("id") Long id) {

userService.delete(id);

}

// 根据id查询用户

@GetMapping("/{id}")

public Result findById(@PathVariable Long id) {

return Result.success(userService.findById(id));

}

// 查询所有用户

@GetMapping

public Result> findAll() {

return Result.success(userService.findAll());

}

// 分页查询用户

@GetMapping("/page")

public Result> findPage(@RequestParam(defaultValue = "1") Integer pageNum,

@RequestParam(defaultValue = "10") Integer pageSize,

@RequestParam(required = false) String name) {

return Result.success(userService.findPage(pageNum, pageSize, name));

}

}

结果封装类

package com.example.common;

public class Result {

private String code;

private String msg;

private T data;

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getData() {

return data;

}

public void setData(T data) {

this.data = data;

}

public Result() {

}

public Result(T data) {

this.data = data;

}

public static Result success() {

Result result = new Result<>();

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result success(T data) {

Result result = new Result<>(data);

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result error(String code, String msg) {

Result result = new Result();

result.setCode(code);

result.setMsg(msg);

return result;

}

}

处理跨域

package com.example.common;

public class Result {

private String code;

private String msg;

private T data;

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getData() {

return data;

}

public void setData(T data) {

this.data = data;

}

public Result() {

}

public Result(T data) {

this.data = data;

}

public static Result success() {

Result result = new Result<>();

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result success(T data) {

Result result = new Result<>(data);

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result error(String code, String msg) {

Result result = new Result();

result.setCode(code);

result.setMsg(msg);

return result;

}

}

***yml

spring:

datasource:

driver-class-name: com.mysql.cj.jdbc.Driver

username: root

password: 123456

url: jdbc:mysql://localhost:3306/mytest?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8

vue 部分

只需要编写index.html

新增

:data="page.content"

stripe

border

style="width: 100%">

prop="name"

label="用户名"

>

prop="age"

label="年龄"

width="180">

prop="sex"

label="性别">

prop="address"

label="地址">

prop="phone"

label="电话">

fixed="right"

label="操作"

width="100">

:data="page.content"

stripe

border

style="width: 100%">

prop="name"

label="用户名"

>

prop="name"

label="用户名"

>

prop="age"

label="年龄"

width="180">

prop="age"

label="年龄"

width="180">

prop="sex"

label="性别">

prop="sex"

label="性别">

prop="address"

label="地址">

prop="address"

label="地址">

prop="phone"

label="电话">

prop="phone"

label="电话">

fixed="right"

label="操作"

width="100">

fixed="right"

label="操作"

width="100">

layout="prev, pager, next"

:page-size="pageSize"

:current-page="pageNum"

@prev-click="loadTable"

@current-change="loadTable"

@next-click="loadTable"

:total="page.totalElements">

layout="prev, pager, next"

:page-size="pageSize"

:current-page="pageNum"

@prev-click="loadTable"

@current-change="loadTable"

@next-click="loadTable"

:total="page.totalElements">

title="用户信息"

:visible.sync="dialogVisible"

width="30%">

男

女

取 消

确 定

title="用户信息"

:visible.sync="dialogVisible"

width="30%">

男

女

取 消

确 定

项目展示：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。