美食网站的设计

图510菜谱视频界面所示：图STYLEREF1\s5SEQ图\*ARABIC\s110菜谱视频界面FigureSTYLEREF1\s5SEQFigure\*ARABIC\s110Recipevideointerface菜谱视频展示界面引用了elementui组件将视频展示在页面上，当用户点击页面时，:to="'/vedio_layer?vedio_id='+info.v_id"，将该视频的id值拼接到vedio_layer视频播放界面，当页面跳转至视频播放界面，视频播放界面在渲染界面时根据获取到的id发送请求至服务器。菜谱视频模块主要代码如下：（...省略部分代码...）let_this=this; _this.$http.get('/vedio_info',{ params:{ v_id:_this.$route.query.vedio_id//传递过来的视频id参数 } }).then(response=>{ this.$mit('changeTopFlag',5); _=response.data.main;//返回视频基本信息 _this.others=response.data.others;//取得相关视频信息放在视频右边，供用户点击。 })注册与登录模块注册模块用户进入网站，点击注册按钮进行注册，注册时需要输入用户账号，输入两次密码进行密码确认，如果两次输入的密码不一致，将会跳出提示框进行提示，此外，还需输入用户昵称，选择性别，选择居住地和生日，当填写好以上信息，才能注册成功。如图5-11：图STYLEREF1\s5SEQ图\*ARABIC\s111注册功能图具体显示情况如图5-12所示：图STYLEREF1\s5SEQ图\*ARABIC\s112注册界面程序实现如下：（...略去一些代码...）this.checkAccount(['u_name',info.u_name],function(result){if(result){response.state=-1;response.msg='账号已存在，请重新输入！';call(response);}else{//账户不存在时往数据库中添加数据that.usersDao.insertUser(info,function(result){response.state=1;response.msg='注册成功,现可进行登录！！！';call(response);});}})登录模块用户在登录时，系统会对用户输入的账号和密码进行判断，如果是账号或密码没有输对，会出现相应的提示，账号和密码输对了，才能正常进入。详细显示如5-13：图STYLEREF1\s5SEQ图\*ARABIC\s113登录功能图t

具体显示如图5-14：图STYLEREF1\s5SEQ图\*ARABIC\s114登录界面程序设计如下：（...略去的代码...）this.checkUser(password,['u_name',u_name],function(result){if(!result.flag){response.state=-1;}elseif(result.result){response.state=2;=;response.userId=result.result.u_id;}else{response.state=1;response.msg="输入密码错误！";}call(response);});

网站测试网站测试的目的网站测试的目的是尽可能多地发现浏览器端和服务器端程序中的错误并及时加以修正，以保证网站的质量。网站测试不仅仅是一种形式，也是必要的环节。设计之前虽然建立了相应的网站测试制度，分别有前端测试、后端测试、安全测试的制度等，但大部分都只是注重形式，实质性的作用不大。网站测试的整体框架要具有普遍适用性，既要适用于设计者、维护者，也要适用于客户，一个网站的性质不同，网站测试的环境也会有很大的区别。不同浏览器其内核亦不相同，相同内核的版本不同，网站结构是网站测试实施的基本构架，是网站测试的实施载体。合理的网站测试不仅有利于后期网站运维的实施，也有利于网站的发展。网站功能测试无论是软件系统测试还是网站测试其最重要的因素就是验证其正确性，网站功能是网站在长期的经验积累中总结出来的，是根据网站自身的规律和特征进行整合推广的。良好的网站功能是网站获得长期发展的基本力量，也是区别其他网站的基本标志。网站功能是一个网站的形象也是一个网站的无形资产，良好的网站功能可以提高的工作效率。网站的核心功能在每一个方面都能体现出来，是网站的灵魂，网站功能应当根据自身的发展和实际情况，总结出网站某些好的方面，提升的功能网，提炼核心功能，制定网站建设的方案和明确内容，以达到网站功能测试的目标。网站的功能测试者应该始终重视核心功能，对核心功能要进行培育维护，让好的一面的到延续，也要进行创新构造合理的输入，然后检查输出的结果是否能得到所期望的那样。使用这种方法的关键是寻找等价区间，只用测试等价区间中的任意值即可，这样就能要减少枚举的次数，不然就会因为测试投入太大，测试人员很难完成测试。当然除了枚举法外，还有等价类划分法、边界值分析法、错误推测法、因果图法、组合分析法等[15][15]朱少明.软件测试方法和技术（第2版）[M].北京:清华大学出版社,2010,8~9.网站性能测试性能测试是网站设计中不可少的一项内容，建立一个好的测试方案对网站的发展有着重要的作用。建立和完善网站的性能测试方案，是网站在做大做强过程中必须要考虑的重要问题。目前虽然建立了部分相应的测试方案，但存在的问题还是不少，应该加强相关方面的测试方案建设。在网站设计过程中，问题是不可避免的，网站要做好问题的预防，在遇到问题时能快速的有应对风险的措施。具体测试用例用户登录模块测试注册模测试结果如表6-1所示：表STYLEREF1\s6SEQ表\*ARABIC\s11注册测试表要点数据结果吻合度账号、密码输入已存在的账号“12345”“账号已存在”吻合账号、密码账号正确、密码不对如“12345”而密码为“wu1234”提示“密码错误”吻合登录模块测试结果如表6-2：表STYLEREF1\s6SEQ表\*ARABIC\s12登录测试表要点数据结果吻合度账号、密码账号和密码不对，如输入“wuhao”，“12345”提示“无该账号”吻合账号、密码账号为真，密码错误，如“wuhao”而密码为“12345”提示“密码错误”吻合这样的测试，可以知道如果用户想实现登录，就必须先进行注册操作，如果有用户不进行注册操作或不输入账号和密码，是无法实现登录的。当然如果有用户输入了错误的账号或密码时，也是不能登录的，只有当用户输入了正确的账号和密码时，用户才能成功登录网站。

链接测试对系统进行链接测试时，因为没有专业的测试工具，所以只是对系统页面上的某些链接进行手动测试。点击页面上的某些链接，查看是否正确跳转到相应页面。具体的某些链接测试如REF_Ref532672828\h表63链接测试表所示：表STYLEREF1\s6SEQ表\*ARABIC\s13链接测试表TableSTYLEREF1\s6SEQTable\*ARABIC\s13Linktesttable测试要点测试数据测试结果实际情况输入：http://localhost:8080进入美食网站首页进入美食网站首页吻合点击页面顶部导航栏中的首页进入美食网站首页进入美食网站首页吻合点击页面顶部的用户注册进入美食网站用户注册界面进入美食网站用户注册界面吻合点击页面顶部的用户登录进入美食网站用户登录界面进入美食网站用户登录界面吻合点击页面顶部导航栏中的菜谱大全进入美食网站的菜谱大全界面进入美食网站的菜谱大全界面吻合点击页面顶部导航栏中的饮食健康进入美食网站的饮食健康界面进入美食网站的饮食健康界面吻合点击页面顶部导航栏中的美食菜单进入美食网站的美食菜单界面进入美食网站的美食菜单界面吻合点击页面顶部导航栏中的菜谱视频进入美食网站的菜谱视频界面进入美食网站的菜谱视频界面吻合

结论本文以美食服务网站设计为例，分析了美食网站的现状，及设计中可能存在的问题与原因，还针对性的提出了设计方案，通过搭建服务器和MySQL数据库来开发。该网站为用户提供了丰富而全面以及健康的菜谱，此外也为用户展现了许多饮食方面的健康小常识。经过几个月的设计及最终的测试，“食坊”美食网站完成了基本开发并通过测试其网站功能符合用户的基本需求。该网站的优点是内容丰富全面，界面美观大方，易于用户使用，其中网站的最大特色在于每道菜谱，每种食材都有其功效介绍。在一边学习vue一边做设计的过程中，我学习了很多前端相关的知识，对html、css、javascript有了更加深入的了解，也对前端有了更进一步的认知。在开发过程中，我遇到了很多问题，比如浏览器的兼容性问题、连接服务器时的跨域问题，为此我查阅了大量的资料，看了很多博客，最终在老师的帮助下得以把问题解决。从长远发展的角度看，这个网站的设计不仅能为美食爱好者提供一个好的平台，而且在自主设计过程中，困难，挫折甚至失败都是不可避免的。这可以培养我们的顽强意志和良好品格，使我们勇于承担风险，站稳脚跟，努力学习。致谢语时光飞逝，转眼间四年紧张而又充实的大学生生活即将画上句号。在这四年的学