Node.js的框架-express-有解無憂

Node.js的框架
express 是第三方的

express

const express=require('express');
const app=express();
const PORT=3000
const HOST='localhost'

//創建路由/路由中間件
//目標http://localhost:8000/home
app.get('/home',(req,res,next)=>{
    // req:請求
    // res:回應
    // next:請求與回應之間的連接
    res.send('平安夜')
    // res.json({
    //     name:'李蘭生',
    //     day:'平安夜'
    // })
})
//監聽服務器
app.listen(PORT,HOST,()=>{console.log( `xpress創建的服務器在：http://${ HOST }:${PORT}`);
})

koa express 進階版

express

構成
- 中間件
  - 名詞解釋：中間件就是一個封裝函式，具有一定的功能
  - express的中間件有哪些呢？
    - 應用級中間件
    - 路由中間件
    - 錯誤處理中間件
  - 中間件如何呼叫？
    - app物件來呼叫
      - app.use(中間件)

app.js

const express=require('express');
const app=express();
const cors= require('cors');
const PORT=3000
const HOST='localhost'


app.use(cors())
//創建路由/路由中間件
//目標http://localhost:8000/home
app.get('/home',(request,response,next)=>{
//跨域請求頭
// response.setHeader('Access-Control-Allow-Origin','*');


const http = require('http')
const cheerio = require('cheerio')

const options = {
  hostname: 'jx.1000phone.net',
  port: 80,
  path: '/teacher.php/Class/classDetail/param/rqiWlsefmajGmqJhXXWhl3ZiZ2Zn',
  method: 'GET',
  headers: {
    Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
    'Accept-Encoding': 'gzip, deflate',
    'Accept-Language': 'zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
    Cookie: 'PHPSESSID=ST-117984-IVZSfYMlr9YXvRfFRm-A1TimOeA-izm5ejd5j1npj2pjc7i3v4z',
    Host: 'jx.1000phone.net',
    Pragma: 'no-cache',
    Referer: 'http://jx.1000phone.net/teacher.php/Class/index',
    'Upgrade-Insecure-Requests': 1,
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36',
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': 0
  }
}

http.get(options, (res) => {
  /* res就是我得到的回傳值 */
  const { statusCode } = res; // 狀態碼
  const contentType = res.headers['content-type']; // 得到的檔案型別

  res.setEncoding('utf8'); // 中文編碼
  let rawDatahttps://www.cnblogs.com/lilansheng/p/= ''; // 真實資料
  res.on('data', (chunk) => { rawData += chunk; });// 通過data事件將資料分片，然后逐片添加到rawData身上，好處就是當我們執行每一個分片的小任務時，至少給其他任務提供了可執行的機會
  res.on('end', () => { // 表示結束
    try { // 高級編程 錯誤捕獲
      const $ = cheerio.load( rawData )
      let arr=[];
      $('.student a').each(function ( index,itm ) {
        // console.log( $( this ).text() ) // 每一個的內容
        arr.push( {
            id:index+1,
            name:$( this ).text()
        });
       
      })
      response.json( arr);
    } catch (e) {
      console.error(e.message);
    }
  });


}).on('error', (e) => {
  console.error(`Got error: ${e.message}`);
});
})
//監聽服務器
app.listen(PORT,HOST,()=>{console.log( `xpress創建的服務器在：http://${ HOST }:${PORT}`);
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <button> 獲取資料 </button>
    <br>
    <table>
      <thead>
        <tr> <td>編號</td> <td> 姓名 </td> </tr>
      </thead>
      <tbody>
  
      </tbody>
    </table>
</body>
<script>
const baseURL='http://localhost:3000'

$('button').on('click',function(){
//     $.ajax({
//     url:`${baseURL}/home`,
//     success(res){
//         console.log(res);
//     }
// })
    $.ajax({
        url:`${baseURL}/home`,
        success(res){
            let str=``;
            for(var item of res){
                str+=`<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    </tr>`
            }
            $('tbody').html(str)
        }
    })
})
</script>
</html>

路由
- 前端：介面
- 后端：路由

跨域【后端跨域】
- 設定請求頭
- response.setHeader('Access-Control-Allow-Origin','*')
- 利用第三方模塊來跨域 cors
使用工程化工具來構建一個完整的 express 專案
- 工程化工具/自動化工具/腳手架
  - express-generator
    - express-generator 使用
      - 安裝
        
        $ cnpm i express-generator -g
        
        $ express -e 專案名稱
      - OR
      - 不安裝使用
        
        保證你的電腦中npm版本 > 5.2
        
        $ npx express -e 專案名稱
      - 名詞解釋： -e 表示ejs檔案，它是一個html模板

express-generator

目錄
- bin/www 為專案創建了一個服務器
- public 靜態資源檔案夾
  - img
  - style
  - js
- routes 路由
- views
  - 路由對應的模板，這個模板將來會發送給前端，發給前端前會被決議為html檔案
- app.js 專案入口檔案

// 專案需要的第三方模塊
var createError = require('http-errors');//記錄錯誤資訊
var express = require('express');//express的頂級庫，提供espres api
var path = require('path');//處理磁盤路徑
var cookieParser = require('cookie-parser');//cookie
var logger = require('morgan');//記錄日志資訊

//引入自定義的路由中間件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//創建app物件
var app = express();

// 視圖引擎設定
app.set('views', path.join(__dirname, 'views'));//處理view的絕對路徑
app.set('view engine', 'ejs');//設定專案模板渲染引擎為ejs

//通過app物件來使用中間件
app.use(logger('dev'));
app.use(express.json());//為post請求做格式化
app.use(express.urlencoded({ extended: false }));//專案檔案可以省略專案后綴
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));//確定專案資源靜態目錄指定為pubic

//呼叫路由中間件  創建介面
app.use('/api', indexRouter);
app.use('/api', usersRouter);


// 捕獲404并轉發給錯誤處理程式(錯誤中間件)
app.use(function(req, res, next) {
  next(createError(404));
});

//錯誤處理程式
app.use(function(err, req, res, next) {
  // 設定區域變數，只提供開發中的錯誤
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // 渲染錯誤頁面
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

packge.json
- 表示專案啟動腳本記錄、專案所需要的依賴包【插件】
- npm install
- npm run start

Node.js可以當做一個后端的角色
- 能不能給前端做介面
- 去熟悉專案運行思維
  - package.json -> node ./bin/www -> app.js -> routes/index.js & users.js
后端測驗介面
- postman
- insomnia

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160536.html

標籤：JavaScript

上一篇：NodeJS概述2-事件插件-簡易爬蟲

下一篇：ES6 中變數的解構賦值