基于微信小程序的点餐系统设计与实现

目录
1.前言 1
1.1 课题背景 1
1.2 课题意义 1
1.3 论文结构 2
2.相关技术 3
2.1 Java语言 3
2.2 Spring框架 4
2.3 Vue.js框架 5
2.4 IntelliJ IDEA开发工具 6
2.5 数据库 7
3.可行性与需求分析 9
3.1 系统可行性分析 9
3.2 系统功能需求分析 10
3.3 系统性能需求分析 11
3.5 系统业务流程分析 11
3.6 开发环境与开发工具 12
4.系统设计 13
4.1系统功能结构设计 13
4.1.1 系统总体功能结构 13
4.1.2 用户功能结构 13
4.1.3 管理员功能结构 14
4.2 系统数据库设计 15
4.2.1 数据库E-R图设计 15
4.2.2 数据库表的设计 16
5.系统实现 19
5.1 数据库连接 19
5.2 用户模块实现 20
5.2.1 登录管理模块实现 20
5.2.2 用户信息管理模块实现 22
5.2.3 订单管理模块实现 24
5.2.4 评价管理模块实现 25
5.3 管理员模块实现 27
5.3.1 菜品管理模块实现 27
5.3.2 系统管理模块实现 29
5.3.3 订单管理模块实现 30
6.系统测试 33
6.1系统测试的目的与意义 33
6.2 系统模块测试用例 33
6.2.1 用户登录模块 33
6.2.2 扫码点餐模块 33
6.2.3 购物车模块 34
6.2.4 接单提醒模块 34
6.2.5 菜品新增模块 35
6.2.6 新增菜品类目模块 35
7.结论 36
7.1 系统技术总结 36
7.2 系统功能总结 38
7.3 系统展望 38
致谢 40
参考文献 41
4.系统设计
4.1系统功能结构设计
4.1.1 系统总体功能结构
该餐厅点餐系统主要包括用户功能模块和管理员功能模块两部分,其中用户部分主要功能模块有注册登录、信息管理、订单管理、评价管理。管理员部分的功能主要有系统管理、订单管理和菜品管理等。
系统总体的功能结构图如下图4-1所示:
基于微信小程序的点餐系统设计与实现_第1张图片

图4-1 系统总体功能结构图
4.1.2 用户功能结构
该系统中的用户功能模块中,具体的各个功能有订单管理功能中包括了添加桌号、修改桌号、添加备注、添加菜品、删除菜品、查询菜品、会员优惠买单、普通用户买单等功能;用户信息管理功能中包括了查看历史订单、查看个人信息和修改个人信息等功能;登录管理功能中包括了注册账户、登录账户和登出账户等功能;评价管理功能包括了添加评价、删除评价和添加追评等功能。
用户功能结构图如图4-2所示:
基于微信小程序的点餐系统设计与实现_第2张图片

图4-2 用户功能结构图
5.系统实现
5.1数据库连接
通过下载并安装MySQL数据库进行数据库环境的创建,首先确认数据库的环境是否安装,此处需要在数据库安装时配置端口为3306,同时在之后的数据库管理员信息处使用设置的账号和密码,默认配置账号为root,密码为123456。通过在控制台输入mysql –uroot –p123456即可成功进入数据库,本文转载自http://www.biyezuopin.vip/onews.asp?id=12229并查看数据库的版本信息和认证信息。
之后变开始进行数据库的建立,使用SQL语句create database sell default character set utf8 collate utf8_general_ci;来建立一个名为sell的数据库用来存放系统开发所需的各项数据库数据,并且采用utf-8编号方式。之后输入show databases;来查看数据库是否创建成功,若是已经显示存在sell数据库则表示创建数据库成功;之后进入编辑器使用SQL查询语句进行数据库各项数据的创建。下图5-1为创建成功的数据库界面。

//index.js
const app = getApp()

Page({
 data: {
  //轮播图图片路径
  // banner: [
  //  '/image/1.jpg', '/image/2.jpg', '/image/3.jpg'
  // ],
  banner: [],
 },

 //扫码点餐
 btnclick1: function() {
  let that = this;
  // that.goToBuy("1号桌")
  // 允许从相机和相册扫码
  wx.scanCode({
   success: (res) => {
    // { charSet: "utf-8", result: "http://30paotui.com", errMsg: "scanCode:ok", rawData: "aHR0cDovLzMwcGFvdHVpLmNvbQ==", scanType: "QR_CODE" }
    console.log(res.result)
    if (res.result) {
     let str = res.result;
     //识别的二维码里包好30paotui.com就弹出红包领取页
     if (str.search("111") != -1) {
      console.log("1号桌")
      that.goToBuy("1号桌")
     } else if (str.search("222") != -1) {
      console.log("2号桌")
      that.goToBuy("2号桌")
     } else if (str.search("333") != -1) {
      console.log("3号桌")
      that.goToBuy("3号桌")
     }
    }
   }
  })
 },
 //去点餐页
 goToBuy(tableNum) {
  wx.navigateTo({
   url: '../buy/buy?tableNum=' + tableNum
  })
 },

 //菜品浏览
 btnclick2: function() {
  wx.navigateTo({
   url: '../buy/buy'
  })
 },

 //电话订座
 btnclick3: function() {
  wx.makePhoneCall({
   phoneNumber: '18810908748' //仅为示例,并非真实的电话号码
  })
 },
 onLoad(){
  this.getTopBanner();
 },
 
 getTopBanner(){
  let that=this;
  wx.request({
   url: app.globalData.baseUrl + '/picture/getAll',
   success: function (res) {
    if (res && res.data && res.data.data && res.data.data.length > 0) {
     let dataList = res.data.data;
     console.log(dataList)
     that.setData({
      banner: dataList
     })
    } else {
     that.setData({
      list: []
     })
    }
   }
  })
 }


})

基于微信小程序的点餐系统设计与实现_第3张图片
基于微信小程序的点餐系统设计与实现_第4张图片
基于微信小程序的点餐系统设计与实现_第5张图片
基于微信小程序的点餐系统设计与实现_第6张图片
基于微信小程序的点餐系统设计与实现_第7张图片
基于微信小程序的点餐系统设计与实现_第8张图片
基于微信小程序的点餐系统设计与实现_第9张图片
基于微信小程序的点餐系统设计与实现_第10张图片
基于微信小程序的点餐系统设计与实现_第11张图片
基于微信小程序的点餐系统设计与实现_第12张图片
基于微信小程序的点餐系统设计与实现_第13张图片
基于微信小程序的点餐系统设计与实现_第14张图片
基于微信小程序的点餐系统设计与实现_第15张图片
基于微信小程序的点餐系统设计与实现_第16张图片
基于微信小程序的点餐系统设计与实现_第17张图片

你可能感兴趣的:(微信小程序,小程序,点餐系统,点餐小程序,毕业设计)