搜索到
56
篇与
的结果
-
fastmock增加功能根据入参数据动态逻辑返回mock内容 根据入参数据动态返回mock内容某些场景中，我们可能需要根据接口的入参规则，加入适当的逻辑处理后再返回数据。一个简单的场景就是登录场景，需要根据用户名密码，判断是否登录成功。再或者，我们需要根据产品ID动态返回产品信息，等等。现在fastmock提供了这种场景的解决方案，下图中展示了如何如果在mock规则中获取请求中的各个部分的数据然后再返回，其中包括了四种数据。restful链接参数，如/user/:id 当请求/user/1时 对应数据为{id: 1}。获取方式为_req.params.idquery查询参数，如/user?id=1 获取方式为_req.query.idbody请求体数据，在请求的request body中 获取方式为_req.body.idheaders 头部信息，常用的场景是接口的token验证 获取方式为_req.headers.token使用方法在原来的json数据的基础上，需要动态返回的字段对应的值不再是固定值或者固定的mock规则，而是传入一个函数。这个函数接收两个参数，_req和Mock 注意：这两个变量名不能改动在函数体中返回该字段对应的值，在返回之前做相应的逻辑处理_req参数中包含了四个对象，_req.query , _req.params , _req.body , _req.headers可以从这四个对象中获取上述的四种数据。Mock对象就是mock.js 原生对象，可以用它做mock.js中Mock对象可以做的事情，如Mock.mock({name: '@cname'})等等如：上图中的对应接口录入规则为{ "code": "0000", "data": { "token": function({_req, Mock}) { return _req.headers.token; }, "id": function({_req, Mock}) { return _req.params.id; }, "name": function({_req, Mock}) { return _req.body.name; }, "age": function({_req, Mock}) { return _req.query.age; } }, "desc": "成功" }再举一个验证登录信息的例子：{ "code": "0000", "data": { "verifySuccess": function({_req, Mock}) { let body = _req.body; return body.username === 'admin' && body.password === '123456'; }, "userInfo": function({_req, Mock}) { let body = _req.body; if (body.username === 'admin' && body.password === '123456') { return Mock.mock({ username: "admin", email: "@email", address: "@address" }); } else { return null; } }, }, "desc": "成功" }上面的规则中定义了登录接口只有请求体{username: 'admin', password: '123456'}时，才会返回用户信息，且带有mock生成的随机邮箱地址和居住地址 -
小程序wxs中的时间格式化以及格式化时间和date时间互转 WXS（WeiXin Script）是小程序的一套脚本语言，wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。其中包括了很多日常使用的javascript函数，在wxs中都是不能同样使用的。最近在做一个列表的时候，涉及到时间格式化操作。就遇到了这个问题，以前写好了的格式化工具函数直接拷贝到小程序项目的wxs文件中，函数不能正常执行。其中包括了下面的几个错误正则表达式在字符串的replace函数中的使用方法不一样，不能直接使用var a = /[0-9]/这种方式声明使用。正确的方式为var reg = getRegExp("-", "g");获取当前时间不能通过new Date()获取，而是通过getDate方法获取。getDate('2018/12/12')可以获取对应日期的date类型的时间。按照上面的异同，修改过后的时间格式化函数代码为var formatNumber = function (n) { n = n.toString() return n[1] ? n : '0' + n } var regYear = getRegExp("(y+)", "i"); var dateFormat = function (timestamp, format) { if (!format) { format = "yyyy-MM-dd hh:mm:ss"; } timestamp = parseInt(timestamp); // 通过getDate()方法获取date类型的时间 var realDate = getDate(timestamp); function timeFormat(num) { return num < 10 ? '0' + num : num; } var date = [ ["M+", timeFormat(realDate.getMonth() + 1)], ["d+", timeFormat(realDate.getDate())], ["h+", timeFormat(realDate.getHours())], ["m+", timeFormat(realDate.getMinutes())], ["s+", timeFormat(realDate.getSeconds())], ["q+", Math.floor((realDate.getMonth() + 3) / 3)], ["S+", realDate.getMilliseconds()], ]; var reg1 = regYear.exec(format); // console.log(reg1[0]); if (reg1) { format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length)); } for (var i = 0; i < date.length; i++) { var k = date[i][0]; var v = date[i][1]; // getRegExp初始化一个正则表达式对象 var reg2 = getRegExp("(" + k + ")").exec(format); if (reg2) { format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + v).substring(("" + v).length)); } } return format; }把格式化的日期时间字符串转换成时间戳function parse(fmt) { fmt1 = fmt.substring(0, 19); var reg = getRegExp("-", "g"); fmt2 = fmt1.replace(reg, '/'); var timestamp = getDate(fmt2).getTime(); return timestamp; }调用方法如下function getDateByDateTimeFmt(dateTimeFmt) { return dateFormat(parse(dateTimeFmt), 'MM月dd日'); } getDateByDateTimeFmt('2012-12-12 13:12:12') // => 12月12日
-
基于es6 proxy的单向数据绑定 看了一些关于vue3.0的更新内容，主要是围绕性能方面的提升和对MVVM数据绑定的完全重写。3.0中不再使用 Object.defineProperty 而是原生ES6 Proxy，关于ProxyProxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。在vue2.x中，使用Object.defineProperty实现数据劫持。一般的做法如下：let obj = {}; // 遍历data的所有属性 let dataKeys = Object.keys(data); dataKeys.map(key => { // 为data的所有属性添加set方法 Object.defineProperty(data, key, { set: function(newVal) { // 修改v-text属性对应的data中的key的值 document.querySelector(el + " *[v-text=" + key + "]").textContent = newVal; } }); }); // 将处理好的data赋值给要返回的对象 obj.data = data; return obj;上面的代码中可以看出，主要有两个问题：要为对象的每一个属性添加数据劫持，一般结合Object.keys()遍历对象属性实现。如果对象的层级结构不是简单的层级结构，只能一直遍历处理。不能监听数组的变化，数组的push, pop, shift, unshift, splice, sort, reverse等方法不会触发set的侦听。我们在使用vue修改数组时能触发view的更新是因为vue内部做了变相的处理。针对Vue 3.0的这个更新，做了一个简单的单向数据绑定的例子，说明3.0中使用Proxy实现数据绑定的基本原理（只是简单的单向绑定，数据的更改会反映到视图上）<div id="app"> <h1 v-text="title"></h1> <p>当前时间：<span v-text="time"></span></p> </div>function ViewBind({ el = 'body', data = {}} = {}) { // 要返回的对象实例 let obj = {}; const proxy = new Proxy(data, { get(obj, property) { return obj[property] }, set(obj, property, newValue) { obj[property] = newValue; const bindEle = document.querySelector(el + " *[v-text=" + property + "]"); if (bindEle) { bindEle.textContent = newValue; } } }); obj.data = proxy; return obj; }; const app = new ViewBind({ el: '#app', data: { count: 0, title: '这是标题', time: +new Date() } }); setInterval(() => { // 定时修改页面上<span v-text="time">元素中的内容 app.data.time = +new Date(); app.data.count = app.data.count + 1; app.data.title = '这是标题' + app.data.count; }, 1000)上面的代码中通过ViewBind实例化了一个对象，定时修改对象的属性，视图上通过v-text绑定的内容就会自动更新，效果如下
-
推荐一个在线接口Mock工具fastmock 如果想直接进入实战请猛戳这里fastmock线上地址www.fastmock.sitefastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求，你可以用fatmock实现项目初期纯前端的效果演示，也可以用fastmock实现开发中的数据模拟从而实现前后端分离。如下面的接口模拟一个用户列表https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list模拟各种特殊类型的数据https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list2您可以直接在浏览器打开上面的链接或者用ajax请求查看返回的数据在使用fastmock之前，你的团队实现数据模拟可能是下面的方案中的一种或者多种本地手写数据模拟，在前端代码中产生一大堆的mock代码。利用mockjs或者canjs的can-fixture实现ajax拦截，本地配置必要的json规则。后端在Controller层造假数据返回给前端。上面的方式中，不管哪一种方式，都会要求开发人员写一些跟项目本无任何关联的代码，第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数据// 产品配置 { url: '/pms/product/list', on: true, type: 'get', resp: Mock.mock({ 'body': { 'currentPage': 1, 'isMore': 0, 'pageSize': 15, 'resultList|10': [ { 'productNo': '11111', 'productName|1': ['产品名称1', '产品名称2', '产品名称3', '产品名称4', '产品名称5'], 'productType|1': ['1', '2', '3', '4', '5'], 'status|1': ['1', '2'], 'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")', 'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")', 'createUserCode': '@name' } ], 'startIndex': 0, 'totalNum': 100, 'totalPage': 1 }, 'reCode': '0000', 'reMsg': '成功', 'success': true }) }, // 产品配置-贷款材料配置 { url: '/pms/cfgLoanDoc/list', on: true, resp: Mock.mock({ 'body': { 'currentPage': 1, 'isMore': 0, 'pageSize': 15, 'resultList|10': [ { 'loanDocCode|+1': 1, 'loanDocName': /[测试字体]{4,30}/ } ], 'startIndex': 0, 'totalNum': 100, 'totalPage': 1 }, 'reCode': '0000', 'reMsg': '成功', 'success': true }) }上面的代码为mockjs的事例代码，更多mockjs相关资料参考链接mockjs文档为此，我们将mock层独立出来，通过中间服务的形式在前端和后端服务之前建立一道围栏，使用fastmock，前端只需要修改自己的XHR请求地址，后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成，前端再将XHR请求地址替换回来进行联调测试即可。tip:当然，你也可以通过npm script不同命令加载不同配置文件的形式切换你的XHR地址，这里不作详细介绍。还是不了解fastmock？让我们跟着教程一探究竟吧了解并开始使用fastmock
-
一个来自create-react-app脚手架警告的思考 最近在开发一个react项目，项目是用create-react-app脚手架创建的，当我在我的项目的菜单栏中添加了一个打开一个外链的a标签时，我收到了一个来自create-react-app的警告信息，信息内容如下意思就是说“在没有rel="noopener noreferrer"属性的a标签中使用target="_blank"存在一定的风险”这个提示瞬间把我吸引了，以前关于a标签收到的提示都是没有设置alt属性啊什么的，但是也只是提示我说为了显示的友好什么的，这次竟然提示我有风险，面对这种问题，必须一探究竟啊。查阅了一些资料得到了如下关于a标签一个介绍当一个外部链接使用了target=_blank的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。不看不知道一看吓一跳有木有。主要是两个点是我以前从未在意的用target="_blank"方式打开的tab和原始页面占用同一个进程（UI进程）新打开的页面能获取到原始页面的document。第一个问题不用我说都知道是非常需要注意的，新的页面中的所有行为都会间接影响到原始页面的性能。这里主要研究第二个问题。为此，我做了小小的实验。上图解释：首先打开了第一个页面，第一个页面只有一个“打开一个新页面”的a标签点击这个链接，打开了一个新页面。新页面中有一个按钮，“告诉打开我的那个页面，我喜欢林志玲”。点击新页面的按钮然后回到第一个页面，发现第一个页面多出来了一排红色的文字“我喜欢林志玲”。停在第一个页面5s钟，第一个页面自动跳转到了百度首页。上面两个页面的代码分别如下：opener-test.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <a target="_blank" href="test-opener-2.html">打开一个新页面</a> </body> </html>opener-test-2.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>我是新打开的页面</h1> <button type="button" id="btn">告诉打开我的那个页面，我喜欢林志玲</button> <script> document.getElementById('btn').addEventListener('click', function() { var _opener = window.opener; var p = _opener.document.createElement('p'); p.innerHTML = "我喜欢林志玲"; p.style.color = "#f33"; _opener.document.body.appendChild(p); setTimeout(function() { _opener.location.href = "//www.baidu.com"; }, 5000) }); </script> </body> </html>新的页面不仅往原始页面添加了一段话，而且还让他离开了原来的页面。注：在上面的例子中，两个页面位于同一个域下面，如果两个页面位于不同的域，那上面的第一个效果就是不行的，因为不同域的情况下，新页面拿不到opener对象的document，但是location对象是可以拿到的，所以第二个效果任然有效。怎么禁止上面的行为呢？按照create-react-app的提示信息，给连接加上rel属性，如下：<a rel="noopener noreferrer" target="_blank" href="https://marvengong.github.io/fastmock-docs/book/">上面的rel属性值多了一个noreferrer它的作用和noopener是一样的，只是适用于低版本的浏览器。这样处理后，新打开的页面的window对象上就没有opener和referrer对象了。
-
linux环境下redis安装和启动 redis安装redis下载方式进入到/usr/local目录后使用wget从网上下载redis安装包wget http://download.redis.io/releases/redis-4.0.1.tar.gz从官网下载 https://redis.io/download 拷贝到/usr/local 目录解压下载下来的压缩包cd /usr/local tar redis-4.0.1.tar.gz!进入目录安装cd /usr/local/redis-4.0.1 make test make install执行完上诉命令安装后，redis所有的相关文件都会安装到当前目录下，其中，可执行文件redis-server或者redis-cli等都位于src目录下。启动redis服务. 在src目录下直接执行redis-server即可启动服务，这种方式启动的redis服务是在前台运行的，退出命令行工具后，redis服务就停止了。我们希望redis在后台运行。[root@redis_01 redis]# redis-server /etc/redis/sentinel.conf --sentinel 7980:X 23 Nov 18:02:41.348 * Increased maximum number of open files to 10032 (it was originally set to 1024). _._ _.-``__ ''-._ _.-`` `. `_. ''-._ Redis 3.0.5 (00000000/0) 64 bit .-`` .-```. ```\/ _.,_ ''-._ ( ' , .-` | `, ) Running in sentinel mode |`-._`-...-` __...-.``-._|'` _.-'| Port: 26379 | `-._ `._ / _.-' | PID: 7980 `-._ `-._ `-./ _.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | http://redis.io `-._ `-._`-.__.-'_.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | `-._ `-._`-.__.-'_.-' _.-' `-._ `-.__.-' _.-' `-._ _.-' `-.__.-' 7980:X 23 Nov 18:02:41.355 # WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128. 7980:X 23 Nov 18:02:41.355 # Sentinel runid is 43de323d55627d896b2caf1da2e305f0eb59dcee 7980:X 23 Nov 18:02:41.356 # +monitor master mymaster 127.0.0.1 6379 quorum 1 ^C7980:signal-handler (1448273325) Received SIGINT scheduling shutdown... 7980:X 23 Nov 18:08:45.618 # User requested shutdown... 7980:X 23 Nov 18:08:45.618 # Sentinel is now ready to exit, bye bye... . 通过nohub方式启动，nohub redis-server /etc/redis/sentinel.conf --sentinel >> /var/log/redis.log&启动服务后，命令行会退出，并且将日志文件输出到/var/log目录下的redis.log文件中. 修改配置文件在sentinel.conf文件中加入下面的配置daemonize yes logfile "/var/log/sentinel_log.log"然后通过sentinel启动redis-server /usr/local/redis-4.0.1/sentinel.conf --sentinel后面的两种启动方式都会以后台的方式启动。如果不需要--sentinel通过sentinel启动，修改的配置文件就是redis.conf
-
nodemon+cross-env+config实现支持热更新的能根据不同环境加载不同配置的nodejs环境 nodejs项目中我们经常会用到nodemon启动项目以使我们的项目在开发时支持热更新，修改了代码后不需要手动重启服务器；使用npm 的config模块实现不同的环境（一般是develop，production，test）；nodemon和config的使用方法这里不做详细介绍。cross-env的作用是不需要全局配置NODE_ENV在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同，而config的工作原理就是基于NODE_ENV这个值的，所以推荐两者结合使用。先上三个工具结合使用后的配置文件。/package.json"scripts": { "dev": "nodemon ./bin/www --exec babel-node --presets es2015,stage-2", "start": "cross-env NODE_ENV=production babel-node ./bin/www --presets es2015,stage-2" }, "dependencies": { // ... other dependencies "config": "^3.0.1", "cross-env": "^5.2.0", // ... other dependencies }, "devDependencies": { // ... other devDependencies "nodemon"/nodemon.json{ "restartable": "rs", "ignore": [ ".git", "f2e", "node_modules/**/node_modules" ], "verbose": true, "execMap": { "js": "node --harmony" }, "events": { "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'" }, "env": { "NODE_ENV": "develop" }, "ext": "js,json" }nodemon的配置文档介绍的可以在scripts中一一配置，也可以在上面的配置文件中配置，我们建议在配置文件中配置，清晰明了还好管理。nodemon.json中跟本文相关的配置就是env->NODE_ENV配置项，他的值就对应设置了node环境中proccess.env.NODE_ENV的值，当执行npm run dev 时，proccess.env.NODE_ENV对应的是nodemon的配置文件中的值当执行npm run start 时， proccess.env.NODE_ENV对应的是cross-env设置的参数的值
-
Linux环境下Nginx详细安装部署教程 一、Nginx简介Nginx是一个web服务器也可以用来做负载均衡及反向代理使用，目前使用最多的就是负载均衡，具体简介我就不介绍了百度一下有很多，下面直接进入安装步骤二、Nginx安装1、下载Nginx及相关组件(我的软件目录为/software)[root@localhost software]# wget http://nginx.org/download/nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# wget http://zlib.net/zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gz 省略安装内容...安装c++编译环境，如已安装可略过[root@localhost software]# yum install gcc-c++ 省略安装内容... 期间会有确认提示输入y回车 Is this ok [y/N]:y 省略安装内容...2、安装Nginx及相关组件openssl安装[root@localhost software]# tar zxvf openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# cd openssl-fips-2.0.10 [root@localhost openssl-fips-2.0.10]# ./config && make && make install 省略安装内容...pcre安装[root@localhost software]# tar zxvf pcre-8.40.tar.gz 省略安装内容... [root@localhost software]# cd pcre-8.40 [root@localhost pcre-8.40]# ./configure && make && make install 省略安装内容...zlib安装[root@localhost software]# tar zxvf zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# cd zlib-1.2.11 [root@localhost zlib-1.2.11]# ./configure && make && make install 省略安装内容...nginx安装[root@localhost software]# tar zxvf nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# cd nginx-1.10.2 [root@localhost nginx-1.10.2]# ./configure && make && make install 省略安装内容...3、启动Nginx先找一下nginx安装到什么位置上了whereis nginx进入nginx目录并启动(启动指令为nginx)如果报如下错误“error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory，”按照下面方式解决1.用whereis libpcre.so.1命令找到libpcre.so.1在哪里 2.用ln -s /usr/local/lib/libpcre.so.1 /lib64命令做个软连接就可以了 3.用sbin/nginx启动Nginx 4.用ps -aux | grep nginx查看状态 [root@localhost nginx]# whereis libpcre.so.1 [root@localhost nginx]# ln -s /usr/local/lib/libpcre.so.1 /lib64 [root@localhost nginx]# sbin/nginx [root@localhost nginx]# ps -aux | grep nginx 进入Linux系统的图形界面，打开浏览器输入localhost会看到下图，说明nginx启动成功Welcome to nginx!If you see this page, the nginx web server is successfully installed and working. Further configuration is required.For online documentation and support please refer to nginx.org.Commercial support is available at nginx.com.Thank you for using nginx.nginx 基本操作启动 [root@localhost ~]# /usr/local/nginx/sbin/nginx 停止/重启 [root@localhost ~]# /usr/local/nginx/sbin/nginx -s stop(quit、reload) 命令帮助 [root@localhost ~]# /usr/local/nginx/sbin/nginx -h 验证配置文件 [root@localhost ~]# /usr/local/nginx/sbin/nginx -t 配置文件 [root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf本文转载自https://www.cnblogs.com/taiyonghai/p/6728707.html
-
linux常用指令备忘 为node全局包（如：cnpm创建环境变量）$ sudo ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/ // 假设nodejs的安装目录为/usr/local/nodejs停止node服务ps -ef|grep node 找到node服务的进程信息root 3370 2822 0 16:21 pts/0 00:00:00 grep nodekill 3370 终止进程node后台启动nohup npm start& 通过这种方式启动，会在项目根目录生成nohup.out文件（如果本来不存在）并且跳出服务监控，服务的日志文件会写到nohup.out文件中forever工具，通过npm install -g forever安装。使用方法参考 https://www.npmjs.com/package/forever[1]: https://www.npmjs.com/package/forever
-
小程序中生成二维码和条形码 使用wxbarcode模块可以很方便地生成二维码和条形码。效果安装$ npm install wxbarcode使用方法import wxbarcode from 'wxbarcode' wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);条形码函数名：barcode函数原型：barcode(id, code, width, height)参数：id: wxml文件中的 Canvas IDcode: 用于生成条形码的字符串width: 生成的条形码宽度，单位 rpxheight: 生成的条形码高度，单位 rpx二维码函数名：qrcode函数原型：qrcode(id, code, width, height)参数：id: wxml文件中的 Canvas IDcode: 用于生成二维码的字符串width: 生成的二维码宽度，单位 rpxheight: 生成的二维码高度，单位 rpx小程序案例// 页面所在的js文件 import wxbarcode from '../../utils/qrcode/index.js'; // ... wxbarcode.barcode('barcode', res.data.voucher_info.closure_code, 680, 150); wxbarcode.qrcode('qrcode', res.data.voucher_info.closure_code, 340, 340);// wxml文件 <view class='barcode'> <canvas canvas-id="barcode"></canvas> </view> <view class='qrcode'> <!-- <image src='/assets/images/qrcode.png'></image> --> <canvas canvas-id="qrcode"></canvas> </view>本地wxbarcode目录结构（从github download下来的目录结构）
