在线简历 | 提升开发效率

上节课我们的在开发时每次改了一下都要去手动刷新浏览器,本节课,我们即将带领大家基于koa来实现一个本地静态服务器,以及配置我的shell,让我们少输入一些命令,提升开发效率。

什么是 nodejs?

百度百科是这样定义的:Node.js是一个Javascript运行环境。从定义看, Node.js 不是一个 JavaScript 框架,更不是浏览器端的库,而是一个让 JavaScript 运行在服务端的开发平台。

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了,可以通过输入 "npm -v" 来测试是否成功安装。

初始化项目

打开终端后,一次输入以下命令:

# 创建项目根目录
mkdir demo
# 进入目录
cd demo
# 按默认配置生成package.json文件
npm init -f 
# 创建服务器入口文件
touch index.js;

使用原生nodejs提供web服务
要在nodejs中提供web服务,我们需要引入 nodejs 的Http模块:require('http'), 然后调用createServer方法,传入一个函数作为参数即可.

编辑index.js 文件:

# 可以使用终端的vi编辑器,也可以直接使用vscode等界面编辑器。
vi index.js 

在英文输入法下按一下 i 键即进入编辑模式,输入如下内容:

const Server = http.createServer((req, res) => {
  res.writeHead(200,{'Content-Type': 'application/json;charset=utf-8;'});
  res.write('{text: "写代码很快乐啊!"}');
  res.end();
}).listen(8888);

输完后,按esc进入指令模式,然后按 shift + : 两个键进入命令行模式,输入 wq 保存退出。

添加启动脚本: 在package.json 文件中的scripts 部分加入 "start": "node index", 如下所示:

{
  "name": "staticServerByKoa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

启动项目,在项目根目录下输入:

npm start

把终端中的 http://localhost:8888/ 复制到浏览器即可看到网页显示:写代码很快乐,至此,一个简单的静态服务器就实现了。

可以看到,代码可读性不是很好,开发也不是很便利,于是就有了 Express 这个第一代最流行的web框架,接着又出现了koa1,koa2, eggjs, thinkjs等。

使用 koa2 框架提升开发效率

npm install koa 

安装完koa后,我们可以看到 package.json 文件 多了一个dependencies的配置项,里面包含了koa这个名称和所用的版本。

{
  "name": "staticServerByKoa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.6.2"
  }
}

把index.js改成如下内容:

// 引入koa框架
const Koa = require('koa');  
const app = new Koa();
// ctx 为Koa 提供的 Context 对象,表示一次对话的上下文(包括 HTTP 请求和 HTTP 回复),
// 通过操作ctx,就可以控制返回给用户的内容。
app.use(ctx => {
  // 该属性就是发送给用户的内容。
  ctx.response.body = '写代码很快乐!';
});

app.listen(8888);
console.log('恭喜你,服务器启动成功:复制 http://localhost:8888/ 到浏览器即可访问');

自动开启浏览器,将 index.js文件改为:

const Koa = require('koa'); 
// 用来创建子进程
const cp = require('child_process');
const app = new Koa();
app.use(ctx => {
  // 该属性就是发送给用户的内容。
  ctx.response.body = '写代码很快乐!';
});
app.listen(8888);
cp.exec('open http://localhost:8888/'); // 自动打开浏览器
console.log('恭喜你,服务器启动成功:复制 http://localhost:8888/ 到浏览器即可访问');

文件更新后自动重启,安装 nodemon:

npm i --save-dev nodemon 
  • --save-dev 是为了让nodemon 配置到开发环境的依赖项即devDependencies中,
  • 因为生产环境不需要用它,它会监测项目中的所有文件,一旦发现文件有改动,会自动重启应用

修改package.json 文件中scripts的start脚本为:

"start": "nodemon index",

此时,我们把index.js中的“带代码很快乐”改成“不聪明的码农,写代码很苦逼”,就会重新打开浏览器并显示最新内容。

优化页面内容,将内容中间件改为:

app.use(ctx => {
  // 该属性就是发送给用户的内容。
  ctx.response.type = 'html';
  ctx.response.body = '

导航栏

'; });

此时就可以返回 最常见的html内容了,但是写起来很不便,需要再次优化,将内容中间件改为:

app.use(ctx => {
  // 该属性就是发送给用户的内容。
  ctx.response.type = 'html';
  ctx.response.body = fs.createReadStream('index.html');
});

不出意外,会报错,因为我们没有引入fs, 在前面加入:

const fs = require('fs');

此时,虽然不报错,但 页面显示 Not Found,因为我们没有 创建index.html,创建 index.html,并输入以下内容:



  
    
    学习koa
  
  
    

学习真快乐!

此时,每改动一次html文件,在浏览器刷新即可看到最新内容,并且添加内容和样式就方便很多了。

自此,一个正常网站就可以显示了,开发起来也比较方便。

配置终端

Mac OSX默认使用bash shell,在耍命令的时候,文件的显示没有带颜色,而使用zsh shell+Oh My Zsh主题,就能让我们的终端瞬间高大上。Oh My Zsh官网地址:http://ohmyz.sh/。

在终端执行下面的语句安装Oh-My-ZSH:

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

设置默认的shell为Oh-My-ZSH:

chsh -s /bin/zsh

查看系统自带哪些shell:

cat /etc/shells

再次确认下echo $SHELL看下当前默认shell有没有改,没有的话要重启终端。
bash shell默认读取的是当前用户下的.bash_profile文件,而zsh shell默认读取的是当前用户下的.zshrc文件:

cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

虽然配置好了,但是有关shell的知识还是要和大家讲解一下,首先 oh-my-zsh 是一套配置的名字,不是 shell 的名字。

Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。业界所说的 shell 通常都是指 shell 脚本,但读者朋友要知道,shell 和 shell script 是两个不同的概念。

作为命令语言,它交互式地解释和执行用户输入的命令;作为程序设计语言,它定义了各种变量、参数、函数、流程控制等等。它调用了系统核心的大部分功能来执行程序、建立文件并以并行的方式协调各个程序的运行。

因此,对于用户来说,shell是最重要的实用程序,深入了解和熟练掌握shell的特性极其使用方法,是用好Unix/Linux系统的关键。

Linux的Shell脚本解释器种类众多,一个系统可以存在多个shell脚本解释器,可以通过cat /etc/shells 命令查看系统中安装的shell脚本解释器。流行的shell有ash、bash、ksh、csh、zsh等,不同的shell都有自己的特点以及用途。

bash由于易用和免费,在日常工作中被广泛使用。同时,Bash也是大多数Linux系统默认的Shell脚本解释器。

为何使用zsh?

ZSH也称为Z Shell,是Bourne Shell(sh)的扩展版本,具有许多新功能,并支持插件和主题。 由于ZSH与Bash基于相同的外壳,因此ZSH具有许多相同的功能,并且切换起来非常容易。Oh-My-Zsh是ZSH最受欢迎的插件框架,它还带有许多内置插件和主题。

讲完有关shell的常识后,我们通过 open ~/.zshrc来打开zsh的配置文件,添加一下别名:

alias vb="vi ~/.zshrc"
alias ob="open ~/.zshrc"
alias sb="source ~/.zshrc"

alias ni="npm install"
alias ns="npm start"
alias nl="npm run lint"
alias nb="npm run build"
alias nd="npm run dev"

alias ga="git add ."
alias gm="git commit -m"
alias gs="git status"
alias gp="git push"
alias gl="git pull"

然后,我们通过 source ~/.zshrc 让其生效,之后我们启动项目,直接使用 ns 就可以 代替输入 npm start 了。

你可能感兴趣的:(在线简历 | 提升开发效率)