主页动态页面开发

主页设计思路：
设计的思路：
（1）后台数据库设计，根据页面的功能可知，需要的表为章节信息表，表中需要的数据包括章节名称、编号、注释信息、图片地址
（2）后台设计：开发好chap.js页面调用数据库表中的内容，通过adapter.js实现与数据库的连接；开发好后在浏览器端能够顺利访问到http://127.0.0.1:8360/home/chap/pag
（3）前端设计：通过index.js实现获取http://127.0.0.1:8360/home/chap/pag所输出的信息，并且定义一个list数组存放有用的信息；页面中通过block与{{}}实现信息的有用输出
系统执行的思路：
（1）页面调用index.js的数据，index.js调用http://127.0.0.1:8360/home/chap/page中的数据
（2）http://127.0.0.1:8360/home/chap/page访问数据库，查询章节表中的信息
（3）数据库进行信息的响应给后台
（4）后台将数据返回给index.js
(5)页面调用js的信息
index.js关键性代码：
index.js功能是获取后台与数据库想连接

getChapList: function () {
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:8360/home/chap/page',         //此页面存放有与数据库连接后返回的数据
      success: function (res) {
        var result = res.data.data.data;
        console.info(result)    //拿到列表
        var ChapList = [];
        var imgs = [];
        for (var i = 0; i < result.length; i++) {
          imgs.push(result[i].chapImg);
          //获取页面需要看到的章节对象，且存放于数组中
          ChapList.push({
            chap_id: result[i].id,
            img: result[i].chapImg,
            chapName: result[i].chapName,
            chapNo: result[i].chapNo,
            chapIns: result[i].chapIns,
          })
        }
        //把处理的数据保存到仓库中
        that.setData({
          list: ChapList,
          imgUrls: imgs
        })
      }
    }

index.wxml核心代码：
主要采用block实现遍历，{{}}访问js中的定义的数组中的对象

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color='gray' indicator-active-color='#dc3023'>
				<block wx:for="{{imgUrls}}">    <!-- 轮播图使用下面章节的图片，block对其进行遍历-->
					<swiper-item>
						<image src="{{item}}" class="slide-image" width="355px" height="150px" />
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="cour-list">
			<block wx:for="{{list}}">
				<view class="cour">
					<view class="left">
						<image src="{{item.img}}" class="slide-image"></image>   <!--调用js文件下定义的img-->
					</view>

					<view class="center">
						<text class="chap_log">{{item.chapNo}}</text>
						<navigator url="/collect/collect" hover-class="navigator-hover"><text class="chap_name">{{item.chapName}}
							</text></navigator>
						<text class="chap_des">{{item.chapIns}}</text>
					</view>
				</view>
			</block>

后台：
chap.js页面核心代码：

 async pageAction(){
        let page=this.get("page")||0;  //获取当前页，若为空，赋值为0
        let size=this.get("size")||5;  //获取页面大小。若为空，赋值为5

        think.logger.info(page);
        think.logger.info(size);

        //分页查询数据，且按照id的顺序进行输出数据的排序
        let list=await this.model("chap_name").page(this.get('page')).order("id").countSelect();

        return this.success(list);
    }