学院图书管理系统冲刺博客

学院图书管理系统

实现具体学院学生对课程相关书籍的借阅和购买的系统，适用于专业学习和拓展，满足学生对专业书籍的需求。

小组成员

丁静、胡仕臻（撰写人）、李明、卢婧沅、王亚楠

与其它系统相比

该系统同其他系统或其他机构的基本的相互来往关系:用于辅助学院教学资源的重利用和扩充，达到其它系统达不到的专业行，针对专一得学院，学科。同时我们是通过微信小程序来写的系统，利用了其云数据库，开发方便。

遇到的问题

因为没有开发过微信小程序，无论前端还是后端都要现学，总体上我们小组刚开始进度缓慢，要边看学习视频边敲代码，虽然有难度，但是大家无论是谁的问题都一起积极讨论解决，我们还是很有团魂的。哈哈。如下是我们遇到的一些问题。

前端遇到的问题

因为我在团队里主要负责前端代码的编写，我先介绍一些前端遇到的问题。

①JS页面问题
微信js页面不能为空，否则无法找到相应页面，我写代码我又习惯写事能立即看到效果，故该开始我在这个问题上吃了大亏，花了三小时也还是can not find page,后来又找视频学习才知道原来js不能为空，至少要写成如下：

 Page({

  })

否则页面即使在app.json里初始化了，系统也无法找到页面。

②侧栏Item实现
首页最终如图

但开始开发时出现了很多问题。首先第一版时我把item,child-id写在了js文件里，导致整体页面还是能出现的，但是只能展示第一个item，同时后端也无法与之相连，我重写了函数也是难以实现。如图：

图片在第一栏能正常出现，但后面的每一栏都不能出现图片。后续我改了代码

<!--主盒子-->
<view class="container">

  <!-- 左侧栏 -->
  <view class='nav_left'>

    <view class="nav_left_items {{curNav == 1 ? 'active' : ''}}" 
          bindtap="switchRightTab"  data-id="1">
      软件工程
    </view>

    <view class="nav_left_items {{curNav == 2 ? 'active' : ''}}" 
          bindtap="switchRightTab"  data-id="2">
      计算机
    </view>

    <view class="nav_left_items {{curNav == 3 ? 'active' : ''}}" 
          bindtap="switchRightTab" data-id="3">
     教育技术
    </view>

    <view class="nav_left_items {{curNav == 4 ? 'active' : ''}}" 
          bindtap="switchRightTab" data-id="4">
     图书情报与档案管理
    </view>

  </view>

  <!-- 右侧栏 -->
  <view class="nav_right">

    <view wx:if="{{curNav==1}}">
      <view class="nav_right_items">
        <image src="../../images/rj.jpg"></image>
        <text>软件工程导论</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/longyan.png"></image>
        <text>数据库</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/juzi.png"></image>
        <text>数据结构</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/huolongguo.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/caomei.png"></image>
        <text>离散数学</text>
      </view>
    </view>

    <view wx:if="{{curNav==2}}">
      <view class="nav_right_items">
        <image src="../images/xiaweiyi.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/kaixin.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/bigen.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/mangguo.png"></image>
        <text>离散数学</text>
      </view>

    </view>

    <view wx:if="{{curNav==3}}">
      <view class="nav_right_items">
        <image src="../images/huaye.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/shengcai.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/fanqie.png"></image>
        <text>离散数学</text>
      </view>
    </view>
    <view wx:if="{{curNav==4}}">
      <view class="nav_right_items">
        <image src="../images/huaye.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/shengcai.png"></image>
        <text>离散数学</text>
      </view>

      <view class="nav_right_items">
        <image src="../images/fanqie.png"></image>
        <text>离散数学</text>
      </view>
    </view>

  </view>

</view>

终于每一个都能出现了！！！
后来又发现图片如上图的有些图片本身的尺寸问题，我又得去网上重新下载图片。

③实现如图点击框

一开始时我是想按照js的点击函数来实现的，后续发现小程序不支持，后来我浏览博客才知道，小程序里是有专门的函数的，如下

 modalcnt: function () {

    wx.showModal({

      title: '您确定捐书吗',

      content: '确定请把书于春华楼下，我们书框内',

      success: function (res) {

        if (res.confirm) {

          console.log('用户点击确定')

        } else if (res.cancel) {

          console.log('用户点击取消')

        }