利用node.js搭建服务端
一、新建项目目录并且利用node.js初始化项目 (截图)
二、新建一个入口文件 index.js (截图)
三、安装一个express依赖 (截图)
如果安装太慢,建议将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
四、配置入口文件(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); //返回请求结果
})
启动服务端(命令截图)
这里使用 node-dev命令启动服务,如果没有安装,可先使用命令全局安装一下,“npm i node-dev -g” 。
访问测试(截图)
拓展:从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>
运行到微信开发工具,点击请求按钮,控制台打印输出结果。——成功获取数据
运行到H5端,报错!因为存在跨域问题。如下图所示:
解决跨域问题的两种方法:
1、服务器端解决方法
步骤:
(1)服务器端安装 cors
(2)配置index.js文件(引入cors并使用cors)
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端测试请求数据——成功请求到数据
注意:
因为有缓存的原因,即使服务器端关闭 cors 引入和使用,已经访问的数据依然能够再次被看到。可以通过清除浏览器缓存的方法,清除 访问到本地的数据。
2、前端解决方法—— 配置代理,解决跨域
(1)先关闭 cors 服务
(2)配置APP项目中 manifest.json 文件,设置代理规则。(参照: webpack.config.js)
注意:每次修改 manifest.json 之后都要重启服务。
APP项目中 manifest.json文件关于H5端代码如下:
"h5" : {
"title" : "H5",
"devServer": {
"proxy":{
//配置代理:只要 遇到 /api 都改为 http://localhost:3000
"/api":{
"target":"http://localhost:3000"
}
}
}
}
(3)重启H5端服务(重新运行)
至此,H5端就可以顺利访问服务器的数据
但是,小程序端又又不可以访问了,接下来继续优化并解决小程序端的访问。
(4)利用平台判断 完善demo.vue
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>