基于网络聊天室的社交游戏 -- vue、axios

前一篇系列博文的传送门:http://www.cnblogs.com/lastpairs/p/6993237.html

客户端代码github地址 https://github.com/xxyjskx1987/lastpairswebapp

服务器端代码github地址 https://github.com/xxyjskx1987/lastpairsnodeserver

项目演示地址

axios,建议在vue2.0替换resource的开发组件,用于请求资源。

安装axios

npm install axios -save

代码中引用

import axios from ‘axios‘

axios.defaults.withCredentials = true;
Vue.prototype.$http = axios;
Vue.prototype.$apidomain = ‘http://127.0.0.1:3000‘;

这里面只提出了域名,如果项目比较大可自定义api层,withCredentials属性是用于在请求中带上cookie,以实现session功能。

post请求

        this.$http({
          url: this.$apidomain + ‘/login‘,
          method: ‘post‘,
          data: {},
          transformRequest: [function (data) {
            // Do whatever you want to transform the data
            let ret = ‘‘
            for (let it in data) {
              ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
            }
            return ret
          }],
          headers: {
            ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
          }
        }).then(function (res) {
          console.log(res.data);
        }).catch(function (error) {
          console.log(error);
        });    

get请求

                    this.$http.get(this.$apidomain).then((res)=>{
                       console.log(res.data);
                    }).catch((err)=>{
                      console.log(err);
                    });        
时间: 2024-11-05 16:23:38

基于网络聊天室的社交游戏 -- vue、axios的相关文章

基于网络聊天室的社交游戏 -- vue、socket.io-client

系列博文的传送门:http://www.cnblogs.com/lastpairs/p/6993237.html 客户端代码github地址 https://github.com/xxyjskx1987/lastpairswebapp 服务器端代码github地址 https://github.com/xxyjskx1987/lastpairsnodeserver 项目演示地址 http://www.tanmiba.com/ socket.io在BS架构的即时通信工具中,可以说是不二选择,本例在

基于网络聊天室的社交游戏 -- nodejs、express、socket.io-server

系列博文的传送门:http://www.cnblogs.com/lastpairs/p/6993237.html 客户端代码github地址 https://github.com/xxyjskx1987/lastpairswebapp 服务器端代码github地址 https://github.com/xxyjskx1987/lastpairsnodeserver 项目演示地址 http://www.tanmiba.com/ 后端采用express进行搭建,express的使用方式如下 var

基于java网络聊天室---前言

很久之前做的一个东西,现在拿出来整理一下放在自己的博客中! 一. 设计目的 随着人互联网的发展,人和人之间的沟通方式也越来越便捷和多样化,在线聊天工具已经成为人们生活中够通不可缺少的部分,在学习完 java网络编程课程,如果能开发一款属于自己的聊天工具,和好友进行私密对话,则是一件令人兴奋的事.同时,安全可靠的TCP这两种 通信协议,是非常重要的内容,值得研究. 二. 设计内容 本聊天室程序基于C/S模式,聊天室共分为服务器端和客户端两部分,服务器端程序主要负责侦听客户端发来的消息,客户端需登陆

基于linux的TCP网络聊天室设计与实现

利用Linux实现基于TCP模式的网络聊天程序 主要完成的两大组成部分为:服务器和客户端. 服务器程序主要负责监听客户端发来的消息. 客户端需要登录到服务器端才可以实现正常的聊天功能.该程序是利用进程以及共享内存来实现群发送消息的. 以下简单分析一下服务器端和客户端两个方面所要完成的任务. 服务器的主要功能如下: 在特定的端口上进行监听,等待客户端的连接. 用户可以配置服务器端的监听端口. 向连接的客户端发送登录成功信息. 向已经连接到服务器的客户端的用户发送系统消息. 使用TCP多线程并发服务

网络聊天室

1网络聊天室项目描写叙述 1.1功能描写叙述 MyQQv1採用C/S模式,构建网络聊天室,详细实现功能: A.能显示在线用户列表 B.能在聊天室里进行群聊天 C.能指定用户进行私聊 D.某用户下线.其它用户能接到提示 1.2所需技术 MFC,Socket套接字,TCP/IP协议.动态数组,CString字符串拼接与拆分 2网络聊天室执行流程图 2.1server执行流程图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fo

基于java网络聊天室--客户端

ChatClient.java 包含名为ChatClient的public类,其主要功能为定义客户端的界面,添加时间监听与事件处理.该类定义了Connect()与DisConnect()方法实现与客户端的连接与断开连接.当登陆到指定的服务器时,调用ClientReceive类实现消息收发,同时该类还定义了SendMessaga()方法来其他用户发送带有表情的消息或悄悄话. 1 /* 2 * To change this license header, choose License Headers

基于java网络聊天室--服务器端

服务器端: ChatServer.java 包含名为ChatServer的public类,其主要功能为定义服务器端的界面,添加时间监听与时间处理.调用ServerListen类来实现服务端用户上线与下线的监听,调用ServerListen来实现服务器端的消息收发. 1 package com.silianbo.server; 2 3 import com.silianbo.CaptureScreen; 4 import java.awt.BorderLayout; 5 import java.a

vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 MVVM框架:Vue2.5.6 状态管理:Vuex 页面路由:Vue-router iconfont图标:阿里巴巴字体图标库 自定义滚动条:vue-gemini-sc

Java NIO示例:多人网络聊天室

一个多客户端聊天室,支持多客户端聊天,有如下功能: 功能1: 客户端通过Java NIO连接到服务端,支持多客户端的连接 功能2:客户端初次连接时,服务端提示输入昵称,如果昵称已经有人使用,提示重新输入,如果昵称唯一,则登录成功,之后发送消息都需要按照规定格式带着昵称发送消息 功能3:客户端登录后,发送已经设置好的欢迎信息和在线人数给客户端,并且通知其他客户端该客户端上线 功能4:服务器收到已登录客户端输入内容,转发至其他登录客户端. 功能5 TODO:客户端下线检测  方案是:客户端在线的时候