小程序毕业设计说明书

xxx学院毕业设计说明书基于div+javascript的食谱网站学生姓名：学    号：年级专业：指导老师：系    部：计算机工程系提交日期：2021年3月目录基于div+javascript的食谱网站..................................................................................... 1作    者：............................................................................................................ 1指导老师：............................................................................................................ 1................................ 11前言.............................................................................................................................. 12 关键技术介绍............................................................................................................... 22.1JavaScript1........................................................................................................ 22.2JavaScipt2.......................................................................................................... 22.3div...................................................................................................................... 22.4css2..................................................................................................................... 32.5 系统实现工具介绍.............................................................................................. 33 网站的分析和设计........................................................................................................ 33．1 需求分析.......................................................................................................... 33.2 页面设计............................................................................................................ 41.概念设计........................................................................................................ 42.逻辑设计........................................................................................................ 43．3 网站总体设计................................................................................................... 44 系统的实现................................................................................................................... 64.1购物车................................................................................................................. 64.2分类.................................................................................................................... 74.3首页：............................................................................................................... 104.3.1轮播效果：............................................................................................. 104.3.2加载loading........................................................................................... 114.4订单.................................................................................................................. 124.5 催单................................................................................................................. 13...................................................................................................................................... 145 结束语........................................................................................................................ 18致    谢...................................................................................................................... 20基于网页版的点餐小程序作    者：指导老师：()摘要：随着网络技术与信息技术的发展、人们生活水平的提高，更多人会选择在网上寻找食谱来动手制作美食，微信小程序也越来越接近我们的生活，很多时候我们都需要微信小程序进行扫码等等的操作。本食谱网站是用javascript、等相关技术运用完成的。框架的运用能快捷而简便的完成交互样式；PHP的实现能用最简便的方法完成前后台的数据交换，本系统分为首页、分类、备忘录、注册、登陆五个模块。对每个模块进行了分析和设计之后进行了系统功能的详细实现。关键词：小程序点餐系统div+javascript1前言全球经济正在进入信息化时代，数字经济、网络经济、信息经济逐渐成为经济发展的主流。随着互联网应用的快速增长，网络已经进入到每家每户。网络凭借其便捷的交流方式以及丰富的信息量成为最有潜力和前途的媒体。成为了商家宣传的重要方式。企业充分利用互联网的有时，为客户和合作伙伴在网上提供信息服务，并且利用互联网能捕捉到更多的商机。近年来，健康的饮食越来越受到人们的关注，在这种快节奏的生活状态下，人们忙于工作而忽视了自己的健康；身体是革命的本钱。没有好的身体，干什么事都心有余而力不足。久而久之，人们开始重视自己的饮食健康，很多人都开始自己在家制作美食；而美食网站就是这样一个平台，能让人们足不出户就能在线上查找美食攻略。通过这样一个网站，每天可以随时随地查询菜谱，做出不同口味的菜肴。家人可以一起享用美食，既实惠又健康。利用网络宣传各个地方的美食是如今最流行最有效的方法。建设美食网站不仅能宣传各个地方的美食，提高地方的知名度；还能让用户足不出门就能自己动手制作尝遍各地美食。所以建设美食网站不仅是用户的需求，还是旅游业和饮食业的发展需要。餐饮消费需求日益旺盛，据统计，近五年来，我国餐饮业每年都以18%左右的速度增长，整个餐饮市场发展态势良好。与此同时，手机支付堪称继卡类支付、网络支付后消费者的新宠。两者相结合，手机点菜新型功能的涉入，更是为餐饮消费注入一股新鲜的力量，也逐渐踏入餐饮消费的主流市场。用户可以直接从网上下载客户端进行点菜。使用方便快捷，随时均可消费、服务触手可及。首先商家要有手机点餐的功能，目前有一部分有这个功能，到有这个功能的餐厅就餐，首先会安排桌子，手机点餐是以桌子为单位的，不排除有其他特殊支持模式，看到桌面上有个点餐二维码。手机点餐需要手机连接网络，点餐时会有一些图片，会比较耗费流量，最好是有WiFi。解锁手机，进入手机主界面，找到微信App，点击进入微信App，进入后切换至发现栏。在发现栏目中，点击扫一扫功能，手机会跳转到相机扫描界面，如果手机设置微信不能访问相机，要在设置中将该功能去除，让其可以访问手机相机。对准桌上二维码扫描，就会跳转到点餐主界面。2 关键技术介绍2.1Javascript基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。(1)基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。(2)CSS：Bootstrap 自带以下特性：全局的CSS设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统。(3)组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。(4)JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。(5)定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。2.2PHPPHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。(1) 开源性和免费性。(2) 快捷性，实用性强。(3) 与数据库连接的广泛性。(4) 面向过程和面向对象并用。2.3jQueryjQuery是一个快速、简洁的JavaScript框架，倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。(1) 提供漂亮的页面动态效果。(2) 快速获取文档元素。(3) 创建Ajax无刷新网页。(4) 增强JavaScript语言的增强。2.4VueVue是一套用于构建用户界面的渐进式JavaStript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。(1) 易用性。(2) 灵活性。(3) 最省心的优化。2.5 系统实现工具介绍2.5.1MySQLMySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的RDBMS (Relational Database Management System，关系数据库管理系统)应用软件之一。MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。(1)为多种编程语言提供了 API。(2)优化的 SQL查询算法，有效地提高查询速度。(3)既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中。(4)提供用于管理、检查、优化数据库操作的管理工具。支持多种存储引擎。(5)MySQL 是开源的，所以你不需要支付额外的费用。(6)MySQL 使用标准的 SQL数据语言形式。2.5.2WampServerWampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。免去了开发人员将时间花费在繁琐的配置环境过程，从而腾出更多精力去做开发。WampServer就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。(1)      支持中文语言，一键安装，省时省力；任何人都可以轻松搭建；(2)      集成Apache/MySQL/PHP/PhpMyadmin；支持PHP扩展、Apache的mod_rewrit；(3)      一键启动、重启、停止所有服务，一键切换到离线状态等等。3 网站的分析和设计3．1 需求分析在开发本系统前期，本人首先对不同年龄段的人进行调查。通过问卷调查的方式，了解他们对网站功能性、操作性、质量等方面的需求。根据对用户的需求分析，考虑实现以下功能：(1)用户的注册、登陆。(2)首页热门信息的推荐。(3)菜谱分类里面包含了各类菜品。(4)备忘录相当于便利贴，记录自己想记录的内容。3.2 数据库设计1.概念设计

3-1商品管理ER图2.逻辑设计表3-2 注册信息表（TB_DEP_INFO）字段数据类型（长度）允许空主键/外键备注idintNOT NULL编号UsernameVARCHAR(10)NOT NULL主键用户名PasswordVARCHAR(32)NOT NULL密码EmailVARCHAR(40)NOT NULL邮箱3．3 网站总体设计

表3-3系统总体设计图轮播效果：播放不同的图片，增加内容的丰富性，吸引眼球。Tab切换功能：点击显示内容。登陆功能：为已经注册的用户提供登陆的渠道。注册功能：为新用户提供注册的渠道。显示功能：为备忘录内容显示而设计的。4 系统的实现4.1登陆：登陆模块是使用Bootstrap里面的弹出框效果，用弹出框能提高用户登陆的方便性。

页面展示：4-1登陆界面图<divid="loginer" class="modal" tabindex="-1"role="dialog" aria-labelledby="myModalLabel1"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal"><span aria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button><h4 class="modal-title">请登录</h4></div><form id="form_login" class="form-horizontal"><div class="modal-body"><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="zh1">用户名：</label><div class="col-sm-9 require"><inputtype="text" class="form-control" name="username"id="zh1"pattern="\w{6,10}" required></div></div><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="pw1">密码：</label><div class="col-sm-9 require"><input type="password" pattern="\w{6,10}"class="form-control" name="password" id="pw1"required></div></div><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="yzm">验证码：</label><div class="col-sm-5 require"><inputtype="text" pattern="\d{4}" class="form-control"name="yzm" id="yzm" required>  </div><div class="col-sm-4"><img src="yzm.php" alt=""></div> </div><div class="form-group has-feedback"><label id="info" class="col-sm-4 control-labelpull-left"></label></div></div><div class="modal-footer"><buttontype="submit" class="btn btn-primary">登录</button><button type="button" class="btn btn-default"data-dismiss="modal ">关闭</button></div> </form></div> </div></div>4.2注册模块：注册模块是使用Bootstrap里面的弹出框效果，用弹出框能提高用户注册的方便性，用户点击确定之后就可以注册成功，数据库就会新增一条用户记录，注册成功之后会跳转到首页。

图片展示：4-2注册界面图代码展示：<divid="register" class="modal" tabindex="-1"role="dialog" aria-labelledby="myModalLabe2"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal"><span aria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button><h4 class="modal-title">请注册</h4></div><form id="form_regist" class="form-horizontal"><div class="modal-body"><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="zh2">用户名：</label><div class="col-sm-9 require"><input type="text" class="form-control"name="username" id="zh2" pattern="\w{6,10}"required></div></div><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="pw2">密码：</label><div class="col-sm-9 require"><inputtype="password" pattern="\w{6,10}"class="form-control" name="password" id="pw2"></div></div><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="pw3">确认密码：</label><div class="col-sm-9 require"><input type="password" pattern="\w{6,10}"class="form-control" name="repassword"id="pw3"></div></div><div class="form-group has-feedback"><label class="col-sm-3 control-label" for="lc">邮箱：</label><div class="col-sm-6 require"><input type="text" pattern="\S{2,10}"class="form-control" name="email" id="lc"></div></div><divclass="form-group has-feedback"><label id="wanner" class="col-sm-4 control-labelpull-left"></label></div></div><div class="modal-footer"><button type="submit"class="btn btn-primary">注册</button><button type="button" class="btn btn-default"data-dismiss="modal">关闭</button></div></form></div>4.3首页：首页是网站的入口网页，首页的风格和网站的整个风格和内容有必然联系，其作用是引导用户浏览网站的内容，找到用户需要的内容。页面效果：

4-3首页界面图4.3.1轮播效果：

轮播效果是网站中最常用的效果，能在最显眼的位置同时展示几张图片，吸引眼球的同时能有效的节约位置。图片展示：4-4轮播效果界面图代码展示：<div id="myCarousel" class="carouselslide">    <olclass="carousel-indicators"><lidata-target="#myCarousel" data-slide-to="0" class="active"></li><lidata-target="#myCarousel" data-slide-to="1"></li><lidata-target="#myCarousel" data-slide-to="2"></li><lidata-target="#myCarousel" data-slide-to="3"></li></ol><!--轮播（Carousel）项目 --><divclass="carousel-inner"><divclass="item active"><imgsrc="imgs/one.png" alt="First slide"></div><divclass="item"><imgsrc="imgs/two.png" alt="Second slide"></div><divclass="item"><imgsrc="imgs/three.png" alt="Third slide"></div><divclass="item"><imgsrc="imgs/four.png" alt="Four slide"></div></div><!--轮播（Carousel）导航 --><aclass="left carousel-control" href="#myCarousel"role="button" data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control" href="#myCarousel"role="button" data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>4.3.2Bootstrap标签页标签页可以放置较多的内容，同时节省空间；是网站中常用的方法。图片展示：

4-5 Bootstrap标签页界面图代码展示：<ulid="myTab" class="nav nav-tabs"><li class="active col-md-2"><a href="#dingcan"data-toggle="tab">推荐菜谱</a></li><li class="col-md-2"><a href="#yonghu" data-toggle="tab">一周热门</a></li><li class="col-md-2"><a href="#dingdan"data-toggle="tab">家常菜</a></li></ul><divid="tabal" class="tab-content"><div class="tab-pane fade in active" id="dingcan"><ul><li><img src="imgs/one.jpg" alt=""></li><li>海带豆芽土豆粉</li></ul>4.4触发式模态框鼠标点击对话框后触发隐藏的模态框，弹出隐藏的内容。图片展示：

4-6触发式模态框界面图代码展示：<button class="btnbtn-primary btn-lg" data-toggle="modal"data-target="#myModal14"><imgsrc="../imgs/jk14.jpg" alt=""><p>鱼香茄丝</p></button><!-- 模态框（Modal） --><div class="modalfade" id="myModal14" tabindex="-1"role="dialog" aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button" class="close" data-dismiss="modal"aria-hidden="true">&times;</button><h4class="modal-title" id="myModalLabel"></h4></div><divclass="modal-body"><ul><li><h4>原料：茄子、葱、彩椒、姜、蒜、酱油、蚝油、醋、白糖、菜籽油、盐。</h4></li><li>茄子洗净切条，油温五成热时放入茄条微微的炸一下。</li><li>把炸好的茄条用清水清洗一遍。沥干水分备用。</li><li>切好红椒以及葱姜蒜，锅里放油，放入葱姜蒜以及红椒翻炒，快速翻炒至茄条耙软。</li><li>所有的调味品调成一碗鱼香汁，加入淀粉及清水。</li><li>把调好的汁倒进锅里翻炒均匀,大火收汁。</li></ul></div><divclass="modal-footer"><buttontype="button" class="btn btn-default"data-dismiss="modal">关闭</button></div></div><!--/.modal-content --></div><!-- /.modal--></div>4.5vue实现实时更新功能

此功能实现的方式是在文本框中输入内容，点击确定之后会在页面中显示出来；可以实现单条删除内容和多条内容删除。图片展示：

4-7备忘录界面图代码展示： <script>window.onload = function(arguments) {new Vue({el: '#box',data: {myData:[],username:'',content:'',nowIndex: -100},methods:{add:function () {this.myData.push({name:this.username,content:this.content})this.username = '';this.content = '';},deleteMsg:function (n) {if (n == -2) {this.myData=[];} else {this.myData.splice(n,1);}}}})}</script></head><body><divclass="container" id="box"><form action="" role="form"><div class="form-group"><label for="username">标题：</label><inputv-model="username" type="text" id="username"placeholder="请输入标题"class="form-control"></div><div class="form-group"><label for="content">内容：</label><input v-model="content" type="text"id="content" placeholder="请输入留言" class="form-control"></div><div class="form-group"><input v-on:click="add()" type="button"name="" value="添加"class="btn btn-primary"><input type="reset" name="" value="重置" class="btn btn-danger"></div></form><hr><table class="table table-bordered table-hover"><caption class="text-success"><h4>备忘录</h4></caption><tbody><tr v-for="item in myData" class="text-warningtext-center" ><td style="vertical-align:middle">{{item.name}}</td><td style="vertical-align:middle">{{item.content}}</td><td class="text-center"><button v-on:click="nowIndex = $index" class="btn btn-dangerbtn-sm" data-toggle="modal" data-target="#layer">删除</button></td></tr><tr><td v-show="myData.length != 0" colspan="4"class="text-right"><button class="btn btn-danger" data-toggle="modal"data-target="#layer" v-on:click="nowIndex = -2">全部删除</button></td></tr><tr v-show="myData.length == 0"><td colspan="4" class="text-center text-muted"><p>暂无内容...</p></td></tr></tbody></table><!-- 模态框 --><div role="dialog" class="modal fadebs-example-modal-sm" id="layer"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close"data-dismiss="modal"><span>×</span></button><h4 class="modal-title">确认删除么?</h4></div><div class="modal-body text-right"><button class="btn btn-danger btn-sm"data-dismiss="modal">取消</button><button v-on:click = "deleteMsg(nowIndex)" class="btnbtn-primary btn-primary btn-sm" data-dismiss="modal">确定</button></div></div></div></div></div>5 结束语本文给出了一个基于Bootstrap+PHP的食谱网站。网站采用了Bootstrap框架和部分的PHP代码。网站里面加入了不同的技术不仅丰富了页面，还能在有限的页面显示更多的内容，操作简单。网站所具有最直接的传播力和感染力。在互联网+的时代，网站的影响力远超于传统的报纸和杂志，内容更加丰富，可以随时随地的更新内容人。毕业设计不仅事对前面所学知识一种体验，而且也是对自己能力的一种提高；通过毕业设计使我明白了自己的知识量还是很欠缺，需要学习的还很多。通过这次毕业设计，我才明白了学习是一个长期的过程，在以后的工作、生活中都要不断学习，提高自己的知识。参考文献1.  PHP网站开发实例教程  人民邮电出版社 2015年第1版2.  《别具光芒》 人民邮电出版社 2008年第1期3. 《0基础学做家常菜》广东人民出版社 2018年第1期4. 《Bootstrap实战从入门到精通》中国水利水电出版社2017年第1期致     谢毕业设计说明暂告收尾，这也意味着我的校园生活既将结束。回首过去，自己一生最宝贵的时光能在这样的校园之中，学习到很多知识和技能。这除了自生努力之外，也离不开老师的悉心教导和同学之间的相互帮助。完成毕业设计的过程中遇到了很多困难，从开始选题的时候，开始对自己的选题没有确定的方向，然后在老师提供的资料和与小伙伴的沟通中确定了我毕业设计的方向。Web前端是现在比较新的一个职业，能够通过代码让页面丰富，而且风格不一。谢老师的悉心指导和同学的鼓励，是我坚持完成毕业设计的动力源泉。在此，我要非常感谢谢老师。通过一段时间的努力，我的毕业设计终于完成了，这也意味着我的大学生活即将结束，大学三年时间，在各个方面都得到了很大的提升，褪去了稚嫩的思想，变得更加的有担当。老师就是一束光，给我前进的路上带来光明，也是我从学生到工作者的领路人。毕业设计（论文）成绩评定表毕业设计（论文）评语：该作品使用Bootstrap+PHP完成了食谱网站的设计与实现，能够结合用户的需求实现相对应的功能，较好的体现了对本专业相关知识的掌握情况，选题得当，论文格式规范。指导老师：毕业设计（论文）成绩：指导老师：日　　期：