干饭了——项目进度三
针对安卓的移动开发,我们选择使用Flutter技术栈,优势如下:
Flutter具有最核心的3个特点:
-
极高的开发与交付效率,良好的开发体验
-
优秀的跨多端多平台能力
-
极强的 UI 表现力
并且能够在 Android Studio 中通过插件实现实时预览并支持交互的 Hot UI 能力
以下是移动开发的前期准备:Flutter的安装和Dart基础语法学习
Dart 的声明式编程布局易于阅读和可视化,具有静态和动态语言用户都熟悉的特性,总体而言,还是比较容易学习的。
dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等。以下是dio的配置与使用:
针对网页端的前端开发,我们使用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就可以了