介绍
仿 elm 外卖商城系统,Vue+Vant+Typescript 实现手机端外卖商城,React+Antd+Typescripts 实现后台管理,Node+Koa2+mongoose+Typescript 实现后台功能
使用腾讯地图 api 实现定位和地址搜索
软件架构
- client 为 h5 客户端
- admin-client 为后台管理
- server 为 service 服务器
- docs 所需文件 ttaway mongodb 文件
H5 端页面预览
后台管理页面预览
技术栈说明
- h5 端使用的以下技术 vue + vuex + vue-router + typescript + less + vant,使用的是 vant-ui 框架 完成了首页数据显示,首页数据筛选 首页店铺的距离检查,利用腾讯地图 api 实现 完成了城市选择 完成了地址搜索,使用的是腾讯地图提供的 api 完成登录验证,server 使用到 koa-session 完成了我的地址的新增和修改 完成了个人信息的头像上传,个人信息展示 完成了食品详情,食品加入购物车,订单下单,清空购物车 完成了订单列表展示 后续增加商品搜索 后续增加商品分类列表搜索页 后续增加 websocket 的订单限时支付,过时取消订单 后续增加店铺收藏,食品收藏 后续增加红包功能 后续增加食品详情页,用户评论功能
- admin-client 使用 react + react-router4.0 + react-redux + redux-saga + antd + typescript + less 完成所有食品分类管理 完成餐馆列表,餐馆的食品分类,餐馆信息 完成新增餐馆,修改餐馆,删除餐馆 完成食品列表 完成新增食品,修改食品,删除食品 完成管理员列表和新增修改管理员 完成管理员角色管理 后续新增查询订单,订单状态修改,删除订单 …
- server 使用 koa2 + typescript + mongoose 提供以上两个前端的接口,数据模型,和逻辑操作功能
安装教程
- 安装数据库 先进入 docs 文件夹 然后在当前目录打开 cmd mongorestore -h 127.0.0.1 -d ttaway ./ttaway
- client 安装 cnpm install
- admin-client 安装 yarn install
- server 安装 npm install 或 yarn install 或 cnpm install
使用说明
- 如果数据库有设有用户密码就在 server 文件夹的 src 文件夹的 db 文件夹中的 mg.ts 中修改 在 server 文件夹的 src 文件夹的 conf 文件夹中的 db.ts 做用户名和密码配置
- 后台管理登录 账 :admin 密码:admin
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!