随笔分类 - vue.js
随笔
摘要：一、数据模型的设计 这里我们先不讨论群聊的模型，指讨论两个人之间的聊天，我们可以把两个人实时聊天抽象为（点对点）的实时通讯，如下图 我们上面的所说的模型其实也就是数据包的模型应该怎么设计，换句话说就是数据包的数据结构的设计，其实很简单，A发送给B，已经B发送给A，我们在传输的时候，全部带上他们的唯一
阅读全文
摘要：一、基于web端的实时通讯，我们都知道有websocket，为了快速开发，本项目我们采用socket.io（客户端使用socket.io-client） 二、socket.io和express链接 三、使用socket.io 以上就是socket.io配合express的使用，下面我们就来看看类似微
阅读全文
摘要：一、模型的引入 二，数据库基本操作（增、删、改、查） 增： 删： 改： 查： 三、模型关系 这里就要就要求我们指定数据表之间的关系，这里直说关系，详解请看官方文档 1.一对一（BelongsTo， HasOne ） 2.一对多（HasMany） 3.多对多（Belongs-To-Many） 四、多表
阅读全文
摘要：本系列文章，主要是一个前端的视角来实现一些后端的功能，所以不会讲太多的前端东西，主要是分享做这个项目学到的一些东西，，，，， 好了闲话不多说，我们开始搭建后端服务，这里我们采用node的express框架来做我们的后端服务 这里是官网地址：express 一、安装express框架 二、先写一个测试
阅读全文
摘要：一、使用vue-cli脚手架构建 二、安装axios并统一处理请求接口（二次封装axios） 1.安装 2.获取当前域名 3.封装axios 4.在src目录下新建api文件夹（该文件夹下我们放置我们所有的请求接口）如下图 三、引入vuex进行状态管理 在src目录下新建store文件夹，然后依次新
阅读全文
摘要：html部分（主要部分）: js: data: methods: 效果图：
阅读全文
摘要：最近学了mysql数据库，寻思着能不能构思一个小的全栈项目，思来想去，于是就有了下面的项目； 先上几张效果图吧 目前暂时前端只有这几个页面，后端开发方面，有登录，注册，完善用户信息，获取用户信息，获取文章列表，发表文章，点赞文章的api接口； 后续会慢慢考虑如何丰富这个项目，比如搜索，实时增加聊天，
阅读全文
摘要：恢复内容开始 项目是移动端的项目，为了解决300ms的click延迟，所以在全局中加入了FastClick，引入的方式很简单，网上一大堆教程，这里不做赘述 我们就谈，我遇到的问题： 某天产品要我新增一个上传图片的功能，这个也不是一个很困难的需求，直接使用插件，这里我使用的是element-ui的up
阅读全文
摘要：一、为什么要自己动手写插件呢，原因有二： 其一：是因为最近产品了提了一个在web端接收，消息通知的需求，产品要求在若干个页面内如果有消息，就要弹出消息弹窗展示给用户，略加思索之后，第一反应就是写个消息的组件，在需要的页面引入，不过写好之后，发现这样写好麻烦，是不是可以写个插件在全局一次性引入呢？ 其
阅读全文
摘要：1.目录结构 2.开始（安装vuex） npm install vuex --save 3.编辑store/index.js（创建一个Vuex.store状态管理对象） 4.编辑store/state.js(也就是添加你要管理的数据) 5.编辑store/mtations-types.js(这个主要
阅读全文
摘要：之前有写过Vue.Draggable实现拖拽效果（快速使用）（http://www.cnblogs.com/songdongdong/p/6928945.html）最近项目中要用到这个拖拽的效果，当产品那个今日头条app编辑导航，拖拽的效果时，心里暗爽，（之前玩过呀，很简单的，事实证明，任何看似简单
阅读全文
摘要：1.目录结构（vue项目，但是并不局限于vue） 2.首先定义一个mixin.styl文件 3.再定义一个统一处理dpr的stylus文件，base.styl 4.在定义一个index.styl文件统一管理我们的公共stylus文件 5.在全局中引入index.styl（这里我们使用vue的项目来举
阅读全文
摘要：1.axios本身就封装了各种数据请求的方法 2.这里我们根据axios提供的别名，进行调整 3.现在我们根据axios提供的请求别名，处理两个我们常用的请求方法 4.根据不同的接口封装不同的请求方法（这个方法是用来直接获取数据的） 1 1)引入我们第三部处理好的post和get请求方法 2 imp
阅读全文
摘要：生命周期探究 对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。 beforecreate : 举个栗子：可以在这加个loading事件 created ：在这结束loading，还做一些初始化，实现函数自执行 mounted ： 在这发起后端请求，拿回
阅读全文
摘要：<div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts>
阅读全文
摘要：1、app.vue中 2、router中index.js(路由的路径配置) //vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 //如果不想要很丑的 hash，我们可以用路由的 history 模式，
阅读全文
摘要：父组件中引用的子组件 <pics :is-pics="showpics" // 这是我们要传递的参数 :is-product="productMsg" :is-pics-falg="picsFalg" ></pics> 在子组件中使用props来接受 props: ['isPics', 'isPro
阅读全文
摘要：子组件： this.$emit('transferUrl', this.picUrl) 父组件： 引入子组件<pics @transferUrl="gettransferUrl"></pics> 获取参数： 引入子组件<pics @transferUrl="gettransferUrl"></pic
阅读全文
摘要：我们要实现的很简单，就是点击+1的count加一，点击-1的时候count-1 一、mutation 在vue 中，只有mutation 才能改变state. mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自
阅读全文