用Express搭建服務(wù)器

2021-9-18    前端達(dá)人

用Express搭建服務(wù)器

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

0、準(zhǔn)備工作

  • 安裝node
  • 初始化項(xiàng)目：新建一個文件夾，在里面 
    npm init -y 
        
      

            
    • 
                1
            
      •
  • 安裝express 
    npm install express 
        
      

            
    • 
                1
            
      •

1、第一個小栗子（發(fā)布服務(wù)）Express 中文網(wǎng)

  • 新建www.js文件，把這段代碼寫進(jìn)去，然后直接node www.js啟動服務(wù)，然后在瀏覽器訪問http://localhost:3000就可以看到后端返回的Hello World!啦。 
     const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { //這里面可以先從數(shù)據(jù)庫獲取數(shù)據(jù)，然后返回給前端 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請求

  • 發(fā)布服務(wù)之后就可以用axios請求啦，請求的代碼如下：（但是會有問題，解決方法見 第3節(jié)） 
     axios.get('http://localhost:3000').then((res) => { console.log(res); }); 
        
      

            
    • 
                1
            
      • 

            
    • 
                2
            
      • 

            
    • 
                3
            
      • 

            
    • 
                4
            
      •

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

  • 第2節(jié)介紹了如何用axios請求后臺服務(wù)，但是在本地訪問上面的http://localhost:3000，如果不是同一端口的話會出現(xiàn)跨域不能請求的問題。解決方法是在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
    
    •
  • 這樣你就可以在本地其他端口的項(xiàng)目上訪問3000端口啦

4、后端post接口 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

5、前端axios.post請求 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •
  • 這樣你在前端就可以向后端發(fā)送請求信息，后端接收并驗(yàn)證之后再把數(shù)據(jù)返回給前端就好了。
  • 但是，這樣還是會有點(diǎn)問題，第6節(jié)解決。

6、 在express中獲取post請求數(shù)據(jù)（本節(jié)原文鏈接）

  1. express沒有內(nèi)置的POST請求API，但是有聽說將body-parser（詳情） 內(nèi)置到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搭建的簡易服務(wù)器就好了，后續(xù)可以再連接數(shù)據(jù)庫進(jìn)行增刪查改。

轉(zhuǎn)載整合自（文中鏈接） 參考鏈接：
Express 中文網(wǎng)
在express中獲取post請求數(shù)據(jù)（原文鏈接）
body-parser（詳情）






藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

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

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔