vue.js客服系统实时聊天项目开发(八)使用axios post请求访客初始化接口
2023-06-13 09:17:02 时间
访客的初始化,很多人可能会认为放到链接websocket的时候,通过ws去发送给服务端
但是这样会有一定的问题,因为如果网络不稳定或者ws链接断了,会进行不停的重连,这样会造次多次请求初始化流程
所以我会在链接websocket之前,调用一个HTTP的访客初始化接口,这样也方便进行限流,各种账户异常问题判断等逻辑
在main.js中通过原型把axios 传递进来
import axios from 'axios'
Vue.prototype.$axios= axios
在业务逻辑里面进行调用
<script>
export default {
name: 'ChatApp',
data() {
return {
visitor:{
to_id:"",
visitor_id:"",
},
}
},
methods: {
visitorLogin(){
let entId=tools.getQuery("ent_id");
let toId=tools.getQuery("to_id");
var _this=this;
this.$axios.post(this.ApiHost+'/visitor_login', {
ent_id:entId,
to_id:toId,
}).then(function (response) {
var code=response.data.code;
var msg=response.data.msg;
if(code!=200){
_this.$message({
message: msg,
type: 'error'
});
return ;
}
let result=response.data.result;
_this.visitor.to_id=result.to_id;
_this.visitor.visitor_id=result.visitor_id;
}).catch(function (error) {
_this.$message({
message: error.message,
type: 'error'
});
});
},
},
mounted: function () {
this.visitorLogin();
}
}
</script>
这样就完成了发送post请求到访客初始化接口,会生成一个访客ID,前端需要把这个访客ID进行保存一下
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- vue-router 中 meta的用法
- form layui vue 和_layui是基于vue的吗?「建议收藏」
- vue md5.js_VUE.js
- Nginx部署Vue项目
- vue双向数据绑定的原理「建议收藏」
- vue前端怎么解决跨域问题_前端跨域调用js方法解决方案
- vue.js和jquery的区别_人和人类的区别是什么
- Vue.js – 引入外部 JS 文件
- Vue生成二维码_vue通过二维码分享
- vue源码分析-响应式系统工作原理_2023-03-01
- vue中$refs、$emit、$on的使用场景
- Vue组件中data必须是一个函数
- vue.js客服系统实时聊天项目开发(一)路由与子路由-全局变量-elementui搭建基本框架
- vue.js客服系统实时聊天项目开发(十二)自动欢迎信息的延迟展示效果
- vue.js客服系统实时聊天项目开发(二十)vue项目框架目录结构
- vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍
- 用Vue.js开发企业管理后台,我做到了
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- Vue结合Redis实现性能优化(vue引入redis)