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

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

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

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

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

2 小问题大麻烦

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

2.1 解决方案

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

2.2.2 用本机IP取代“localhost”

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

    部署配置请查看本人的文章：“https://blog.csdn.net/zhoujian_911/article/details/126864660”。

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(模拟、器真机对后端数据的获取)。