vue 前端参值后端接收的几种方式

简介: vue 前端参值后端接收的几种方式


Get 请求 @Param

前端代码

handleCS(){
      // debugger
      // let body ={
      //   id:8,
      //   nyApplyDangerdetectionId:8,  
      //   uploadStatic:2,
      //   auditorSign:'改我了',
      //   auditorDescribe:'我也改了'
      // }
      let companyid = 1
      let body = {} 
      getSelectDanger(companyid).then(response => {
        body = response;
        // this.open = true;
        // this.title = "修改隐患排查";
      });
    },

调用接口

// 接口测试调用
export function getSelectDanger(companyid) {
  return request({
    url: '/system/uniapp/getboolWriteBack',
    method: 'get',
    params: {companyid : companyid}
  })
}

后端代码controller接收

@ApiOperation("getboolWriteBack")
@GetMapping("/getboolWriteBack")
public AjaxResult getboolWriteBack(Integer companyid){
    Integer count = nyPostNumberService.routineWriteBack(companyid);
    boolean falg = false;
    if(count==null){
        falg = true;
    }
    return AjaxResult.success(falg);
}

后端代码Mapper层

public Integer routineWriteBack(@Param("companyid")  Integer companyid);

后端代码Mapper.xml

<select id="routineWriteBack" resultType="java.lang.Integer">
       select onduty_people from ny_post_number where companyid = #{companyid} and date(create_time) = date(now())
    </select>

Put请求 @RequestBody

前端代码

handleCS(){
     let body ={
       id:12,
       nyApplyDangerdetectionId:7898994,  
       uploadStatic:2,
       auditorSign:'改我了',
       auditorDescribe:'我也改了'
     }
     getSelectDanger(body).then(response => {
     });
   },

调用接口

export function getSelectDanger(data) {
  return request({
    url: '/warningrisk/dangerdetection/UpdateuploadStatic',
    method: 'put',
    data: data
  })
}

后端代码controller接收

@Log(title = "隐患排查", businessType = BusinessType.UPDATE)
@PutMapping("/UpdateuploadStatic")
public AjaxResult UpdateuploadStatic(@RequestBody NyDangerdetection nyDangerdetection)
{
    return toAjax(nyDangerdetectionService.updateuploadStatic(nyDangerdetection));
}

后端代码Mapper层

Integer updateuploadStatic(NyDangerdetection nydangerdetection);

后端代码Mapper.xml

<update id="updateuploadStatic" parameterType="NyDangerdetection">
     UPDATE ny_dangerdetection a
         INNER JOIN ny_apply_dangerdetection b ON a.ny_apply_dangerdetection_id = b.id
     <trim prefix="SET" suffixOverrides=",">
         <if test="uploadStatic != 0">a.upload_static = #{uploadStatic},</if>
         <if test="uploadStatic == 2">b.auditor_sign = #{auditorSign},</if>
         <if test="uploadStatic == 3">b.auditor_describe = #{auditorDescribe} </if>
     </trim>
     where a.ny_apply_dangerdetection_id = #{nyApplyDangerdetectionId} and b.id = #{id}
</update>
目录
相关文章
|
19天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
19天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
24天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
88 4
|
19天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
26天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
1月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
103 0
|
8天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
7天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
|
9天前
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
27 4