写在前面

本项目为练手小项目（初步成果，待完善），目的为了验证对于Linux网络编程方面的粗浅理解，若有不足，请留言指正，不胜感激！

附上项目源码：https://github.com/Adam-Xi/OrderMealSystem

开发环境：CentOS7、Windows10

开发工具（语言）：

数据库：MySQL、CentOS下MariaDB
服务器设计：C++、g++(版本7.3.1)、gdb
用户界面：HTML、CSS、JavaScript、JQuery

设计思路

大致方向：通过浏览器（http客户端）连接远程http服务器进行数据的交互

数据库

数据库方面主要设计两张表：
1、菜品信息表dish_table：
菜品号dish_id、菜品名name、菜品单价price
2、订单信息表order_table：
订单号order_id、餐桌号table_id、下单时间time、所点菜品dishes、订单状态status

HTTP服务器

1、HTTP为超文本传输协议，整个的HTTP报文，若使用编程语言中的类型来说的话，是一大段字符串，所以通过HTTP协议进行服务器与客户端之间传输的数据编码方式就显得尤为重要。这样供选择的较好的方式有两种，它们分别对应不同的Content-Type：

Content-Type	类型说明	实例
application/x-www-form-urlencoded	以 URLEncoded 的方式进行编码	name=test&sub%5B%5D=1&sub%5B%5D=2 解码后就是：name=test&sub[]=1&sub[]=2
application/json	消息主体是序列化后的 JSON 字符串，要求服务器端能够支持JSON	{“name”:“test”,“sub”:[1,2]}

application/x-www-form-urlencoded 的方式对复杂类型（例如数组）的处理，并没有严格的标准。有的接口使用 key[]=a&key[]=b 来表示数组 key: [‘a’, ‘b’]，有的库则将数组编码为：key=a&key=b，有的则是携带下标进行编码：key[0]=a&key[1]=b……十分混乱。相比来说，JSON比起更加具有优势，使用起来更加简单

2、HTTP服务器的核心操作分为以下几步：
a）读取请求并解析（反序列化）
b）根据请求计算响应（和具体操作实现功能相关）
c）把响应写回客户端（序列化）
将这三步嵌套进各个API中，即可完成服务器的核心操作
其中，序列化和反序列化自然使用JSON格式来完成，这里引入C++相关的JSON库"jsoncpp"来进行解析（参见Jsoncpp 使用方法大全-CSDN）
同时，为了简化服务器上数据的处理，这里引入一个HTTP/HTTPS库来进行处理-----“cpp-httplib”(参见GitHub/cpp-httplib)

前后端交互的API设计

这里选用较为流行的RESTful API进行设计（参见RESTful API设计指南 — 阮一峰）

a) 使用HTTP方法表示操作的语义:
POST表示插入、GET表示查找、PUT表示修改、DELETE表示删除

b) 使用url path表示要操作的资源:
‘/dish’表示操作菜、’/order’表示操作订单

c) 使用body表示操作过程中的一些具体数据，通常使用json格式来组织数据
json是一种数据组织格式，可以用一个字符串来表示一个结构化的数据

具体如下：

1、新增菜品
请求：
POST /dish
{
“name”:“红烧肉”,
“price”:2000
}
Content-Type:application/json
响应：
HTTP/1.1 200 OK
{
“ok”:true,
“reason”:""
}

2、查看所有菜品
请求：
GET /dish
响应：
HTTP/1.1 200 OK
[
{
“dish_id”:1,
“name”:“红烧肉”,
“price”:2200
},
{
“dish_id”:2,
“name”:“回锅肉”,
“price”:4300
}
…
]

3、查看指定菜品
请求：
GET /dish/:dish_id
响应：
HTTP /1.1 200 OK
{
“dish_id”:1,
“name”:“红烧肉”,
“price”:2200
}

4、修改菜品
请求：
PUT /dish/:dish_id
{
“name”:“毛家红烧肉”,
“price”:8000
}
响应：
{
“ok”:true
}

5、删除菜品
//传统的方式：Get/dish?method=delete&dish_id=1
请求：
DELETE /dish/:dish_id
响应：
HTTP /1.1 200 OK
{
“ok”:true
}

6、新增订单
请求：
POST /order
{
“table_id”:“武当”,
“time”:“2020/01/04 10:00”,
“dish_ids”:[1,2,3]
}
响应：
HTTP /1.1 200 OK
{
“ok”:true
}

7、查看订单
请求：
GET /order
响应：
HTTP /1.1 200 OK
[
{
order_id:1,
table_id:“武当”,
time:“2020/01/04 12:00”,
status:1,
dishes:
[
1,2,3
]
},
{
…
},
…
]

8、修改订单状态
请求：
PUT /order/:order_id
{
status:1
}
响应：
HTTP /1.1 200 OK
{
“ok”:true
}

客户界面

届时，消费者会扫描自己所在餐桌的二维码，通过二维码在浏览器上进行点餐
所以，客户界面需要显示菜单，总价等的信息
1、通过“前端三板斧”----HTML、CSS、JavaScript进行简单的页面设计
2、这里采用Vue.js框架用来进行JavaScript与界面之间的连接，从而实现双向绑定（修改数据，影响界面；修改界面，影响数据）
3、还需要将菜单显示在浏览器页面上，但是通过前端语言一项项的写显然不现实，因为菜单也是需要修改的，难道修改之后还需要再一次修改浏览器页面上内容么？这里使用ajax从服务器端获取菜单信息（由于网上大佬说html原生的ajax方法不太好用，推荐使用JQuery库中用到的ajax），这只是ajax的一部分功能而已
4、前面提到的计算用户当前选中菜品的总价功能，通过Vue.js即可实现，获取到服务器上的菜单信息后，通过for循环将所选菜品价格进行统计后显示在界面即可实现
5、选好菜品后点击提交按钮，通过ajax将订单信息传回服务器
从而实现用户点餐的功能

---

LOADING…