利用node.js搭建服務(wù)端
一拟逮、新建項目目錄并且利用node.js初始化項目 （截圖）
image.png
二忽孽、新建一個入口文件 index.js （截圖）
image.png
三吕晌、安裝一個express依賴 （截圖）
image.png
如果安裝太慢悦即，建議將npm registry更改為淘寶鏡像瓢捉。
1、臨時使用
npm --registry https://registry.npm.taobao.org install express
2兴革、永久使用
npm config set registry https://registry.npm.taobao.org
配置后可通過下面方式來驗證是否成功：
npm config get registry
image.png
四绎晃、配置入口文件（index.js）并啟用服務(wù)器
1、配置入口文件（index.js）
//（1）引入express
const express=require("express");
//（2）實例化
const app=express();
//（3）監(jiān)聽一個端口3000
app.listen(3000,()=>{//為了監(jiān)聽服務(wù)正在運行杂曲，在控制臺打印一個內(nèi)容
console.log("----------api 3000-------------")
})
//（4）請求一個路由 "/api/list"
app.get("/api/list",(req,res)=>{
var arr = ["北京","上海","廣州","深圳","安徽合肥"];
res.json(arr); //返回請求結(jié)果
})
啟動服務(wù)端（命令截圖）
image.png
這里使用 node-dev命令啟動服務(wù)庶艾，如果沒有安裝，可先使用命令全局安裝一下擎勘，“npm i node-dev -g” 咱揍。
訪問測試（截圖）
image.png
拓展：從APP項目（前端）如何訪問服務(wù)器？
說明：
APP項目地址及端口是：localhost:8081
服務(wù)器地址及端口是：localhost:3000
地址或者端口不同棚饵，就會涉及跨域問題煤裙。解決跨域問題掩完，可從服務(wù)器端或者項目前端解決。
1硼砰、demo.vue 代碼如下：
<template>
<view class="content">
<h1>demo頁面</h1>
<view class="btn">
<button type="primary" @click="myClick">請求數(shù)據(jù)</button>
<text>從node服務(wù)器上請求數(shù)據(jù),只要域名或者ip不同或者端口號不同且蓬，都涉及<text class="orangered">跨域</text>問題。</text>
</view>
<!-- 將拿到的數(shù)據(jù)渲染到頁面题翰，循環(huán)遍歷數(shù)組 -->
<view>
<text v-for="(item,index) in list" :key="index">{{item}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[] //城市列表
}
},
methods: {
myClick(){
uni.request({
url:"http://localhost:3000/api/list",
success:res=>{
console.log(res);
var list = res.data;
this.list = list;
}
})
}
}
}
</script>
<style>
.content{
padding: 20rpx;
}
.btn{
margin: 20rpx 0;
}
h1{
background-color: yellow;
text-align: center;
}
.orangered{
background-color: orangered;
color: white;
padding: 0 10rpx;
}
text{
display: inline-block;
background-color: deepskyblue;
padding: 10rpx 20rpx;
margin: 20rpx;
border-radius: 10rpx;
color: white;
}
</style>
運行到微信開發(fā)工具恶阴，點擊請求按鈕，控制臺打印輸出結(jié)果豹障》胧拢——成功獲取數(shù)據(jù)
image.png
運行到H5端，報錯血公！因為存在跨域問題昵仅。如下圖所示：
image.png
解決跨域問題的兩種方法：
1、服務(wù)器端解決方法
步驟：
（1）服務(wù)器端安裝 cors
image.png
image.png
（2）配置index.js文件（引入cors并使用cors）
image.png
node項目的index.js 代碼如下：
//1引入express
const express=require("express");
//引入 cors
const cors=require("cors");
//2實例化
const app=express();
app.use(cors()); //注意 cors() 有括號
//3監(jiān)聽一個端口3000
app.listen(3000,()=>{//為了監(jiān)聽服務(wù)正在運行累魔，在控制臺打印一個內(nèi)容
console.log("----------api 3000--------------")
})
//4請求一個路由 "/api/list"
app.get("/api/list",(req,res)=>{
var arr=["北京","上海","廣州","深圳","安徽合肥"];
res.json(arr); //返回請求結(jié)果
})
（3）H5端測試請求數(shù)據(jù)——成功請求到數(shù)據(jù)
image.png
注意：
因為有緩存的原因摔笤，即使服務(wù)器端關(guān)閉 cors 引入和使用，已經(jīng)訪問的數(shù)據(jù)依然能夠再次被看到垦写〖耄可以通過清除瀏覽器緩存的方法，清除 訪問到本地的數(shù)據(jù)梯澜。
2、前端解決方法—— 配置代理渴析，解決跨域
（1）先關(guān)閉 cors 服務(wù)
image.png
（2）配置APP項目中 manifest.json 文件晚伙，設(shè)置代理規(guī)則。（參照： webpack.config.js）
image.png
image.png
注意：每次修改 manifest.json 之后都要重啟服務(wù)俭茧。
APP項目中 manifest.json文件關(guān)于H5端代碼如下：
"h5" : {
"title" : "H5",
"devServer": {
"proxy":{
//配置代理：只要 遇到 /api 都改為 http://localhost:3000
"/api":{
"target":"http://localhost:3000"
}
}
}
}
（3）重啟H5端服務(wù)（重新運行）
image.png
至此咆疗，H5端就可以順利訪問服務(wù)器的數(shù)據(jù)
但是，小程序端又又不可以訪問了母债，接下來繼續(xù)優(yōu)化并解決小程序端的訪問午磁。
（4）利用平臺判斷 完善demo.vue
image.png
APP項目的demo.vue 代碼如下：
<template>
<view class="content">
<h1>demo頁面</h1>
<view class="btn">
<button type="primary" @click="myClick">請求數(shù)據(jù)</button>
<text>從node服務(wù)器上請求數(shù)據(jù),只要域名或者ip不同或者端口號不同，都涉及<text class="orangered">跨域</text>問題毡们。</text>
</view>
<!-- 將拿到的數(shù)據(jù)渲染到頁面迅皇，循環(huán)遍歷數(shù)組 -->
<view>
<text v-for="(item,index) in list" :key="index">{{item}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[] //城市列表
}
},
methods: {
myClick(){
var url = "/api/list"; //先給 url設(shè)置默認(rèn)值
// 平臺判斷 - 如果不是H5 則 url = "http://localhost:3000/api/list"
// #ifndef H5
var url = "http://localhost:3000/api/list"
// #endif
uni.request({
// url:"http://localhost:3000/api/list",
// url:"/api/list",
url:url,
success:res=>{ //請求成功時，執(zhí)行以下代碼
console.log(res);
var list = res.data;
this.list = list;
},
fail:err=>{ //請求失敗時衙熔，執(zhí)行以下代碼
console.log(err)
}
})
}
}
}
</script>
<style>
.content{
padding: 20rpx;
}
.btn{
margin: 20rpx 0;
}
h1{
background-color: yellow;
text-align: center;
}
.orangered{
background-color: orangered;
color: white;
padding: 0 10rpx;
}
text{
display: inline-block;
background-color: deepskyblue;
padding: 10rpx 20rpx;
margin: 20rpx;
border-radius: 10rpx;
color: white;
}
</style>
