用Express搭建服務器

之前一直是用axios請求rap2模擬的接口，想試著用express自己寫一個簡單的，然后連下MySQL數據庫。

0、準備工作

• 安裝node
• 初始化項目：新建一個文件夾，在里面

  npm init -y 
          
  
  
              
  
                  1
              
  
          
  

• 安裝express

  npm install express 
          
  
  
              
  
                  1
              
  
          
  

1、第一個小栗子（發布服務）Express 中文網

• 新建www.js文件，把這段代碼寫進去，然后直接node www.js啟動服務，然后在瀏覽器訪問http://localhost:3000就可以看到后端返回的Hello World!啦。

   const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { //這里面可以先從數據庫獲取數據，然后返回給前端 res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) 
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
              
  
                  5
              
  
              
  
                  6
              
  
              
  
                  7
              
  
              
  
                  8
              
  
              
  
                  9
              
  
              
  
                  10
              
  
              
  
                  11
              
  
              
  
                  12
              
  
              
  
                  13
              
  
          
  

2、前端axios.get請求

• 發布服務之后就可以用axios請求啦，請求的代碼如下：（但是會有問題，解決方法見 第3節）

   axios.get('http://localhost:3000').then((res) => { console.log(res); }); 
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
          
  

3、前端axios.get請求的跨域問題

• 第2節介紹了如何用axios請求后臺服務，但是在本地訪問上面的http://localhost:3000，如果不是同一端口的話會出現跨域不能請求的問題。解決方法是在www.js文件中加上下面這段：

 //加了這句之后就可以跨域請求了？？？ app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //允許所有來源訪問 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //允許訪問的方式 next(); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

• 這樣你就可以在本地其他端口的項目上訪問3000端口啦

4、后端post接口

app.post('/post', (req, res) => { console.log(JSON.stringify(req.body));//前端發送給后端的數據 res.send('ok');//返回給前端的數據 }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

5、前端axios.post請求

 axios.post(`http://localhost:3000/post`, "向后端發送的數據").then(res => { console.log("后端返回的數據res=>", res); }); 


    

        1
    

    

        2
    

    

        3
    

• 這樣你在前端就可以向后端發送請求信息，后端接收并驗證之后再把數據返回給前端就好了。
• 但是，這樣還是會有點問題，第6節解決。

6、 在express中獲取post請求數據（本節原文鏈接）

1. express沒有內置的POST請求API，但是有聽說將body-parser（詳情） 內置到express中了。但是我試了直接使用不了。所以還是直接安裝第三方包

2. 使用第三方包body-parser

   npm i body-parser 
           
   
   
               
   
                   1
               
   
           
   

3. app.js

   //1引包 const bodyParser=require('body-parser') //2配置 // 配置模板引擎和 body-parser 一定要在 app.use(router) 掛載路由之前 // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json()) 
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
               
   
                   3
               
   
               
   
                   4
               
   
               
   
                   5
               
   
               
   
                   6
               
   
               
   
                   7
               
   
               
   
                   8
               
   
               
   
                   9
               
   
           
   

• 至此使用express搭建的簡易服務器就好了，后續可以再連接數據庫進行增刪查改。

轉載整合自（文中鏈接） 參考鏈接：
Express 中文網
在express中獲取post請求數據（原文鏈接）
body-parser（詳情）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務