干饭了——项目进度三

针对安卓的移动开发，我们选择使用Flutter技术栈，优势如下：

Flutter具有最核心的3个特点：

• 极高的开发与交付效率，良好的开发体验

• 优秀的跨多端多平台能力

• 极强的 UI 表现力

  并且能够在 Android Studio 中通过插件实现实时预览并支持交互的 Hot UI 能力

以下是移动开发的前期准备：Flutter的安装和Dart基础语法学习

• 项目前期准备：Windows下的Dart、Flutter安装与学习 - YuQicode - 博客园 (cnblogs.com)

Dart 的声明式编程布局易于阅读和可视化，具有静态和动态语言用户都熟悉的特性，总体而言，还是比较容易学习的。

dio是Flutter中文网开源的一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等。以下是dio的配置与使用：

• Dio请求的探索及实现 - YuQicode - 博客园 (cnblogs.com)

针对网页端的前端开发，我们使用Vue.js，优势如下：

• vue.js会自动对页面中某些数据的变化做出响应
• 组件化开发
• Virtual DOM，可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化

同时学习了ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法

安卓登陆界面展示

登陆

显示密码

用户名判空

密码判空

登陆验证

登陆成功，进入首页（首页实现了广告轮播）

注册页面

判空

手机正则判断

两次密码输入不一致

注册成功，直接进入首页

网页登陆页面

注册页面

后端进度

进度反馈

后端借助express框架和mongoose已完成与mongodb的连接，实现了处理商家、顾客、骑手的注册与登录put协议请求。同时利用mongoose的Schema实现了对请求传送参数的审查，保证新记录被添加到数据库中时必要字段都具备以及数据的唯一性。

由于未使用第三方图床，实验发现将图片信息上传至后台再传输给mongodb数据库会收到网络速度的限制。将图片存放在mongdob中可选择二进制流以及base64两种形式，然而由于mongodb每条记录存在最长长度限制，导致图片的大小都会被限制。

因此最后决定后端通过借助multer组件、fs组件、path组件实现了本地图床的功能，省去了图片的二次转发并存储在后端服务器中，并通过处理get请求实现图片的下载功能。

前端方面，根据后端提供的数据，利用flutter框架开发的app端利用flutter的网络请求库dio完成了对put请求数据封装与传输，而利用vue框架开发的web端利用axios组件也完成了对put请求数据的疯转与传输。两个前端传输的数据后台能获取请求信息并在数据库中查询的记录的更新。

总结

开始阶段，进展比较缓慢，在环境配置、添加组件方面，花费了较多时间。后来通过降低版本，不断搜索尝试，解决了配置问题，还是很有收获的。

在跨域问题上，用ajax传包不行，最后换成axios就可以了