微信小程序 09 前后端交互

9.1 前后端交互


  1. 首先 我们 要 在 安装了 node.js 的环境下 安装 nodemon 这个插件。
npm install -g nodemon

在这里插入图片描述
2. 修改 npm 和 npm.cmd 两个 文件的 内部 内容。

prefix -g 修改为 prefix --location=global 即可。

  1. 执行下面的 cmd 指令
npm install -g color-name --unsafe-perm=true
  1. 来到 我们的 node.js 服务器的项目文件夹,直接 npm start 运行。
npm start

在这里插入图片描述


9.2 banner 轮播图数据的获取

wx.request(对象)

这个对象有特别多的属性,详细的可以 去看 官方文档

在这里插入图片描述

gttp:localhost:3000/banner

    onLoad(options) {
        wx.request({
           url: 'http://localhost:3000/banner',
           data:{
               type:2
           },
           success: (res) =>{
             console.log('请求成功',res);
           },
           fail: (res) => {
               console.log('请求失败',res);
           }
        });
    },

在这里插入图片描述

它会告诉我们 你这 url 不符合 规范呀。就会报错。

注意点:

  • 协议必须是 https 协议
  • 一个接口 最多 只能配置 20个 域名
  • 并发限制上限要求 只能是 十个。

但是 如果在 开发过程中,我们是可以 不用 特别遵循 这些 规范的,但是 如果要是 发布的话。就必须要 遵循了!!

直接 在 详情里面,选择上 不校验 https 就行了。

在这里插入图片描述

你看 这样的话, 就请求 成功了。

在这里插入图片描述

 data: {
        banners:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        wx.request({
           url: 'http://localhost:3000/banner',
           data:{
               type:2
           },
           success: (res) =>{
             console.log('请求成功',res);
             this.setData({
                 banners:res.data.banners
             });
             console.log(this.data.banners);
           },
           fail: (res) => {
               console.log('请求失败',res);
           }
        });
    },
    <!-- 轮播图区域-->
    <swiper class="index-swiper" indicator-dots indicator-color='ivory'	indicator-active-color='#d43c33' autoplay>
        <swiper-item wx:for="{{banners}}" wx:for-item="banner">
            <image src="{{banner.pic}}"></image>
        </swiper-item>
    </swiper>

在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值