Day 48 (Node.js)

1.製作成物件

score = Object   scoreList2: [      {value : 100, className: "psaa"} ,      {value : 95,  className: "psaa"} ,      {value : 59,  className: "color"} ,      {value : 85,  className: "psaa"} ,      {value : 100, className: "psaa"} ,      ]    <% for( score of scoreList2 ) { %>        <li><span class="<%= score.className %>"><%= score.value %></span></li>     <% } %>

2.发送GET表单

3.执行顺序:

原网站:http://localhost:3000/
以下进入:http://localhost:3000/testPost 取得body.userName值

执行顺序

(1)Http Request请求 post 网址:/testPost

   <form method="post" action="/testPost">      <!-- method="get"资料会显示在网址列 -->      <!-- method="post"资料不会显示在网址列 -->      <input type="text" name="userName" />      <input type="submit" name="YesNO" value="OK" />    </form>

(2)后端收到请求的 方法post 及 路径/testPost

    //方法post 及 路径/testPost    app.post("/testPost",function(req,res){    var data = req.body.userName;     //抓index.html的body 抓不到XD    //前面要增加urlencoded物件才抓的到    res.send("我抓到了" + data);   })

2-1如果是get req.query 因为网址列会显示get内容

   //方法get 及 路径/test    app.get('/test', function (req, res) {        res.send(' query string = ' + req.query.name);    });

method="get"资料会显示在网址列
method="post"资料不会显示在网址列

(3)确认符合，执行方法:在body内抓userName

    app.use(express.urlencoded({extended:true}));      //搭配body.userName;     app.post("/testPost",function(req,res){    var data = req.body.userName;     //抓index.html的body 抓不到XD    //前面要增加urlencoded物件才抓的到    res.send("我抓到了" + data);       })

    <input type="text" name="userName" />

4. id name差异?

id = 每个东西都可以拥有
name = 送给后端的名字代号(form内的input才有)

5.postman 监看、检查网页用

同事做好把东西交给你继续做时，可以拿这个检查同事有没有做好
(交货检查)

(1)建立新分类 > 建立新请求 > 输入网址 >存档

      <input type="text" name="userName" />      <input type="submit" name="YesNO" value="OK" />      app.use(express.json()); //json物件      app.post("/testPost",function(req,res){          var data = req.body.userName;           res.send("我抓到了" + data);         })

(2)使用 raw JSON
app.use(express.urlencoded({extended:true}));
//搭配body.userName;

(3)使用 raw JSON
app.use(express.json()); //json物件

{"userName": "LILILI","YesNo":"OK"}

可以检查是不是从POST就错误，如果连不上就跟前端无关

6.multer 上传档案用

type="file" 格式必要 enctype="multipart/form-data

    <form action="/upload_file"           method="post"           enctype="multipart/form-data">    <input type="file" name="myfile" accept="image/*" />    <input type="submit" value="上传档案" />

sever端

     const express = :require('express');     const multer = require('multer') //1.引用multer套件     const app = express();     varupload = multer(( dest: 'upload/']); //2.呼叫,使用功能(设置档案存放的路径)     //3.upload.single('myfile')解析上传档案(解析器)，single:只解析一个     //upload_file这里处理     app.post('/upload_file', upload.single('myfile'), function(req, res){             res.send("上传成功");             });     app.get("/", function(req, res) [     res,sendfile(_dirname + '/index.html', function(err) {     if (err) res,send(404);     ));     ));     app.listen(3000);

6-1限制上传档案类型

      <input type="file" name="myfile" accept="image/*" />      var upload = multer({      storage: myStorage,  // 设置 storage      fileFilter: function (req, file, cb) {    // 档案过滤          if (file.mimetype != 'image/gif') {             return cb(new Error('Wrong file type'));           }         cb(null, true)         }      });

      <input type="file" name="myfile" accept=".png,.gif,.bmp">

6-2解析多个档案(可上传多个档案)

    app.post('/upload_file', upload.array('myfile', 12), function (req, res, next) {    // upload.single('myfile') 一个    // .array('myfile', 12) 同类型 12个    // .fields(fields) 不同类型 多个    res.send("上传成功");    });

参考资料:
https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E4%BD%BF%E7%94%A8-multer-%E5%AF%A6%E4%BD%9C%E5%A4%A7%E9%A0%AD%E8%B2%BC%E4%B8%8A%E5%82%B3-ee5bf1683113

7.物件 Js

obj.lastname = {"Lin"};   //{}obj["lastname"] = "Lin";  //[]alert(obj.lastname);alert(obj["lastname"]);

8.正规表示法

手机号码
/09[0-9]{8}

(1)透过冒号(:)可以将网址的区段文字存成变数

    app.get("/mail/:zip",function(req,res){        res.send(req.params.zip);    })

http://localhost:3000/mail/zzz

·使用wildcard配多文字,易学易用,功能简单
-问号(?)代表「可有可无」
-米字号(*)代表「任何文字」

(2)Regular Expression 有更精细地规则

-[a-z]代表所有的「小写英文字元」
-[0-9]代表所有的「数字」
-加号(+)代表「一个或以上」

     // 可替换的限制[0-9]{几码}     app.get("/mail/:zip([0-9]{3})",function(req,res){         res.send(req.params.zip);     })     //http://localhost:3000/mail/300

9.获得专案範本(专案产生器express --ejs)

现在:

npm install express-generator -g
==> -g 全域安装 以后就不用一个一个抓

express --ejs myPrject
==>建立专案资料夹(myPrject) 获得专案範本

nodemon app.js
==>随时跑程式

npm install
==>package.json内的套件全安装

npm start
==> package.json 的 script: 里的start( > run start)
==> 主页面

终端机要开在这:
C:\XXX\Node.js\lab0811\myPrject>

www档案通常不会更动，变动app.js

以前(无範本)

npm init -y ==>package.json
npm install express ==>安装套件
nodemon app.js ==>随时跑程式

var express = require("express");var app = express();app.listen(3000);

10. express --ejs myPrject 专案下变更路径

routes资料夹下

    var express = require('express');    var router = express.Router();        // http://localhost:3000/prod    router.get('/', function(req, res, next) {      res.send('prod list');    });    //http://localhost:3000/prod/about    router.get('/about', function(req, res, next) {        res.send('prod - about page.');      });          //   输入甚么就是甚么    // http://localhost:3000/prod/detail/5    router.get('/detail/:id', function(req, res, next) {        res.send('prod #' + req.params.id);    });    module.exports = router;  //被app.js抓

app.js下

    var prodRouter = require('./routes/prod'); //路由器汇入prod.js    app.use('/prod', prodRouter); //挂路由器在主目录下

11.session

(1)安装

npm install express
npm install express-session

(2)程式码 secret必要

var session = require("express-session"); //引用express-session          app.use(         session({             secret:"P@$$WORD"         })     );

(3)写入
http://localhost:3000/writeToSession

     app.get("/writeToSession",function(req,res){         res.send("OK");              req.session.userName="LILI";     })

(3)读取
http://localhost:3000/readFromSession/

     app.get("/readFromSession",function(req,res){         var data = "GUEST"         if(req.session.userName){             data = req.session.userName;         }         res.send("HELLO!!!" + data);     })

express --help
查看如何使用express套件
[]非必要

npm i
装package.json内的MOD