基于Nodejs利用socket.io实现多人聊天室

前端之家收集整理的这篇文章主要介绍了基于Nodejs利用socket.io实现多人聊天室前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

socket.io简介

在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket。虽然代码短,但可以很好地体现websocket的原理。

,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道。但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块。在不支持websoket的浏览器中,socket.io可以降级为其他的通信方式,比如有AJAX long polling ,JSONP Polling等。 模块安装

新建一个package.json文件,在文件中写入如下内容

npm install

执行完这句,node将会从npm处下载socket.io和express模块。

-

服务器端的实现

文件夹中添加index.js文件,并在文件中写入如下内容

socket server") }); /*在线人员*/ var onLineUsers = {}; /* 在线人数*/ var onLineCounts = 0; /*io监听到存在链接,此时回调一个socket进行socket监听*/ io.on('connection',function (socket) { console.log('a user connected'); /*监听新用户加入*/ socket.on('login',function (user) { "use strict"; //暂存socket.name 为user.userId;在用户退出时候将会用到 socket.name = user.userId; /*不存在则加入 */ if (!onLineUsers.hasOwnProperty(user.userId)) { //不存在则加入 onLineUsers[user.userId] = user.userName; onLineCounts++; } /*一个用户新加入,向所有客户端监听login的socket的实例发送响应,响应内容为一个对象*/ io.emit('login',{onLineUsers: onLineUsers,onLineCounts: onLineCounts,user: user}); console.log(user.userName,"加入了聊天室");//在服务器控制台中打印么么么用户加入到了聊天室 }); /*监听用户退出聊天室*/ socket.on('disconnect',function () { "use strict"; if (onLineUsers.hasOwnProperty(socket.name)) { var user = {userId: socket.name,userName: onLineUsers[socket.name]}; delete onLineUsers[socket.name]; onLineCounts--; /*向所有客户端广播该用户退出群聊*/ io.emit('logout',user: user}); console.log(user.userName,"退出群聊"); } }) /*监听到用户发送了消息,就使用io广播信息,信息被所有客户端接收并显示。注意,如果客户端自己发送的也会接收到这个消息,故在客户端应当存在这的判断,是否收到的消息是自己发送的,故在emit时,应该将用户的id和信息封装成一个对象进行广播*/ socket.on('message',function (obj) { "use strict"; /*监听到有用户发消息,将该消息广播给所有客户端*/ io.emit('message',obj); console.log(obj.userName,"说了:",obj.content); }); }); /*监听3000*/ http.listen(3000,function () { "use strict"; console.log('listening 3000'); });

运行服务器端程序

输出

此时在浏览器中打开localhost:3000会得到这样的结果:

这里写图片描述

原因是在代码中只对路由进行了如下设置

socket server") });

服务器端主要是提供socketio服务,并没有设置路由。

客户端的实现

在客户端建立如下的目录和文件,其中json3.min.js可以从网上下载到。

client

- - - client.js - - - index.html - - - json3.min.js - - - style.css

在index.html中

<Meta charset="UTF-8"> <Meta name="format-detection" content="telephone=no"/> <Meta name="format-detection" content="email=no"/> 1<a href="/tag/301/" target="_blank" class="keywords">301</a>群聊@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_65@ <link rel="stylesheet" type="text/css" href="./style.css"/> <script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js"></script> <script src="./json3.min.js"></script> </head> <body> <div id="login<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"> <div style="width: 260px;margin: 200px auto;"> 输入你在群聊中的昵称 <br/> <br/> <input type="text" style="width:180px;" placeholder="请输入<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>" id="userName" name="userName"/> <input type="button" style="width: 50px;" value="提交" onclick="CHAT.userNameSubmit();"/> </div> </div> <div id="chat<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" style="display: none;"> <div style="background: #3d3d3d;height: 28px;width: 100%;font-size: 12px"> <div style="line-height: 28px;color:#fff;"> <span style="text-align: left;margin-left: 10px;">1<a href="/tag/301/" target="_blank" class="keywords">301</a>群聊</span> <span style="float: right;margin-right: 10px"><span id="showUserName"></span>| <a href="javascript:;" onclick="CHAT.<a href="/tag/logo/" target="_blank" class="keywords">logo</a>ut()" style="color: #fff;"><a href="/tag/tuichu/" target="_blank" class="keywords">退出</a></a></span> </div> </div> <div id="doc"> <div id="chat"> <div id="message" class="message"> <div id="onLineCounts" style="background: #EFEFF4; font-size: 12px;margin-top: 10px;margin-left: 10px;color: #666;"> </div> </div> <div class="input-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"> <div class="input"> <input type="text" maxlength="140" placeholder="输入聊天内容 " id="content" name="content" > </div> <div class="action"> <button type="button" id="mjr_send" onclick="CHAT.submit();">提交</button> </div> </div> </div> </div> </div> <script type="text/javascript" src="./client.js"></script> </body> </html></pre> </div> <p>在client.js中</p> <div class="jb51code"> <pre class="brush:js;"> /** * Created by bamboo on 2016/3/31. */ /*即时运行<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>*/ (function () { "use strict"; var d = document,w = window,dd = d.documentElement,db = d.body,dc = d.compatMode === "CSS1Compat",dx = dc ? dd : db,ec = encodeURIComponent,p = parseInt; w.CHAT = { msgObj: d.getElementById("message"),screenHeight: w.innerHeight ? w.innerHeight : dx.innerHeight,userName: null,userId: null,socket: null,/*滚动条始终在最<a href="/tag/dibu/" target="_blank" class="keywords">底部</a>*/ scrollToBottom: function () { w.scrollTo(0,this.msgObj.clientHeight); },/*此处仅为简单的刷新<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>,当然可以做复杂点*/ <a href="/tag/logo/" target="_blank" class="keywords">logo</a>ut: function () { // this.socket.disconnect(); w.top.location.reload(); },submit: function () { var content = d.getElementById('content').value; if (content != '') { var obj = { userId: this.userId,userName: this.userName,content: content }; //如在服务器端<a href="/tag/daima/" target="_blank" class="keywords">代码</a>所说,此对象就行想要发送的信息和发送人组合成为对象一起发送。 this.socket.emit('message',obj); d.getElementById('content').value = ''; } return false; },/**客户端根据时间和<a href="/tag/suiji/" target="_blank" class="keywords">随机</a>数<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>ID,聊天<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>称可以重复*/ genUid: function () { return new Date().getTime() + "" + Math.floor(Math.random() * 889 + 100); },/*更新系统信息 主要是在客户端<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>当前在线人数,在线人列表等,当有<a href="/tag/xinyonghu/" target="_blank" class="keywords">新用户</a>加入或者旧<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="/tag/tuichu/" target="_blank" class="keywords">退出</a>群聊的时候做出<a href="/tag/yemian/" target="_blank" class="keywords">页面</a><a href="/tag/tishi/" target="_blank" class="keywords">提示</a>。*/ updateSysMsg: function (o,action) { var onLineUsers = o.onLineUsers; var onLineCounts = o.onLineCounts; var user = o.user; //更新在线人数 var userHtml = ''; var separator = ''; for (var key in onLineUsers) { if (onLineUsers.hasOwnProperty(key)) { userHtml += separator + onLineUsers[key]; separator = '、'; } } //插入在线人数和在线列表 d.getElementById('onLineCounts').innerHTML = '当前共有' + onLineCounts + "在线列表: " + userHtml; //<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>系统消息 var html = ''; html += '<div class="msg_system">'; html += user.userName; html += (action === "login") ? "加入了群聊" : "<a href="/tag/tuichu/" target="_blank" class="keywords">退出</a>了群聊"; html += '</div>'; var section = d.createElement('section'); section.className = 'system J-mjrlinkWrap J-cutMsg'; section.innerHTML = html; this.msgObj.appendChild(section); this.scrollToBottom(); },/*<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>提交<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>后,将login<a href="/tag/Box/" target="_blank" class="keywords">Box</a>设置为<a href="/tag/buxianshi/" target="_blank" class="keywords">不显示</a>,将chat<a href="/tag/Box/" target="_blank" class="keywords">Box</a>设置为<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>*/ userNameSubmit: function () { var userName = d.getElementById('userName').value; if (userName != '') { d.getElementById('userName').value = ''; d.getElementById('login<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').style.display = 'none'; d.getElementById('chat<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').style.display = 'block'; this.init(userName);//<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>init<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> } return false; },//<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>初始化 init: function (userName) { //<a href="/tag/suiji/" target="_blank" class="keywords">随机</a>数<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>uid this.userId = this.genUid(); this.userName = userName; d.getElementById('showUserName').innerHTML = this.userName;//[newpidian]|[<a href="/tag/tuichu/" target="_blank" class="keywords">退出</a>] this.scrollToBottom(); //连接socketIO服务器,newpidian的IP地址 this.socket = io.connect('192.168.3.155:3000'); //向服务器发送某<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>已经<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>了 this.socket.emit('login',{userId: this.userId,userName: this.userName}); //监听来自服务器的login,即在客户端socket.emit('login ')发送后,客户端就会收到来自服务器的 // io.emit('login',user: user}); /*监听到有<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>login了,更新信息*/ this.socket.on('login',function (o) { //更新系统信息 CHAT.updateSysMsg(o,'login'); }); /*监听到有<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="/tag/logo/" target="_blank" class="keywords">logo</a>ut了,更新信息*/ this.socket.on('<a href="/tag/logo/" target="_blank" class="keywords">logo</a>ut',function (o) { CHAT.updateSysMsg(o,'<a href="/tag/logo/" target="_blank" class="keywords">logo</a>ut'); }); //var obj = { // userId: this.userId,// userName: this.userName,// content: content //}; /*监听到有<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>发送消息了*/ this.socket.on("message",function (obj) { //判断消息是不是自己发送的 var isMe = (obj.userId === CHAT.userId); var contentDiv = '<div>' + obj.content + '</div>'; var userNameDiv = '<span>' + obj.userName + '</span>'; var section = d.createElement('section'); if (isMe) { section.className = 'user'; section.innerHTML = contentDiv + userNameDiv; } else { section.className = 'service'; section.innerHTML = userNameDiv + contentDiv; } CHAT.msgObj.appendChild(section); CHAT.scrollToBottom(); }); } } /*控制键键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 BackSpace 8 Esc 27 Right Arrow 39 -_ 189 Tab 9 Spacebar 32 Dw Arrow 40 .> 190 Clear 12 Page Up 33 Insert 45 /? 191 Enter 13 Page Down 34 Delete 46 `~ 192 Shift 16 End 35 Num Lock 144 [{ 219 Control 17 Home 36 ;: 186 \| 220 Alt 18 Left Arrow 37 =+ 187 ]} 221 Cape Lock 20 Up Arrow 38,< 188 '" 222 * */ //通过“回车键”提交<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a> d.getElementById('userName').onkeydown = function (e) { console.log(e); e = e || event; if (e.keyCode === 13) { CHAT.userNameSubmit(); } }; //通过“回车键”提交聊天<a href="/tag/neirong/" target="_blank" class="keywords">内容</a> d.getElementById('content').onkeydown = function (e) { e = e || event; if (e.keyCode === 13) { CHAT.submit(); } }; })();</pre> </div> <p>style.css</p> <p>秘密</p> <p>运行结果</p> <p>服务器端已经运行,现将客户端也运行起来得到下图:</p> <p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201702/201702220953106.png" /></p></p> <p><a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>了new和pidian两个<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>,并发送信息和进行<a href="/tag/tuichu/" target="_blank" class="keywords">退出</a>,得到下面的结果: </p> <p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201702/201702220953117.png" /></p></p> <p>以上所述是小编给大家介绍的基于Nodejs利用socket.io实现多人聊天室。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友!感谢<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p></div> <div class="topcard-tags"><a href="/tag/nodejs/" class="tag_link" target="_blank">nodejs</a><a href="/tag/pnodejs/" class="tag_link" target="_blank">nodejs</a><a href="/tag/nodejsp/" class="tag_link" target="_blank">nodejs</a><a href="/tag/socket/" class="tag_link" target="_blank">socket</a><a href="/tag/socketp/" class="tag_link" target="_blank">socket</a><a href="/tag/socketio/" class="tag_link" target="_blank">socket.io</a><a href="/tag/socketioliaotianshi/" class="tag_link" target="_blank">socket.io聊天室</a><a href="/tag/liaotianshi/" class="tag_link" target="_blank">聊天室</a><a href="/tag/liaotianship/" class="tag_link" target="_blank">聊天室</a></div> <ul class="list-group"> <li class="list-group-item"><a href="/nodejs/41410.html" title="从零学习node.js之简易的网络爬虫(四)">上一篇:从零学习node.js之简易的网络爬虫(</a><a href="/nodejs/41402.html" title="Angular.js与node.js项目里用cookie校验账户登录详解" class="text-muted pull-right">下一篇:Angular.js与node.js项目里用cooki</a> </li> </ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的Node.js相关文章</h1></div> <div class="list_con"> <a href="/nodejs/996887.html" title="[javascript] typescript的安装"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/02-05/09/16073fc79a4b8b0c6d0c7faf40937605.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">[javascript] typescript的安装</div> <div class="summary">现在的js代码都是这种高级点的方式语法 , 就是ts语法 ,要使用ts语法那就要先安装一下 先...</div> <time class="summary">作者:前端之家 时间:2021-02-05</time> </a> </div> <div class="list_con"> <a href="/nodejs/994535.html" title="node版本管理工具nvm"><div class="title">node版本管理工具nvm</div> <div class="summary">nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="/nodejs/994534.html" title="node起一个简单服务,打开本地项目或文件浏览"><div class="title">node起一个简单服务,打开本地项目或文件浏览</div> <div class="summary">1、安装nodejs 2、在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="/nodejs/994533.html" title="path的join和resolve的使用区别"><div class="title">path的join和resolve的使用区别</div> <div class="summary">1.连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="/nodejs/993747.html" title="nodejs与javascript中的aes加密"><div class="title">nodejs与javascript中的aes加密</div> <div class="summary">简介 1.aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="/nodejs/993745.html" title="带你玩转七牛云存储——高级篇"><img class="lazy" src="/images/np.jpg" data-original="/res/2020/12-23/09/bdbc4a4e00d93937025dde01732944cd.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">带你玩转七牛云存储——高级篇</div> <div class="summary">七牛云图片存储优点 1. 支持各种尺寸的图片缩放; 2. 支持图片自动压缩; 3. 支持水印添加...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="/nodejs/993744.html" title="VueJs生产环境部署"><img class="lazy" src="/images/np.jpg" data-original="/res/2020/12-23/09/7367c086e013616683aeae4b7db032e9.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">VueJs生产环境部署</div> <div class="summary">VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="/nodejs/993743.html" title="vuejs深入浅出—基础篇"><div class="title">vuejs深入浅出—基础篇</div> <div class="summary">一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: ...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="/nodejs/993742.html" title="你必须知道的session与cookie"><div class="title">你必须知道的session与cookie</div> <div class="summary">Session本质 提到Session我们能联想到的就是用户登录功能,而本身我们使用Session的基础是...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="/nodejs/993741.html" title="es6新特性分享"><div class="title">es6新特性分享</div> <div class="summary">1、字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:inclu...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div> <!-- left end--> <!-- right --> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="/nodejs/996887.html" title="[javascript] typescript的安装" target="_blank">• [javascript] typescript的</a></li> <li><a href="/nodejs/994535.html" title="node版本管理工具nvm" target="_blank">• node版本管理工具nvm</a></li> <li><a href="/nodejs/994534.html" title="node起一个简单服务,打开本地项目或文件浏览" target="_blank">• node起一个简单服务,打开</a></li> <li><a href="/nodejs/994533.html" title="path的join和resolve的使用区别" target="_blank">• path的join和resolve的使用</a></li> <li><a href="/nodejs/993747.html" title="nodejs与javascript中的aes加密" target="_blank">• nodejs与javascript中的ae</a></li> <li><a href="/nodejs/993746.html" title="JavaScript中Object.keys、Object.getOwnPropertyNames区别" target="_blank">• JavaScript中Object.keys、</a></li> <li><a href="/nodejs/993745.html" title="带你玩转七牛云存储——高级篇" target="_blank">• 带你玩转七牛云存储——高</a></li> <li><a href="/nodejs/993744.html" title="VueJs生产环境部署" target="_blank">• VueJs生产环境部署</a></li> <li><a href="/nodejs/993743.html" title="vuejs深入浅出—基础篇" target="_blank">• vuejs深入浅出—基础篇</a></li> <li><a href="/nodejs/993742.html" title="你必须知道的session与cookie" target="_blank">• 你必须知道的session与coo</a></li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> </div> <!-- right end --> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程,小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程,小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程,小白也能轻松搞定!" target="_blank">· 联想笔记本一键重装Win10系统图文教程,小白也能...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程:从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程:从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持,与你一起学习编程,相信编程改变未来!" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="/js/base.js"></script> </body> </html>