本文共 3153 字，大约阅读时间需要 10 分钟。

Dva员工增删改查Demo实现-优化

Spring Boot配置

基于Spring Boot的后台服务配置，支持数据库连接、MyBatis配置、日志集成以及Swagger文档生成，数据库使用PostgreSQL，端口设置为1111。

spring:  datasource:    type: com.alibaba.druid.pool.DruidDataSource    url: jdbc:postgresql://127.0.0.1:5432/postgres    username: postgres    password: 123456    driverClassName: org.postgresql.Driver    initialSize: 1    maxActive: 20    maxWait: 60000application:  name: demo-service

mybatis:  only: true  mapper-locations: classpath:/mapper/*.xml  typeAliasesPackage: com.huawei.model  global-config:    id-type: 2    field-strategy: 2    db-column-underline: true    refresh-mapper: true

服务器端口设置为1111：server:  port: 1111服务注册中心地址配置：eureka:  instance:    status-page-url-path: /swagger-ui.htmlSwagger配置：swagger:  enable: true  host: 10.0.7.128:8080  basePackage: com.huawei.controller  title: 示例  description: 变更管理的功能  version: 1.0

后台开发

基于Spring Boot框架，使用MyBatis进行数据库操作，结合PageHelper进行分页查询，支持批量删除和单独删除功能。

PuserService接口：public interface PuserService {  // List
   
     usersFuzzyQuery(Puser puser);  PageUtil usersFuzzyQuery(Puser puser, Integer current);  void addUsers(Puser puser);  Integer updateUser(Puser puser);  Integer deleteUser(Integer id);  Map
    
      getTotalRecords(Puser puser);  Integer deleteBatchUsers(List
     
       idList);}
     
    
   

PuserMapper接口：public interface PuserMapper extends BaseMapper
   
     {  List
    
      usersFuzzyQuery(Puser puser, Integer current);  void addUsers(Puser puser);}
    
   

MyBatis优化

使用PageHelper分页，支持多种查询方式，支持自定义SQL注入，数据库字段策略优化，驼峰转换配置。

MyBatis配置：global-config:  capital-mode: true  meta-object-handler: com.baomidou.springboot.xxx  sql-injector: com.baomidou.springboot.xxx cache-enabled: false

数据传输工具

创建RequestMessage对象，用于处理接口响应，支持成功和错误状态码，返回MSG信息。

RequestMessage:  SUCCESS_GETS_CODE = "200"  SUCCESS_DELETES_CODE = "204"  ERROR_CODE = "500"  constructors:  code: String  message: String  error: String  data: Object

前台开发

基于DVA框架，使用React进行前端开发，支持路由管理、分页、表单处理和弹窗对话框。

主组件:
   

styles:.normal { width: 1200px; margin: 20px auto; }标准表格样式和分页工具展示：
   

跨域处理

配置Spring的CORS过滤器，允许跨域访问，支持自定义请求头和凭证传输。

cors配置：allowedMethod: "*"allowedHeader: "*"allowCredentials: true

模块化处理

DVA框架下，使用路由分割组件，支持按需加载，实现模块化管理。

src/routes/indexPage/IndexPage.jsx:
   

工具创建

创建工具类，用于数据库查询、分页处理、表单验证等功能，支持动态表单生成和数据校验。

FilterForm处理表单顺序与字段校验：handleFilterSubmit(filters) {  validateFields((errors) => {    if (!errors) {      onSearch(filters);    }  });}

界面组件

创建表单组件和弹窗组件，支持多种形式因素的输入，动态获取字段值，并根据选项显示相应内容。

UserModal组件：
     
      
    
   输入组件：
   

工具集成

集成WebSocket实现长连接，ruits模块用于路由配置，支持按需加载以提高性能。

request处理：export default function request(app) {  app.use(express.json());  app.use(express.urlencoded({ extended: true }));  app.use(cors());}

依赖管理

通过package.json管理项目依赖，配置路由前缀，支持调试工具和代码提交工具。

"scripts": {  "start": "cross-env NODE_ENV=development.react-app",  "build": "cross-env NODE_ENV=production.react-app"}

结果展示

将处理结果返回为标准结构，支持JSON格式和表格形式展示，适用于分页和列表显示。

ResponseUtil.successListResponse(list) {  const response = new RequestMessage();  response.code = '200';  response.message = 'ok';  response.data = list;  return response;}

其他优化点

• 使用urmple模块优化表单数据处理
• 配置路线参数获取整个请求参数
• 提供状态管理，支持动态UI组件处理
• 集成骨架式组件库，减少重复代码
• 使用JSON格式优化数据传输