前言
node.js是在电脑上,给js一个可以脱离浏览器运行的环境。功能上像jdk,操作为命令行。
现在演化为可以做web服务器使用,拥有许多成熟的项目和插件。
本文简单讲讲它,以及它的两个小用途(TS和WebApi服务器)。
安装:
nodejs官网和中文网都可以下载安装包。zip格式解压之后需要设置环境变量PATH,windows下msi常规安装即可。目前最新的LTS(长期支持版本)为20.9.0。
安装成功,会自带一个包管理程序,npm。
常用命令:
npm config set registry https://registry.npmmirror.com //更改为国内阿里的源,视速度选择
npm config get registry //查看源设置
npm init //创建配置文件package.json(常用于node项目,对web项目意义不大)
npm install [-g(全局)] xxx[@版本号] [-save] //安装包xxx(是否写入配置,这里一般不写入)
npm uninstall [-g] xxx //卸载包xxx
npm ls [-g] //查看已安装的包
node xx.js //运行js
TypeScript(简称ts):
来自微软,给js添加了类型,编译为js运行,是js的超集(支持一切js语法)
安装:
npm install -g typescript
使用(二选一):
1、直接使用命令"tsc xxx.ts"把文件编译成js。
2、利用ts的项目配置文件tsconfig.json,在存盘时自动编译。
例:
1、新建web项目w1。
2、用文件夹ts存放ts文件,编译后的js文件存放在文件夹js中。
3、用 tsc -init 在网站根目录下创建tsconfig.json,写入以下内容:
1 { 2 "compilerOptions": { 3 "noImplicitAny": false, 4 "noEmitOnError": true, 5 "removeComments": false, 6 "sourceMap": true, 7 "target": "es5", 8 "outDir": "js"//ts编译出js的输出目录 9 }, 10 "include": ["ts/**/*"],//ts所在位置。“**/”为任意层级目录,“?”和“*”为一般通配符。 11 "exclude": [ 12 "js", 13 "img", 14 "css" 15 ] 16 }
4、运行 tsc -w ,监控ts文件,在存盘时自动编译。
5、书写t1.ts程序
1 //输出两个数和的2倍 2 function showSum(x:number,y:number):void 3 { 4 let t:number=x+y; 5 //t=x+y; 6 console.log(2*t); 7 }
存盘即生成t1.js。如果把第4行换成第5行,控制台会报变量未声明错误。
6、在网页里运行它
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/t1.js"></script> 7 </head> 8 <body onload="showSum(3,4);"> 9 10 </body> 11 </html>
结果略。
TS作为强类型语言,不仅在处理复杂数据和逻辑的时候有优势,作为页面脚本也有很多优点。
如下例:
声明了a是一个页面div元素,则在把它当做A标签,试图寻找href属性的时候,IDE(此处为HBuilder)会报错,编译也过不了。
TS语法,可以类比c#、java等语言,自己去学。
关于跨文件模块引用
1、网站模式下,js程序模块可以在网页里排队,跨文件引用。
2、服务端nodejs项目里,跨文件引用牵涉到各种标准,很麻烦。建议初学者不做纠缠,相信后续版本会逐渐规范。【主要是因为官方标准(ES Module)滞后,民间标准(CommonJs)出来以后官方又不认……都是破事。】
如果你现在特别想学,我觉得学官方的比较好。本文后面express的例子,用的是CommonJs。因为这个框架足够老(用不了ESM),足够简单,现在用的也还不少,适合做webapi入门联调js。
Express :
如上所述,nodejs下一个不错的入门webapi框架。
1、使用npm(如前述)安装express包(不带-g,非全局安装)之后,最简单的入门例子如下。
App.js:
1 const express = require("express"); 2 const app = express(); 3 4 app.get("/", (req, res) => { 5 res.send("Hello World!"); 6 }); 7 8 app.listen(3000, () => { 9 console.log("示例应用正在监听 3000 端口 !"); 10 });
运行 node app.js 之后,在浏览器里可以查看结果:
可以用 app.use("/w1",express.static('public')) 中间件,加在3-7行之间的位置,实现静态访问public文件夹下的文件(一般是html、css等)。
2、对上面的例子稍作修改,演示返回对象的json字符串和跨文件调用函数。
j1.js:
1 function f1() 2 { 3 return "102"; 4 } 5 function f2() 6 { 7 return "204"; 8 } 9 exports.f1=f1; 10 exports.f2=f2;
第9、10行导出这两个函数。
App.js
1 //import * as myf1 from "./js/j1.js"; 2 const myf1 = require("./js/j1"); 3 const express = require("express"); 4 const app = express(); 5 6 app.get("/", (req, res) => { 7 res.send("Hello World!"); 8 }); 9 10 app.get("/test1", (req, res) => { 11 res.send({ xm: "zs", nl: 20 }); 12 }); 13 14 app.get("/test2", (req, res) => { 15 res.send(myf1.f1() + myf1.f2()); 16 }); 17 18 app.listen(3000, () => { 19 console.log("示例应用正在监听 3000 端口 !"); 20 });
说明:
1、第1行是ESM引用方式。语法正确,但不被Nodejs默认支持。即使按规定做出修改,也因无法和第3行express的CommonJs引用并存,而无法使用。
2、第2行,CommonJs方式引用另外文件的功能。
3、10-12行返回对象,自动json化。
4、14-16行执行外部函数。
未尽事宜,感兴趣可以自学(不建议深学)。
运行结果:
3、nodejs资源很多,下面利用“multer”包配合“express”,实现简单的文件上传。大家举一反三
目录结构:
index.js:
1 var fs = require('fs'); 2 var express = require('express'); 3 var multer = require('multer') 4 5 var app = express(); 6 var upload = multer({ dest: 'upload/' }); 7 8 // 单文件上传 9 app.post('/upload', upload.single('logo'), function(req, res, next){ 10 res.send({ret_code: '0'}); 11 }); 12 13 app.listen(3000,() => 14 console.log('App is listening on 3000'));
第6行设置保存位置,第9行接受并上传表单中logo对应的文件。
前端文件index.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <form action="http://127.0.0.1:3000/upload" method="post" enctype="multipart/form-data"> 9 <h2>单图上传</h2> 10 <input type="file" name="logo"> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
运行:
运行上传后,upload文件夹里会多出一个文件。设置正确的扩展名可以查看内容。
注意:upload是个临时保存的位置。真正使用,应该转存到硬盘的其他位置。
对学校机房里常见的win7系统,注意以下两点:
1、nodejs最高只能用v13.14版本,需要在官网(或中文网)找历史安装包。
2、ts v5.0.4 //nodejs v13.14下最高ts版本
不影响学习上面的内容。