Open in app

Sign in

Write

Sign in

Wei Xiao
9 min readNov 26, 2019

Nextmeal是一个在线平台

下一餐

在线平台可让您随时访问附近的超赞餐厅，并以合理的价格提前订购。
浏览我们的网站

目录

应用初看

用户界面

餐馆老板仪表板

管理仪表盘

关于Nextmeal项目

在线平台可让您随时访问附近的超赞餐厅，并以合理的价格提前订购。

我们使用的开源工具包和API

前端

  • 使用Google Maps JavaScript API通过网页上的标记和信息窗口来自定义和显示地图
  • 使用Google Maps Geocoding API将地址转换为后端的地理坐标
  • 使用vue-chartjs可视化餐厅和管理仪表盘数据
  • 使用Vuelidate进行更好的表单验证（包括用于电子邮件检查的使用或异步验证功能）
  • 使用Vue轮播创建响应快速且触摸友好的定制轮播
  • 使用vue2-datepicker自定义精致的日期选择器
  • 使用sweetalert2创建自定义的响应式弹出消息框
  • 在Vue.js中使用Vuex进行状态管理
  • 在项目中使用CSS预处理程序Sass。使CSS代码更干净，可重用。
  • 使用Bootstrap CSS框架来帮助创建响应式前端网站
  • 使用moment.js解析，验证和显示与后端一致的日期和时间
  • 使用“ 真棒字体 ”在网站上显示精美的图标

后端

  • 使用mocha / chai / sinon / supertest进行单元测试（模型/请求），使用Travis CI进行持续集成
  • 使用NewebPay作为第三方支付API，以便用户通过信用卡在线支付订阅费
  • 使用PostGIS帮助计算测地距离
  • 使用快速验证器进行数据验证
  • 使用JSON Web令牌向RESTful API添加基于令牌的身份验证
  • 用户注册或下订单后，使用nodemailer通过Node.js发送电子邮件
  • 使用Multer，imgur-node-api进行文件上传功能
  • 使用bcryptjs哈希和检查密码
  • 使用dotenv帮助加载保存在.env文件中的环境变量
  • 使用node-cron作为任务调度程序来自动更新数据库中的订单和进餐数据
  • 使用moment.js解析与前端和数据库一致的日期和时间

如何使用

游客

作为访客，您可以：

  1. 详细了解该平台及其运作方式
  2. 查看平台上当前服务的所有餐厅
  3. 查看所有可用订阅计划的详细信息
  4. 访问我们的常见问题页面，查看所有常见问题和解答
  5. 注册一个Nextmeal帐户以开始旅程

下一餐会员

作为Nextmeal会员，您可以：

  • 登录到您的Nextmeal用户帐户
  • 电子邮件：user1@example.com
  • 密码：Nextmeal！
  • 订阅膳食计划-每月-10餐或20餐-并使用信用卡在线支付
  • 信用卡号（正在测试）：4000–2211–1111–1111
  • 信用卡到期日：任意随机日期
  • 信用卡安全码：任意设置的三个数字
  • 每天在我们提供的两家餐厅（500米内）之间进行选择，并提前点餐
  • 在一天结束前更新或取消订单
  • 在您选择的时间领取餐食，而无需排队等候
  • 编辑您的个人资料信息-我们始终根据您提供的地址向您推荐餐馆

餐厅老板

作为餐厅老板，您可以：

  • 登录到您的Nextmeal所有者帐户
  • 电子邮件：user2@example.com
  • 密码：Nextmeal！
  • 编辑您的餐厅信息
  • 创建和编辑您的餐厅菜单
  • 查看当前用餐
  • 在下周六之前更新您想在下周提供的餐点和数量
  • 随时查看当天的所有订单
  • 在分析图表页面上查看过去30天的总体效果

管理员

作为管理员，您可以：

  • 登录到您的Nextmeal管理员帐户
  • 电子邮件：root@example.com
  • 密码：Nextmeal！
  • 在平台上查看所有餐厅，用户和订单的信息
  • 编辑，取消或删除餐厅，用户和订单的信息
  • 在分析图表页面上查看当前和过去30天的总体效果

API文件

Nextmeal应用程序正在使用我们自己的REST API。要了解有关API的更多信息，请查看我们的API文档以获取更多信息。

包含什么

在API文档中，您将找到以下目录和文件：

dist/
├── admin/
│   ├── getRestaurants
│   ├── getRestaurant
│   ├── putRestaurant
│   ├── deleteRestaurant
│   ├── getUsers
│   ├── getUser
│   ├── deleteUser
│   ├── getOrders
│   ├── putCancel
│   ├── putUser
│   ├── dashboard
└── owner/
│   ├── getRestaurant
│   ├── postRestaurant
│   ├── putRestaurant
│   ├── getDish
│   ├── deleteDish
│   ├── getMenu
│   ├── putMenu
│   ├── getOrders
│   ├── getRestaurants
│   ├── getRestaurant
│   ├── putRestaurant
│   ├── deleteRestaurant
│   ├── getUsers
│   ├── getUser
│   ├── deleteUser
│   ├── getOrders
│   ├── putCancel
│   ├── putUser
│   ├── dashboard
└── user/
│   ├── signup
│   ├── signin
│   ├── emailCheck
│   ├── getSubscription
│   ├── postSubscription
│   ├── getProfile
│   ├── putProfile
│   ├── getTomorrow
│   ├── getOrders
│   ├── getCurrentUser
└── restaurant/
│   ├── getRestaurants
│   ├── getRestaurant
└── order/
    ├── getNew
    ├── postNew
    ├── getOrder
    ├── getOrderEdit
    ├── putOrder
    ├── getComment
    ├── postComment
    └── putCancel

在本地运行服务器

以下说明将为您提供项目的副本以及在本地计算机上运行后端服务器所需的设置。

先决条件

克隆

将此存储库克隆到本地计算机

$ git clone https://github.com/smallpaes/nextmeal.git

设置数据库

通过MySQL Workbench创建数据库

运行以下代码

drop database if exists nextmeal;
create database nextmeal;

设定应用程式

1.进入项目文件夹

$ cd nextmeal

2.通过npm安装软件包

$ npm install

3.创建.env文件

$ touch .env

4.注册一个帐户/获取密钥

Gmail / Imgur / Newebpay

5.将API密钥存储在.env文件中并保存

GMAIL_ACCOUNT=
GMAIL_PASSWORD=
JWT_SECRET=
IMGUR_CLIENT_ID=
URL=
MERCHANT_ID=
HASH_KEY=
HASH_IV=

6.在config.json文件中编辑密码

/server/config/config.json

"development": {
  "username": "root",
  "password": "<YOUR_WORKBENCH_PASSWORD>",
  "database": "nextmeal",
  "host": "127.0.0.1",
  "dialect": "mysql"
}

7.运行迁移

在“ /服务器”中，在控制台中运行以下代码

$ npx sequelize db:migrate
$ NODE_ENV=test npx sequelize db:migrate

8.添加种子

在“ /服务器”中，在控制台中运行以下代码

$ npx sequelize db:seed:all

9.激活服务器

$ npm run dev

10.查找成功激活的消息

> App is listening on port 3000!

您可以通过访问以下网址开始使用api：http：// localhost：3000 / api

在本地运行应用

以下说明将介绍在本地计算机上运行前端应用程序所需的设置。

设定应用程式

1.进入项目文件夹

打开一个新终端并进入文件夹

$ cd nextmeal/client

2.通过npm安装软件包

$ npm install

3.创建一个Google Maps Project并获取API密钥

创建项目并访问API密钥的说明，请检查此网站

4.创建.env.local文件

$ touch .env.local

5.将API密钥存储在.env.local文件中并保存

VUE_APP_GOOGLE=<YOUR_GOOGLE_MAPS_API_KEYS>

7.编译和热重装以进行开发

$ npm run serve

即将推出的功能

  • 用户优惠券功能
  • 餐馆老板可以回复用户的评论
  • 餐厅老板可以提供晚餐
  • 用户可以更新或重置密码

团队成员

（*按字母顺序）

王丹妮

  • 后端开发
  • 建立健壮的RESTful CRUD API：用户身份验证，餐馆老板和管理员的分析报告面板
  • 数据库和模型配置，后端自动化测试以及Node.js调度程序集成
  • 与队友合作，提出更好的用户故事，线框，ERD模型和RESTful API设计
  • 与队友合作以建立数据库，创建播种机并部署应用程序
  • 与后端团队合作，设计和使用我们自己的RESTful API
  • 队友代码审查

黄Huang

  • 整个前端开发
  • 项目设置，功能开发和新技术实施（Sass，Google Maps API等）
  • 访客，会员，饭店老板和管理员的页面
  • 数据可视化：为餐厅所有者和管理面板创建分析图
  • UX和UI设计
  • Github项目创建和分支机构管理
  • 与队友合作，提出更好的用户故事，线框，ERD模型和RESTful API设计
  • 与后端队友合作以连接到第三方支付API
  • 队友代码审查

陶鹤

  • 后端开发
  • 建立健壮的RESTful CRUD API：餐厅，订单，餐点，用户订阅和菜单
  • 与队友合作，提出更好的用户故事，线框，ERD模型和RESTful API设计
  • 与队友合作以建立数据库，创建播种机并部署应用程序
  • 与队友合作以连接到第三方支付API
  • 队友代码审查
Wei Xiao
Wei Xiao

Written by Wei Xiao

41 Followers
188 Following

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams