Only_ruiwen的博客

只要你足够努力,最坏的结果也就是大器晚成

javascript设计模式-代理模式

代理模式是为一个对象提供一个代用品或占位符,以便控制对他的访问。 代理模式是一种非常有意义的模式,在生活中可以找到很多代理的场景。比如,明星都有经纪人作为代理,明星不会主动与主办方谈论价格和演出的细节,往往是由他的经纪人出面,把商业细节谈好之后,再把合同交由给明星签名。 而我通常使用到代理模式...

2019-09-15 12:01:04

阅读数 5

评论数 0

javascript设计模式-策略模式

在我最近的一个项目中,有一个模块是关于表单校验的需求,需求大致是验证输入不能空,不能够重复的字符串等等,检验的规则大概有10种,而我的同事为了检验这样的表单功能,则编写大量的if-else代码,伪代码如下: if (value.length ===0) { // todo ...

2019-08-15 22:54:51

阅读数 39

评论数 0

javascript设计模式-单例模式

最近在重新修炼js的设计模式,发现平时自己所写的代码,无意中就使用到了某种的设计模式,所以特意记录一下,以便以后自己查看。 一.单例模式 单例模式指的是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式,是一种很常见的模式,至少在我现在工作中经常用到。单例模式所强调的就是,有且...

2019-08-06 16:02:33

阅读数 23

评论数 0

关于浅拷贝和深拷贝的理解

在聊深拷贝和浅拷贝之前,我们先来看看以下这几个场景: let obj1 = { a: 1, b: 2 }; let obj2 = obj1; obj2.a = 3; console.log(obj1.a); //3 let a = &q...

2019-07-22 11:02:41

阅读数 13

评论数 0

关于对Promise的理解

什么是Promise? Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一...

2019-07-07 16:06:51

阅读数 18

评论数 0

vue实现全局组件----$alert

在element中,有一些全局的组件,类似于this.message(),this.message(),this.message(),this.toast()这种,通过原型的方式挂载在vue的全局上面,以供我们全局使用,平时自己用的多,那么我现在就尝试自己来实现一下。 一.普通组件方式 我们实现一...

2019-06-30 14:18:48

阅读数 161

评论数 0

一个树形结构所引发的思考

今天碰到了一个这样的数据结构,如下: var cityData = [{ id: 1, name: '广东省', children: [{ id: 11, name: '深圳', ...

2019-04-17 10:11:26

阅读数 70

评论数 0

关于css布局的那些事-双飞翼布局

什么是双飞翼布局呢? 简单来说,就是中间自适应宽度,两边有固定宽度。 假设: 有三个div,中间的div宽度是不固定的,两边的div各有200px宽度。 <!DOCTYPE html> <html lang="en"> ...

2019-04-12 16:11:49

阅读数 18

评论数 0

vue项目中如何使用mxgraph进行可视化操作

最近公司需要使用mxgraph,来进行流程图的开发,由于我是第一次接触这个库,所以踩到的坑还是挺多,最坑爹的网上关于这个库的资料实在是太少了,它的文档还是英文文档。所以开发起来还是有点痛苦的。 我们来看下以下部分需求: 这是PM要我做的流程图,这里我会拿部份的功能和大家分享。包括新建图形,删除节...

2019-04-11 17:00:45

阅读数 472

评论数 0

Vue中的Provide/inject

今天做了项目中的登陆功能,按照我之前一贯的套路都是使用vuex这个状态管理插件来处理数据。然后,我就想了想,看下vue有什么其它的方法能够实现父子N多辈的通信。 找了下api让我发现了provide和inject这个东西,哇靠,相见恨晚啊。哈哈。 Provide/Inject是什么? provi...

2019-03-12 18:06:57

阅读数 221

评论数 0

原生js实现封装jquery(1)

虽然目前市面上jquery基本很少有公司使用(旧项目除外),基本上都是在使用MVVM框架,而我本人也是使用vue比较频繁。但是jquery里面实现的原理还是值得去学习和借鉴。 那么我现在来记录一下我所封装jquery的一个过程。 假设有以下的DOM节点,我先使用对象方法的形式来获取节点 &a...

2019-02-18 23:54:18

阅读数 68

评论数 0

node+mongoDb+Vue+elementUI实现资金管理后台系统(六)---前台的注册,登陆与token存储

我们利用elementUi为我们提供的UI组件进行快速编写界面,elementUI文档: http://element-cn.eleme.io/#/zh-CN/component/installation register.vue 注册界面 HTML模板 <template&...

2019-02-06 20:29:46

阅读数 167

评论数 2

node+mongoDb+Vue+elementUI实现资金管理后台系统(五)---数据增删改查接口

我们用户的所有操作都是要基于token来进行操作,所以我们在profile.js中引入 passport模块 const passport = require("passport"); 添加信息接口 router.post("/add&a...

2019-02-06 10:46:58

阅读数 122

评论数 0

node+mongoDb+Vue+elementUI实现资金管理后台系统(四)---增加身份字段和配置用户信息接口

增加注册身份字段 前台注册的时候,是需要我们选择 不同的身份,然后对后台进行不同的操作,这也是一种权限的处理。 在models/User.js下增加identity字段 在routes/api/user.js下 //@login & register const e...

2019-02-01 12:13:21

阅读数 201

评论数 0

node+mongoDb+Vue+elementUI实现资金管理后台系统(三)---人物默认头像和登陆接口token设置

获取默认的人物头像 我们安装gravatar模块,可以获取到人物的默认头像,官方文档如下 https://www.npmjs.com/package/gravatar 安装方式:npm install gravatar 在routes/api/user.js中 使用postman进行测试...

2019-01-31 20:53:26

阅读数 92

评论数 0

node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口

使用express搭建服务器 在D盘下面创建一个文件夹node-app,并在cmd中运行。 初始化文件,在cmd中输入npm init,选项直接回车键就可以了。 使用的编辑工具是vscode,在cmd中直接输入code .可以快速打开该文件 建立server.js和安装express 在...

2019-01-31 13:00:41

阅读数 258

评论数 2

node+mongoDb+Vue+elementUI实现资金管理后台系统(一)----mongoDB的安装与连接

今天和大家分享一下,一个node+mongoDb+Vue实现的一个小型后台管理系统。这个小系统采用的也是前后端分离。 后端:node 数据库:mongoDb 数据库管理工具:robo3T1.2.1 数据接口测试:postman 前端:vue+vue全家桶+elementUI 安装mongodb ...

2019-01-30 23:34:48

阅读数 274

评论数 0

ajax的步骤与封装ajax

今天和大家聊下如何ajax的工作原理和如何封装ajax. 1.什么是ajax Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数...

2018-09-02 17:44:47

阅读数 188

评论数 0

vue+vue-router+vuex+axios+php+mysql实现文章列表跳转

今天来和大家聊一下,vue项目中如何与后端php相结合。 目录结构 Home.vue <template> <div> ...

2018-08-31 19:43:40

阅读数 174

评论数 0

vue中的状态管理vuex(一)

最近一直,在搞mpvue,发现vue中为我们提供的vuex这个状态管理是多么的好用,所以就拿出来和大家分享一下, 一 什么是vuex Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和Redux 的设计思想,但简化了概念,并且采用了一种为能...

2018-08-24 20:30:30

阅读数 603

评论数 0

提示
确定要删除当前文章?
取消 删除