snakeZix-CSDN博客

原创多人聊天室包括单聊

相信上面的代码已经让你对socket.io的机制有所了解下面，开始真正的多人聊天室开发案例（部分）如果你socket基础不好，请看上一篇功能在线成员列表展示（实时的）多人在线聊天选择在线成员单聊后端实现var userList = []io.on('connection', function (socket) { console.log('a user connected'); //上线 socket.on('login', (user) => { //us.

2020-08-12 16:20:30 2429

原创基于socket.io的简易聊天室

聊天室这篇博客不讲解聊天系统（带数据库），只是简单的讲一下在线实时聊天室，但是它是一个聊天系统的基础。相信你很快就学会Socket.Io如果你希望更快的了解，直接git下面的代码链接，配合看chat-room流程后端搭建服务器，安装socket.io服务依赖，通过代码挂载服务。前端链接服务前端实现监听和发送服务端实现监听和发送开始安装后端基于nodejs讲解，而且为了方便直接用express框架，只是为了更快，用原生的也可。接下来，在编写代码时，我会加上注释解释作用，希望你.

2020-08-12 16:17:15 297

原创初识socket.io

英文官网：Socket.Io （导航栏的getStart或者demo学习）中文文档（W3C)：Socket.Io中文文档（更推荐吧，当然也不是特别好）基本工作机制它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用WebSocket它是一个完整的应用层协议，包含一套标准的 API 。，基于Tcp，Socket.Io是其上层的封装更加易用。从第一点也说明包含WebSocketWebSocket API 是 HTM.

2020-08-12 16:15:44 241

原创 RESTful接口设计风格

> 几句比较简练的话概括 — 来自知乎URL定位资源，用HTTP动词（GET,POST,DELETE,PUT,PATCH）描述操作看Url就知道要什么看http method就知道干什么看http status code就知道结果如何就是用URL定位资源，用HTTP描述操作。先说为什么需要前后端分离之后，就出现各种各样的事情，其中最为麻烦的就是接口的冲突，对接一直是前后端分离的难点之处对接由于没有统一规范，在人们慢慢的摸索中先有了经验先电脑的3层协议是否连通（能否ping通

2020-08-04 15:10:25 436

原创 IM系统数据库设计 & 前端逻辑处理

IM系统数据库设计 & 前端逻辑处理数据库表一下默认大家都有的字段就没写了，locked，create_time，update_time就没写了user 表id 等，没什么好说的friend_group 表好友分组列表：id，user_id（是谁的好友列表），group_name（组名），group_type（分组类型，是否为默认分组）默认分组无法删除，用户新建一个分组，就添加一条记录，主要区分就是user_id和group_namefriend 表好友表，记录好友关系。

2020-08-04 09:02:01 1577

原创微信小程序之微信登入

以下代码基于uni-app编写如果没有appid，那么uni-login是受限制的https://open.weixin.qq.com/ 认证商户()微信登入不同的应用对于微信登入会做不同的处理，即微信服务器（微信官方的）返回发送的OpenId是不相同的（后面会解释OpenId是干嘛用的，它涉及到数据库）。因此也有UnionIDUnionID 机制说明如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平.

2020-08-02 12:28:59 532

原创 Token and JWT

主要参考文章@秋天不落叶傻傻分不清之 Cookie、Session、Token、JWT阮一峰日志JWTToken（令牌）什么是token => 访问资源接口（API）时所需要的资源凭证最为突出的两个特点就是：服务端无状态化、可扩展性好支持移动端设备支持跨程序调用(1) token的验证流程客户端使用用户名跟密码请求登录服务端收到请求，去验证用户名与密码验证成功后，服务端会签发一个 token，（这个token可以存储在数据库要进行验证）并把这个 token 发.

2020-08-02 09:24:18 978

原创 Vue-Router - 03 嵌套路线和动态跳转

该篇涉及到 children，redirect，props，及动态跳转嵌套路线之children属性const RouterView = { render: (h)=>(h('router-view'))}const User = { template: `<div> 这是User页面组件 </div>`}const Article = { template: `<div> 这是Article页面组件 </.

2020-07-31 15:06:08 227

原创 Vue-Router - 02 路线匹配

路径参数匹配模式//通过这种方式匹配的可以直接拿到路径参数 idconst User = { name: 'User' template: '<div>User</div>', mounted() { console.log('这是User组件且id为' + this.$route.params.id) }}const routes = [ { path: '/', name: 'Home', redirect: '/u

2020-07-31 12:04:30 947

原创 Vue-Router - 01 快速入门

Vue-Router快速入门首先要明白一点，Vue-Router是做“跳转”功能，当然只是表面形式上的跳转，实质是DOM元素的卸载和挂载，页面并未跳转，但是效果是看到url发生了变化，但是注意发生变化的是"#"哈希值后面的值，实质上并未跳转页面，但是路由內部是通过window.onhashchange实现监听随着版本更替，history路由已经出现，它是用现代浏览器的新特性，实现window.history.pushState(state, title, url) // state：需要保存的

2020-07-31 09:11:46 236

原创打开Vue的正确姿势栏目总结篇

打开Vue的正确姿势栏目总结篇聊聊我学习Vue的故事第一次接触这个框架的时候觉得不是特别难，以前有过thinkphp5框架的基础（是一个优秀的框架奈何文档写的太简略了，新手不是特别好深入）。开始只是学点基础的吧，为了做项目学了三天直接上手，还好当时项目不难，基本是写静态的动画写，渲染数据层面少但是写完了就感觉没有用到Vue，或者真正用的的地方太少。后来慢慢的做，了解数据渲染的各种坑，自己写过各类的功能，什么分页，表格，还有一些小demo之类的。Vue官网文档香已经不知是多少遍从新看Vue文档了，V

2020-07-30 18:17:23 171

原创 Vue之插件和库(含loading插件实战)

插件和库(含loading插件实战)声明：这一节可能有点难理解，建议大家先了解$mount和extend的Vue静态属性也可以参考这篇文章插件和库几乎是开发大型Vue必备，小demo锻炼语法能力，大项目考究封装和可维护性等。集成插件和库几乎是必须的。开发插件怎么样的才叫插件开发，安装完插件表现为什么呢？你可以想象一些vue-router，在没有安装之前是没有route或者route或者route或者router这两个实例属性的，这其实就是注入绑定MyPlugin.install = fun

2020-07-30 17:04:49 444 1

原创 Vue挂载(mount)和继承(extend)

Vue.extend && Vue.$mountVue.$mount 挂载//index.html文件<body> <div id="app"></div></body>//index.js文件//1. 先看看普通的绑定new Vue({ el: '#app', // el: document.getElementById('app') template: `<div id="app"> 如

2020-07-30 11:48:20 2682

原创 vue-cli-v4.x从零开始

从零开始安装npm install @vue-cli -g初始化创建项目vue create 项目名//注意它会自动的创建对应的目录选择配置按键盘的上下键选择 “Manually select features” 回车确定按空格键表示选择该插件，选择如图所示插件，并回车确定按照如图选择，回车安装cd 项目名， npm run serve 运行项目看src下是主要编写代码的目录解析一下目录首先是最外层最为层目录解释

2020-07-29 20:11:53 226

原创 Vue自定义指令 && 过滤器

自定义指令 && 过滤器这些东西都和component差不多过滤器Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示{ template: `<div>  {{ message | capitalize }} <

2020-07-29 17:41:16 132

原创 Vue之动态事件绑定

动态事件绑定什么都有动态的，动态的值，动态的属性，动态响应数据，自然少不了动态的事件绑定什么是静态的呢？在模板语法中template的标签绑定v-on:eventName-“method”$onthis.$on(eventName, eventHandler) 绑定组件，动态侦听事件{ created() { this.$on('gg', this.gg) //注意这个this.gg 它只是一个函数，但是有意思的是，在$on的內部的回调里 this.gg.call(this)

2020-07-29 15:14:07 4369 1

原创掌握vue核心概念之响应式数据

掌握vue核心概念之响应式数据本篇文章主要讲的是vue的数据更新，要怎么去做，但是我并不会涉及原理之类的去讲（也就数据代理，递归处理对象，绑定函数更新）只是告诉萌新如何去用，作为一个初学者，我仍然建议先了解一个大概，做到第一阶段的能用，第二阶段埋坑，第三阶段的了解原理，第四阶段的自己工具option.data为什么会响应，注意是将option的data函数调用或data值，遍历解析属性，代理挂载到vm上（挂载的是对应属性的getter和setter方法），在实质上，vm只是有一根通向option的

2020-07-29 14:24:45 258 1

原创掌握vue核心概念之组件

掌握vue核心概念之组件注册组件//推荐驼峰命名或者使用 '-' 还是看个人看法习惯const GlobalComponent = { data: ()=>({ //注意data除了根组件，子组件都要函数返回对象 }), template: '<div>这是一个全局组件</div>'}const LocalComponent = { data: ()=>({ //注意data除了根组件，子组件都要函数返回对象 }), tem

2020-07-28 14:18:06 228 2

原创 Vue事件处理

事件处理在template中，直接通过attribute键值对方式就可绑定事件，不需要再去获取DOM，当然着其中真正绑定还是VM在做，最关键的在于，如果一个VM销毁，它会自动的解绑事件。如果你做过登入注册的登入和退出登入的切换，你一定能感受的vue的强大。监听事件v-on 事件监听围绕这一指令展开：可直接在绑定内容是个JS代码执行，该内容和模板语法一致，注意是一个沙箱，扫描到的变量都会去vm实例上找，或者内置函数（Date等）export default { data() {

2020-07-28 02:28:26 225 1

原创番外：透过JS代码看本质 - 03 变量声明和函数声明

声明提前通常JS引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理首先明确一点：提升不是一个技术名词;JS由V8引擎执行时，的解析执行JS顺序，存在的一种现象，但由于有的代码让人难以理解，于是，变量提升成了了解JS执行过程的必备知识。变量的声明(广义)其实可用分为三部分:创建 create初始化 initialize赋值 assign先看看var//在之前先了解一个小知识 typeof 判别一个变量的类型

2020-07-28 00:08:41 179

原创 JavaScript 数据类型

数据类型基本数据类型UndefinedNullBooleanNumberString复杂数据类型对象 ObjectFunctionArrayRegExptypeof“undefined”——如果这个值未定义“boolean”——如果这个值是布尔值“string”——如果这个值是字符串“number”——如果这个值是数值“object”——如果这个值是对象或 null“function”——如果这个值是函数注意检测不到数组。然而function有些例外，从技

2020-07-28 00:03:33 144

原创 Wampserver图标不绿

Wampserver先说一下特点，图标不变绿，但是依然能够正确访问资源，但是找不到数据库（严格一点是和意料之中的数据库不同）多个数据库端口冲突表现为：数据库“莫名”消失，又莫名出现wamp不变绿原因：wampserver自身带有数据库，然后你可能也自己下载配置过数据库(Mysql)，自下载的mysql一般是会自己启动的，当wampserver启动时，两个数据库端口都要占用3306端口，因此产生冲突解决办法：net stop mysql //停掉自己的数据库再次重启wamp，就可以

2020-07-27 19:07:17 965

原创 Cookie和Session 你真的懂吗？

Cookie 和 Session 基本概念什么是无状态无状态是指Web浏览器与Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应（Response），连接就被关闭了，在服务器端不保留连接的有关信息。也就是说，HTTP请求只能由客户端发起，而服务器不能主动向客户端发送数据。CookieCookie 是一些数据, 存储于你电脑上的文本文件中 —菜鸟教程一种http会话机制,为了解决HTTP协议本身是无状态的( “如何记录客户端的用户信息”????

2020-07-27 18:59:41 468

原创 vue之条件和列表渲染

条件和列表渲染极大的解放双手，如果你有用过纯粹的JS去写数据列表渲染（你可能会说，也不是特别麻烦啊），但是一定没有这么简单明了，更甚至容易懂，这也是为什么说Vue相对更加简单，它以屏蔽底层复杂的逻辑实现，以抽离通用，一旦抽离意味着简单化。如果你写过react一定会直呼内行，vue封装的完整性。v-for && v-idv-for 循环数组或者对象，这其实不用说太多，注意一些细节，key值的榜单，尽量不是index<!-- 1. 推荐遍历对象用in，遍历数组用of2. (it

2020-07-27 18:40:19 306 1

原创 vue之计算属性和侦听器

计算属性和侦听器为什么需要计算属性，在Vue的模板解析其实有相当多的不便，只能解析挂载到vm的属性，这些东西要吗是data通过代理实现，但是如果需要对数据进行复杂的处理，那么在模板语法用javascript是非常不便的。如果你学过react你就知道，其实计算属性相当于在rander函数内定义的变量，这个变量也是通过表达式计算的结果，可能包括state的属性，每次渲染（调用rander函数）的时候都肯定会重新计算其中的值。这其实也在一方面说明了为什么侦听属性和方法会有缓存的区别。说了这么多那，写

2020-07-27 18:39:25 127 1

原创 vue之模板语法

模板语法模板语法是 ViewModel将数据以何种形式渲染带View层的规则插值一、标签内容<span>{{msg}}</span><span v-html="htmlData"></span>二、标签attribute如果 dynamicId 的值是 null、undefined 或 false，则 id attribute 甚至不会被包含在

2020-07-27 18:38:15 142 1

原创 Vue之MVVM

MVVMVue.js等前端框架，通过MVVM，解放了双手渲染更新DOM。以前的Jq或者原生的JS都是获取DOM和操作本文主要基于掘金的一篇 MVVM模式介绍加之自己的理解M-V-MVM (数据模型)包含业务和验证逻辑的数据模型V (UI视图)定义屏幕中视图结构，布局，外观VM (VievModel)M <==> V 之间的使者，帮忙处理View的全部业务逻辑MVCview 在 controller的顶端，而model在controller的底部controll

2020-07-27 18:35:39 247

原创 Vue环境搭建（node & npm ）

如何快速搭建nodejs环境下载nodejs(最好去官网)下载稳定版, 安装完成后打开命令行 cmdnpm -v //查看当前npm 版本，并验证是否安装成功新建存储模块文件夹先在node安装目录下新建 node_global 和 node_cache 文件夹node_global 是以后npm i -g [name] 安装的目录cache 是缓存配置npm config配置 :npm config set prefix ['node_global模块路径']npm confi

2020-07-27 18:34:16 147

原创 vue-cli-v4.x开发配置

Vue-cli4安装vue create pro-name => cd pro-name => npm install 按住空格键选择或者取消选择，回车确认配置vue ui使用首要任务就是先排坑根目录下新建一个配置文件vue.config.js(它是一个可选的文件，一般Vue UI创建的都自带，npm就默认没有，npm run serve会自动的加载该文件的配置)怎么做环境变量的配置const path = require('path')function resolv

2020-07-27 18:14:55 363 1

原创 vue-cli-v3.x开发配置

vue的初步配置及其扩展版本是@vue/cli => v2.x版本配置打包环境在build目录下的utils.js大约51行 (版本请参考vue-cli入门)if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' publicPath: '../../' // + })} else { return

2020-07-27 18:13:16 190 1

原创 Vue.js呼叫请回答

Vue.js呼叫请回答注意：该栏目全部一句Vue.js官网的教程2.x编写script引入<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script

2020-07-27 18:08:01 205

wucan111的博客