饱了吗-web前端个人总结

一、引言

1.0 项目源代码整合

• 饱了吗前端web：传送门
• 饱了吗web和app后端：传送门
• 饱了吗app前端：传送门
• 饱了吗web展示：传送门

1.1 编写背景

web端开发人员较少，正好以前学习过web端的内容，所以本次项目承担web前端的任务。在本次任务晚餐过程中，我前端采取的是html+css+jquery（其实在编程的途中想使用vue，但中途改动过于繁琐后放弃了），侧边栏点击加载也是用部分加载实现，与后端的交互则采用ajax的技术。主要分为两个模块：

• 一、订单处理的模块：注重实时的刷新，用户订单后马上在页面上显示新的订单；其次就是多个网页同时在线处理订单时，保证系统的流畅性。
• 二、店家管理的模块：注重页面的美化和展qi，外加细节的处理，以及与后端的交互，其中相对比较麻烦的就是图片的传输（采取的是二进制传输，其实也可以采取超链接的方式将图片部署在服务器上，由于没有服务器，就将图片以二进制的格式存取在数据库中）

二、前端编写总结

2.0前端页面编写部分

• 前端页面的实现图标必不可少，外加logo的设计，由于图片使用过程中可能会修改背景颜色、大小等，所以我大部分采用svg的格式
  
• 前端原型的设计：前端的设计最好先设计好原型，无论使用墨刀，甚至手绘，又或者套用模板都是不错的选择。
• 前端代码设计分为三个模块：html要呈现给用户看哪些东西，这些在前期绘制UML图以及小组讨论的时候都已经确认好了；其次是css，这部分相当关键，这代表着做出来的界面是否美观；然后是js部分这是与后端交互，以及动态页面的实现。由于从基础开始学起，很多部分在原型设计的时候想到并设计出来却实现不了，还是比较难过的。下面是我个人最满意的一个界面。
  

2.1与后端交互部分

• 接收数据格式基本采用json，也有部分比如添加菜谱，修改信息等，后端只需要发送成功与否的部分，采用text接收即可。
• 使用ajax与后端交互，起初碰到的第一个问题就是跨域问题，由于端口号的不同，数据接收不到，后来与后端协同完成处理了这个问题。其次就是图片的传输问题，获得的图片二进制要在头部添加data:image/png;base64,才能够被正确解析。

2.2存在的问题：

• 由于部分原因，前端基本手写完成，也没怎么套用模板，最终发现页面的展示效果确实差强人意；学习的内容又少，后来才发现使用bootstrap等框架可以大大减少我写css的代码。
• 在逻辑方面也存在不少问题，处理订单的页面太过于关注与服务器的交互，实时刷新显示新的订单，导致页面相当单调，如果作为正式使用那是肯定不行的，可以在左侧添加菜谱数量的修改，以及来新订单时的提醒，也可以在右侧添加一个已处理过的订单列表，用于查看。

2.3个人总结

• UML图的制作相当重要，我需要完成哪些界面的设计只要参考UML图的设计即可，要实现哪些功能的界面一目了然。
• 沟通尤其重要。后端的实现基于前端的需求，有时候小组讨论过程中，由于表达不清晰，导致实现的代码并不是我前端需要的，这时候又要与后端的编写人员协商修改代码。
• 后期测试维护的时候会出现一系列问题，有些时候分不清到底是前端问题还是后端问题，也有可能是前后端交互出现了问题，甚至是其他原因。这时候处理好各自部分中的测试尤其重要。

三、本次课程的少许建议

• 课程我个人还是相当喜欢的。很好有机会多人协同完成一个项目，我对GitHub的运用提示了不少。前期的准备工作，如UML图的绘制也非常受用，毕竟以前完成一个任务，都是粗略的思索一下就直接上手写代码了。
• 老师最开始推荐的《构建之法》这本书，读后感觉还是非常有用的，希望老师多推荐一下大牛写的著作或者计算机前沿的一些技术
• 在最后项目提交检查的时候，老师就我们本次完成情况，提出了很多建设性的意见，用来优化改进代码的时间有点紧张，希望可以最后空出一至两周来完成这些部分。
• 各组之间也可以互动给其他小组的作品提出意见，相互交流项目执行过程中遇到的问题以及如何去解决的。