2章 模拟器/真机对后端数据的获取之前端实现

    在由HbuilderX创建的前端uni-app项目获取.Net(Core)Api+ Swagger+ Cors(跨域)所创建项目的后端数据时，在浏览器Chrome上能名获取后端的数据，但是模拟器/真机却不能，下面的实现为此提供1个解决方案。

1 uni-app前端项目直接访问后端

    在前后端分离实现中，uni-app前端项目是能够直接对后端项目进行访问，以实现前后端项目之间的快速调试。在uni-app前端项目访问后端项项目时必须先按F5启动后端项目，如下图所示：

es前端模拟器安装进win10_es前端模拟器安装进win10

2 小问题大麻烦

    当本人在渲染实现时发现Chrome浏览器可以获取后端数据，但模拟器/真机却不能，这是一个小问题，却是一个大麻烦，因为前后端分离实现的最终需求就是为了为手机端开发相应的App，如果App连后端数据都不能获取那么，对于前后端分离实现的学习、应用及其其后的实现也就没有了任何的意义，所以说这个小问题是个大麻烦，这个问题的解决也方案也是否的简单直接，但是如果你不知道却十分的困扰，这个小问题就困扰了我一周的时间，如下图所示：

es前端模拟器安装进win10_HbuilderX_02

2.1 解决方案

2.1.1 通过“ipconfig”命令获取本机IP

es前端模拟器安装进win10_Net6_03

2.2.2 用本机IP取代“localhost”

es前端模拟器安装进win10_uni-app_04

注意：如果使用IP地址后端，则必先把后端部署到IIS中。

    部署配置请查看本人的文章：“”。

2.2.3 \pages\index\index.vue

<template>
<view class="uni-container" text="GET方法获取">
<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据">
<uni-tr>
<uni-th width="150" align="center">编号</uni-th>
<uni-th width="150" align="center">姓名</uni-th>
<uni-th width="150" align="center">密码</uni-th>
<uni-th width="150" align="center">状态</uni-th>
<uni-th width="150" align="center">创建时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in uersList" :key="index">
<uni-td>{{ item.id }}</uni-td>
<uni-td>
<view class="name">{{ item.name }}</view>
</uni-td>
<uni-td>{{ item.password }}</uni-td>
<uni-td align="center">
<view v-if="item.isEnable">
<uni-tag text="启用" type="success" style="width: 61px;text-align: center;" />
</view>
<view v-else>
<uni-tag text="禁用" type="error" style="width: 61px;text-align: center;" />
</view>
</uni-td>
<uni-td align="center">
<view v-if="item.createTime">{{ dateFormat(item.createTime) }}</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
<view class="uni-container" text="POST方法获取">
<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据">
<uni-tr>
<uni-th width="150" align="center">编号</uni-th>
<uni-th width="150" align="center">姓名</uni-th>
<uni-th width="150" align="center">密码</uni-th>
<uni-th width="150" align="center">状态</uni-th>
<uni-th width="150" align="center">创建时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in uersListPost" :key="index">
<uni-td>{{ item.id }}</uni-td>
<uni-td>
<view class="name">{{ item.name }}</view>
</uni-td>
<uni-td>{{ item.password }}</uni-td>
<uni-td align="center">
<view v-if="item.isEnable">
<uni-tag text="启用" type="success" style="width: 61px;text-align: center;" />
</view>
<view v-else>
<uni-tag text="禁用" type="error" style="width: 61px;text-align: center;" />
</view>
</uni-td>
<uni-td align="center">
<view v-if="item.createTime">{{ dateFormat(item.createTime) }}</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
uersList: [], //第1步：声明数据局部变量，用于存储从服务器端获取的数据。
uersListPost: [], //第1步：声明数据局部变量，用于存储从服务器端获取的数据。
//下面两个为第3方“uni-tag”组件的局部变量，用于与当前vue视图页面中的指定标签进行绑定，为当前vue视图页面渲染显示提供数据支撑。
type: "default",
inverted: false,
            }
        },
onLoad() {
//第3步：如果vue视图页面绑定有从指定方法获取的数据，则在vue视图页面渲染显示前，通过指定方法获取数据，为vue视图页面渲染显示提供数据支撑。
this.getUersList();
this.getUersListPost();
        },
methods: {
//第2步：通过调用相对路由（“/api/public/v1/home/swiperdata”），获取该服务端控制器方法中的数据，并打印。
//注意：该相对路由（“/api/public/v1/home/swiperdata”）的绝对路由是：“https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata”。
//注意：该相对路由（“/role/get”）的绝对路由是：“http://localhost:8080/role/get”。
//注意：如果使用IP地址后端，则必先把后端部署到IIS中。
async getUersList() {
//根据绝对路由在浏览器中的JSON编码格式的数据，重构“const”变量。
const {
data: {
status,
success,
message,
responseList
                    }
                } = await uni.$http.get('http://192.168.2.230:8080/User/UserList');
if (status !== 200)
return uni.$showMsg();
this.uersList = responseList;
console.log(this.uersList);
            },
async getUersListPost() {
//根据绝对路由在浏览器中的JSON编码格式的数据，重构“const”变量。
const {
data: {
status,
success,
message,
responseList
                    }
                } = await uni.$http.post('http://192.168.2.230:8080/User/UserListPost');
if (status !== 200)
return uni.$showMsg();
this.uersListPost = responseList;
console.log(this.uersListPost);
            },
//日期数据格式化输出渲染显示。
dateFormat(time) {
let date = new Date(time);
let year = date.getFullYear();
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
return year + "-" + month + "-" + day + " " + hours + "：" + minutes + "：" + seconds;
            },
//下面两个为第3方“uni-tag”组件的方法，用于对上面定义的两个局部变量：type、inverted进行赋值，通过相对应的赋值，
//当前vue视图页面中的“uni-tag”组件在渲染显示时，显示为相对应的样式。
setType() {
let types = ["default", "primary", "success", "warning", "error"];
let index = types.indexOf(this.type);
ypes.splice(index, 1);
let randomIndex = Math.floor(Math.random() * 4);
this.type = types[randomIndex];
            },
setInverted() {
this.inverted = !this.inverted;
            },
        },
    }
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
    }
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
    }
.text-area {
display: flex;
justify-content: center;
    }
.title {
font-size: 36rpx;
color: #8f8f94;
    }
</style>

3 后记

    一些问题是1个小问题，但却能产生大影响，同时其解决方案也是一层窗户纸，但是捅不破这层窗户纸，之前所做的一切努力都是白费，甚至造成最坏的结果：放弃。

       当本人从appsettings.json文件的跨域(Cors)配置中看到：

// 注意：http://127.0.0.1:1818 和 http://localhost:1818 是不一样的

这条再平常不过注释信息时不在意，虽然它加上了注意，但通过当前实践使本从对这条注释信息有了深刻的教训。

对以上功能更为具体实现和注释见：221102_02SecondPracticeClient(模拟、器真机对后端数据的获取)。