目录
1、后端实现
1.3、打开项目的pom.xml文件，修改版本为2.5.13
创建完Springboot项目后，接着在idea中配置Maven，接下来直接复制以上pom.xml文件内容到项目的pom.xml
代码实现
1、后端实现
用到的依赖：Springboot，Mybatis-plus，lombok，mysql驱动
1.1、利用IDEA2021创建一个Springboot项目
注意：Name（项目名称） location（项目在磁盘上的位置）
Type（选Maven）Group（一般是把公司或者组织的域名倒过来）
Lombok用于实体类的get，set以及构造器的自动生成，而且@Slf4j也
在Lombok中，比如说log.info()打印相关变量
1.2、到Setting中修改Maven配置
1.3、打开项目的pom.xml文件，修改版本为2.5.13
Mysql依赖
MySQL :: MySQL Connector/J 8.0 Developer Guide :: 4.2 Installing Connector/J Using Maven
1.4、Springboot pom.xml完整的配置文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.13</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>cn.com.buba</groupId>
<artifactId>vuecrud</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>vuecrud</name>
<description>Demo project for Spring Boot</description>
<properties>
<!-- jdk版本-->
<java.version>11</java.version>
<!-- mysql jdbc驱动-->
<mysql.version>8.0.21</mysql.version>
<!-- mybatis-plus-->
<mybatis-plus.version>3.4.2</mybatis-plus.version>
<mybatis-plus-generator.version>3.4.1</mybatis-plus-generator.version>
<velocity-engine-core.version>2.3</velocity-engine-core.version>
<swagger.version>2.7.0</swagger.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- mysql8驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatis-plus.version}</version>
</dependency>
<!-- 逆向工程代码生成器-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>${mybatis-plus-generator.version}</version>
</dependency>
<!-- 生成器默认模板引擎-->
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>${velocity-engine-core.version}</version>
</dependency>
<!--swagger-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>${swagger.version}</version>
</dependency>
<!--swagger ui-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>${swagger.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
创建完Springboot项目后，接着在idea中配置Maven，接下来直接复制以上pom.xml文件内容到项目的pom.xml
1.5、用Navicat创建数据库和表
新建数据库
在Navicat执行以下sql语句
DROP TABLE IF EXISTS `hospital_set`;
CREATE TABLE `hospital_set` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '编号',
`hosname` varchar(100) DEFAULT NULL COMMENT '医院名称',
`hoscode` varchar(30) DEFAULT NULL COMMENT '医院编号',
`api_url` varchar(100) DEFAULT NULL COMMENT 'api基础路径',
`sign_key` varchar(50) DEFAULT NULL COMMENT '签名秘钥',
`contacts_name` varchar(20) DEFAULT NULL COMMENT '联系人',
`contacts_phone` varchar(11) DEFAULT NULL COMMENT '联系人手机',
`status` tinyint NOT NULL DEFAULT '0' COMMENT '状态',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
`is_deleted` tinyint NOT NULL DEFAULT '0' COMMENT '逻辑删除(1:已删除，0:未删除)',
PRIMARY KEY (`id`),
UNIQUE KEY `uk_hoscode` (`hoscode`)
) ENGINE=InnoDB AUTO_INCREMENT=39 DEFAULT CHARSET=utf8mb3 COMMENT='医院设置表';
-- ----------------------------
-- Records of hospital_set
-- ----------------------------
INSERT INTO `hospital_set` VALUES ('1', '*东方医院', '00012', '/api/tiantan', '122', '', null, '0', '2022-06-05 22:58:09', '2022-06-29 19:08:43', '1');
INSERT INTO `hospital_set` VALUES ('2', '*东方医院', '00015', '/api/east', '122', '', '', '0', '2022-06-05 22:58:09', '2022-06-29 19:08:43', '1');
INSERT INTO `hospital_set` VALUES ('3', '*空军医院', '00016', '/api/airforce', '122', '', '', '0', '2022-06-05 22:58:09', '2022-06-29 19:08:43', '0');
INSERT INTO `hospital_set` VALUES ('4', '*陆军医院', '00017', '/api/army', '122', '', '', '0', '2022-06-05 22:58:09', '2022-06-29 19:08:43', '0');
INSERT INTO `hospital_set` VALUES ('5', '*海军医院', '00019', '/api/navy', '122', '', '', '0', '2022-06-05 22:58:09', '2022-06-29 19:08:43', '1');
1.6、配置application.properties
复制到application.properties里
#服务器端口号
server.port=8080
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3307/crud?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=111111·
#在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射
mybatis-plus.configuration.map-underscore-to-camel-case=true
#日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#主键生成策略：雪花算法
mybatis-plus.global-config.db-config.id-type=ASSIGN_ID
1.7、利用Mybatis-plue逆向工程生成单表的controller，mapper，service，impl，controller，entity包
将这个文件放到和启动类同一包下（红色字体要修改的内容）
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.VelocityTemplateEngine;
import org.apache.commons.lang3.StringUtils;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
public class CodeGenerator {
/**
* <p>
* 读取控制台内容
* </p>
*/
public static String scanner(String tip) {
Scanner scanner = new Scanner(System.in);
StringBuilder help = new StringBuilder();
help.append("请输入" + tip + "：");
System.out.println(help.toString());
if (scanner.hasNext()) {
String ipt = scanner.next();
if (StringUtils.isNotEmpty(ipt)) {
return ipt;
}
}
throw new MybatisPlusException("请输入正确的" + tip + "！");
}
public static void main(String[] args) {
// 代码生成器
AutoGenerator mpg = new AutoGenerator();
// 全局配置
GlobalConfig gc = new GlobalConfig();
String projectPath = System.getProperty("user.dir");
gc.setOutputDir(projectPath + "/src/main/java");
gc.setAuthor("LDJ");
gc.setOpen(false);
// 设置名字
gc.setControllerName("%sController");
gc.setServiceName("%sService");
gc.setServiceImplName("%sServiceImpl");
gc.setMapperName("%sMapper");
// 设置 resultMap
gc.setBaseResultMap(true);
gc.setBaseColumnList(true);
// gc.setFileOverride(true);
// gc.setSwagger2(true); 实体属性 Swagger2 注解
mpg.setGlobalConfig(gc);
// 数据源配置
DataSourceConfig dsc = new DataSourceConfig();
dsc.setUrl("jdbc:mysql://localhost:3307/crud?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true");
dsc.setDriverName("com.mysql.cj.jdbc.Driver");
dsc.setUsername("root");
dsc.setPassword("111111");
mpg.setDataSource(dsc);
// 自定义配置
InjectionConfig cfg = new InjectionConfig() {
@Override
public void initMap() {
// to do nothing
}
};
// 包配置
PackageConfig pc = new PackageConfig();
// pc.setModuleName(scanner("模块名"));
pc.setParent("cn.com.buba.vuecrud");
mpg.setPackageInfo(pc);
// 如果模板引擎是 velocity
String templatePath = "/templates/mapper.xml.vm";
// 自定义输出配置
List<FileOutConfig> focList = new ArrayList<>();
// 自定义配置会被优先输出
focList.add(new FileOutConfig(templatePath) {
@Override
public String outputFile(TableInfo tableInfo) {
// 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
+ "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
}
});
cfg.setFileOutConfigList(focList);
mpg.setCfg(cfg);
// 配置模板
TemplateConfig templateConfig = new TemplateConfig();
templateConfig.setXml(null);
mpg.setTemplate(templateConfig);
// 策略配置
StrategyConfig strategy = new StrategyConfig();
strategy.setNaming(NamingStrategy.underline_to_camel);
strategy.setColumnNaming(NamingStrategy.underline_to_camel);
strategy.setEntityLombokModel(true);
strategy.setRestControllerStyle(true);
// 写于父类中的公共字段
// strategy.setSuperEntityColumns("id");
strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
strategy.setControllerMappingHyphenStyle(true);
strategy.setTablePrefix(pc.getModuleName() + "_");
mpg.setStrategy(strategy);
mpg.setTemplateEngine(new VelocityTemplateEngine());
mpg.execute();
}
}
如果成功生成相应的包及接口和类后，找到mapper包下的接口，在其加上@Mapper
1.8、配置swagger-ui用于接口测试
新建一个config包，和controller包同级
将Swagger2Config文件放到config包中，内容如下（需要修改的字体为红色）
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
/**
* Swagger2配置信息
*/
@Configuration
@EnableSwagger2
public class Swagger2Config {
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
//apiInfo指定测试文档基本信息，这部分将在页面展示
.apiInfo(apiInfo())
.select()
//apis() 控制哪些接口暴露给swagger，
// RequestHandlerSelectors.any() 所有都暴露
// RequestHandlerSelectors.basePackage("com.info.*") 指定包位置
.apis(RequestHandlerSelectors.basePackage("cn.com.buba"))
.paths(PathSelectors.any())
.build();
}
//基本信息，页面展示
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("增删改查")
.description("springboot增删改查")
.version("1.0")
.contact(new Contact("xxx", "http://www.baidu.com", "3332222@qq.com"))
.build();
}
}
启动项目输入网址http://localhost:8080/swagger-ui.html
看到如下网址表示swagger-ui配置成功
1.9、配置mybatis-plus分页插件
将MybatisPlusConfig.java放到config包里文件内容如下
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
@Slf4j
public class MybatisPlusConfig {
/**
* 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)
*/
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
log.info("分页插件......");
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return interceptor;
}
}
1.10、配置mybatis-plus公共字段插入
将MyConfig.java放到config包里文件内容如下
import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import lombok.extern.slf4j.Slf4j;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.time.LocalDateTime;
@Configuration
@Slf4j
public class MyConfig {
@Bean
public MetaObjectHandler metaObjectHandler(){
return new MetaObjectHandler() {
@Override
public void insertFill(MetaObject metaObject) {
log.info("开始处理 insert方式 公共字段");
metaObject.setValue("createTime", LocalDateTime.now());
metaObject.setValue("updateTime", LocalDateTime.now());
// metaObject.setValue("createUser", BaseContext.getCurrentId());
// metaObject.setValue("updateUser", BaseContext.getCurrentId());
}
@Override
public void updateFill(MetaObject metaObject) {
//验证LoginFilter 的doFilter
// MyMetaObjectHandler的updateFill
// EmployeeController的update方法使用同一线程
Long sameId = Thread.currentThread().getId();
log.info("doFilter updateFill update sameId = {}", sameId);
log.info("开始处理 update方式 公共字段");
metaObject.setValue("updateTime", LocalDateTime.now());
// metaObject.setValue("updateUser", BaseContext.getCurrentId());
}
};
}
}
1.11、配置工具类
因为mybatis-plus帮我们自动生成了mapper，service，serviceImpl在这个过程要检查mapper及serviceImpl上有@Mapper，@Service
接下来我们要在Controller上编写（此接口不是interface）
创建一个包util，和controller同级，用来存放工具类
将ResultCodeEnum.java和Result.java放到util包中，用于统一返回结果
ResultCodeEnum.java：
import lombok.Getter;
/**
* 统一返回结果状态信息类
*/
@Getter
public enum ResultCodeEnum {
SUCCESS(200,"成功"),
FAIL(201, "失败"),
PARAM_ERROR( 202, "参数不正确"),
SERVICE_ERROR(203, "服务异常"),
DATA_ERROR(204, "数据异常"),
DATA_UPDATE_ERROR(205, "数据版本异常"),
LOGIN_AUTH(208, "未登陆"),
PERMISSION(209, "没有权限"),
CODE_ERROR(210, "验证码错误"),
// LOGIN_MOBLE_ERROR(211, "账号不正确"),
LOGIN_DISABLED_ERROR(212, "改用户已被禁用"),
REGISTER_MOBLE_ERROR(213, "手机号已被使用"),
LOGIN_AURH(214, "需要登录"),
LOGIN_ACL(215, "没有权限"),
URL_ENCODE_ERROR( 216, "URL编码失败"),
ILLEGAL_CALLBACK_REQUEST_ERROR( 217, "非法回调请求"),
FETCH_ACCESSTOKEN_FAILD( 218, "获取accessToken失败"),
FETCH_USERINFO_ERROR( 219, "获取用户信息失败"),
//LOGIN_ERROR( 23005, "登录失败"),
PAY_RUN(220, "支付中"),
CANCEL_ORDER_FAIL(225, "取消订单失败"),
CANCEL_ORDER_NO(225, "不能取消预约"),
SIGN_ERROR(300, "签名错误"),
;
private Integer code;
private String message;
private ResultCodeEnum(Integer code, String message) {
this.code = code;
this.message = message;
}
}
Result.java：
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
/**
* 全局统一返回结果类
*/
@Data
@ApiModel(value = "全局统一返回结果")
public class Result<T> {
@ApiModelProperty(value = "返回码")
private Integer code;
@ApiModelProperty(value = "返回消息")
private String message;
@ApiModelProperty(value = "返回数据")
private T data;
public Result(){}
protected static <T> Result<T> build(T data) {
Result<T> result = new Result<T>();
if (data != null)
result.setData(data);
return result;
}
public static <T> Result<T> build(T body, ResultCodeEnum resultCodeEnum) {
Result<T> result = build(body);
result.setCode(resultCodeEnum.getCode());
result.setMessage(resultCodeEnum.getMessage());
return result;
}
public static <T> Result<T> build(Integer code, String message) {
Result<T> result = build(null);
result.setCode(code);
result.setMessage(message);
return result;
}
public static<T> Result<T> ok(){
return Result.ok(null);
}
/**
* 操作成功
* @param data
* @param <T>
* @return
*/
public static<T> Result<T> ok(T data){
Result<T> result = build(data);
return build(data, ResultCodeEnum.SUCCESS);
}
public static<T> Result<T> fail(){
return Result.fail(null);
}
/**
* 操作失败
* @param data
* @param <T>
* @return
*/
public static<T> Result<T> fail(T data){
Result<T> result = build(data);
return build(data, ResultCodeEnum.FAIL);
}
public Result<T> message(String msg){
this.setMessage(msg);
return this;
}
public Result<T> code(Integer code){
this.setCode(code);
return this;
}
public boolean isOk() {
if(this.getCode().intValue() == ResultCodeEnum.SUCCESS.getCode().intValue()) {
return true;
}
return false;
}
}
1.12、编写增、删、改、查接口
import cn.com.buba.vuecrud.entity.HospitalSet;
import cn.com.buba.vuecrud.service.HospitalSetService;
import cn.com.buba.vuecrud.util.Result;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* <p>
* 医院设置表 前端控制器
* </p>
*
* @author LDJ
* @since 2022-07-20
*/
@RestController
@RequestMapping("/admin/hosp/hospitalSet")
@Api(tags = "单表增删改查")
@Slf4j
@CrossOrigin
public class HospitalSetController {
@Autowired
private HospitalSetService hospitalSetService;
// insert into hospital_set(id,hoscode,hosname,api_url,sign_key,
// contacts_name,contacts_phone,status,is_deleted)
// value(999,'123ww','buba','http','fjaa','赵六','21',0,0);
@ApiOperation(value = "单表插入")
@PostMapping("/save")
public Result save(@RequestBody HospitalSet hospitalSet){
if (hospitalSet == null){
return Result.fail();
}
boolean b = hospitalSetService.save(hospitalSet);
if (b){
return Result.ok();
}else{
return Result.fail();
}
}
//接口方法,入口
@ApiOperation(value = "分页查询")
//get请求路径
@GetMapping("/getPage/{pageNumber}/{pageSize}")
//limit (pathNumber - 1) * pageSize,pageSize
//第一页，每页五条数据
//select * from hospital limit 0,5
//公共方法，返回值是result类型的json数据，请求路径获取
public Result getPage(@PathVariable Long pageNumber,
@PathVariable Long pageSize){
//构造器
Page<HospitalSet> p = new Page<>(pageNumber,pageSize);
Page<HospitalSet> page = hospitalSetService.page(p);
return Result.ok(page);
}
@ApiOperation(value = "单表修改")
@PostMapping("/updateHosp")
//update hospital_set set hosname = '西安医院' where id = 10;
//接收Post请求返回json数据
public Result updateHosp(@RequestBody HospitalSet hospitalSet){
boolean b = hospitalSetService.updateById(hospitalSet);
if (b){
return Result.ok();
}else {
return Result.fail();
}
}
@ApiOperation(value = "根据id删除")
@GetMapping("/removeById")
//delete from hospital_set where id = 10;
public Result removeById(Long id) {
boolean b = hospitalSetService.removeById(id);
if (b){
return Result.ok();
}else {
return Result.fail();
}
}
}
1.13、前端传入id错误导致后台无法删除
在实体类Hospital-set的id上添加注解
@JsonFormat(shape = JsonFormat.Shape.STRING)
@TableId(value = "id", type = IdType.ASSIGN_ID)
private Long id;
前端页面显示的id
数据库显示的id
2、前端实现
用到的技术：es6, Html5, vue2, axios, elementUi, css
前后端分离，跨域
2.1、用vscode创建一个前端项目
在磁盘上新建一个文件夹vuecrud
利用vscode打开vuecrud文件夹
2.2、在vuecrud下创建crud.html
2.3、在html中用相关的js，css等文件
将plugins，style放在2.1创建的vuecrud下面
2.4、在crud.html中引入相应文件
引入css
引入js
2.5、创建一个div，id=app，创建一个vue对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/common.css"></link>
<link rel="stylesheet" href="./styles/page.css"></link>
<link rel="stylesheet" href="./plugins/element-ui/index.js"></link>
</head>
<body>
<div id = "app">
</div>
<script src="./plugins/vue/vue.js"></script>
<script src="./plugins/axios/axios.min.js"></script>
<script src="./plugins/element-ui/index.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
}
},
created(){
},
methods:{
}
})
</script>
</body>
</html>
2.6、分页查询数据展示
2.6.1、定义变量
在vue对象的data return里面定义
data() {
return {
tablelist: [], //返回当前页的数据,
page: 1, //当前页，默认值为第一页
pageSize: 5, //每页5条数据
total: 0, //总条数
}
},
2.6.2、编写请求分页查询的函数
在methods里编写
//请求分页数据
getPage(page, pageSize) {
axios.get(`http://localhost:8080/admin/hosp/hospitalSet`+
`/getPage/${page}/${pageSize}`)
.then(res => {
console.log(res)
this.tablelist = res.data.data.records
this.total = res.data.data.total
})
},
在created编写
this.getPage(this.page, this.pageSize)
2.6.3、编写显示页面
在div添加
<!-- 表格 -->
<el-table :data="tablelist" stripe style="width: 100%">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="hosname" label="医院名称">
</el-table-column>
<el-table-column prop="hoscode" label="医院编号">
</el-table-column>
<el-table-column prop="apiUrl" label="apiUrl">
</el-table-column>
<el-table-column prop="contactsName" label="联系人">
</el-table-column>
<el-table-column prop="contactsPhone" label="联系电话">
</el-table-column>
<el-table-column prop="signKey" label="签名">
</el-table-column>
<el-table-column prop="status" label="状态">
</el-table-column>
<el-table-column prop="createTime" label="创建时间">
</el-table-column>
<el-table-column prop="updateTime" label="更新时间">
</el-table-column>
<el-table-column prop="isDeleted" label="逻辑删除">
</el-table-column>
<el-table-column prop="isDeleted" label="逻辑删除">
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" class="blueBug" @click="editHandle(scope.row)">
修改
</el-button>
<el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination id="pagination" class="tablelist" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
2.7、删除数据
在methods添加
//根据id删除
deleteHandle(id) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get(`http://localhost:8080/admin/hosp/hospitalSet/removeById?id=${id}`)
.then(res => {
if (res.data.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getPage(this.page, this.pageSize)
} else {
this.$message({
type: 'error',
message: '删除失败!'
});
this.getPage(this.page, this.pageSize)
}
})
})
},
2.8、新增数据
2.8.1、在data添加红色：
data() {
return {
tablelist: [], //返回当前页的数据,
page: 1, //当前页，默认值为第一页
pageSize: 5, //每页5条数据
total: 0, //总条数
action: '',//新增、修改共用一个dialog
rowObj: {},//scope.row
form: {
hosname: '',
hoscode: '',
apiUrl: '',
contactsName: '',
contactsPhone: '',
title: '新增医院信息',
dialogFormVisible: false,
},
formLabelWidth: '120px',
}
},
2.8.2、编写请求添加的函数
在methods编写
addClass() {
this.form.title = '添加医院设置信息'
this.action = 'add'
this.form.dialogFormVisible = true
},
// 关闭弹窗
handleClose() {
this.resetForm()
this.form.dialogFormVisible = false
},
//根据动作类型决定是否增加或编辑
submitForm() {
if (this.action == "add") {
this.hospSetAdd(this.form)
} else {
this.hospSetEdit(this.form)
}
},
//发送新增请求
hospSetAdd(form) {
console.info(form)
axios.post(`http://127.0.0.1:8080/admin/hosp/hospitalSet/save`,
{
hosname: form.hosname,
hoscode: form.hoscode,
apiUrl: form.apiUrl,
contactsName: form.contactsName,
contactsPhone: form.contactsPhone
})
.then(res => {
this.dialogFormVisible = false
this.$message({
message: '新增医院设置信息成功！',
type: 'success'
});
this.resetForm()
this.getPage(this.page, this.pageSize)
console.info(res)
})
.catch(error => {
console.info(error)
})
},
2.8.3、新增页面显示
在div编写：
<!-- 对话框表单开始 -->
<el-button type="text" @click="addClass()">新增医院信息</el-button>
<el-dialog :title="form.title" :visible.sync="form.dialogFormVisible" width="30%" :before-close="handleClose">
<el-form :model="form" ref="form">
<el-form-item label="医院名称" :label-width="formLabelWidth" prop="hosname">
<el-input v-model="form.hosname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="医院编码" :label-width="formLabelWidth" prop="hoscode">
<el-input v-model="form.hoscode" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="apiUrl基础地址" :label-width="formLabelWidth" prop="apiUrl">
<el-input v-model="form.apiUrl" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="联系人姓名" :label-width="formLabelWidth" prop="contactsName">
<el-input v-model="form.contactsName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="联系人手机" :label-width="formLabelWidth" prop="contactsPhone">
<el-input v-model="form.contactsPhone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="medium" @click="handleClose()">取 消</el-button>
<el-button type="primary" size="medium" @click="submitForm()">确 定</el-button>
<el-button v-if="action != 'edit'" type="primary" size="medium" class="continue"
@click="submitForm('go')"> 保存并继续添加 </el-button>
</span>
</el-dialog>
<!-- 对话框表单结束 -->
2.9、修改数据
2.9.1、编写请求添加的函数
在methods编写：
//编辑时回显数据
editHandle(dat) {
this.form.title = '修改医院设置信息'
this.action = 'edit'
this.form.name = dat.name
this.rowObj = dat
this.form.hosname = dat.hosname
this.form.hoscode = dat.hoscode
this.form.apiUrl = dat.apiUrl
this.form.contactsName = dat.contactsName
this.form.contactsPhone = dat.contactsPhone
this.form.dialogFormVisible = true
},
//发送update请求
hospSetEdit(form) {
console.info(form)
axios.post(`http://127.0.0.1:8080/admin/hosp/hospitalSet/updateHosp`,
{
id: this.rowObj.id,
hosname: form.hosname,
hoscode: form.hoscode,
apiUrl: form.apiUrl,
contactsName: form.contactsName,
contactsPhone: form.contactsPhone
})
.then(res => {
this.dialogFormVisible = false
this.$message({
message: '修改医院设置信息成功！',
type: 'success'
});
this.handleClose()
this.getPage(this.page, this.pageSize)
// console.info(res)
})
.catch(error => {
console.info(error)
})
},
//重置表单
resetForm() {
this.form.hosname = ""
this.form.hoscode = ""
this.form.apiUrl = ""
this.form.contactsName = ""
this.form.contactsPhone = ""
},
3、运行显示页面
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
