I'm Sham
一个在通往码农道路上走走停停的行政文员

学做微信小程序-每日食堂菜单(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文件。


温馨提示: 下载地址需要 评论本文刷新本页 才能查看!
(如果评论提交较慢,请耐心等候)
赞(1) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » 学做微信小程序-每日食堂菜单(PHP上传excel至数据库)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    支持一下!

    学习12个月前 (05-22)回复

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏