创新实践1

发布于 2021-03-10  400 次阅读


本周学习了一下nodejs的express框架的基本应用:

1.nodejs安装

以 v0.10.26 版本为例,其他版本类似, 安装步骤:

步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:

install-node-msi-version-on-windows-step1

步骤 2 : 点击以上的Run(运行),将出现如下界面:

install-node-msi-version-on-windows-step2

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

install-node-msi-version-on-windows-step3

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):

install-node-msi-version-on-windows-step4

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)

install-node-msi-version-on-windows-step5

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

install-node-msi-version-on-windows-step6

安装过程:

install-node-msi-version-on-windows-step7

点击 Finish(完成)按钮退出安装向导。

install-node-msi-version-on-windows-step8

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

node-version-test

2.Express安装

npm install -g express-generator

用express搭建一个本地服务器

const express = require('express');
const app = express();

app.get('/',function(req,res){
    res.send('Hello,world');
});

app.listen(5000,function(){
    console.log('Server running at 5000!');
});

首先引入express模块,再用实例化为app。利用express中的get方法可以让浏览器访问根目录时进行相应的操作。这里是使用回调函数向浏览器返回了“Hello,world”。下面的listen是服务器运行的端口,当运行成功时会在控制台输出“Server running at 5000!”。

如图,在命令行输入node + js的文件名即可运行该js代码。再访问5000端口查看:

成功的在浏览器中输出了“Hello,world字样”。

当然,在上述的代码中get方法中的路径不一定为‘/’根目录,还可以是其他自定义路径,如"/hello","/bye"等。将代码修改后:

const express = require('express');
const app = express();

app.get('/',function(req,res){
    res.send('Hello,world');
});
app.get('/hello',function(req,res){
    res.send('This is hello page');
});
app.get('/bye',function(req,res){
    res.send('This is bye page');
});
app.listen(5000,function(){
    console.log('Server running at 5000!');
});

再次运行:

查询字符串,接受post数据体

1.接收get传输的数据

app.get('/',function(req,res){
    res.send('Hello,world');
    console.dir(req.query);
});

查询字符串a=1,控制台输出

利用req.query的方法,得到一个通过url查询的字典,在console.dir输出到控制台中。

2.接收POST传输数据

首先需要利用到body-Parser这个中间件。安装body-Parser:

npm install body-Parser -g

再对post的数据进行解析,最后在通过req.body输出:

var urlencode = bodyParser.urlencoded({extended:false});
app.post('/',urlencode,function(req,res){
    res.send('Hello,world');
    console.dir(req.body);
});

利用postman发送x-www-form-urldecode格式数据:

在查看控制台,我们可以查看到:

文件上传

安装multer模块:

npm install multer -g

利用multer实现文件上传:

var express = require('express');
var fs = require('fs');
var bodyParser = require('body-parser');
var multer = require('multer');

var app = express();
app.set('view engine','ejs');
var urlencode = bodyParser.urlencoded({extended:false});
var jsonencode = bodyParser.json();

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    cb(null, 'upload')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })

var upload = multer({ storage : storage })

app.get('/',function(req,res){
    //res.send(req.query);
    res.send('Hello,world');
    console.dir(req.query);
});

app.post('/',urlencode,function(req,res){
    console.dir(req.body);
    res.send(req.body.id);
});

app.get('/upload',function(req,res){
    var person = req.query.name;
    res.render('files',{ "person" : person });
});

app.post('/upload',upload.single('upload'),function(req,res){
    res.send('Sucess!!!');
});

app.listen(5000,function(){
    console.log('Server running at 5000');
});

这里storge可以设置文件储存的路径、文件名。

这里设置的路由是/upload,上传方式为post。html是事先写好的,利用模板渲染引擎ejs进行渲染显示。

如图,访问/upload路由:

选择一张图片上传:

在upload文件夹中可以看到上传成功:

以上是nodejs的部分学习总结,后续再有会持续更新

参考来源:

https://www.runoob.com/nodejs/nodejs-install-setup.html

https://blog.csdn.net/qq_42306443/article/details/88836594


业精于勤,荒于嬉;行成于思,毁于随