c#和vue前后端分离怎么实现交互代码

c#和vue前后端分离怎么实现交互代码,第1张

要实现C语言和Vue前端的交互,可能需要借助一些其他的技术。以下是一些常用的方法:
1 使用REST API:C语言程序可以作为后端服务,提供一系列的RESTful API,供Vue前端进行调用。例如,Vue前端可以通过GET、POST、PUT、DELETE等>1、服务器发送通知的方式
当有新版本时,由服务器向所有用户发送通知,提醒用户进行更新。
好处:用户下载应用之后,即使一次也没使用过,也可以接收到通知,然后进行版本更新。
坏处:
1)可能用户已经更新了新版本,可还是收到了有新版本的提示。
2)如果用户关闭了接收push通知,那么即使服务器push了一个新版本提示,用户也收不到。
2本地通知的方式。
在pda登陆页面或者是设置一个定时器,间隔时间去查询用户当前版本,监测到版本不一致时提醒用户更新
方法:服务器提供一个访问现有版本的接口, 本地代码可以每隔一段时间,去访问服务器获取当前应用的版本,如果有更新,则d出对话框提醒用户进行更新
坏处:可能不能及时更新版本。
3服务器提供一个接口,访问接口(在使用应用中间(比如进入某个模块,这个模块调用此接口))进行提醒更新, 从接口获取的最新版本号与上次存储在本地的当前版本进行比较,不一致则提醒用户更新
好处:及时。用户可以很及时的更新新版本。
坏处:是用户在使用app期间收到提示
方法4没有进行实践 *** 作,暂且仅当记录
4、另外,友盟有自动提醒的功能,利用友盟推送可以实现版本更新
目前PDA的版本更新用的是类似方法3
大致实现思路:
步骤一:获取当前安卓上所安装的软件版本号
步骤二:调用接口获取当前最新版本号
步骤三:当前版本号是否与最新版版本号一致,不一致进行版本下载安装更新
data () {
return {
currentVersion: '', // 安卓上当前软的版本号
lateVer: '', // 最新版本号
wgtUrl: '', // 下载地址
percentageNum: 0, //下载进度条
show: false, // 下载时可根据需求添加进度条样式 控制进度条显隐
}
},
mounted () {
setTimeout(() => { // 根据代码实际情况确认是否添加延迟
// 获取设备唯一标识码 浏览器运行时注释掉plus部分浏览器中无plus会报错阻滞代码向下执行
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断
if (windowplus) {
// 在这里调用5+ API
thisplusready()
} else { // 兼容老版本的plusready事件
documentaddEventListener('plusready', thisplusready(), false)
}
})
},
methods: {
plusready () {
// 获取软件版本号
plusruntimegetProperty(plusruntimeappid, (inf) => {
consoleinfo('当前版本号:' + infversion)
// 获取当前版本号逻辑 *** 作
})
},
// 当前安装软件的版本与最新版本不同时确定下载
// 在App中检测版本更新首先判断版本号是否是最新的,不是最新则执行版本更新功能。
// 实现方式主要通过plusdownloadercreateDownload下载apk包,
// 下载完成后通过plusruntimeinstall来进行安装,在下载时给下载任务设置一个监听根据状态实时更新下载进度
downLoad () {
// plusnativeUIshowWaiting("新版本更新中,请耐心等待~");
let dtask = plusdownloadercreateDownload('>1、Vue本地启动项目:Vue项目可以在本地启动,通过npm run serve可以启动一个本地服务器,本地服务器可以提供静态文件,不支持动态数据的处理,比如数据库 *** 作等。
2、访问web服务器发送请求:访问web服务器发送请求,可以通过>有人觉得vue项目难调试,是因为用了webpack。所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手。所以vue+webpack调试要从webpack入手。
1我们先从一般情况开始说。
-sourcemap
webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成map文件,在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
2然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:
01devtool介绍
这里不同的配置有些不同的效果,比如是否保留注释、保留行信息等,具体每一条什么意思这里不详解释,有兴趣的童鞋可以参考这篇文章
官方默认的是用 ‘#cheap-module-eval-source-map’
devtool: '#cheap-module-eval-source-map'
设置好之后,在vue项目调试的时候,代码里面标注debugger的时候就能看到对应的代码了,非常方便。
02debugger
或者,直接找到对应的文件。在chrome用 ’ctrl(command) + p‘,输入文件名,可以找到对应的源代码。
command+p
打断点:
断点
需要注意的是,这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。
03-vue-cli
vue家的项目脚手架,推荐使用。vue-cli老家在这里
vue-cli可以帮我们自动搭建项目,首先npm全局安装
npm install -g vue-cli
然后创建一个新的项目
vue init webpack my-project
一路回车,搞定。(更多配置项请参考上面给出的vue-cli链接)
这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
04vue-cli webpack
从bulid文件夹里面就大概能看出:
•webpackdevconf: 开发模式用
•webpackprodconf: 生产模式用
其中,开发模式提供了devtool为’#cheap-module-eval-source-map’,生产模式根据config文件夹下的productionSourceMap变量控制是否使用。
若为true,则devtool为’#source-map’
其他使用方法一致。非常方便。
3线上调试
平时开发的时候,我们用webpack的热加载,可以省去挂载调试的步骤,非常方便。但是发布后部署到服务器上,就失去了这个本地优势。
如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息,而且发布一个包看代码量可能需要等待不等,这个方案不实际。但是如果挂载的是热加载到端口下的文件的话,这个问题就很好办了。
-热加载
在此之前,先来分析一下webpack的热加载原理。
对项目抓包可以发现这么一个文件:__webpack_hmr
__webpack_hmr
这是webpack热加载的服务器推送事件,eventsource类型,功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接,服务器发送更新数据回来append到流的末端,前端读取最新append的数据,然后动态的更新页面上的东西。
接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件,触发热加载,再抓个包,发现有两个hot-updatejson和一个hot-updatejs文件
热加载更新文件
这些具体做了些啥我不知道,这里就不深究了。应该是根据json里面的数据,达到一个准确更新的效果。
所以热更新其实就是监听服务器上的数据,有修改的话服务器发送数据过来,前端把数据拿来后替换到页面上这么一个过程。
-AutoResponder
接下来谈谈线上挂载测试,这里推荐一款软件:fiddler
fiddler有一个功能叫做AutoResponder,它可以将一个地址指向另一个地址。之所以用这个软件,是因为它能匹配正则,非常方便。
AutoResponder


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13486710.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-08-16
下一篇 2023-08-16

发表评论

登录后才能评论

评论列表(0条)

保存