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

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

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

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

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

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

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

api_server

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

謝

觀(guān)

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

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

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

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

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

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

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

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

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

res.send({

msg:'success',

data:data[index]

})})GET請(qǐng)求方式

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

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

console.log('請(qǐng)求參數(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請(qǐng)求方式

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

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

//創(chuàng)建express的服務(wù)器實(shí)例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請(qǐng)求方式app.post('/post_test2',(req,res)=>{

const{news}=req.body

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

謝

觀(guān)

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

Node

前端

交互后端Java/Python/Go后端

交互演變通過(guò)將開(kāi)發(fā)團(tuán)隊(duì)前后端分離化，讓前后端工程師只需要專(zhuān)注于前端或后端的開(kāi)發(fā)工作

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

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