微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 項目9 接口的設(shè)計與開發(fā)

項目九接口的設(shè)計與開發(fā)任務(wù)一Node.js基礎(chǔ)Node.jsBasicsNode.js保留了JavaScript在Web瀏覽器端中所使用的大部分API，本節(jié)介紹Node.js在Windows環(huán)境下使用安裝向?qū)нM行安裝與配置。Node.js腳本創(chuàng)建Web服務(wù)需要用到http等模塊。通過路由配置來講解GET請求和POST請求，使用node.js編寫小程序數(shù)據(jù)接口，對接小程序的網(wǎng)絡(luò)請求，實現(xiàn)小程序訪問數(shù)據(jù)接口的過程。項目九接口的設(shè)計與開發(fā)任務(wù)描述JavaScript運行時非阻塞異步I/O模型事件驅(qū)動CPU密集&I/O密集Node.js工作模型01是什么02JavaScript脫離瀏覽器Web服務(wù)器項目好在哪03WebServer本地代碼構(gòu)建實用工具開發(fā)在哪里用

Node.js就是運行在服務(wù)端的JavaScript，是一個真正高效的Web開發(fā)平臺。在Node.js之前，JavaScript只能運行在瀏覽器中，作為網(wǎng)頁腳本使用，為網(wǎng)頁添加一些特效，或者和服務(wù)器進行通信。有了Node.js以后，JavaScript就可以脫離瀏覽器，像其它編程語言一樣直接在計算機上使用，再也不受瀏覽器的限制。Node.js基礎(chǔ)Node.js不是一門新的編程語言，也不是一個JavaScript框架，它是一套JavaScript運行環(huán)境，用來支持JavaScript代碼的執(zhí)行。用編程術(shù)語來講，Node.js是一個JavaScript運行時（Runtime）。Node.js是一個基于ChromeJavaScript運行時建立的一個平臺。Node.js是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非常快，性能非常好。.js文件.json文件.node文件拓展名判斷解析為對象讀取main指定的路徑解析package.json將index作為默認(rèn)值查看index.jsindex.jsonindex.node查找入口文件在父目錄中重復(fù)以上邏輯輪詢后儂舊失敗則報錯進入下一個模塊路徑Node.js基礎(chǔ)可以根據(jù)不同平臺系統(tǒng)選擇需要的Node.js安裝包，用戶可以根據(jù)當(dāng)前所使用的計算機環(huán)境選擇下載相應(yīng)的Node.js版本，設(shè)置安裝目錄進行安裝即可。安裝完之后，可以在命令提示符工具里測試安裝結(jié)果，測試代碼如下所示。Node.js基礎(chǔ)node-v一個簡潔而靈活的node.jsWeb應(yīng)用框架提供了一系列強大特性幫助你創(chuàng)建各種Web應(yīng)用豐富的HTTP工具Express框架核心特性：可以設(shè)置中間件來響應(yīng)HTTP請求。定義了路由表用于執(zhí)行不同的HTTP請求動作?？梢酝ㄟ^向模板傳遞參數(shù)來動態(tài)渲染HTML頁面。Express框架以上命令會將Express框架安裝在當(dāng)前目錄的node_modules目錄中，node_modules目錄下會自動創(chuàng)建express目錄。npm的全稱是NodePackageManager，是一個NodeJS包管理和分發(fā)工具。Express框架npminstallexpress--save以下幾個重要的模塊是需要與express框架一起安裝的：body-parser-node.js中間件，用于處理JSON,Raw,Text和URL編碼的數(shù)據(jù)。cookie-parser-這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie，并把它們轉(zhuǎn)成對象。multer-node.js中間件，用于處理enctype="multipart/form-data"（設(shè)置表單的MIME編碼）的表單數(shù)據(jù)。在Node.js中，中間件是一種模塊化的軟件組件，用于處理HTTP請求和響應(yīng)。中間件是Express.js和許多其他Node.jsWeb框架的核心概念之一。它允許在請求到達路由處理程序之前或響應(yīng)發(fā)送到客戶端之前執(zhí)行代碼。中間件用于執(zhí)行各種任務(wù)，如請求日志記錄、身份驗證、數(shù)據(jù)轉(zhuǎn)換和錯誤處理。瀏覽器請求響應(yīng)中間件1中間件3next()中間件4中間件3路由處理完畢響應(yīng)請求next()next()next()響應(yīng)中間件中間件

本質(zhì)：一個function處理函數(shù)，Express中間件的格式如下。app.get('/',function(req,res,next){next();})constexpress=require('express')constapp=express()//定義一個最簡單的中間件函數(shù)constthing=function(req,res,next){console.log('這是中間件函數(shù)');//把流轉(zhuǎn)關(guān)系，轉(zhuǎn)交給下一個中間件或路由next()}創(chuàng)建Node.js項目步驟1：VisualStudioCode

(VSCode)是Microsoft開發(fā)的跨平臺腳本編輯器。它與PowerShell擴展相結(jié)合，提供了豐富的交互式腳本編輯體驗，從而可以更輕松地編寫可靠的PowerShell腳本。npminit-y創(chuàng)建Node.js項目步驟2：在VSCode編輯器點擊工具欄中的"終端"->“新建終端”，可以在工具中看到新建的終端界面，在powershell工具中運行如下命令，初始化包管理配置文件。npminstallexpress--save創(chuàng)建Node.js項目步驟3：安裝Express框架。Web應(yīng)用程序Express是一個保持最小規(guī)模的靈活的Node.jsWeb應(yīng)用程序開發(fā)框架。在powershell工具中運行如下命令，安裝express框架。constexpress=require('express')//導(dǎo)入express模塊constapp=express()//創(chuàng)建express的服務(wù)器實例app.listen(3000,()=>{

//調(diào)用app.listen方法，指定端口號并啟動web服務(wù)器

console.log('serverisrunning')})創(chuàng)建Node.js項目步驟4：在

api_server

項目根目錄，新建app.js頁面，作為整個項目的入口文件。在app.js頁面初編寫如下的代碼：nodeapp.js創(chuàng)建Node.js項目步驟5：運行node.js程序。node.js程序運行方式有多種，本書主要介紹用node或nodemon命令運行。在powershell工具中輸入以下命令，按<enter>鍵后，即可查看運行結(jié)果。nodemon是一個Node.js應(yīng)用程序的監(jiān)視工具，nodemon可以自動檢測到運行文件更改，通過自動重新啟動應(yīng)用程序來調(diào)試基于node.js的應(yīng)用程序。在powershell工具中輸入以下命令，安裝nodemon。npminstallnodemon-g在powershell工具使用nodemon啟動app.js，代碼如下所示。nodemonapp.js創(chuàng)建Node.js項目express.static(root,[options])例如，通過如下代碼就可以將public目錄下的圖片、CSS文件、JavaScript文件對外開放訪問了：app.use(express.static('public'))獲取項目靜態(tài)資源網(wǎng)站后臺為了提供圖像、CSS文件和JavaScript文件之類的靜態(tài)文件，可以使用用Express中的express.static內(nèi)置中間件函數(shù)，函數(shù)具體語法如下：Postman主要是用來模擬各種HTTP請求的(如:get/post/delete/put..等等)，Postman與瀏覽器的區(qū)別在于有的瀏覽器不能輸出JSON格式，而Postman更直觀接口返回的結(jié)果。下面使用Postman測試獲取項目靜態(tài)資源。獲取項目靜態(tài)資源感

謝

觀

看THANK項目九接口的設(shè)計與開發(fā)任務(wù)二路由配置RoutingConfiguration任務(wù)描述項目九接口的設(shè)計與開發(fā)路由是Express框架中最重要的功能之一，是指確定應(yīng)用程序如何響應(yīng)客戶端對特定端點的請求，該端點是URL（或路徑）和特定的HTTP請求方法（GET、POST等）。每個路由可以有一個或多個處理函數(shù)，當(dāng)路由匹配時執(zhí)行。什么是路由傳統(tǒng)的Web應(yīng)用：每個不同的頁面都對應(yīng)一個不同的URL地址，當(dāng)用戶點擊鏈接或輸入不同的URL

時，瀏覽器會向服務(wù)器發(fā)送請求，服務(wù)器返回對應(yīng)的頁面內(nèi)容，然后瀏覽器進行頁面

的刷新和渲染。缺點：①每次跳轉(zhuǎn)頁面都需要向服務(wù)器發(fā)送請求，會造成頁面的刷新

②用戶體驗不夠流暢。在單頁面應(yīng)用：整個應(yīng)用只有一個HTML頁面（或模板），界面內(nèi)容都是通過動態(tài)加載數(shù)據(jù)和更新DOM來實現(xiàn)的。當(dāng)用戶點擊鏈接或輸入不同的URL時，頁面不會刷新，而是通過路由系統(tǒng)將用戶導(dǎo)航到對應(yīng)的視圖或頁面，實現(xiàn)局部內(nèi)容的更新，從而提供更好的用戶體驗。

路由（Routing）：指根據(jù)不同的URL地址，將用戶導(dǎo)航到不同的頁面或視圖的過程。app.METHOD(PATH,HANDLER)路由配置的概念

其中，app是一個實例express。METHOD是一個HTTP請求方法，小寫。PATH是服務(wù)器上的路徑。HANDLER是路由匹配時執(zhí)行的回調(diào)函數(shù)。打開api_server項目，在app.js頁面增加以下代碼，展示了如何處理GET請求并返回"HelloWorld"。app.get('/api',(req,res)=>{res.send('HelloWorld');});在postman地址欄，輸入:3000/api，即可使用GET請求并返回"HelloWorld"結(jié)果，運行結(jié)果如下圖所示。路由配置的概念

在很多場景中，服務(wù)器都需要跟用戶的瀏覽器打交道，如表單提交，表單提交到服務(wù)器一般都使用GET/POST請求。//1.GET請求app.use('/api/gettest',(req,res)=>{

constdata=['科技是第一生產(chǎn)力','科技興國','創(chuàng)新引領(lǐng)發(fā)展']

constindex=Math.floor(Math.random()*data.length)

res.send({

msg:'success',

data:data[index]

})})GET請求方式

在postman地址欄，輸入/api/gettest，即可使用GET請求并返回結(jié)果，運行結(jié)果如下圖所示。GET請求方式

由于GET請求直接被嵌入在路徑中，URL是完整的請求路徑，包括了?后面的部分，因此可以手動解析后面的內(nèi)容作為GET請求的參數(shù)。//2.GET請求app.use('/api/gettest2',(req,res)=>{

console.log('請求參數(shù)：',req.query)

const{name,age,sex}=req.query

console.log('name:',name)

console.log('age:',age)

console.log('sex:',sex)

res.send({

msg:'success',

data:'歡迎：'+name+',年齡：'+age+',性別：'+sex

})})GET請求方式

在postman地址欄中，通過地址欄進行傳參，傳遞三個參數(shù)，分別是name，age，sex。輸入/api/gettest2?name=小明&age=23&sex=男，即可使用GET請求并返回結(jié)果，運行結(jié)果如下圖所示。GET請求方式body-parser作為Express中間件，其作用是解析http請求體中的body數(shù)據(jù)，將數(shù)據(jù)解析成對象后綁定到req.body中。安裝完body-parser中間件之后，在路由文件中引入并對請求體進行解析。constbodyParser=require('body-parser')body-parser使用bodyParser.json與bodyParser.urlencoded的解析功能，body-parser還提供了raw、urlencoded等解析器。urlencoded解析器的使用方法如下。bodyParser.urlencoded({extended:[option]})POST請求方式urlencoded格式：又叫form格式，或者是x-www-form-urlencoded格式。表單格式是由鍵值對組成。鍵和值之間用=。多個鍵值對之間用&。例如：name=ZhangSan&age=16POST請求方式constexpress=require('express')

//導(dǎo)入express模塊constapp=express()

//創(chuàng)建express的服務(wù)器實例constbodyParser=require('body-parser')app.use(bodyParser.urlencoded({extended:true}))app.post('/post_test',(req,res)=>{

console.log('req.body的內(nèi)容：',req.body)

res.send({

msg:'success',

inifo:req.body

})})POST請求方式app.post('/post_test2',(req,res)=>{

const{news}=req.body

console.log('req.body數(shù)據(jù)：',req.body)})下面示例中，從傳入的http請求流中讀取請求的主體，然后解析在該請求主體中找到的JSON。解析后的JSON的結(jié)果屬性被放入對象req.body中，以供后續(xù)請求處理程序使用其中的數(shù)據(jù)。該中間件填充它在解析的JSON中找到的任何屬性。感

謝

觀

看THANK項目九接口的設(shè)計與開發(fā)任務(wù)三小程序訪問數(shù)據(jù)接口MiniProgramAccessDataInterface微信小程序表單數(shù)據(jù)需要跟服務(wù)器進行數(shù)據(jù)交互，可以通過小程序中的網(wǎng)絡(luò)API接口wx.request()來實現(xiàn)。項目九接口的設(shè)計與開發(fā)任務(wù)描述每個微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進行網(wǎng)絡(luò)通信。域名只支持https和wss協(xié)議。前后端分離是目前一種非常流行的開發(fā)模式，它使項目的分工更加明確，后端負責(zé)處理、存儲數(shù)據(jù)；前端負責(zé)顯示數(shù)據(jù)，前端和后端開發(fā)人員通過接口進行數(shù)據(jù)的交換。前后端分離技術(shù)Browser前端Java/Python/GoBrowser

Node

前端

交互后端Java/Python/Go后端

交互演變通過將開發(fā)團隊前后端分離化，讓前后端工程師只需要專注于前端或后端的開發(fā)工作

。為優(yōu)質(zhì)產(chǎn)品打造精益團隊開發(fā)獨立化，開發(fā)能力必然會有所提升，能夠完美應(yīng)對各種復(fù)雜多變的前端需求。應(yīng)對復(fù)雜多變的前端需求前后端分離以后，可以實現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結(jié)束。提升開發(fā)效率前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運行期才會有調(diào)用依賴關(guān)系。增強代碼可維護性前后端分離技術(shù)的優(yōu)勢傳統(tǒng)SPA指的是單頁面應(yīng)用，也就是整個網(wǎng)站只有一個頁面，所有功能都通過這一個頁面來呈現(xiàn)。傳統(tǒng)SPA服務(wù)端渲染的方案指的是數(shù)據(jù)綁定，渲染等工作都放在服務(wù)端完成，服務(wù)端向瀏覽器輸出最終的html。服務(wù)端渲染前后端分離架構(gòu)方案前后端分離架構(gòu)方案12優(yōu)點：是開發(fā)簡單，部署簡單。缺點：是首次加載較慢，需要較好的網(wǎng)絡(luò)，不友好的SEO，搜索引擎優(yōu)化）。與SPA對比優(yōu)點：更好的SEO，搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。更快的內(nèi)容到達時間(time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運行緩慢的設(shè)備。方案對比傳統(tǒng)SPA服務(wù)端渲染前后端分離架構(gòu)方案

wx.request(Objectobject)表示發(fā)起HTTPS網(wǎng)絡(luò)請求，該接口基本語法實例如下所示：wx.request({url:'',//接口地址data:{x:'',y:''},header:{'content-type':'application/json'//默認(rèn)值},success(res){console.log(res.data)}})小程序網(wǎng)絡(luò)請求接口屬性類型必填描述urlstring是開發(fā)者服務(wù)器接口地址。datastring/object/ArrayBuffer否請求的參數(shù)。headerObject否設(shè)置請求的header。content-type默認(rèn)為application/json。methodstring否HTTP請求方法，包括OPTIONS、GET、HEAD、POST、PUT、DEL