万金流
以码会友。 吾Q:578751655。 水平有限,轻喷,谢!

前言

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版本

不影响学习上面的内容。

posted on 2023-11-16 16:59  万金流  阅读(176)  评论(0编辑  收藏  举报