一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

点餐小程序的设计与实现(一）

第一章 需求分析

       由于互联网的飞速发展，微信这个在年轻人一代被广泛应用的软件慢慢进入了老年人的视野，而小程序是一种无需下载，安装即可用的应用，使系统能够更加方便快捷。微信小程序成了线上线下的重要枢纽。由于互联网的飞速发展，饭店的点餐也要进行时代化的创新，由以前的人工点餐到现在的系统点单，大大减少了人力资源的应用

§1.1 课程设计题目介绍

       随着国人生活水平的不断提高，人们的生活方式不再仅限于普通的衣、食、住、行等物质方面的提高，而是在精神方面也追求有一个质的突变。于是在饮食方面，许多人选择线上点餐。而微信点餐小程序开发使系统能够更加方便快捷，同时也促使微信小程序变得更加系统化、有序化。系统界面较友好，易于操作。

§1.2 课程设计任务及要求

       在当下这个发展快速的信息化时代，越来越多的线上点餐平台开始建立或者已经使用起点餐服务系统，利用计算机和网络对信息进行管理已是大势所趋。小程序主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对微信点餐小程序进行需求分析，得出微信点餐小程序主要功能。接着对微信点餐小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等；详细设计主要包括微信点餐小程序数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对微信点餐小程序进行了功能测试，并对测试结果进行了分析总结，得出微信点餐小程序存在的不足及需要改进的地方，为以后的微信点餐小程序维护提供了方便。

§1.4 性能需求

       1．正确性需求

       管理员应能够进行有关的旅游信息准确地添加到数据库中。系统用户登录后，系统应能正确地读取用户个人信息以及用户的权限信息。系统的操作结果与预期的结果应该是一致。

       2．安全性需求

       系统登录需要输入用户名、密码，并且需要防止 SQL 注入问题，用户登录后根据用户角色的不同可以访问的权限应该不同。为了防止用户未授权访问了不该访问的功能，系统需要在客户端和服务端设置权限拦截。

       3．及时性需求

       即时可见：对旅游信息的处理（包括添加、删除、修改）将立即在后台数据库中进行更新，达到“即时操作、即时生效”的功能

       4．稳定性需求

       系统部署后，在硬件条件和支持软件条件没有变化的情况下，能够一直保持运行状态，直到系统被升级或代替。

       5．扩展性需求

       系统应该支持功能扩展与支持环境的扩展。 功能扩展就是在现有的功能模块的基础上可以添加信息的功能模块。

       6．故障处理能力需求

       系统可能遇到的软件故障是数据库与应用程序服务器。为了满足信息处理的需求，可以采取数据恢复来解决。

§1.5 功能需求

       首页登录、注册、修改密码等功能。

       主页：登陆成功后自动跳转。可以实现背景音乐的播放停止。

       每日推荐：轮播图、冰饮、套餐可跳转到商品详情进行商品加购等。

       分类：商品列表，点击可跳转到商品详情进行商品加购等。

       门店地址：该页面采用map组件提供在线地图，单击导航图片可定位门店位置。

       我的：包括我的订单、待付款、待发货、待收货、已完成、购物车等功能，点击购物车可查看自己加购的菜品以及价格。

小程序代码如下：

app.js

App({
  globalData: {
    selectGoods: []
  },
  getUserInfo: function (cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo);
    } else {
      //调用登录接口
      wx.login({
        success: function (res) { // 获取用户openid
          let code = res.code;
          wx.getUserInfo({
            success: function (res) {
              let r_data = {};
              r_data.code = code;
              r_data.encryptedData = res.encryptedData;
              r_data.iv = res.iv;
              // wx.request({
              //   url: 'https://xxx',
              //   header: { "content-type": "application/x-www-form-urlencoded" },
              //   method: 'post',
              //   data: r_data,
              //   success: function (res) {
              //     console.log(res)
              //   },
              //   fail: function (res) {
              //     wx.showModal({
              //       title: '提示',
              //       content: 'error:网络请求失败',
              //       showCancel: false
              //     })
			  
              //     return false; 
              //   }
              // });
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo);
            }
          });
        }
      });
    }
  }
});

复制代码

dl.wxml

<!-- 背景图片 -->
<image class="bg" src="/images/meishi.jpg" />
<view id="total">
<!--
<image class="zhu" src="/images/1.png"></image>
-->
<form bindsubmit="create_login">
<view id="t1">
<text>账号</text><input type="text" name="username" id="use" placeholder="输入您的账号" value="{{username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" name="password" id="pass1" placeholder="输入您密码" value="{{password}}"></input>
</view>
<view id="t3">
<text>手机号后四位</text><input type="password" name="phone" id="pass2" placeholder="输入您的手机尾号" value="{{phone}}"></input>
</view>
<button bindtap="goto_index" id="btn1" form-type="submit"><text>登陆</text></button>
</form>

<button bindtap="goto_zhuce" id="btn2"><text>注册</text></button>
<button bindtap="goto_update" id="btn3"><text>忘记密码</text></button>

</view>
复制代码

dl.js

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    username: '',
    password: ''
  },
  onLoad: function (options) {
    console.log(options)
    wx.getUserInfo({
      success: this.setUserInfo.bind(this)
    })
    this.setData({
      
    })
  },
  setUserInfo: function (res) {
    this.setData({ user: res.userInfo })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  create_login: function (e) {
    console.log(e.detail.value)
    wx.request({
      url: "http://localhost:8080/WX/login?username=" + e.detail.value["username"] + "&" + "password=" + e.detail.value["password"] + "&phone=" + e.detail.value["phone"],
      //url地址为后端代码的位置需修改
      data: e.detail.value,
      success: this.getResult.bind(this)
    })
    
  },
  getResult: function (res) {
    console.log(res.data);
    if(res.data == "true"){
    wx.showToast({
      title: "登录成功",
      duration: 2000
    })
      wx.switchTab({
        url: '/pages/index1/index1',
      })
    setTimeout(function () {
      wx.navigateBack({
        delta: 2
      })
    }, 1000)
  }
  
  if(res.data == "false"){
    wx.showToast({
      title: "账号或密码不对",
      icon: 'none',
      duration: 3000
    })
    setTimeout(function () {
      wx.navigateBack({
        delta: 2
      })
    }, 1000)
  }
  },
  goto_index:function(res){
  },
  goto_zhuce: function (res) {
    wx.navigateTo({
      url: '/pages/zhuce/zhuce',
    })
  },
  goto_update: function (res) {
    wx.navigateTo({
      url: '/pages/update/update',
    })
  }
})
复制代码

主页面图片展示：

尾言

这是课设的前端部分代码以及部分报告，如果觉得还不错的话，欢迎点赞收藏哦