利用node.js搭建服务端
一、新建项目目录并且利用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）并启用服务器
1、配置入口文件（index.js）
//（1）引入express
const express=require("express");
//（2）实例化
const app=express();
//（3）监听一个端口3000
app.listen(3000,()=>{//为了监听服务正在运行，在控制台打印一个内容
console.log("----------api 3000-------------")
})
//（4）请求一个路由 "/api/list"
app.get("/api/list",(req,res)=>{
var arr = ["北京","上海","广州","深圳","安徽合肥"];
res.json(arr); //返回请求结果
})
启动服务端（命令截图）
image.png
这里使用 node-dev命令启动服务，如果没有安装，可先使用命令全局安装一下，“npm i node-dev -g” 。
访问测试（截图）
image.png
拓展：从APP项目（前端）如何访问服务器？
说明：
APP项目地址及端口是：localhost:8081
服务器地址及端口是：localhost:3000
地址或者端口不同，就会涉及跨域问题。解决跨域问题，可从服务器端或者项目前端解决。
1、demo.vue 代码如下：
<template>
<view class="content">
<h1>demo页面</h1>
<view class="btn">
<button type="primary" @click="myClick">请求数据</button>
<text>从node服务器上请求数据,只要域名或者ip不同或者端口号不同，都涉及<text class="orangered">跨域</text>问题。</text>
</view>
<!-- 将拿到的数据渲染到页面，循环遍历数组 -->
<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>
运行到微信开发工具，点击请求按钮，控制台打印输出结果。——成功获取数据
image.png
运行到H5端，报错！因为存在跨域问题。如下图所示：
image.png
解决跨域问题的两种方法：
1、服务器端解决方法
步骤：
（1）服务器端安装 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监听一个端口3000
app.listen(3000,()=>{//为了监听服务正在运行，在控制台打印一个内容
console.log("----------api 3000--------------")
})
//4请求一个路由 "/api/list"
app.get("/api/list",(req,res)=>{
var arr=["北京","上海","广州","深圳","安徽合肥"];
res.json(arr); //返回请求结果
})
（3）H5端测试请求数据——成功请求到数据
image.png
注意：
因为有缓存的原因，即使服务器端关闭 cors 引入和使用，已经访问的数据依然能够再次被看到。可以通过清除浏览器缓存的方法，清除 访问到本地的数据。
2、前端解决方法—— 配置代理，解决跨域
（1）先关闭 cors 服务
image.png
（2）配置APP项目中 manifest.json 文件，设置代理规则。（参照： webpack.config.js）
image.png
image.png
注意：每次修改 manifest.json 之后都要重启服务。
APP项目中 manifest.json文件关于H5端代码如下：
"h5" : {
"title" : "H5",
"devServer": {
"proxy":{
//配置代理：只要 遇到 /api 都改为 http://localhost:3000
"/api":{
"target":"http://localhost:3000"
}
}
}
}
（3）重启H5端服务（重新运行）
image.png
至此，H5端就可以顺利访问服务器的数据
但是，小程序端又又不可以访问了，接下来继续优化并解决小程序端的访问。
（4）利用平台判断 完善demo.vue
image.png
APP项目的demo.vue 代码如下：
<template>
<view class="content">
<h1>demo页面</h1>
<view class="btn">
<button type="primary" @click="myClick">请求数据</button>
<text>从node服务器上请求数据,只要域名或者ip不同或者端口号不同，都涉及<text class="orangered">跨域</text>问题。</text>
</view>
<!-- 将拿到的数据渲染到页面，循环遍历数组 -->
<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设置默认值
// 平台判断 - 如果不是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=>{ //请求成功时，执行以下代码
console.log(res);
var list = res.data;
this.list = list;
},
fail:err=>{ //请求失败时，执行以下代码
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>
