9.1 前后端交互

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

npm install -g nodemon

2. 修改 npm 和 npm.cmd 两个 文件的 内部 内容。

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

3. 执行下面的 cmd 指令

npm install -g color-name --unsafe-perm=true

4. 来到 我们的 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>