【前端】前后端通信方法与差异(未完待续)

系列文章

【Vue】vue增加导航标签
本文链接:https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接:https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue,在Windows IIS平台部署
本文链接:https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接:https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程(解决npm下依赖包版本冲突)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程(详细)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】日期格式化(全局)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格,导出Excel
本文链接:https://blog.csdn.net/youcheng_ge/article/details/135018489

【Vue】el-date-picker日期范围组件(本周、本月、上周)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/135088143

【前端】前后端通信方法与差异
本文链接:https://blog.csdn.net/youcheng_ge/article/details/135153985


文章目录

  • 系列文章
  • 前言
  • 一、技术介绍
    • 1.1 axios通信
    • 1.2 ajax通信
    • 1.3 XMLHttpRequest通信
    • 1.4 WebSockets通信
    • 1.5 Shell通信
  • 二、项目源码
    • 2.1 axios通信
      • 2.1.1 data中定义URL变量
      • 2.1.2 methods中定义通信方法
      • 2.1.3 main.js中全局引入
      • 2.1.4 axios发送数据
      • 2.1.5 axios接收数据
    • 2.2 ajax通信
      • 2.2.1 ajax通信库
      • 2.2.2 ajax发送数据
      • 2.2.3 ajax接收数据
    • 2.3 shell通信
      • 2.3.1 shell发送请求
      • 2.3.2 shell接收请求
  • 三、效果展示
    • 3.1 axios效果
    • 3.2 ajax效果
    • 3.3 shell效果
  • 四、资源链接


前言

本专栏为 前端【Vue】专栏,主要介绍Vue知识点。对于刚进入计算机世界的学生来说,学习课本上的知识是远远不够的,并且国内教材偏旧,所以需要我们通过互联网自主学习。
这里普及一个知识:HTML已不仅仅只能开发 Web,也可以开发移动端(AndroidiOS),所以本专栏也会介绍 移动端的开发。
我个人将移动端开发,分为两大方向:

①原生开发
最早一批,使用安卓开发工具包(Android SDK)和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性,以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐,对开发人员技术要求高。

②混合开发(加壳方式)
当前热门,使用Web技术(网页三剑客HTML、CSS和JavaScript)开发App的方式,使用 vue.jsnode.jsAngular.jsReact.jsapi.js等框架开发。混合开发具有较高的开发效率和跨平台的优势,由于使用Web技术进行 界面渲染样式丰富、屏幕适配(栅格技术自适应)效果好。但缺点就是对底层硬件调用库尚不完善,有时候会发生异常,对框架依赖较高,不过库在不断完善中,主要的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支,它基于标准 HTML、CSS 和 JavaScript 构建,学习Vue不可以速成,得先熟悉网页三剑客(HTML、CSS和JavaScript)。Vue是一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。
在这里插入图片描述

一、技术介绍

本文介绍前后端交互方法与差异,分享我项目中采用的 通信方法,分析它们参数的不同,以及接受参数注意点。

1.1 axios通信

描述:Axios(ajax i/o system)是一个基于 promise的网络请求库,相比于原生的XMLHttpRequest对象来说,简单易用;相比于jQuery,axios包尺寸小且提供了易于扩展的接口,是专注于网络请求的库。符合最新的ES规范。
使用技术:XMLHttpReques
使用范围:主要用于node.js的项目中
我的项目:我在vue项目使用,request.js 也是对 axios 封装。

1.2 ajax通信

描述:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术可以实现网页局部刷新
使用技术:XMLHttpReques
使用范围:一些原生HTML项目用的比较多
我的项目:手持端,安卓的开发,我使用的ajax通信。

1.3 XMLHttpRequest通信

后期补充
使用技术:XMLHttpReques

1.4 WebSockets通信

我暂时没有使用过,用到时补充

1.5 Shell通信

描述:shell终端通信,最初基于Linux脚本。我也不知道怎么描述,前端采用shell及其少,网络上的资料更少了,反正我们直接看代码吧,日后有资料了,我在补充。
使用技术:TCP/UDP
使用范围:暂无
我的项目:网上使用shell通信极其少,我用于外壳通信,外壳是windowform,我需要调用打印机。

二、项目源码

2.1 axios通信

具体参数可以查阅官网吧,我这里对 axios进行封装,定义成全局方法,为了项目使用的方便。

位置:src\utils\baseclass.js
代码:使用的vue开发的。

2.1.1 data中定义URL变量

SERVER_ADDRESS: CONFIG_URL.PLATFROM_CONFIG.baseURL,

CONFIG_URL.PLATFROM_CONFIG.baseURL 就是文件的URL地址,将文件放在 public目录下,不会被打包,节省很多事,你也不用考虑什么跨越代理转发(URL替换)等问题。
在这里插入图片描述
详情可以阅读下文:
【Vue】vue2与WebApi跨域CORS问题
本文链接:https://blog.csdn.net/youcheng_ge/article/details/133808959

2.1.2 methods中定义通信方法

    // 函数内容:发送消息// 函数版本: 0.0.0.1// 修改时间: 2023.08.01// ================================================// 注意事项// 1.// ================================================WebApiSendMessage(data) {// 发送消息return axios({url: this.SERVER_ADDRESS + '/Message',method: 'post',headers: { 'content-type': 'application/json; charset=utf-8' },data: data}).catch((err) => {if (err.response) {// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围// 弹出提示MessageBox.confirm('请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围', {title: '信息提示',confirmButtonText: '确定',showCancelButton: false})} else if (err.request) {// 请求已经成功发起,但没有收到响应// `err.request` 在浏览器中是 XMLHttpRequest 的实例,// 而在node.js中是 http.ClientRequest 的实例// 弹出提示MessageBox.confirm('请求已经成功发起,但没有收到响应', {title: '信息提示',confirmButtonText: '确定',showCancelButton: false})} else {// 发送请求时出了点问题console.log('err', err.message)// 弹出提示MessageBox.confirm('发送请求时出问题', {title: '信息提示',confirmButtonText: '确定',showCancelButton: false})}})},

2.1.3 main.js中全局引入

// 全局混入自定义类
import baseclass from './utils/baseclass'
Vue.mixin(baseclass)

2.1.4 axios发送数据

代码解析:
1、onSubmit()就是页面提交按钮,rule经过规则验证没有问题后,执行SaveData()方法

// 提交数据
onSubmit() {this.$refs['postForm'].validate(valid => {if (valid) {this.SaveData()}})},SaveData() {// 消息数据const data = new this.WebApiData(1507)var postTable = []// 裸砂原料信息表var T_info = []T_info.push({裸砂原料编号: this.postForm.裸砂原料编号,报废备注: this.postForm.明细表[0].备注})// 裸砂半成品信息表var T_halfInfo = []const detaillength = this.postForm.明细表.lengthfor (let i = 0; i < detaillength; i++) {let item = this.postForm.明细表[i]T_halfInfo.push({公司编号: this.postForm.公司编号,// 工厂名称: undefined,// 存货编码: undefined,// 采购订单编号: undefined,// 领用申请单编号: undefined,// 销售订单编号: undefined,// 供应商编号: undefined,裸砂原料编号: this.postForm.裸砂原料编号,待提存裸砂编号: this.postForm.待提纯裸砂编号,待分选裸砂编号: this.postForm.待分选裸砂编号,裸砂半成品编号: undefined,裸砂半成品类型: undefined,砂规格: item.砂规格,砂型号: item.砂型号,当前重量: item.当前重量,分选机编号: item.分选机编号})}// 裸砂分选流程表var T_flow = []for (let i = 0; i < detaillength; i++) {let item = this.postForm.明细表[i]T_flow.push({公司编号: this.postForm.公司编号,裸砂原料编号: this.postForm.裸砂原料编号,待提纯裸砂编号: this.postForm.待提纯裸砂编号,待分选裸砂编号: this.postForm.待分选裸砂编号,待分选裸砂重量: this.postForm.待分选裸砂重量,分选开始时间: this.postForm.分选开始时间,分选开始录入时间: this.postForm.分选开始录入时间,分选开始人编号: this.postForm.分选开始人编号,分选开始备注: this.postForm.分选开始备注,裸砂半成品规格: item.砂规格,裸砂半成品编号: undefined,裸砂半成品重量: item.当前重量,分选机编号: item.分选机编号,分选结束备注: item.备注,分批数量: detaillength})}//表postTable.push(T_info)postTable.push(T_halfInfo)postTable.push(T_flow)data.table = postTable// 发送消息this.WebApiSendMessage(data).then((result) => {console.log(result)this.MessageHandle(result)})},

2.1.5 axios接收数据

代码解析:
1、MessageHandle(result)接收后台返回的数据,注意看这里是 result.data

    // 返回消息处理MessageHandle(result) {// 数据解构const { sn, success, errCode, errMsg, data, keyValue, table } = result.data// 显示返回信息this.ShowMessage(errMsg)switch (sn) {case 1507:if (success) {this.reset()//执行打印任务,等外壳打印this.PrintHandle(data,104)} else {this.ShowMessage(errMsg)}breakdefault:break}},

2.2 ajax通信

需要特别说明一下,原生jQuery下的ajax需要解决跨越问题,并且代码不够简洁。
而我使用的是 api.js 下的 ajax,不用过多理解,使用方法和参数几乎一模一样的,它仅仅是解决跨越问题,以及优化通信代码。

2.2.1 ajax通信库

位置:script\api.js
代码:原生HTML开发的,APICloud官网提供的库api.js 下载,或者查看我的底层库专栏。

2.2.2 ajax发送数据

代码解析:
1、Btn_OK 提交按钮,就是数据构造代码。
2、Content-Type是必须的,否则后端无法识别。

		Btn_OK: function () {const technologyId = model.data.daifenxuanluoshabianhao.trim();if (technologyId == "") {ShowToast("带分选裸砂编号,不为空!");return;}if (model.data.shaguige.trim() == "") {ShowToast("砂规格,不为空!");return;}if (model.data.fenxuanjibianhao.trim() == "") {ShowToast("分选机编号,不为空!");return;}if (Number(model.data.桶数) <= 0) {ShowToast("桶数,必须大于0!");return;}var postTable = [];// 裸砂原料信息表var T_info = [];T_info.push({裸砂原料编号: model.data.luoshayuanliaobianhao,报废备注: model.data.fenxuanjieshubeizhu});// 裸砂半成品信息表var T_halfInfo = []const detaillength = Number(model.data.tongshu);for (let i = 0; i < detaillength; i++) {T_halfInfo.push({公司编号: model.data.gongsibianhao,裸砂原料编号: model.data.luoshayuanliaobianhao,待提存裸砂编号: model.data.daitichunluoshabianhao,待分选裸砂编号: model.data.daifenxuanluoshabianhao,裸砂半成品编号: undefined,裸砂半成品类型: undefined,砂规格: model.data.shaguige,砂型号: model.data.shaxinghao,当前重量: model.data.dangqianzhongliang,分选机编号: model.data.fenxuanjibianhao})}// 裸砂分选流程表var T_flow = [];for (let i = 0; i < detaillength; i++) {T_flow.push({公司编号: model.data.gongsibianhao,裸砂原料编号: model.data.luoshayuanliaobianhao,待提纯裸砂编号: model.data.daitichunluoshabianhao,待分选裸砂编号: model.data.daifenxuanluoshabianhao,待分选裸砂重量: model.data.daifenxuanluoshazhongliang,分选开始时间: model.data.fenxuankaishishijian,分选开始录入时间: model.data.fenxuankaishilurushijian,分选开始人编号: model.data.fenxuankaishirenbianhao,分选开始备注: model.data.fenxuankaishibeizhu,裸砂半成品规格: model.data.shaguige,裸砂半成品编号: undefined,裸砂半成品重量: model.data.dangqianzhongliang,分选机编号: model.data.fenxuanjibianhao,分选结束备注: model.data.fenxuanjieshubeizhu,分批数量: model.data.tongshu});}postTable.push(T_info);postTable.push(T_halfInfo);postTable.push(T_flow);let data = {SN: 1507,userID: 'gyc',password: '123',clientIP: '127.0.0.1',windowsPCName: 'DESKTOP-95GJUJ1',windowsUserName: 'gyc',keyValue: {},table: postTable};model.SaveData(data);},SaveData: function (data) {api.showProgress({style: 'default',animationType: 'fade',title: '数据保存中,请稍候...',text: '',modal: true});//保存数据api.ajax({url: API_HOST + '/Api/Message',method: 'post',headers: {'Content-Type': 'application/json;charset=utf-8',//必须,否则后端无法识别},timeout: 180,returnAll: false,data: {body: data}}, function (ret, err) {api.hideProgress();if (ret) {MessageHandle(ret)}else {ShowToast(err.msg);}});}});

2.2.3 ajax接收数据

代码解析:
1、MessageHandle(result)后端返回数据的处理,注意看这里是 result,没有data层级。

	// 返回消息处理function MessageHandle(result) {// 数据解构const { sn, success, errCode, errMsg, data, keyValue, table } = result;// 显示返回信息ShowToast(errMsg);switch (sn) {case 1507:if (success) {reset();//执行打印任务,等外壳打印// if (this.bShowFX) {//   // 分选,出待分选标//   this.PrintHandleFX(data)// } else {//   // 不分选,出半成品标//   this.PrintHandleBCP(data)// }} else {ShowToast(errMsg);}break;default:break;}}

2.3 shell通信

2.3.1 shell发送请求

代码解析:
1、Shell.post()向外壳发送数据

 /*** 打印方法*/PrintHandle(table,sn) {// 消息数据const data = new this.WebApiData(sn)// 转换格式,List<DataTable>var postTable = []postTable.push(table)data.table = postTable// 向外壳发送消息const strJSON = Shell.post(JSON.stringify(data))},

2.3.2 shell接收请求

//网页浏览器
public ChromiumWebBrowser browser;CefSettings cefSetting = new CefSettings();
Cef.Initialize(cefSetting);
// 注册JsObj对象,实现JS调用C#
CefSharpSettings.WcfEnabled = true;
browser = new ChromiumWebBrowser(str_url);
browser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;
browser.JavascriptObjectRepository.Register("Shell", new JavaScriptFunction(this),isAsync: false, options: BindingOptions.DefaultBinder);
public string post(string strJSON)
{//数据初始化BaseWebApiDataReceive webApiData = JsonConvert.DeserializeObject<BaseWebApiDataReceive>(strJSON);
}

三、效果展示

3.1 axios效果

在这里插入图片描述

3.2 ajax效果

在这里插入图片描述

3.3 shell效果

效果看不到了,我打个断点,看一下前端传来的数据。
在这里插入图片描述
在这里插入图片描述

四、资源链接

(未完待续)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF中使用DataGrid封装组合控件TreeView+DataGrid

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#x…

Apache ShenYu 网关JWT认证绕过漏洞 CVE-2021-37580

Apache ShenYu 网关JWT认证绕过漏洞 CVE-2021-37580 已亲自复现 漏洞名称漏洞描述影响版本 漏洞复现环境搭建漏洞利用 修复建议总结 Apache ShenYu 网关JWT认证绕过漏洞 CVE-2021-37580 已亲自复现) 漏洞名称 漏洞描述 Apache ShenYu是一个异步的&#xff0c;高性能的&#x…

SpringBoot3-基础特性

文章目录 自定义 banner自定义 SpringApplicationFluentBuilder APIProfiles指定环境环境激活环境包含Profile 分组Profile 配置文件 外部化配置配置优先级 外部配置导入配置属性占位符 单元测试-JUnit5测试组件测试注解断言嵌套测试参数化测试 自定义 banner banner 就是启动…

机场信息集成系统系列介绍(7):机场航班信息显示系统FIDS

目录 一、简介 二、架构及相关功能 1、实时更新和显示航班信息 2、多屏显示与查询 3、提供登机口导航信息 4、发布机场公告 5、集成机场的其他延伸服务 6、支持多语言显示 7、监控与故障处理 8、数据分析与优化 9、与航空公司、地面代理的信息交互 10、安全保障与应…

【华为OD机试真题2023CD卷 JAVAJS】多段线数据压缩

华为OD2023(C&D卷)机试题库全覆盖,刷题指南点这里 多段线数据压缩 知识点数组栈递归矩阵循环 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 下图中,每个方块代表一个像素,每个像素用其行号和列号表示。 为简化处理,多段线的走向只能是水平、竖直、斜向45…

GPT2代码运行,个人文本生成助手,不依赖OpenAI API调用

0.前言: 感觉GPT很好玩,所以想要有个自己搭建GPT的写法,不依赖于OpenAI,需要翻墙太麻烦了,近日日本已经结合GPT4和机器,可以让他吓人,做出丰富的表情,如果自己训练的话,会塑造出什么样的机器人尚未可知…抱着好奇的心态,去github openai下载了个gpt2的模型来玩玩(其中遇到了许多…

2016年第五届数学建模国际赛小美赛C题对超级细菌的战争解题全过程文档及程序

2016年第五届数学建模国际赛小美赛 C题 对超级细菌的战争 原题再现&#xff1a; 最近有很多关于我们抗生素耐药性危机的讨论。进化出的能够抵抗抗生素的细菌每年杀死70万人&#xff0c;越来越强大的细菌正在世界各地传播。研究人员担心&#xff0c;我们将进入一个后抗生素时代…

【Sass】网易云动画播放器

简介 仿网易云播放动画 效果图 sass src/assets/style/musicPlay.sass // TODO 音乐播放器动画 // ? 动画停止class >>> .muscic-play-stop // HTML结构 // <div class"music-play"> // <div class"bg-primary"></div>…

安捷伦Agilent 8720ES网络分析仪

Agilent安捷伦8720ES S-参数矢量网络分析仪 50MHz至20GHz 100 dB 的动态范围 优异的测量精度 2个测量通道 4个显示通道 频率和功率扫描 快扫描和数据传输速度 通过/失败测试&#xff0c;强大的标记功能 电校准&#xff08;ECal&#xff09; 内部使用测试序列的自动化 可选时域…

当物联网技术遇上圣诞节,会给你带来怎样的商业灵感

智能物联网项目可以将更浓烈的节日气氛融入到千家万户。有市场嗅觉的朋友已经踏上了这种创新与传统相遇的旅程&#xff0c;你可以参考一下他们的点子。 物联网智能照明 借助物联网技术&#xff0c;你可以创建一个智能照明系统&#xff0c;让每一束灯光闪烁出美妙的色彩或图案…

正则表达式与bs4选择器筛选论文数准确率之比较

一、正则爬取论文网首页论文标题的示例 import requests import re from bs4 import BeautifulSoupheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36}def get_html(url):try:res…

4种常见的数据库索引

数据库索引是优化数据库系统性能的关键组成部分。如果没有有效的索引&#xff0c;查询可能会变得缓慢且低效&#xff0c;从而导致用户体验不佳并降低生产力。在这篇文章中&#xff0c;我们将探讨创建和使用数据库索引的一些最佳实践。 常见的索引算法有&#xff1a; 1. B-Tree…

Hadoop入门学习笔记——二、在虚拟机里部署HDFS集群

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 二、在虚拟机里部署HDFS集群2.1. 部署node1虚拟机2.2. 部…

【Angular】Angular中的最差实践

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

【数据结构入门精讲 | 第十六篇】并查集知识点及考研408、企业面试练习

上一篇中我们进行了散列表的相关练习&#xff0c;在这一篇中我们要学习的是并查集。 目录 概念伪代码选择题填空题编程题7-1 朋友圈R7-1 笛卡尔树R7-2 部落R7-3 秀恩爱分得快 在许多实际应用场景中&#xff0c;我们需要对元素进行分组&#xff0c;并且在这些分组中进行查询和修…

常用Python自动化测试框架有哪些?优缺点对比

随着技术的进步和自动化技术的出现&#xff0c;市面上出现了一些自动化测试框架。只需要进行一些适用性和效率参数的调整&#xff0c;这些自动化测试框架就能够开箱即用&#xff0c;大大节省了测试时间。而且由于这些框架被广泛使用&#xff0c;他们具有很好的健壮性&#xff0…

Python 运算符 算数运算符 关系运算符 赋值运算符 逻辑运算 (逻辑运算符的优先级) 位运算 成员运算符 身份运算符 运算符的优先级

1 运算符算数运算符关系运算符赋值运算符逻辑运算逻辑运算符的优先级 位运算布尔运算符移位运算符 成员运算符身份运算符运算符的优先级 运算符 算数运算符 四则运算 - * / a 8 b 9 print(ab)#与Java类似 也可以进行字符串的连接 注意:字符串数字字符串 不存在会抛出异常…

车云TCP链路偶现链接失联问题排查

一、问题分析 1.1 车云tcp长连接分析排查 在15:37:32.039上线&#xff0c; 在 16:07:26.527下线&#xff0c;车云长连接通道稳定&#xff0c;且该期间心跳数据正常。 1.2 云向驾仓推送数据分析 在15:37:42 进行车辆接管后&#xff0c;该车辆下线&#xff0c;且无法在上线&am…

SQL变更评审常见问题分享

SQL变更评审分享 概述 SQL变更&#xff0c;是我们在开发迭代中不可避免的场景&#xff0c;SQL变更通常是指DDL和DML语句变更&#xff0c;这些sql会影响到数据库表结构或具体数据&#xff0c;变更时如果执行到存在问题的sql脚本&#xff0c;会对实际应用操作难以评估的损失&…

Java研学-Servlet 基础

一 概述 1 介绍 Servlet&#xff08;Server Applet&#xff09;是Java Servlet的简称&#xff0c;称为小服务程序或服务连接器&#xff0c;用Java编写的服务器端程序&#xff0c;具有独立于平台和协议的特性&#xff0c;主要功能在于交互式地浏览和生成数据&#xff0c;生成动…