Node.js学习第四天笔记

2018-12-10 本文已影响0人果木山

1 项目开发步骤

生成package.json文件；如npm init --y;
安装模块文件；如：npm install express --save-dev;
创建服务器文件：命令：touch server.js，创建server.js文件；

2 express三步走

引入模块，创建服务器：const app=express()
添加监听:app.listen(8080)
添加强求: app.get("/") app.post("/:admin/:id") app.use("/")

3 express整体感知

强大的路由：
- 可以用比较严格的路由；如：/admin
- 可以自己手动给路由写正则表达式：/^\/student\/(\d{6})$/; 取参数：req.params[0];
- 可以使用express自己提供的路由:"/student/:id"；取参数：req.params.id;
静态资源服务：app.use(express.static("./public"));将所有静态资源放在public的目录下；打开所有的静态文件；
可以跟模板配合使用，需要两步
1. 设置模板引擎：app.set("view engine","ejs")；常用模板引擎：ejs,jade;
2. 通过res来渲染模板到浏览器:res.render("index",{n:8})；注意：express中默认把模板都放在views目录下；./views/可以省略；index.ejs后缀名也可以省略；

4 get请求

原生node中，如何接收get请求的参数?
- 用url模块：url.parse(req.url,true).query；
在express中，如何接收get请求的参数?
- 代码：req.query；获取参数对象；

ejs代码：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表单get提交</title>
 </head>
 <body>
 <form action="/admin" method="get">
     <label for="user">
         用户名：<input type="text" id="user" name="username" value="guomushan">
     </label><br/>
     <label for="pass">
         密码：<input type="text" id="pass" name="password" value="0525">
     </label><br/>
     <input type="submit" value="提交">
 </form>
 </body>
 </html>

get请求服务器代码：

 const express=require("express");
 const app=express();
 app.listen(8080);
 
 //设置模板引擎；
 app.set("view engine","ejs");
 //1.地址栏发送get请求，请求地址为/;然后打开form.ejs文件；
 app.get("/",function (req,res) {
     res.render("form");
 });
 //2.在form表单中，action请求地址与get请求地址相同；这样就会进入请求；
 app.get("/admin",function (req,res) {
     console.log(req.query);//{ username: 'guomushan', password: '0525' }
     res.send("提交成功");
 });

5 post请求

原生node中，接受post请求的参数：

 var str="";
 req.on("data",function(data){
    str+=data;
  }
 req.on("end",function(){
    var postData=querystring(str);//拿到对象格式的数据；
  }

express中，如果请求的是普通数据的话，用body-parser这个模块；如果请求的数据包含大文件（音频，视频，图片，word等），用formidable模块；
使用body-parser三部曲：
1. 引入模块 bodyParser=require("body-parser");
2. 设置中间件app.use(bodyParser.urlencoded({extended:false}));
3. 通过req.body拿到前端通过请求体提交过来的数据；

代码：

form表单代码：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表单post提交</title>
 </head>
 <body>
 <h2>post提交请求</h2>
 <form action="/admin" method="post">
     <label for="user">
         用户名：<input type="text" id="user" name="username" value="guomushan">
     </label><br/>
     <label for="pass">
         密码：<input type="text" id="pass" name="password" value="0525">
     </label><br/>
     <input type="submit" value="提交">
 </form>
 </body>
 </html>

post-server服务器代码：

 const express=require("express");
 const bodyParser=require("body-parser");
 const app=express();
 app.listen(8080);
 //设置模板引擎
 app.set("view engine","ejs");
 //1.通过get请求，在页面中渲染表单
 app.get("/",function (req, res) {
     res.render("form-post");
 });
 //设置中间件，使用bodyParser必须设置中间件，否则不能拿到数据；
 app.use(bodyParser.urlencoded({ extended: false }));
 //2.利用post请求，获取参数
 app.post("/admin",function (req, res) {
    console.log(req.body);
    res.send("提交成功");
 });

6 use请求

use请求可以扩充地址；地址不严格；
格式代码：app.use("/admin",function(req,res){})
req.originalUrl：拿到的是：包括基本地址的所有请求地址；
req.baseUrl:拿到的是：基本地址/admin"，如路由地址相同；
req.path：拿到的是：不包括基本地址，也不包括参数的其余地址；
req.url：拿到的是：不包括基本地址的所有请求地址；
代码：

 app.use("/admin",function (req, res) {
     //地址栏请求地址：http://localhost:8080/admin/aaa/bbb/index.js?name=guo&age=26
     //1.req.url拿到的是/admin后面的地址；
     console.log(req.url);//打印结果：/aaa/bbb/index.js?name=guo&age=26
     //2.req.originalUrl拿到真正的请求地址和传给后台的参数；
     console.log(req.originalUrl);//打印结果：/admin/aaa/bbb/index.js?name=guo&age=26
     //3.req.baseUrl拿到的是基本的地址，与路由地址一致；
     console.log(req.baseUrl);//打印结果：/admin
     //4.req.path拿到的是除了基本地址的其他子子孙孙的路径地址；（不包含基本地址，也不包含参数）
     console.log(req.path);//打印结果：/aaa/bbb/index.js
     res.send("ok");
 });

7 中间件middleware

路由get,post这些东西；就是中间件，中间件讲究顺序，匹配上第一个之后，就不会往后匹配了；next函数才能够继续往后匹配；所以，get和post对路由卡的很死；

解决方式1：写路由的时候，具体的往上写，抽象的往下写；

 app.get('/admin/login',function (req,res) {
     console.log('2');
     res.send('管理员登录');//send后面不能写任何代码；会报错；
 });
 app.get('/:username/:id',function (req,res,next) {
     console.log('1');
     res.send('管理员登录'+req.params.username)
 });

解决方式2：配合数据库，进行条件判断，数据库中存在的进行if条件；不存在进行else，执行next(),进而执行其他的代码；

 const express=require("express");
 const app=express();
 app.listen(8080);
 //简单的数据库
 var user={
     teacher:["guo","bin"],
     student:88
 };
 //先执行上面代码；然后进行条件判断；如果不满足，在向下进行代码；
 app.get("/:username/:pass",function (req, res,next) {
     var username=req.params.username;
     if(user[username]){
         res.send("我是普通用户");
     }else{
         next();
     }
 });
 app.get("/admin/login",function (req, res,next) {
     res.send("我是管理员");
 });

app.use()也是一个中间件，与get和post不同的是，他的网址不是精确匹配的，而是能够有小文件夹拓展的；如下；
- 当你不写路径的时候，就相当于'／',即相当于所有网址；
- 所以，一般用use当接盘侠；
```
 // GET 'http://www.example.com/admin/new'
 app.use('/admin',function (req,res) {
     console.log(req.originalUrl); //  '/admin/new'
     console.log(req.baseUrl); //  '/admin'
     console.log(req.path);// '/new'
     res.send('你好')
 });
```

8 send

send跟原生node中end的区别：
- send里面既可以传字符串和buffer；也可以传json对象；
- 原生node中end和write里面只能传字符串和buffer；
send跟render的区别：
- send一般用来测试；render一般用来渲染页面；
- send可以用来配合状态码的输出：res.status(404).send("文件没找到")；其中状态码发送到前端浏览器中在控制台中呈现；

9 设置浏览器中文件的渲染类型

原生node中通过：res.writeHeader(200,{"Content-Type":"text/html;charset=UTF-8"})
在express中通过：res.set("Content-Type","text/html");

链接文件

node学习知识点

Node.js学习第四天笔记

1 项目开发步骤

2 express三步走

3 express整体感知

4 get请求

5 post请求

6 use请求

7 中间件middleware

8 send

9 设置浏览器中文件的渲染类型

链接文件

猜你喜欢

热点阅读