springboot与vue实现简单的CURD

结果封装类

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

用户信息表

<el-button type=“primary” @click=“add”>新增

<el-input v-model=“name” style=“width: 70%” @keyup.enter.native=“loadTable(1)”>

<el-table

:data=“page.content”

stripe

border

style=“width: 100%”>

<el-table-column

prop=“name”

label=“用户名”

<el-table-column

prop=“age”

label=“年龄”

width=“180”>

<el-table-column

prop=“sex”

label=“性别”>

<el-table-column

prop=“address”

label=“地址”>

<el-table-column

prop=“phone”

label=“电话”>

<el-table-column

fixed=“right”

label=“操作”

width=“100”>

<el-button type=“primary” icon=“el-icon-edit” size=“small” circle @click=“edit(scope.row)”>

<el-button type=“danger” icon=“el-icon-delete” size=“small” circle @click=“del(scope.row.id)”>

<el-pagination

layout=“prev, pager, next”

:page-size=“pageSize”

:current-page=“pageNum”

@prev-click=“loadTable”

@current-change=“loadTable”

@next-click=“loadTable”

:total=“page.totalElements”>

<el-dialog

title=“用户信息”

:visible.sync=“dialogVisible”

width=“30%”>

男

女

<el-button @click=“dialogVisible = false”>取 消

<el-button type=“primary” @click=“save”>确 定