Node.js的框架-express

来源:https://www.cnblogs.com/lilansheng/archive/2019/12/24/12093926.html
-Advertisement-
Play Games

Node.js的框架 express 是第三方的 1. express const express=require('express'); const app=express(); const PORT=3000 const HOST='localhost' //創建路由/路由中間件 //目標htt ...


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

  1. 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}`);
})
  1. koa express 進階版

express

  1. 構成
    • 中間件
      • 名詞解釋: 中間件就是一個封裝函數,具有一定的功能
      • 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 rawData = ''; // 真實數據
  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>
  • 路由
    • 前端: 介面
    • 後端: 路由
  1. 跨域【 後端跨域 】
    • 設置請求頭
    • response.setHeader('Access-Control-Allow-Origin','*')
    • 利用第三方模塊來跨域 cors
  2. 使用工程化工具來構建一個完整的 express 項目
    • 工程化工具/自動化工具/腳手架
      • express-generator
        • express-generator 使用
            1. 安裝
            • $ cnpm i express-generator -g
            • $ express -e 項目名稱
          • OR
            1. 不安裝使用
            • 保證你的電腦中npm版本 > 5.2
            • $ npx express -e 項目名稱
          • 名詞解釋: -e 表示ejs文件,它是一個html模板

express-generator

  1. 目錄
    • 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
  1. Node.js可以當做一個後端的角色
    • 能不能給前端做介面
    • 去熟悉項目運行思維
      • package.json -> node ./bin/www -> app.js -> routes/index.js & users.js
  2. 後端測試介面
    • postman
    • insomnia

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • USE [stalentzx]GO/****** Object: Trigger [dbo].[GZ_HISTORY_INSERT] Script Date: 2019/12/24 13:11:40 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ON ...
  • sysobjects 表 在資料庫內創建的每個對象(約束、預設值、日誌、規則、存儲過程等)在表中占一行 ...
  • 昨天網上一網友說,由於他同事誤將“max server memory”設置為10M後,SQL Server資料庫登錄不了,當時我簡單測試了一下,今天有空就順手將整個過程整理一下,記錄在此。 在SSMS的UI界面設置“max server memory”,即使你設置為10M大小,但是它會“悄悄”預設修... ...
  • 本文源碼: "GitHub·點這裡" || "GitEE·點這裡" 一、連接查詢 圖解示意圖 1、建表語句 部門和員工關係表: sql CREATE TABLE ( int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵ID', varchar(30) DEFAULT ...
  • 問題現象 上圖展示的很清楚,當系統語言為中文時,PreferenceScreen 中的摺疊項 summary 描述重覆顯示的 bug,系統語言為英文時正常。 修改歷程 先搜索 當前顯示了 字元串,還真找到了 prebuilts\sdk\current\support\v7\preference\re ...
  • 首先文字簡單擼一下 父子傳子 首先在父組件上綁定一個屬性,在子組件里用props接收,可以是數組或者是對象 子傳父 在父組件升上自定義一個方法,在子組件里通過this.$emit("父組件上的方法名",a) / a /代表需要傳遞的參數 兄弟組件通訊 需要創建一個公共的vue 實例, new vue ...
  • 1、第一步安裝node.js https://nodejs.org/en/ 前期可以下載軟體包,後期熟練以後可以通過nvm進行 Node的版本切換以及升級 然後window+r 輸入cmd 打開命令行 輸入node -v 查看版本號 如: 2 、安裝cnpm(淘寶國內加速)npm install - ...
  • 1. 數組的解構賦值 解構: 中允許按照一定的模式從數組和對象中提取值,然後對變數進行賦值,這被稱為解構(Destructuring). 1. 基本用法 本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變數就會被賦予相應的值。 完全解構 不完全解構 等號左邊只匹配到等號右邊的一部分。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...