开发前端App最先需要被实现的功能是：与本地主机上已经布置在IIS服务上的后端数据实现跨域(Cores)交互操作，这也是前端App作为前端工程性项目存在的根本意义和需求，因此需要首先对上一章中示例：22-09-24-04_uniAppVue3(初识HbuilderX之前移动前端App开发)进行重构，把网络后端数据实现跨域(Cores)交互实现重构为本地主机数据实现跨域(Cores)交互实现。

1 重构前端项目

1.1 重构main.js文件中的根域名为本地主机域名

//设置后端服务的根域名，“https://api-hmugo-web.itheima.net”可以提供JSON格式的数据，以供程序测试使用，本人以验证该后端服务能够提供数据。

//也可以把该根域名修改为自己，通过IIS部署的根域名例如：“http://localhost:8080”。

$http.baseUrl = 'http://localhost:8080'

1.2 重构pages\index\index.vue视图文件中的根域名为本地主机域名

<template>

    <view class="content">

         <view v-for="(list,index) in list" :key='index'>

                    编号:{{list.id}}角色名：{{list.roleName}}说明：{{list.description}}创建时间：{{list.createTime}}状态：{{list.enable}}

        </view>

    </view>

</template>

<script>

    export default

    {

        data()

        {

            return {

                title: 'Hello',

                list: [],//第1步：声明数据局部变量，用于存储从服务器端获取的数据。

            }

        },

        onLoad()

        {

            //第3步：如果vue视图页面绑定有从指定方法获取的数据，则在vue视图页面渲染显示前，通过指定方法获取数据，为vue视图页面渲染显示提供数据支撑。

            this.getFloorList();

        },

        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”。

            async getFloorList()

            {

                //根据绝对路由在浏览器中的JSON编码格式的数据，重构“const”变量。

                const {data:{status,response}} = await uni.$http.get('/role/get');

                console.log(status);

                if(status !== 200)

                    return uni.$showMsg();

                this.list= response.data;

                console.log(this.list);

            },

        }

    }

</script>

1.3 错误异常的执行结果

       在重构完成后执行项目浏览器控制台中会显示错误异常信息：“Access to XMLHttpRequest at 'http://localhost:8080/role/get' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”，效果如下图所示：

2 重构后端项目

    上述异常有两种解决方案：

  1. 通过向浏览器中安装指定的插件，参考：“(1条消息) 解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head_一觉睡过头的菜鸡的博客-CSDN博客_access to xmlhttprequest”，这种解决方案本人未测试。
  2. 重构后端项目：“22-09-22-02_UserVue(Vue服务器(后)端Swagger定义实现与发布部署)”

2.1 自定义管道中间件类：CorsMiddleware

/// <summary>

    /// 【跨域访问中间件】

    /// </summary>

    /// <remarks>

    /// 摘要：

    ///     该管道中间件类主要为了解决在前端uni-app项目跨域访问当前后端项目时，浏览器或App中会出现异常信息：

    /// “Access to XMLHttpRequest at 'http://localhost:8080/role/get' from origin 'http://localhost:3000' has been blocked by CORS policy:

    /// No 'Access-Control-Allow-Origin' header is present on the requested resource.”，从而导致前端uni-app项目不能与当前后端项目跨域的数据交互操作。

    /// </remarks>

    public class CorsMiddleware

    {

        #region 拷贝构造方法

        /// <summary>

        /// 【下1个】

        /// </summary>

        /// <remarks>

        /// 摘要：

        ///     .Net(Core)框架内置管道中的下1个管道中间件实例。

        /// </remarks>

        private readonly RequestDelegate _next;

        ///<param name="next">.Net(Core)框架内置管道中的下1个管道中间件实例。</param>

        /// <summary>

        /// 【拷贝构造方法】

        /// </summary>

        /// <remarks>

        /// 摘要：

        ///    通过该构造方法中的参数实例，实例化.Net(Core)框架内置管道中的下1个管道中间件实例。

        /// </remarks>

        public CorsMiddleware(RequestDelegate next)

        {

            _next = next;

        }

        #endregion

        #region 方法

        ///<param name="context">HTTP上下文实例。</param>

        /// <summary>

        /// 【调用】

        /// </summary>

        /// <remarks>

        /// 摘要：

        ///    通过该方法向.Net(Core)框架内置管道中集成当前管道中间件，从而解决指定错误异常：

        ///“Access to XMLHttpRequest at 'http://localhost:8080/role/get' from origin 'http://localhost:3000' has been blocked by CORS policy:

        /// No 'Access-Control-Allow-Origin' header is present on the requested resource.”，从而导致前端uni-app项目不能与当前后端项目跨域。

        ///    最后如果.Net(Core)框架内置管道中在当前管道中间件之后，还有其它管道中间件被集成在.Net(Core)框架内置管道中，则.Net(Core)框架内置管道中继续向下执行下1个管道中间件。

        /// </remarks>

        public async Task Invoke(HttpContext context)

        {

            if (!context.Response.Headers.ContainsKey("Access-Control-Allow-Origin"))

            {

                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");

            }

            await _next(context);

        }

        #endregion

    }

2.2 重构 Program.cs

var app = builder.Build();

//把自定义管道中间中集成到.Net(Core)框架内置管道中，解决在前端uni-app项目跨域访问当前后端项目时，浏览器或App中会出现异常信息：

// “Access to XMLHttpRequest at 'http://localhost:8080/role/get' from origin 'http://localhost:3000' has been blocked by CORS policy:

// No 'Access-Control-Allow-Origin' header is present on the requested resource.”，从而导致前端uni-app项目不能与当前后端项目跨域的数据交互操作。

app.UseMiddleware<CorsMiddleware>();

2.3 重新对后端项目进行发布部署

   关于后端项目必须在最后进行发布部署操作，并通过IIS配置相应的网站，请查看本人的文章：“https://blog.csdn.net/zhoujian_911/article/details/126864660”。

2.4 部署完成后前端的执行结果

对以上功能更为具体实现和注释见：22-09-25-05_UserVue( uin-app本地主机数据跨域(Cors)数据交互实现之--后端)。

3 通过第3方组件速构建vue视图页面。

    uin-app的vue视图页面中所包含的内置标签极少，为了页面的渲染显示需要开发者通过遵循自定义组件的方式，把组件实例化为自定义标签，添加到指定的vue视图页面中，从而实现vue视图以多种形式对绑定的数据进行渲染显示。

    实际上<table>及其相关标签，uin-app的vue视图页面内置标签中就是存在的，因此如果需要把绑定数据，以table样式渲染显示则需要通过遵循自定义组件的方式来实现，但为了速构建vue视图页面，HbuilderX为我们提供了另外一种好的选择，在项目中大量导入第3方组件，下面将通过“uni-table 表格”和“uni-tag 标签”组件的导入为示例，讲述怎样在项目通过导入第3方组件，来快速构建vue视图页面。

3.1 准备工作

    “uni-table 表格”第3方组件导入地址：uni-table 表格 - DCloud 插件市场。

    “uni-tag 标签”第3方组件导入地址：uni-tag 标签 - DCloud 插件市场。

3.1.1 为HbuilderX安装插件：“uniModules插件”

    HbuilderX在为项目导入第3方组件时首先需要为HbuilderX开发环境安装“uniModules插件”，否则就会在导入时出现错误信息：“当前操作依赖插件【uni_modules】,请安装后再试”，如下图所示： 

出现上述错误的原因有两个：

  1. 已安装了“uniModules插件”，但未在HbuilderX开发环境生效。

这种方式的解决方案是：先关闭HbuilderX开发环境后，再打开HbuilderX开发环境，已安装了“uniModules插件”，即可生效。

2、HbuilderX开发环境未安装“uniModules插件”，下面将讲述“uniModules插件”的安装，安装步骤如下图所示：

查看是否是HbuilderX开发环境已经安装“uniModules插件”，但未生效。

       为HbuilderX开发环境已经安装“uniModules插件”，注意：安装完成后，要立即关闭HbuilderX开发环境后，再打HbuilderX开发环境，以防止上述错误的产生。

3.2 为当前项目导入第3方组件：“uni-table 表格”

3.2.1 打开网址：“uni-table 表格 - DCloud 插件市场”

3.2.2 导入后在项目中自动添加“Uni_modules”文件夹及其子文件夹和文件

    “Uni_modules”文件夹中的子文件夹可分为：公共组件和特定组件，为什么要这样分类，这将在“uni-tag 标签”第3方组件导入操作中进行说明，如下图所示：

3.3 为当前项目导入第3方组件：“uni-tag 标签”

    同上打开地址：uni-tag 标签 - DCloud 插件市场。，点击页面上的插件导入按钮。

    在为当前项目导入第3方组件：“uni-tag 标签”时，因为上面已经导入了“uni-table 表格”组件，HbuilderX会弹出“文件内容对比合并”对话框,让开发者进行文件的对比合并，如果你不是对你所导入的所有组件的依赖文件都十分的了解，则最好先取消该对话框中的所有公共组件复选框中的选择，再点击“合并”按钮，这也是我把子文件夹分为：公共组件和特定组件的主要原因，如下图所示。

将“uni-tag 标签”第3方组件导入项目，如下图所示：

3.4 最终形态的pages\index\index.vue视图文件

<template>

    <view>

        <view class="uni-container">

            <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 list" :key="index">

                    <uni-td>{{ item.id }}</uni-td>

                    <uni-td>

                        <view class="name">{{ item.roleName }}</view>

                    </uni-td>

                    <uni-td align="center">{{ item.description }}</uni-td>

                    <uni-td align="center">

                        <view v-if="item.createTime">{{ dateFormat(item.createTime) }}</view>

                    </uni-td>

                    <uni-td align="center">

                        <view v-if="item.enabled">

                            <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-tr>

            </uni-table>

        </view>

    </view>

</template>

<script>

    export default

    {

       

        data()

        {

            return {

                title: 'Hello',

                list: [],//第1步：声明数据局部变量，用于存储从服务器端获取的数据。

               

                //下面两个为第3方“uni-tag”组件的局部变量，用于与当前vue视图页面中的指定标签进行绑定，为当前vue视图页面渲染显示提供数据支撑。

                type: "default",

                inverted: false,

            }

        },

        onLoad()

        {

            //第3步：如果vue视图页面绑定有从指定方法获取的数据，则在vue视图页面渲染显示前，通过指定方法获取数据，为vue视图页面渲染显示提供数据支撑。

            this.getFloorList();

        },

        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”。

            async getFloorList()

            {

                //根据绝对路由在浏览器中的JSON编码格式的数据，重构“const”变量。

                const {data:{status,response}} = await uni.$http.get('/role/get');

                console.log(status);

                if(status !== 200)

                    return uni.$showMsg();

                this.list= response.data;

                console.log(this.list);

            },

           

            //日期数据格式化输出渲染显示。

            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);

                types.splice(index, 1);

                let randomIndex = Math.floor(Math.random() * 4);

                this.type = types[randomIndex];

            },

            setInverted() {

                this.inverted = !this.inverted;

            },          

        }

    }

</script>

3.5 执行效果

      注意：

        到此为止“VSCodeVue3初识”系列已经结束，本人把word版的内容已经上传到了网上，有兴趣的讲到：“(3条消息) VSCodeVue3初识.docx-电子商务文档类资源-CSDN文库”下载。

对以上功能更为具体实现和注释见：22-09-25-06_uniAppVue3(uin-app本地主机数据跨域(Cors)数据交互实现之--前端)。

# uni-app
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB的向量化处理技术

avatar 华为开发者空间
cover

二十载岁月如磐，一位高校女教师的技术坚守之路

avatar 华为开发者空间