干饭了——项目进度三

针对安卓的移动开发,我们选择使用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的基本用法

安卓登陆界面展示

登陆

image-20201216105147003

显示密码

image-20201216105129180

用户名判空

image-20201216105241460

密码判空

image-20201216105302560

登陆验证

image-20201216105325702

登陆成功,进入首页(首页实现了广告轮播)

image-20201217122052965

注册页面

image-20201217124507536

判空

image-20201217124527082

手机正则判断

image-20201217124601423

两次密码输入不一致

image-20201217124911399

注册成功,直接进入首页

image-20201217124810771

网页登陆页面

image-20201217105033114

注册页面

image-20201217105054001

后端进度

进度反馈

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

image-20201217122345728

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

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

image-20201217122404401

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

image-20201217122422339

总结

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

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

posted @ 2020-12-17 12:36  YuQicode  阅读(172)  评论(0编辑  收藏  举报