记录一次vue的增（insert）查(select)。

最新推荐文章于 2024-02-15 18:05:10 发布
最新推荐文章于 2024-02-15 18:05:10 发布
阅读量2.1k 收藏
点赞数
分类专栏： dubbo 前端 文章标签： veu insert select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35529931/article/details/84262435
版权

这次分到了一个完整的模块，记录一下。以便下次可以借鉴！
首先是查询的前端开始（只记录JS部分）：
1.1.1按条件查询的JS：
在这里插入图片描述

  /**
       * 分页查询
       */
      loadTableData(pageSize,pageNum){
        if(this.queryData.occurrenceTime != ''){
          let time = commonJs.formatDate(this.queryData.occurrenceTime);
          this.queryData.occurrenceTime = time.replace(/\-/g,' ');
        }
        accidentCApi.getAccidentQuery(pageSize,pageNum,this.queryData).then(
          (response)=>{
            this.tableData = response.data.data.list;
            /*this.total = response.data.data.total;*/
          }
        );
      },

执行初始化函数：
在这里插入图片描述

1.1.2 写好前端的查询字段：

data () {
      return {
        apiUrl,
        accidentId:'', // ID
        way:'',//0：详情  1：新增  2：编辑
        ruleForm: {
         memberName:'',
          bedName:'',
          occurrenceTime:'',
          levelName:'',
          personnel:'',
          chargePenson:'',
          className:'',
          reason:'',
          remark:'',
          measures:'',
          result:'',
          paths:[], // 图片数组
        },
      }
    },

在这里插入图片描述
这样就可以展示数据了：
在这里插入图片描述
1.1.3前端描述完毕，可以描述后台的分页查询代码；
1.1.3–1 controller层代码：

 /**
     *   事故登记---分页查询--条件搜索
     * @param pageSize
     * @param pageNum
     * @param
     * @return
     */
    @POST(value = "/v1/accident/{pageSize}/{pageNum}")
    @ApiOperation(httpMethod = "POST", value = "[日常管理]-[事故登记分页查询]", notes = "事故登记分页查询", response = AccidentCDTO.class)
    public String getAccidentInfoList(
            @ApiParam(name = "pageSize", value = "分页大小", required = true) @PathVariable("pageSize") int pageSize,
            @ApiParam(name = "pageNum", value = "当前页数", required = true) @PathVariable("pageNum") int pageNum,
            @ApiParam(name = "query", value = "查询条件", required = false)@RequestBody AccidentQueryCDTO query) {

        return ResultContent(ResultStatus.SUCCESS, accidentCService.listAccidentQuery(query, pageNum, pageSize));
    }

在这里插入图片描述

1.1.3–2service层和service实现

  @Override
    public PageInfo<AccidentCDTO> listAccidentQuery(AccidentQueryCDTO accidentQueryCDTO, int pageSize, int pageNum) {
        // 分页设置
        PageHelper.startPage(pageNum, pageSize);
        Long orgId = CurrentContext.getCurrentOrgId();
        Long tenantId = CurrentContext.getCurrentTenantId();
        accidentQueryCDTO.setOrgId(orgId);
        accidentQueryCDTO.setTenantId(tenantId);
        List<AccidentCDTO> list = dao.listAccidentQuery(accidentQueryCDTO);
        long total = ((Page) list).getTotal();
        PageInfo<AccidentCDTO> pageResult = new PageInfo<>(list);
        pageResult.setTotal(total);
        // 查询总共的事故数量
        Integer number = dao.countAccident();
        accidentQueryCDTO.setTotal(number);

        // 按照分类进行统计事故数量
        List<Map>  mapList = dao.countAccidentByName();
        accidentQueryCDTO.setClassNameAndCount(mapList);
        return pageResult;
    }

1.1.3–3dao层的SQL的写法如下：

 <select id="listAccidentQuery" resultType="com.xksh.pensioncloud.daily.dto.AccidentQueryCDTO">
        SELECT
  member_name AS memberName,
  bed_Name AS bedName,
  LEVEL_NAME AS levelName,
  OCCURRENCE_TIME AS occurrenceTime,
  PERSONNEL AS personnel,
  CHARGE_PENSON AS chargePenson,
  CLASS_NAME AS className,
  accident_id as accidentId,
  remark AS remark
FROM
  tb_cloud_accident
   WHERE DELETED = 0
        AND ORG_ID = #{orgId}
        AND TENANT_ID = #{tenantId}
        <if test="null != memberName and  memberName != '' ">
            AND  member_name like concat('%',#{memberName},'%')
        </if>
        <if test="null != occurrenceTime and  occurrenceTime != '' ">
            AND OCCURRENCE_TIME BETWEEN STR_TO_DATE(CONCAT(#{occurrenceTime},'00 00 00'),'%Y %m %d %H %i %s')
            AND STR_TO_DATE(CONCAT(#{occurrenceTime},'23 59 59'),'%Y %m %d %H %i %s')
        </if>
        <if test="null != bedName and bedName != '' ">
            AND  bed_Name like concat('%',#{bedName},'%')
        </if>
        <if test="null != personnel and personnel != '' ">
            AND  PERSONNEL like concat('%',#{personnel},'%')
        </if>
        <if test="null != chargePenson and chargePenson != '' ">
            AND  CHARGE_PENSON like concat('%',#{chargePenson},'%')
        </if>
        <if test="null != remark and remark != '' ">
            AND  remark like concat('%',#{remark},'%')
        </if>
        <if test="null != levelName and levelName != '' ">
            AND  LEVEL_NAME like concat('%',#{levelName},'%')
        </if>
        <if test="classId != null and classId != 0">
            AND CLASS_ID = #{classId}
        </if>
        ORDER BY CREATE_TIME DESC
    </select>

在这里插入图片描述

1.2查询详情；
1.2.1根据一个函数，从主页调到对应的ID的详情页；

   detail(way,row){
        this.$router.push({name: 'accidentDetail',params:{way:way,row:row,}});
      },
      /**

在这里插入图片描述

  <template scope="scope">
                    <el-button type="text" size="small" @click.stop="detail(0,scope.row)">
                      详情</el-button>
                  </template>

在这里插入图片描述

1.2.2
JS代码的写法：

  /**
       * 获取事故登记详情
       */
      getDetailInfo(accidentId){
        accidentCApi.getDetailInfo(accidentId).then(
          (response)=>{
            debugger
            this.ruleForm = response.data.data;
          }
        );
      },

在这里插入图片描述

定义好返回的字段：

  data () {
      return {
        apiUrl,
        accidentId:'', // ID
        way:'',//0：详情  1：新增  2：编辑
        ruleForm: {
         memberName:'',
          bedName:'',
          occurrenceTime:'',
          levelName:'',
          personnel:'',
          chargePenson:'',
          className:'',
          reason:'',
          remark:'',
          measures:'',
          result:'',
          paths:[], // 图片数组
        },
      }
    },

|

1.2.3 后台代码的写法
1.2.3–1controller层

/**
     * 事故详情
     * @param accidentId
     * @return
     */
    @POST(value = "/info/{accidentId}")
    @ApiOperation(httpMethod = "POST", value = "[日常管理]-[事故登记]-[事故登记详情]", notes = "事故登记详情", response = AccidentCDTO.class)
    public String getDeathInfo(@ApiParam(name = "accidentId", value = "事故登记id", required = true) @PathVariable("accidentId") Long accidentId) {
        if(accidentId !=null){
            return ResultContent(ResultStatus.SUCCESS, accidentCService.findById(accidentId));
        }else{
            return ResultContent(ResultStatus.BEAN_VALID_FAILED,"参数错误");
        }
    }

在这里插入图片描述

1.2.3–2service层的实现的写法：

  @Override
    public AccidentCDTO findById(Long accidentId) {
        AccidentCDO accidentCDO = this.dao.selectByPrimaryKey(accidentId);
        List<String> list = new ArrayList<>();
        AccidentCDTO accidentCDTO = new AccidentCDTO();
        // 将DO 转换为DTO
        BeanUtils.copyProperties(accidentCDO,accidentCDTO);
        // 图片查询
        List<AccidentEnclosureCDO>  accidentEnclosureCDOS = accidentEnclosureCService.findById(accidentId);
        for(AccidentEnclosureCDO enclosureCDO :accidentEnclosureCDOS){
             list.add(enclosureCDO.getFile());
        }
        // 返给前端path集合
         accidentCDTO.setPaths(list);
        return  accidentCDTO;
    }

在这里插入图片描述

1.2.3–3 接下来的话，只要DO和DAO按照规范写，就可以不用写简单的SQL语句了。

在这里插入图片描述
在这里插入图片描述

1.3 新增：
前端JS的部分：
在这里插入图片描述
将前端的对象封装到对象中，定义对象
在这里插入图片描述

  data () {
      return {
        // 关于图片的
        apiUrl,
        token:'',
        bedInfoStatus:'',
        AccidentClassList:[], // 事故分类
        levelList:[], // 事故等级
        accidentId:'', // ID
        loginInfo:'',
        realName:'', // 管理员名字
        way:'',//0：详情  1：新增  2：编辑
        ruleFileList:[],
        ruleForm: {
          memberId:null,
          memberName:'',
          bedId:null,
          bedName:'',
          occurrenceTime:'',
          levelId:'',
          levelName:'',
          personnel:'',
          chargePenson:'',
          classId:'',
          className:'',
          reason:'',
          remark:'',
          measures:'',
          ruleFileList:[],
          result:'',
        },
        queryData:{

        },
        members:[{
          memberId:1,
          memberName: "张小建",
          value: "张小建",
        }],
        memberView:{
          "memberName": ""
        },

1.3.2 通过一个函数将表单提交。
在这里插入图片描述

  /**
       * 新增事故登记
       */
      submitForm(formName){
        let self = this;
        self.queryData.memberId = self.ruleForm.memberId; // 会员姓名
        self.queryData.memberName = self.ruleForm.memberName;
        self.queryData.bedId = self.ruleForm.bedId;  // 床位号
        self.queryData.bedName = self.ruleForm.bedName;
        self.queryData.occurrenceTime = self.ruleForm.occurrenceTime; // 发生时间
        self.queryData.levelId = self.ruleForm.levelId;  // 事故等级
        self.queryData.levelName = self.ruleForm.levelName;
        self.queryData.personnel = self.ruleForm.personnel; // 值班人员
        self.queryData.chargePenson = self.ruleForm.chargePenson; // 负责人
        self.queryData.classId = self.ruleForm.classId; // 事故分类
        self.queryData.className = self.ruleForm.className;
        self.queryData.reason = self.ruleForm.reason ; // 事故原因
        self.queryData.remark = self.ruleForm.remark;   // 事故描述
        self.queryData.measures = self.ruleForm.measures; // 处理措施
        self.queryData.result = self.ruleForm.result; // 处理结果
        self.queryData.ruleFileList = self.ruleForm.ruleFileList; // 图片的URL集合
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.queryData.occurrenceTime=commonJs.formatDateTime(self.queryData.occurrenceTime);
            accidentCApi.insertAccident(self.queryData).then(
              (response) => {
                if (response.data.status == 200) {
                  self.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  self.$router.push({name: 'accident'});
                } else {
                  self.$message({
                    message: '保存失败',
                    type: 'error'
                  });
                }
              },
            );
          }
        });
      },

1.3.3 后台代码的写法
1.3.3—1controller层的写法：

  /**
     * 新增事故登记
     * @param accidentCDTO
     * @return
     */
    @POST(value = "/addAccident")
    @ApiOperation(httpMethod = "POST", value = "[日常管理]-[事故登记]-[新增事故登记]", notes = "新建事故登记记录")
    public String addAccident(@ApiParam(name = "accidentCDTO", value = "保存信息", required = false)
                                   @RequestBody AccidentCDTO accidentCDTO) {
        return ResultContent(ResultStatus.SUCCESS, accidentCService.addAccident(accidentCDTO));
    }

在这里插入图片描述
1.3.3---- 后台service的写法：

 @Override
    @Transactional
    public int addAccident(AccidentCDTO accidentCDTO) {
        int result = 0;
        // 事故登记实体新增
        AccidentCDO accidentCDO = new AccidentCDO();
        BeanUtils.copyProperties(accidentCDTO,accidentCDO);
        accidentCDO.setPersonnel(CurrentContext.getCurrentUserName());
        result = this.dao.insertSelective(accidentCDO);
        // 获得该事故的主键Id
        Long accidentId = accidentCDO.getAccidentId();
        List<Map<String, String>> ruleFileList = accidentCDTO.getRuleFileList();
        // 事故图片与事故登记实体的对应关系新增
        for(Map<String, String> file : ruleFileList){
            AccidentEnclosureCDO accidentEnclosureCDO = new AccidentEnclosureCDO();
            accidentEnclosureCDO.setAccidentId(accidentId);
            accidentEnclosureCDO.setDateUpload(new Date());
            accidentEnclosureCDO.setFile(file.get("path"));
           accidentEnclosureCService.save(accidentEnclosureCDO);
        }
        return result;
    }

在这里插入图片描述
1.3.3–3 dao层，因为是简单的SQL，自动生成。只需要DO与DAO符合就可以了。不阐述。

1.4.1 关于图书上传—新增图片；
前端的写法：

 <div class="panel-content">
            <el-row>
              <el-col :span="24">
                <el-upload class="upload-demo" ref="upload" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :action="apiUrl+'/annexs?access_token='+token" :multiple="true" :on-success="handSuccess" :on-preview="handlePreview" :on-remove="handleRemove"  :auto-upload="false">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">1、只能上传jpg/png文件，且不超过5M（最多可上传9张）<br/>2、保证文件清晰</div>
                </el-upload>
              </el-col>
            </el-row>
          </div>

在这里插入图片描述

通过success函数，将成功上传的返回的参数，放到file中，通过push跟ruleForm一起提交到后台。
在这里插入图片描述
通过三个简单的函数，进行提交：
在这里插入图片描述
1.4.2. 调用后台的先前的接口，直接将图片保存到后台的数据库。然后将返回的url，封装到ruleForm中，当成一个数组传送到后台进行解析。插入到数据库中。
在这里插入图片描述
1.5.1 展示图片：
前端写法：
在这里插入图片描述
然后在img中现实 图片数组：
在这里插入图片描述
1.5.2 后台代码的写法：
1.5.2–1 controller层的代码复用：
1.5.3–2 service层的实现：

在这里插入图片描述
dao层和SQL均为简单的SQL，符合规则可以自动生成。
到此，大体描述完成了！！！
本次描述了 对一个实体的条件查询；根据ID查询详情；以及新增；而新增方面包含了图片的上传，以及后面新加的图片详情的查询。 与上一讲的修改，合在一起，就是一个模块的完整的增删改查了。以后碰到类似的，可以进行借鉴这里的了。

virtuousOne
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE学习
betteryjs的博客
12-29 288
vue原理 是一套用于构建用户界面的渐进式框架。与其它大型 框架不同的是，Vue 被设计为可以自底向上逐 层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方 面，当与现代化的 工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱 动。 渐进式 框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入 其他方案更便捷地协同工作。 一个个放入,放多少就做多少。 MV*模
vue 动态添加组件
panpani的博客
11-04 3641
vue 利用数组循环动态添加组件 1. 实现效果： 当第一个框输入内容之后，点击添加，动态添加第二个输入框，以此类推； 2. 实现思想： 构建需要动态添加的模板，利用 v-for 循环模板。 通过 index 判断当前模板，绑定当前值。当点击 添加 时 利用数组方法 push 一个值进入数组从而达到添加一个相应模板的效果。利用 splice 删除相应位置的模板 2. 实现代码： <div class="regex_item"> <div class="add_l
vue 插入操作
二月鸟
05-02 240
这里写目录标题1. v-oncev-html3 v-text4.v-prev-cloak 1. v-once <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</
vue 怎么在字符串中指定位置插入字符_在VUE JS中的Cursor位置插入字符
weixin_39621185的博客
12-20 391
I have been trying to insert emoji in textarea exactly where the cursor is at. I looked around how tos in the web could not find anything specific in VUE JS. Most of them are in plain JS.I have this C...
vue.js插值，插入图片，属性
weixin_34074740的博客
11-28 328
<html><head><title>Insert title here</title><script type="text/javascript" src="${pageContext.request.contextPath }/js/vue.min.js"></script><style type="text/css...
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
最新发布
编程知识分享，主打前端
02-15 2万+
大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。技术选型前端：vite+vue3+antd后端：node koa数据库：mysqlkoa是一个现代的Node.js框架，可以用来构建Web应用程序。Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vue.js的最新版本，于2020年9月正式发布。Vue.js3相对于之前的版本带来了许多重要的改进和新功能。
SpringBoot-Vue实现增删改查
m0_62121751的博客
09-30 1145
【代码】SpringBoot-Vue实现增删改查。
SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查
01-27
在本项目中，我们主要利用SpringBoot框架与Thymeleaf模板引擎，结合传统的SSM（Spring、SpringMVC、MyBatis）架构以及前端Vue.js技术，来实现一个基本的增删改查功能。这是一个典型的后端服务与前端交互的示例，适合...
vue3+koa2+mysql增删改查
10-06 876
【代码】vue3+koa2+mysql增删改查。
Vue与后端链接并且实现增删改查(操作数据库)
qq_45377275的博客
08-28 1万+
1 后端准备 1.1 代码结构 1.2 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.or.
Vue.js + jQuery Ajax 进行INSERT和SELECT操作
代码笔记
05-06 650
引用Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 利用jQuery Ajax INSER...
Vue中使用Froala Editor时，外部方法调用html.insert()插入内容到光标最后停留位置功能实现
_好好学习的博客
06-18 6537
简单介绍在使用Froala Editor时，如何解决外部按钮要插入内容到编辑框中，调用html.insert时，不能插入到光标最后停留位置的问题。
Vue自定义指令
Heartbroken_man的博客
02-09 1377
vue官方有提供给我们自定义像v-model 和 v-show这样的指令，来看看怎么定义 话不多说我们事先用vue官方脚手架创建一个项目 比如我们要定义一个鼠标移入就把当前dom原生透明度显示为0，鼠标移开的时候为1，达到鼠标移入显示，鼠标移开隐藏的效果 function on(element, event, handler) { if (element && event && handler) { element.addEventListener(eve
29.VUE自定义指令directive和inserted
休息休息夏的博客
05-29 1万+
VUE自定义指令directive和inserted1.什么事自定义指令1.2使用自定义指令的方式2.设置自定义组件2.1 设置全局指令2.2 设置私有指令2.3 钩子函数3. 案例 1.什么事自定义指令 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 例外)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 简单的讲就是： 指令是可以写在DOM元素的小命令，以v-为前缀，vue就能识别这是一个
vue中自定义指令使用
qq_42796723的博客
08-11 270
定义color指令；自定义指令 - 传值
vue自定义指令
huangbaokang的博客
08-05 294
示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素
vue 怎么在字符串中指定位置插入字符_在字符串指定位置插入其他字符串
weixin_39527372的博客
12-20 4875
// 在字符串指定位置插入字符串// orgStr原始字符串 index指定插入位置 str要插入的字符串fnInsertStr (orgStr, index, str) {return orgStr.substring(0, index) + str + orgStr.substring(index + 1)},fnRun () {let str = '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊...
vue字符串拼接的多种方法
花生日记
05-28 1万+
第二种方法：使用 for循环拼接字符串，这是最简单的一个方法，但是它并不适用于所有的情况，因为我们需要保证整个字符串都是可拼接的。例如：我们想要获取字符串长度，那么我们就可以使用以下方式进行拼接： 注意：上述方法不适用于以下两种情况： （1）需要多次拼接字符串，这是因为需要获取到整个字符串的长度，因此如果多次拼接的话，会导致性能变差。但是我们也不能忽略它的缺点，当我们想要拼接两个字符串时，for-in方法并不适用，因为我们需要先对字符串进行转换，再使用for-in方法来拼接。这样就能实现两个字符串的拼接。
springboot+mybatis+vue 增删改查
08-05
使用Spring Boot，MyBatis和Vue进行增删改查操作的步骤如下： 1. 设置Spring Boot项目： - 使用Spring Initializr创建一个新的Spring Boot项目。 - 在pom.xml文件中添加所需的依赖项，包括Spring Boot、MyBatis和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

virtuousOne

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值