lanpangzhi

lanpangzhi 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 blog.langpz.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

lanpangzhi 发布了文章 · 2019-08-02

vue(scoped)修改UI库组件样式

vue修改UI库组件样式

在工作中经常会碰见设计稿和UI库的组件样式不一样,在style标签加了scoped,就无法修改UI组件的样式了,因为当前组件样式只应用到这个组件上。

深度作用选择器

如果你想修改组件的样式就可以使用 >>> 操作符:

<style scoped>
.langpz >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.langpz[data-v-f3f3eg9] .b { /* ... */ }

如果你用的是SCSS或者LESS需要把 >>> 替换成 /deep/
<style scoped>
.langpz /deep/ .b { / ... / }
</style>

如果组件的样式是js动态生成的,深度作用选择器前面就不要跟class了。

# 我的博客和GitHub地址
https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F

查看原文

赞 1 收藏 0 评论 0

lanpangzhi 发布了文章 · 2019-06-19

nvm管理node.js版本(Windows系统)

nvm管理node版本

在开发过程中偶尔会碰见不同项目依赖的node版本不一样,而node没有提供自动切换版本的功能,这个时候就需要nvm出马了,n也可以管理node版本(注:不支持Windows)

先去下载nvm-windows

下载链接地址 注:目前版本1.1.6。
如果你之前安装过node,先卸载掉。

安装nvm-windows

刚才下载的是 nvm-setup.zip 这个文件

    输入 nvm 


这就安装成功了。

安装node

安装最新稳定版 node

    nvm install latest

安装指定版本 node

    nvm install 8.9.0

切换node版本

    nvm use 9.3.0

nvm list 显示当前安装node版本列表 * 代表当前使用的版本

 注: 安装的npm全局模块不会在各个版本的node.js之间共享。还有可能有些npm包不支持当前使用的node版本 

nvm基本命令

nvm arch [32|64]: 设置node是以32还是64位模式运行。 指定32或64来覆盖默认操作系统版本。
nvm install <version> [arch]: version 版本号 例如 8.9.0 或者 latest(最新稳定版),[arch]可选、指定是否安装32位或64位版本(默认为系统架构),将[arch]设置为 all 安装32和64位版本。
nvm list [available]: 显示当前安装node版本列表 * 代表当前使用的版本,在末尾输入 available 显示可供下载的所有版本列表。
nvm on: 使用Node.js版本管理。
nvm off: 禁用node.js版本管理(不会卸载任何东西)。
nvm proxy [url]: 设置下载的代理,将[url]留空以查看当前代理。 将[url]设置为 none 以删除代理。
nvm uninstall <version>: 卸载指定的node版本。
nvm use <version> [arch]: 切换指定的node版本,可选[arch]32和64位版本。
nvm root <path>: 设置nvm存放不同版本的node.js的目录。 如果没有设置 path ,则显示当前的根目录。
nvm version: 显示Windows的NVM的当前运行版本。
nvm node_mirror <node_mirror_url>: 设置node节点镜像。国内可以使用 https://npm.taobao.org/mirror...
nvm npm_mirror <npm_mirror_url>: 设置npm节点镜像。国内可以使用 https://npm.taobao.org/mirror...

我的博客和GitHub地址

https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://github.com/coreybutler/nvm-windows

查看原文

赞 0 收藏 0 评论 1

lanpangzhi 发布了文章 · 2019-06-13

给项目加一个骨架屏吧

给项目加一个骨架屏吧

骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。

安装

这里采用饿了么开源的方案page-skeleton-webpack-plugin。

npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin

安装过程中报错提示如下

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

执行这个命令

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org

使用

我这个项目是基于vue-cli3脚手架开发的。

第一步配置插件

创建一个vue.config.js文件。

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
        routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
        excludes: ['.van-nav-bar', '.van-tabbar']  // 需要忽略的css选择器
      })
    ],
  },
  chainWebpack: (config) => {   // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};

在项目根目录下面创建一个shell文件夹。
chainWebpack配置 这个是解决vue-cli3打包的骨架屏不生效的BUG

第二步修改 HTML Webpack Plugin 插件的模板

在你启动 App 的根元素内部添加 <!-- shell -->

<body>
  <div id="app"><!-- shell --></div>
  <!-- built files will be auto injected -->
</body>

第三步:界面操作生成、写入骨架页面

  • 在开发页面中通过 Ctrl|Cmd + enter 呼出插件交互界面,或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。

  • 点击交互界面中的按钮,进行骨架页面的预览,这一过程可能会花费 20s 左右时间,当插件准备好骨架页面后,会自动通过浏览器打开预览页面
  • 扫描预览页面中的二维码,可在手机端预览骨架页面,可以在预览页面直接编辑源码,通过点击右上角写入按钮,将骨架页面写入到 shell 文件夹中。

  • 通过 webpack 重新打包应用,当页面重新启动后,就能够在获取到数据前看到应用的骨架结构了。

最终效果

demo 地址

https://vbook.langpz.com

我的博客和GitHub地址

https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://github.com/cnpm/cnpmjs.org/issues/1246
https://github.com/ElemeFE/page-skeleton-webpack-plugin

查看原文

赞 3 收藏 2 评论 0

lanpangzhi 发布了文章 · 2019-06-12

Hexo博客多端同步问题

Hexo博客多端同步问题

搭完博客,发现只有公司电脑上有源文件,如果回家就没发继续更新博客了。也不能拿着U盘到处拷贝。所以就把博客源文件放到github上解决同步问题。

博客源文件同步

在博客根目录执行

  git init
  git remote add origin git@github.com:lanpangzhi/lanpangzhi.github.io.git  # 添加远程仓库 注意这里要添加你自己的仓库 lanpangzhi 换成你自己的用户名
  git checkout -b hexo            # 新建hexo分支并切换到hexo分支
  git add .              # 所有变化提交到暂存区
  git commit -m "解决同步问题"  # 提交文件
  git push origin hexo   # 推送hexo分支

这就成功了,github上已经有博客的源文件了。

github查看提交成功

推荐把hexo设置为默认分支。

hexo设置为默认分支

git submodule 实现第三方主题同步

因为之前是直接把第三方主题克隆到博客目录,有什么改动是无法推送到作者Git仓库的,这个时候需要把第三方主题的项目Fork到自己仓库,自己账号下生成一个同名的仓库,并对应一个url,我们应该git clone自己账号下仓库的url。
Fork第三方主题

执行如下操作。

    git submodule add git@github.com:lanpangzhi/hexo-theme-next.git themes/next 

把自己仓库下面第三方主题添加到Git子模块, 注 : themes/next 这里的目录是因为我用的next主题才会写themes/next 如果你用的不是next请把next替换成你的第三方主题文件夹名字。

博客的根目录会多一个.gitmodules文件,这是一个配置文件,保存了项目 URL 和你拉取到的本地子目录。
.gitmodules文件

这就添加成功了,然后执行如下操作。

  git add .              # 所有变化提交到暂存区
  git commit -m "添加第三方主题Git子模块"  # 提交文件
  git push origin hexo   # 推送hexo分支

更换电脑同步博客和第三方主题

同步博客

电脑上一定要先node和git,执行如下操作。

    npm install hexo-cli -g  # 先安装hexo的脚手架
    git clone git@github.com:lanpangzhi/lanpangzhi.github.io.git  # 下载项目,因为hexo 是默认分支,所以这里直接会下载hexo分支
    npm i # 安装依赖
    hexo s # 启动服务器

剩下的就自行操作了。博客已经完成了同步。

注:每次写完文章部署网站后,记得再执行如下操作。

  git add .             # 所有变化提交到暂存区
  git commit -m "新增xxx文章"      # 提交文件
  git push origin hexo           # 推送hexo分支

同步第三方主题

在博客根目录执行如下操作。

  git submodule init    # 初始化本地配置文件
  git submodule update    # 拉取子模块

如果第三方主题有修改的,修改完成后在第三方主题目录执行。

  git add .             # 所有变化提交到暂存区
  git commit -m "修改主题xxxx"      # 提交文件
  git push origin master       # 推送master分支

这样就会把修改的主题推送到自己的仓库。
修改的主题推送到自己的仓库

这样就实现多端同步了。

我的博客和github地址

http://blog.langpz.com

https://github.com/lanpangzhi

参考

http://devtian.me/2015/03/17/blog-sync-solution
https://git-scm.com/book/zh/v1/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97

查看原文

赞 1 收藏 1 评论 0

lanpangzhi 发布了文章 · 2019-06-10

Git拉取远程分支到本地

Git拉取远程分支到本地

拉取分支

首先你得先查看你是否和远端的仓库建立连接。

git remote -v

如果没有的话那就自行添加一下

git remote add origin  xxxx(你远程分支的git仓库地址)

如果每天要提交代码 ,可以绕过上面这一步,直接切换分支

git checkout -b Q3 origin/Q3

这个时候操作失败提示如下:

  • fatal: 'origin/Q3' is not a commit and a branch 'Q3' cannot be created from it

代表你本地没有Q3这个远程分支。

可以执行 git branch -r 来检查本地是否有Q3远程分支。
拉取远程分支到本地并切换分支。

git fetch origin Q3
git checkout -b Q3 origin/Q3

拉取远程分支到本地

git pull origin Q3

我的博客和github,喜欢就去点点星吧,谢谢。

https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://curder.gitbooks.io/blog/git/remote_repository_pull.html

查看原文

赞 3 收藏 2 评论 0

lanpangzhi 发布了文章 · 2019-06-04

node.js来爬取智联全国的竞争最激烈的前十岗位

node爬虫

什么是爬虫呢,是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。为什么选用node呢,因为我是前端,当然要用js实现。

项目分析

爬取http://top.zhaopin.com 智联网站上的全国的竞争最激烈三个月内前十的岗位。不需要定时爬取。使用request和cheerio模块。node版本7.6.0、npm版本4.1.2

安装

npm install request cheerio -S

request 模块是一个简化的HTTP客户端。
cheerio 模块专为服务器设计的核心jQuery的快速,灵活和精益的实现。可以把爬到的内容和jQuery一样使用。

核心代码

// app.js
const request = require('request');
const cheerio = require('cheerio');

// 发起请求
request('http://top.zhaopin.com', (error, response, body) => {
    if(error){
        console.error(error);
    }
    let json = {};
    // 获取到的内容放到cheerio模块
    const $ = cheerio.load(body);

    // jQuery 遍历  #hotJobTop .topList li  是通过http://top.zhaopin.com 分析页面结构得到的
    $('#hotJobTop .topList li').each(function (index) {
        let obj = json[index] = {};
        obj.name = $(this).find('.title').text().trim();
        obj.num = $(this).find('.paddingR10').text().trim();
    });

    // 打印数据
    console.log(json);
});

执行 node app.js 就会得到如下结果。

[ { name: 'Java开发工程师', num: '340538人/天' },
  { name: '软件工程师', num: '220873人/天' },
  { name: '销售代表', num: '175053人/天' },
  { name: '会计/会计师', num: '168225人/天' },
  { name: '行政专员/助理', num: '150913人/天' },
  { name: 'WEB前端开发', num: '140979人/天' },
  { name: '助理/秘书/文员', num: '139098人/天' },
  { name: '软件测试', num: '136399人/天' },
  { name: '人力资源专员/助理', num: '123482人/天' },
  { name: '用户界面(UI)设计', num: '107505人/天' } ]

一个简单的爬虫就写好了,看看前十有没有你从事的岗位吧!

我的博客和github地址

http://blog.langpz.com

https://github.com/lanpangzhi

参考

https://github.com/request/request

https://github.com/cheeriojs/cheerio

查看原文

赞 1 收藏 1 评论 2

lanpangzhi 发布了文章 · 2019-05-30

Hexo+Next集成Algolia搜索

集成Algolia搜索

起因Swiftype现在收费了,也没有免费版本。Local Search搜索体验不好,微搜索Next官网上描述太少!所以选择Algolia。
注:Algolia搜索在版本 5.1.0 中引入,要使用此功能请确保所使用的 NexT 版本在此之后。

首先注册Algolia账户

Algolia 登陆页面https://www.algolia.com/users/sign_in,可以使用 GitHub 或者 Google 账户直接登录,也可以注册一个新账户。我直接用谷歌账户登陆了,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。

注册完成后,创建一个新的 Index,这个 index name 之后会用到

Index 创建完成后,此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展, 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装:

npm install hexo-algolia --save  # 目前最新版本是1.2.4,下面的操作都是基于这个版本的文档

获取 Key,更新站点根目录配置

前往站点根目录打开_config.yml添加以下代码

# Algolia Search API Key
algolia:
  applicationID: '你的Application ID'
  apiKey: '你的Search-Only API Key'
  indexName: '输入刚才创建index name'

修改Algolia搜索ACL(访问控制列表)

选中后保存。

操作完成后执行命令

 export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key
 set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY     #查看是否设置成功如果没有值就设置失败
 hexo algolia

成功后修改Next主题配置文件

更改Next主题配置文件,找到 Algolia Search 配置部分:

# Algolia Search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到约${hits}条结果(用时${time}ms)"

将 enable 改为 true 即可,根据需要你可以调整 labels 中的文本。这个是我修改的文本。

总结一下集成遇到的BUG

Please provide an Algolia index name in your hexo _config.yml flle

原因:Algolia Search API Key indexName 错了

解决方案:看下之前新建index的名字

Not enough rights to update an object near

原因:没有修改Algolia搜索ACL(访问控制列表)

解决方案: 按1.4操作勾选上就可以

移动端遮罩盖住搜索

原因:遮罩的z-index值太高,我的next主题是5.1.3版本可能其他版本没有这个BUG

解决方案: 找到themesnextsourcecss_commoncomponentsthird-party 下面的algolia-search.styl 文件 第8行追加

  +mobile()
    z-index: 1000

我的博客和github地址

http://blog.langpz.com

https://github.com/lanpangzhi

参考

http://theme-next.iissnan.com/third-party-services.html#algolia-search

https://github.com/oncletom/hexo-algolia

查看原文

赞 1 收藏 1 评论 0

lanpangzhi 发布了文章 · 2019-05-10

发布一个自己的NPM包

发布一个自己的NPM包

用了这么多次别人发布的包,今天咱们自己发布一个npm包

首先检查npm源

npm get registry
# 如果不是这个地址https://registry.npmjs.org  需要设置官网源
npm config set registry https://registry.npmjs.org

如果是使用第三方源请设置npm官方源 (注):第三方源只提供下载功能

创建模块

npm init 

# package.json 内容
{
  "name": "isnumber-lpz",
  "version": "1.0.0",
  "description": "Number\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[C\u001b[C\u001b[Cis\u001b[C\u001b[C\u001b[Number",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lanpangzhi/isNumber-lpz.git"
  },
  "author": "lanpangzhi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lanpangzhi/isNumber-lpz/issues"
  },
  "homepage": "https://github.com/lanpangzhi/isNumber-lpz#readme"
}

# 创建 index.js
touch index.js

function isNumber(number) {
  number = parseFloat(number)
  return number === number && typeof number === 'number' 
}

module.exports = isNumber

npm使用介绍里面有里面的字段,这里就省略了,(注):包的name不要重名建议先去[https://www.npmjs.com/](https://www.npmjs.com/)搜索下

注册npm账号(有账号跳过这步)

npm adduser用于在npmjs.com注册一个用户。

npm adduser
# Username: 用户名
# Password: 密码
# Email: 邮箱

# 登录
npm login

发布包

npm publish

(注):发布的时候版本号要和上次的不一样,默认的发布标签是latest、前模块是一个beta版,比如2.1.1-beta,那么发布的时候需要使用tag参数

安装并使用

npm i isnumber-lpz

const isNumber = require('isnumber-lpz')

console.log('12', isNumber(12))   true
console.log('12.2', isNumber(12.2))    true
console.log('x12.2', isNumber('x12.2'))   false
console.log('xacsa', isNumber('xacsa'))   false

## demo 地址
https://github.com/lanpangzhi/isNumber-lpz

# 我的博客和GitHub地址
https://github.com/lanpangzhi

http://blog.langpz.com

查看原文

赞 0 收藏 0 评论 0

lanpangzhi 发布了文章 · 2019-04-25

部署小说api服务到腾讯云

部署小说api服务到腾讯云

小说api1.0版本写完了,接下来就开始部署到服务器上,用到了nginx、pm2、nvm、git、OpenSSL。

服务器配置: CentOS 7.4 64位 1 核 2 GB 1 Mbps
node版本: 8.9.0
nvm版本: 0.33.11
npm版本: 5.5.1
nginx版本:1.12.2
git版本: 2.9.5

第一步添加pm2配置文件

在小说api项目的根目录创建一个pm2.json的文件。

{
    "name": "novel-api",  // 服务名
    "script": "./bin/www", // 启动脚本
    "cwd": "./",   // 当前工作路径
    "watch": [  // 监控变化的目录,一旦变化,自动重启
        "bin",
        "routers"
    ],
    "ignore_watch": [  // 从监控目录中排除
        "node_modules",
        "logs",
        "public",
        "log"
    ],
    "watch_options": {
        "followSymlinks": false
    },
    "max_memory_restart": "1G", // 根据内存限制重新启动应用程序。
    "error_file": "./logs/novel-apierr.log",  // 错误日志路径
    "out_file": "./logs/novel-api-out.log",   // 普通日志路径
    "env": {
        "DEBUG": "novel-api",  // 环境变量参数,debug名字为novel-api,8080端口监听
        "PORT": "8080"
    }
}

package.json文件添加npm run deploy部署命令。

"deploy": "pm2 start pm2.json"

pm2 常用命令。
pm2 save 保存当前进程列表。
pm2 resurrect 启动之前保存的进程列表。
pm2 restart app.js|app_name 重启进程
pm2 start app.js 启动进程
pm2 list 查看进程列表
pm2 stop app_name |app_id 停止指定的应用。 all 停止所有应用

第二步购买服务器和域名

购买服务器https://buy.cloud.tencent.com/cvm?tab=lite,我买的是CentOS 7.4 64位 1 核 2 GB 1 Mbps的服务器。如果只是尝试部署流程,可以选择按时计费。
购买域名https://dnspod.cloud.tencent.com/?from=qcloudProductDns建议选.com的域名。

第三步设置子域名

添加一个api开头的子域名https://console.cloud.tencent.com/domain,然后添加解析。

第四步登陆服务器安装软件

登陆到服务器然后执行以下安装命令。

安装nginx

yum install -y nginx
nginx -v

安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
nvm --version

安装node和pm2、apidoc

nvm install 8.9.0
nvm use 8.9.0
node -v
npm -v
npm install -g pm2 apidoc

安装git

yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel tar
yum install -y gcc-c++ perl-ExtUtils-MakeMaker
cd /usr/src
wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar xf git-2.9.5.tar.gz
cd git-2.9.5
make configure
make profix=/usr/git
make install
echo "export PATH=$PATH:/usr/git/bin" >> /etc/profile
source /etc/profile
git --version 
// 配置git
git config --global user.name "用户名称"
git config --global user.email 电子邮件地址

在服务器上克隆git仓库

先进入home路径创建wwwroot文件夹。

cd /home && mkdir wwwroot
cd wwwroot
git clone https://github.com/lanpangzhi/novel-api.git
cd novel-api
npm install
npm run doc
npm run deploy

这个应用就pm2被启动了。

配置nginx

先启动nginx。

nginx

http://123.206.45.87 在浏览器输入服务器ip就可以看到nginx已经启动了。

进入nginx配置目录,新建文件。

cd /etc/nginx/conf.d
touch api.langpz.com-8080.conf

如果一台服务器的server比较多,建议用域名和端口做配置文件名。
编辑api.langpz.com-8080.conf 配置文件。

vi api.langpz.com-8080.conf

把下面代码复制粘贴过去。

upstream novel-api {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    server_name 你自己的域名;
    location / {
        proxy_pass http://novel-api;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   Host             $http_host;
        proxy_set_header   X-NginX-Proxy    true;
        proxy_redirect     off;
    }
}

ctrl + c 输入:wq 退出并保存。再执行nginx -s reload 在浏览器输入你的域名就可以看到文档,http://api.langpz.com

gzip压缩

cd /etc/nginx/
vi nginx.conf

把下面代码复制粘贴过去。

## gzip压缩
gzip on;
# ie6不启用gzip
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
# 压缩等级 1-9
gzip_comp_level 2;
gzip_buffers 16 8k;
gzip_http_version 1.1;
# 为除“text/html”之外的MIME类型启用压缩
gzip_types text/plain text/css application/json application/x-javascript application/javascript image/tiff image/x-icon application/font-woff application/vnd.ms-fontobject text/javascript;

ctrl + c 输入:wq 退出并保存。再执行nginx -s reload。可以去站长之家看你的压缩率http://tool.chinaz.com/gzips/

隐藏nginx版本号

还是修改nginx.conf这个文件

vi nginx.conf

// 把下面代码复制过去
# 隐藏nginx版本号
server_tokens off;

ctrl + c 输入:wq 退出并保存。再执行nginx -s reload。

这里就不显示nginx版本号了。

配置ssl证书https,给你的网站加个小绿锁

我用的是腾讯云的免费证书,也可以自己生成。https://cloud.tencent.com/product/ssl?from=qcloudHpHeaderSsl,使用域名免费版。

申请腾讯云ssl证书


直接点下一步,然后用推荐选项验证。申请很快不到十分钟就下来,到时候还会有邮件和短信通知。

下载证书上传到服务器

找到腾讯云的ssl证书管理去下载证书。

压缩包里面有三个文件夹找到Nginx这个文件夹。
在服务器进入nginx所在目录新建一个文件夹。

cd /etc/nginx/
mkdir api.langpz.com

然后把Nginx文件夹里面两个文件上传到服务器/etc/nginx/api.langpz.com 这个文件夹里面。
可以下载一个FileZilla软件或者下载一个别的ftp工具,还可以用命令行,我这里下载了FileZilla使用它去上传。

加强 HTTPS 安全性

首先在目录 /etc/nginx/api.langpz.com 运行以下代码生成 dhparam.pem 文件

cd /etc/nginx/api.langpz.com    
openssl dhparam -out dhparam.pem 2048

修改配置文件

cd /etc/nginx/conf.d
touch api.langpz.com-8080.conf

把下面代码覆盖api.langpz.com-8080.conf文件。

upstream novel-api {
    server 127.0.0.1:8080;
}

# 配置共享会话缓存大小
ssl_session_cache shared:SSL:10m;
# 配置会话超时时间
ssl_session_timeout 10m;

# 强制跳转https
server {
    listen 80;
    server_name api.langpz.com;
    return 301 https://$server_name$request_uri;
}

server {
 listen 443 ssl;
 server_name api.langpz.com;

 # 证书文件
 ssl_certificate      /etc/nginx/api.langpz.com/1_api.langpz.com_bundle.crt;
 # 私钥文件
 ssl_certificate_key  /etc/nginx/api.langpz.com/2_api.langpz.com.key;
 # 设置长连接
 keepalive_timeout    70;
 # 优先采取服务器算法
 ssl_prefer_server_ciphers on;
 # 使用DH文件
 ssl_dhparam /etc/nginx/api.langpz.com/dhparam.pem;
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 # 定义算法
 ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";
 # HSTS策略
 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains;preload" always;
 # 防XSS攻擊
 add_header X-Xss-Protection 1;
 # 禁止服务器自动解析资源类型
 add_header X-Content-Type-Options nosniff;

 
 location / {
    proxy_pass http://novel-api;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   Host             $http_host;
    proxy_set_header   X-NginX-Proxy    true;
    proxy_redirect     off;
 }
}

ctrl + c 输入:wq 退出并保存。再执行nginx -s reload。
现在就可以访问https://api.langpz.com。如果访问http协议就会强制跳转到https协议。

SSL安全测试

[](https://www.ssllabs.com/sslte...
输入你的域名。
之前在nginx配置加强 HTTPS 安全性,所以结果是A+。

总结

这种部署比较麻烦,部署完发现pm2也有部署功能,2.0用koa.js重构的时候用pm2部署,docker 生成镜像

我的博客和github,喜欢就去点点星吧,谢谢。

https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://nginx.org/en/docs/
https://github.com/creationix/nvm
https://www.thinkjs.org/zh-cn/doc/3.0/deploy.html
https://www.cnblogs.com/chyingp/p/pm2-documentation.html
http://www.runoob.com/git/git-install-setup.html
https://nginx.rails365.net/chapters/install.html
https://www.cnblogs.com/nuccch/p/7681592.html
https://aotu.io/notes/2016/08/16/nginx-https/index.html

查看原文

赞 0 收藏 0 评论 0

lanpangzhi 发布了文章 · 2019-04-15

使用apidoc文档神器,快速生成api文档

写完api接口,就需要编写api文档了,如果一个个手写的话就很麻烦,就得使用apidoc只需要通过写注释,就可以快速生成文档了。

安装

第一步先安装全局模块apidoc。

npm install apidoc -g

修改接口的注释

找到novel-api项目routes下面的index.js文件,注释修改成如下

/**
 * @api {get} /index 请求首页数据
 * @apiVersion 1.0.0
 * @apiName 获取首页数据
 * @apiGroup index
 *
 *
 * @apiSuccess {Number} flag 是否获取到数据 1成功 0失败
 * @apiSuccess {Array} books 返回书籍内容
 * @apiSuccess {String} msg  返回信息
 *
 * @apiSuccessExample {json} Success-Response:
 *     HTTP/1.1 200 OK
 *    {
 *      "flag": 1,
 *      "books": [
 *          {
 *             "_id": "5816b415b06d1d32157790b1",
 *            "title": "圣墟",
 *            "author": "辰东",
 *            "shortIntro": "在破败中崛起,在寂灭中复苏。沧海成尘,雷电枯竭,那一缕幽雾又一次临近大地,世间的枷锁被打开了,一个全新的世界就此揭开神秘的一角……",
 *            "cover": "http://statics.zhuishushenqi.com/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F1228859%2F1228859_fac7917a960547eb953edf0b740cef3a.jpg%2F",
 *            "site": "zhuishuvip",
 *            "majorCate": "玄幻",
 *            "minorCate": "东方玄幻",
 *            "allowMonthly": false,
 *            "banned": 0,
 *            "latelyFollower": 283375,
 *            "retentionRatio": "73.42"
 *          }
 *      ],
 *      "msg": "OK"
 *    }
 *
 *
 * @apiErrorExample Error-Response:
 *     HTTP/1.1 404 Not Found
 *     { "flag": 0, "msg": "rankingId有问题" }
 */

@api {method} path [title]
@api 如果没有@api apidoc会忽略这段注释
method 请求的方法
path 路径
title 标题

@apiVersion version
设置文档块的版本。
version 版本号

@apiName name
定义方法文档块的名称。名称将用于生成的输出中的子导航。
name 方法的名称

@apiGroup name
定义方法文档块属于哪个组。组将用于生成的输出中的主导航。
name 组的名称。也用作导航标题。

@apiSuccess [(group)] [{type}] field [description]
成功返回参数。
(group) 可选 所有参数将按这个名称分组。没有组,默认Success 200设置。
{type} 可选 返回类型
field 返回标识符
description 描述

@apiParamExample [{type}] [title]

               example

参数请求示例。
{type} 可选 响应格式
title 示例的简称
example 详细的例子

@apiErrorExample [{type}] [title]

             example

错误返回消息的示例,输出为预格式化代码。
{type} 可选 响应格式
title 示例的简称
example 详细的例子

配置npm run doc

打开package.json文件增加doc命令配置

"doc": "apidoc -i routes/ -o public/"

routes/ 要输出API文档的文件夹。
public/ 输出文档到public文件夹,没有回自动创建。
执行 npm run doc
访问 http://localhost:3000/ 就可以看到生成好的API文档了。

线上生成的文档地址

https://api.langpz.com/

我的博客和github,喜欢就去点点星吧,谢谢。

https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://github.com/apidoc/apidoc

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 15 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-04-03
个人主页被 383 人浏览