学做微信小程序-每日食堂菜单(PHP上传excel至数据库)

作为一个食堂餐饮服务小程序，没有菜单展示怎么行，于是，Sham就试着给小程序添加今日菜单展示功能。

首先要做的是将菜单上传到服务器数据库中，这里，我们可以使用PHPEXCEL，这样能省去学习研究PHP代码的功夫。需要的可以现在附件，里面包含全套源文件。

上传之前，需要制作1个菜单excel表模板，这样也方便后期定期更新（Sham公司是每周更新一次，然后每日有4餐，所以模板是4餐及对应4个窗口，可以自行修改）。附件中提供了文件，就不上图了。

然后就是将菜单excel上传并导入到服务器数据库，通过访问附件中foodmenu_upload.html直接上传即可（原谅Sham没有做页面美化）

下面就是通过微信小程序来读取数据库数据了，使用 wx.request ，根据当天日期来通过后台php读取数据库数据，js代码如下：

  data: {
    foodmenu:[],
    hasfoodmenu:false,
  },
onLoad: function (res) {
    var that = this;
    var date = new Date();
    var n_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    wx.request({
      url: 'https://你的网址/foodmenu.php?n_date=' + n_date, //接口地址
      data: { },
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          foodmenu: res.data.foodmenu,//将表中查询出来的信息传给foodmenu
          n_date: n_date,
          hasfoodmenu:true,
        })
      }
    })
 },

然后就是前台渲染展示了，wxml代码如下：

<view class="main">
  <view wx:if="{{!hasfoodmenu}}">
    <view class="m_items">
      <view class="m_content">
     餐厅暂未提供今日菜单，请耐心等候或联系人事行政部！
      </view>
    </view>
  </view>
  <!--如果数据库有菜单信息，则显示-->
  <block wx:else>
    <view wx:for="{{foodmenu}}" wx:key="foodmenu" class='menulist'>             
      <view class="title">每日菜单{{date1}}</view>
      <view class="subtitle">{{item.m_date}}\t{{item.m_week}}</view>
      <view class="m_items">
        <view class="m_tips">大荤二选一，以上面可添加，干锅两份卡一份。</view>
        <view class="m_tips">如市场采购不到的菜品，将可能调换。</view>
      </view>
      <!--早餐菜单-->
      <view class="m_items"> 
        <view class="m_title">早餐菜单</view>
          <view class="m_content">
          <view class="m_window">1号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.b_6}}</view>
          </view>
        </view>
        <view class="m_content">
          <view class="m_window">2号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.b_1}}</view>
            <view class="m_name">{{item.b_2}}</view>
            <view class="m_name">{{item.b_3}}</view>
            <view class="m_name">{{item.b_4}}</view>
            <view class="m_name">{{item.b_5}}</view>
          </view>
        </view>
      </view>

      <!--午餐菜单-->
      <view class="m_items"> 
        <view class="m_title">午餐菜单</view>
        <view class="m_content">
          <view class="m_window">1号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.l1_1}}</view>
            <view class="m_name">{{item.l1_2}}</view>
          </view>
        </view>
        
        <view class="m_content">
          <view class="m_window">2号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.l2_d1}}</view>
            <view class="m_name">{{item.l2_d2}}</view>
            <view class="m_name">{{item.l2_x1}}</view>
            <view class="m_name">{{item.l2_s1}}</view>
            <view class="m_name">{{item.l2_s2}}</view>
            <view class="m_name">{{item.l2_td}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">3号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.l3_1}}</view>
            <view class="m_name">{{item.l3_2}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">4号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.l4_1}}</view>
            <view class="m_name">{{item.l4_2}}</view>
          </view>
        </view>
      </view>	

      <!--晚餐菜单-->
      <view class="m_items"> 
        <view class="m_title">晚餐菜单</view>
        <view class="m_content">
          <view class="m_window">1号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.d1_1}}</view>
            <view class="m_name">{{item.d1_2}}</view>
          </view>
        </view>
        
        <view class="m_content">
          <view class="m_window">2号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.d2_d1}}</view>
            <view class="m_name">{{item.d2_d2}}</view>
            <view class="m_name">{{item.d2_x1}}</view>
            <view class="m_name">{{item.d2_s1}}</view>
            <view class="m_name">{{item.d2_s2}}</view>
            <view class="m_name">{{item.d2_td}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">3号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.d3_1}}</view>
            <view class="m_name">{{item.d3_2}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">4号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.d4_1}}</view>
            <view class="m_name">{{item.d4_2}}</view>
          </view>
        </view>
      </view>	
        
      <!--夜宵菜单-->
      <view class="m_items"> 
        <view class="m_title">夜宵菜单</view>
        <view class="m_content">
          <view class="m_window">1号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.md1_1}}</view>
            <view class="m_name">{{item.md1_2}}</view>
          </view>
        </view>
        
        <view class="m_content">
          <view class="m_window">2号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.md2_d1}}</view>
            <view class="m_name">{{item.md2_d2}}</view>
            <view class="m_name">{{item.md2_x1}}</view>
            <view class="m_name">{{item.md2_s1}}</view>
            <view class="m_name">{{item.md2_s2}}</view>
            <view class="m_name">{{item.md2_td}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">3号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.md3_1}}</view>
            <view class="m_name">{{item.md3_2}}</view>
          </view>
        </view>

        <view class="m_content">
          <view class="m_window">4号窗口</view>
          <view class="m_list">
            <view class="m_name">{{item.md4_1}}</view>
            <view class="m_name">{{item.md4_2}}</view>
          </view>
        </view>
      </view>	


    </view>
  </block>
</view>

顺带附上wxss代码：

page{
  background-color: #f0f0f0;
  width: 100%;
  height:100%;
  padding-top:10px;
}
.main{
  align-items: center;
  justify-content: center;
  margin:auto;
  padding:10px;
}
.title{
  width:95%;
  height:20px;
  margin:auto;
  padding:10px 0px;
  font-size:18px;
  font-weight:bold;
  color:#fff;
  background-color: #50aaff;
  border-radius:5px;
  text-align: center;
  box-shadow:0 6rpx 10rpx 2rpx #DCDCDC;/*for Android*/
  -webkit-box-shadow:0px 3px 5px 1px #DCDCDC;/*for IOS*/
}
.subtitle{
  width:95%;
  margin-top:-15px;
  margin-bottom:10px;
  font-size:10px;
  font-weight:bold;
  color:#fff;
  text-align: right;
}
.m_items{
  width:95%;
  margin:10px auto;
  padding:0px 0px 5px;
  border-radius:5px;
  background-color: #fff;
  box-shadow:0 6rpx 10rpx 2rpx #DCDCDC;/*for Android*/
  -webkit-box-shadow:0px 3px 5px 1px #DCDCDC;/*for IOS*/
}
.m_title{
  width:96%;
  height:20px;
  margin:auto;
  padding:5px 0px 5px 10px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  background-color: #50aaff;
  border-radius:5px 5px 0px 0px;
  text-align: left; 
  border:1px solid #50aaff;
}
.m_content{
  display: flex;
  flex-direction:row;
  margin:auto;
  padding:0px;
  background-color: #fff;
}
.m_window{
  width:30px;
  padding:5px;
  margin:0px 0px 0px 5px;
  font-size:12px;
  font-weight:bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m_list{
  width:80%;
  padding:5px;
  flex-direction: row;
  display: flex;
  margin:0px;
}
.m_name{
  padding:5px 0px;
  margin-right:8px;
  border-bottom: 2rpx dashed #50aaff;
  font-size:11px;
  line-height: 11px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m_tips{
  padding:5px 10px;
  margin-top:5px;
  font-size:11px;
  line-height: 11px;
  text-align: left;
}

这样，就可以让大家看到当日菜单了，当然，如果你需要让别人看到其他日期的菜单，可以通过传对应日期值到后台读取对应菜单，Sham也还没有研究透，就暂时先不放代码了。

最后附上phpexcel及对应上传文件，以及对应mysql文件。