位置: IT常识 - 正文

前端如何调用后端接口进行数据交互(极简)(前端如何调用后端方法)

编辑:rootadmin
前端如何调用后端接口进行数据交互(极简) 前端调用后端接口,获得数据并渲染一、介绍

推荐整理分享前端如何调用后端接口进行数据交互(极简)(前端如何调用后端方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端如何调用后端接口,前端如何调用后端数据,前端如何调用后端,前端如何调用后端数据,前端如何调用后端方法,前端如何调用后端接口,前端如何调用后端接口,前端如何调用后端,内容如对您有帮助,希望把文章链接给更多的朋友!

一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步:

前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面

对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了。

二、项目结构

前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有控制层的访问路径,也就是所谓的请求地址对应的方法,可以用SSM框架,SSH框架,都可以)

上面是大致的文件结构,相信大家后端的数据处理都没问题,无非就是:

控制层接收前端请求,调用对应的业务层接口方法业务层实现类去实现业务层接口业务层实现类的方法内调用数据层的接口数据层实现文件(mapper.xml)实现数据层接口然后处理结果层层返回三、代码编写

我们只介绍前端界面+控制层,首先是前端界面 第一步:引入相关文件

前端如何调用后端接口进行数据交互(极简)(前端如何调用后端方法)

这里的axios就是我们发起请求所必备的文件,这些文件在文章末尾会有给出。

前端代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>测试</title> <script src="../static/js/jquery.min.js"></script> <script src="../static/js/axios.min.js"></script></head><body><span id="text">我是前端默认值</span><script> window.onload =function() { //一加载界面就调用 $.ajax({url:"testTest?num=1",success:function(result){ document.getElementById("text").innerHTML=result; }}); };</script></body></html>

后端控制层代码如下:

@RequestMapping("/testTest") //控制层 @ResponseBody public int testTest(int num) { if(num==1) return 1; if(num==2) return 2; return 0; }

很明显,大家看看应该就明白了,前端发请求时可以携带数据,比如账号、密码啊等等,后端接收后,就可以处理啦,然后把处理结果返回给前端,前端接收后,就可以渲染了,或者给出操作成功的提示。 效果:

四、运用

1、字符串、整形等(新增功能)

前端代码:

<el-dialog title="创建车辆装备" :visible.sync="insertVisible" width="30%"> <el-form :model="equipment" ref="equipment" label-width="100px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="equipment.name"></el-input> </el-form-item> <el-form-item label="类型" prop="type"> <el-input v-model="equipment.type"></el-input> </el-form-item> <el-form-item label="库存数量" prop="inventory"> <el-input type="number" v-model="equipment.inventory"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="insertVisible = false">取 消</el-button> <el-button type="primary" @click="insertEquipment" data-toggle="modal" data-target="#myModal">确 定</el-button> </span> </el-dialog><script type="text/javascript"> new Vue({ el:"#box", data:{ id:"",//装备主键 equipment:{},//一条equipment数据 insertVisible:false //新增提示框控制器:true显示/false隐藏 }, methods:{ //打开新增提示框 openInsertPanel:function(){ this.insertVisible = true; this.equipment = {}; }, //创建equipment insertEquipment:function(){ var name = this.equipment.name; var type = this.equipment.type; var inventory = this.equipment.inventory; var that = this; axios.put("insertEquipment?name="+name+"&type="+type+"&inventory="+inventory).then(function(result){ if(result.data.status){ that.selectAllEquipment(); that.insertVisible = false; }else{ that.$message.error(result.data.message); that.insertVisible = false; } }); }, } });</script>

后端代码

@RequestMapping("/insertEquipment") //增加装备 @ResponseBody public ResultMap insertEquipment(String name, String type,String inventory) { try { int realInventory=Integer.valueOf(inventory); Equipment equipment=new Equipment(name,type,realInventory); equipmentService.insertEquipment(equipment); resultMap.setStatus(true); } catch (Exception e) { resultMap.setStatus(false); resultMap.setMessage(e.getMessage()); } return resultMap; }

以上就是新增功能的运用

例子很简单,但是用处很大,登录校验、数据展示、增删改查都是这种流程,后端返回的数据类型不仅仅是Int,List和对象都是可以的。 下面给出文件地址,大家需要的自己下载: jquery.min.js: jquery.min.js axios.min.js: axios.min.js

最后,整理不易,别忘点赞关注! 有想了解更全面的,可以评论,及时出教程!

本文链接地址:https://www.jiuchutong.com/zhishi/288839.html 转载请保留说明!

上一篇:iframe内嵌链接常见问题(iframe内嵌页面)

下一篇:安装express脚手架出现如下错误:npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer ...(express框架使用)

  • 出口退税哪些资料要留底
  • 月初没报完税可以开票吗
  • 投资利税率包括所得税吗
  • 房地产企业怎么认定
  • 税盘连接服务器失败130008
  • 营业收入比销售商品收到的现金少
  • 员工旅游费怎么记账
  • 企业所得税季度申报时间
  • 房屋租赁收入还需要缴纳附加税吗
  • 转登记小规模纳税人留抵税额
  • 房地产企业土地使用税
  • 报损失怎么报
  • 加工费发票可以不开数量吗
  • 积分兑换礼品需要缴纳个人所得税吗
  • 出纳在银行领了钱出纳要怎样记帐?
  • 退回房租含税的情况怎么入账?
  • 零申报有期限吗
  • 发票章丢失风险大吗
  • 出口退免税收汇相关业务
  • 合伙企业如何计算缴纳个人所得税
  • 公司员工出差补贴与差旅费报销制度
  • 房地产企业如何计算增值税
  • 什么情况下的发烧才会全身酸痛呢
  • 销售折扣账务怎么处理
  • 公司办事处人员配置标准最新
  • 土地增值税属于什么税类
  • 免税收入包括哪些收入
  • 商业健康保险税优码
  • 附加税的税率是多少2023年
  • 长时间不操作电动座椅会发生什么
  • mac怎么设置屏幕保护壁纸
  • 其他应付款是什么意思
  • 汽车过户费包括
  • php img
  • 企业购买银行理财
  • PHP:curl_multi_init()的用法_cURL函数
  • 3gwifi怎么用
  • 公司未经营需要做所得税年度清缴吗
  • nkvmon.exe - nkvmon是什么进程 有什么用
  • yifile怎么使用
  • PHP:pcntl_wifsignaled()的用法_PCNTL函数
  • 信用减值损失会影响所有者权益吗
  • 成本核算流程及注意事项
  • pwd命令的用法
  • 现代服务印花税税率
  • 培训费用是什么成本
  • 小规模纳税人开专票需要交税吗
  • 免征增值税的货物
  • 成品油红字发票开具后库存数量如何冲回?
  • 劳务费走应付职工薪酬
  • 长期股权投资为什么不是金融资产
  • 小规模纳税人企业所得税优惠政策最新2023
  • 往来款和货款
  • 结转和结算
  • 制造费用和直接人工的关系
  • 小规模纳税人不超过10万免增值税
  • 资产处置损益计入利润表哪个项目
  • 购买维修费怎么做分录
  • 如何考预算师
  • mysql8.0设置字符集编码
  • mysql 1449解决
  • win10的java环境该怎么配置?java环境变量配置介绍
  • 微软软件怎么用
  • freebsd ports安装
  • u盘pe系统安装步骤
  • vps安装centos
  • msmpeng.exe是什么进程
  • win7小技巧
  • javascript数据结构与算法第三版
  • android pageview
  • 何为黄金茶
  • unity游戏人物选择
  • jquery输入框改变事件
  • Node.js中的construct构造函数
  • js新开一个窗口
  • 理解JavaScript事件对象
  • python数据类型有什么用
  • 安卓短信提示
  • 个人所得税全年不到60000,单月超过
  • 住宅区地下车位产权归属
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设