Leo_

Leo_ 查看完整档案

重庆编辑重庆邮电大学  |  计算机 编辑中移物联网  |  前端开发_Node开发 编辑 blog.wwjd.top 编辑
编辑

learning...

个人动态

Leo_ 回答了问题 · 2018-03-27

解决javascript错误监控上报的库

sentry,客户端,服务端都可用

关注 5 回答 2

Leo_ 发布了文章 · 2018-03-07

vue单文件组件lint error自动fix及styleLint报错自动fix

问题描述

之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配置后第一次跑lint居然报了几万个Error,且是在eslint加了--fix选项的情况下,且错误大多集中在顺序问题上也就是vue/order-in-componentsorder/properties-order的错误.以下是问题的解决方式及过程记录.

stylelint中css属性顺序错误

  • .stylelint的配置
// .stylelint
{ 
  "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
    ],
  "extends": ["css-properties-sorting"],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "comment-no-empty": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never"
  }
}
  • 在stylelint中加上--fix选项后,自动修复会把Vue文件中所有内容都移除掉,只剩css代码
  • 首先在stylelint的issue中发现了这样的一个issue,基本现象一样,问题是出现在配置中的processors项
  • 移除配置中的processors后,发现stylelint检测了各种文件(包括js/png等),执行lint的命令为: stylelint **/*.{vue,css,scss} --fix
  • 添加.stylelintignore文件,里面忽略不用lint的文件后缀,最后完美解决css(包括scss/vue文件style标签)中属性顺序错误自动修复问题
// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff

eslint时vue文件中属性顺序错误

  • eslint-plugin-vue版本: 4.0.0
  • .eslintrc.js配置文件
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    'plugin:vue/recommended',
    'standard'
  ],
  plugins: ['vue'],
  rules: {
    'generator-star-spacing': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': 0,
    'indent': 0,
    'no-unused-vars': 0
  }
};
  • 首先在eslint-plugin-vue文档中发现vue/order-in-componentsrule是支持自动修复的,然后去翻看了issue,发现这个issue中提到这个error不能自动修复的问题已经提了PR且merge了,于是果断更新eslint-plugin-vue到最新版本(4.3.0)完美解决问题(ps:升级后又出现了个vue/attributes-order的错误,且文档说不能自动修复,于是果断ignore).
查看原文

赞 1 收藏 1 评论 1

Leo_ 回答了问题 · 2018-02-01

node.js的koa框架sessstorage存储sessionid判断登录状态

  1. HTTP是无状态的链接,你在获取到前端传来的cookie时,也要对里面的信息做验证,后端肯定是要对相应信息做存储的.
  2. sessionId 后端当然是存到redis里面了,能够快速的读写且内容较少,token什么的携带比较多信息的可以存到DB里然后把tokenId什么的存到session里.

关注 3 回答 2

Leo_ 发布了文章 · 2018-01-12

记一次Node接口性能测试

前言

突发奇想,想做一点Node应用的性能测试,自己也了解一些性能测试方面的知识,于是用Eggjs写了一个简单的注册接口,进行了简单的压力测试.

原料

  • 开发框架: eggjs sequlize mysql
  • 服务器: 阿里云 1核 1GB 1Mbps(最低配)
  • 测试工具: jmeter

注册接口编写

    async login(ctx) { // 登录
        ctx.validate(userRule);
    
        // 用户校验
        const { name, passwd } = ctx.request.body;
        let user = await ctx.model.User.findOne({
            where: { name: name }
        });
    
        if (user) { ctx.error(user.passwd === passwd, "密码错误或昵称已存在", 10001); }
        else { user = await ctx.model.User.create({ name: name, passwd: passwd }); }
    
        // 生成token和session并存储
        const token = await ctx.service.token.genToken(user.id, ctx.request.ip);
        await app.redis.set(`${app.options.sessionPrefix}:${token.id}`, JSON.stringify({
            user: user.id,
            token: token.id
        }));
        ctx.cookies.set("access_token", token.id);
        ctx.jsonBody = user;
    }

接口逻辑很简单,可见接口中仅有4个I/O操作,下面的性能测试就是针对这个接口.

安装并配置jmeter

  • 安装jmeter(启动时需要java环境,自行安装)下载传送门
  • 解压jmeter后,启动脚本路径为 apache-jmeter-3.3/bin/jmeter.bat
  • 启动成功后界面
    clipboard.png
  • 下面开始配置测试用例
  1. 配置并发数入口
    clipboard.png
  2. 配置监听器
    clipboard.png
  3. 添加http请求入口/cookie/header等信息
    clipboard.png
  4. 配置好后如下图所示
    clipboard.png

接下来点击开始按钮进行测试.

测试结果及其分析

  • 首先看下图形测试结果:
    clipboard.png

    图表底部参数的含义如下:

    • 样本数目:总共发送到服务器的请求数。
    • 最新样本:代表时间的数字,是服务器响应最后一个请求的时间。
    • 吞吐量:服务器每分钟处理的请求数。
    • 平均值:总运行时间除以发送到服务器的请求数。
    • 中间值:代表时间的数字,有一半的服务器响应时间低于该值而另一半高于该值。
    • 偏离:服务器响应时间变化、离散程度测量值的大小,或者,换句话说,就是数据的分布。
  • 聚合报告结果:
    clipboard.png

    部分参数解释:

    • Samples: 本次场景中一共完成了多少个Transaction
    • Average: 平均响应时间
    • Median: 统计意义上面的响应时间的中值
    • 90% Line: 所有transaction中90%的transaction的响应时间都小于xx
    • Min: 最小响应时间
    • Max: 最大响应时间
    • PS: 以上时间的单位均为ms
    • Error: 出错率
    • Troughput: 吞吐量,单位:transaction/sec
    • KB/sec: 以流量做衡量的吞吐量
  • 服务器内存/cpu监控:
    clipboard.png
    clipboard.png
  • 总结(不知对否,胡言乱语一下):

    1. 可以看到在2000并发的情况下,Node应用并没有跑死,只是响应变得比较慢(机器配置有一定原因)
    2. 通过服务器状态的监控发现cpu资源的消耗低于内存的消耗(个人觉得应该是Node在处理请求时,异步I/O导致了内存消耗比较高)
    3. 感觉用户量不是很大的应用Node应该还是能满足需求的(把集群用上)
查看原文

赞 0 收藏 0 评论 0

Leo_ 回答了问题 · 2017-12-27

如何在一个vue项目里配置两个应用?

两个应用倒是好解决,直接入口做成两个就行,你的互相访问具体是指什么呢,可以参考下我的配置,多入口多输出

关注 3 回答 1

Leo_ 关注了问题 · 2017-12-21

Gitlab CI和Docker结合部署Node App,项目启动监听后Pipeline一直处于running状态

我有一个Express项目,用的CI是Gitlab自带的Gitlab-ci。

选择的是runner是docker。 以下是配置信息

image: node:8.9.3

services:
  - mongo:latest

before_script:
  - npm install -g cnpm
  - npm install -g cross-env
  - cnpm --version

stages:
  - deploy

job-deploy-staging:
  stage: deploy
  script:
    - cnpm install
    - npm run prod
  tags:
    - express

当执行完npm run prod后,开始监听端口(项目正常启动),但是CI的pipeline的状态一直是running(为何不是结束?)

其他的一些问题
  1. 现在项目是运行在docker里的,监听的是docker的端口, 如何映射到主机的端口(让我访问主机就可以访问到应用)
  2. npm下载依赖会有问题(由于众所周知的原因,加了--registry也不行),所以有了那个cnpm install, 有没有什么好的解决办法?
  3. 配置.gitlab-ci.yml的时候,有个pull_policy选项,必须是一个hash, 但是pull_policy不就只能选择, 也就是我如果要配置成'if-not-present'就需要类似于这样:
pull_policy:
  - <key>: 'if-not-present'

但是这个key是什么? 官网的Ref里没有说。

第一次配置CI和Docker,问题有点儿多, 望见谅!

关注 3 回答 1

Leo_ 回答了问题 · 2017-12-21

解决sequelize子查询不生效

include好像是嵌套预加载样,我猜是这样写,没有实践过,但是好像可以通过app.Sequelize.literal()直接在查询中写sql语句

userOrganizationModel.findAll({
    include: [ {
        model: organizationModel,
        as: 'Organizations',
        attributes: ['id'],
        where: { name: { $like: 'ext-%' }}
    } ],
    where: { organization_id: { $in: Organizations.map(o => o.id) } }
})

关注 2 回答 1

Leo_ 赞了回答 · 2017-12-21

解决egg.js 如何做热部署或者 egg-scripts 有没有类似pm2的0秒重启。

  • 开发期有内置的 egg-development 会自动重启。
  • 线上我们不建议单机热部署,实际业务中,一般都是需要前面有一个 lb 的挡在前面,切流量,做集群的平衡重启。
  • 如果你有需求,可以看 FAQ 里面,有 PM2 启动 egg 的说明。

关注 3 回答 2

Leo_ 回答了问题 · 2017-12-20

前后端分离 node作为后端 api 开发时,如何组织项目代码结构

去看看egg的目录结构

关注 3 回答 2

Leo_ 关注了用户 · 2017-12-20

spencerht @spencerht

关注 167

认证与成就

  • 获得 73 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-18
个人主页被 1.8k 人浏览