1 Web Application Introducton

Web Application

A spring and Hibernate based online food ordering system

• Implemented Rest API via Spring MVC including registration, menu searching and ordering, checkout.
• Utilized Hibernate to access and operate the data storage(menu, restaurants etc.)
• Provided both authentication and authorization via Spring security to protect the application from malicious attacks.
• Used the Spring framework core technologies to loosely decouple all the components in the application
• Build the client side with ReactJS and Ant Design to allow users add items to the shopping cart and place orders.

Web application: client/server architecture

• Client: user interface
• A user interface is for users to interact with web services. UI can provide an easy way for you to send requests to a backend service, and show you the corresponding response. It usually runs in the browser but can be provided by mobile apps.
• Web Server: host web service
• Service is a program that can receive different requests from different clients and return correct results, a web service is a service offered by a device to others over the internet.
• Database Server: host a database
• A database is an organized collection of data, stored and accessed electronically.
• Internet
• Make connections between client and server so that client can successfully send requests to the server, and can successfully send responses to the client.

Three-tier architecture

• Presentation tier

The top-most level of the application is the user interfaces. The main function of the interface is to translate tasks and results to something the user can understand.

• 如何展示给用户

  It's the tier that users can access directly. It provides the application's user interface. For example, how to show nearby events in the browser, how to provide an easy way for users to send requests to the backend. Language: HTML, CSS, Javascript, ... Again, this part will be covered by fronted lessons.

• Logic tier

This layer coordinates the application, processes commands, makes logical decisions and evaluations, and performs calculations, and performs calculations. It also moves and processes data between the two surrounding layers.

• 如何处理请求

  Maintain the business logic of the application, sitting between presentation tier and data tier, receive requests from presentation tier, make correct database operation, and return the final result back to the presentation tier. Language: C++, Java, Go, Python, ...

• Data tier

Here information is stored and retrieved from a database or file-system. The information is then passed back to the logic tier for processing, and then eventually back to the user.

• 如何存取数据

  Mostly we don't need to create a database system ourselves, we just need to use an existing one like MySQL, or MongoDB. What we need to do is tell the database system how to store our data. For example, what does each table look like, what's the relationship between each other: Language: SQL.

What does logic tier do in this project? What does data tier do in this project?

• Implemented Rest API via Spring MVC, including registration, menu searching, ordering and checkout.
• Utilized Hibernate to access and operate the data storage (menu, restaurants etc.)
• Provided both authentication and authorization via Spring security to protect the application from malicious attacks.
• Used the Spring framework core technologies to loosely decouple all the components in the application
• Built the client side with ReactJS and Ant Design to allow users to add items to the shopping cart and place orders.

Rest API

URL (Unique Resource Locator)

A URL is used to uniquely identify a resource over the web.

URL has the following syntax: protocol://hostname:port/endpoint?query

Examples: http://www.youtube.com/result?search_query=restaurant

What does http://localhost:8080/login?username=vincent&password=1234 mean?

There are 5 parts in a URL:

• Protocol (required): The application-level protocol used by the client and server, e.g. :HTTP, HTTPs, and FTP
• Hostname (required): The DNS domain name (e.g. www.google.com) or IP address (e.g: 192.128.1.2) of the server:
• Port: The TCP port number that the process is listening to for incoming requests from the clients. By default it is 80, HTTPS is 443, FTP is 21, ...
• Endpoint: The name and location of the requested resource, under the server base dictionary.
• Query: separated from the preceding part by a question mark(?), containing a query string of attribute-value pairs separated by a delimiter.

Our server provides three services, and we will directly use a URL to indicate which a client wants to use and what kind of data they request.

Hostname: 主机名是网络上的计算机或服务器的名称

• localhost: 通常指的是当前计算机自己。在网络中，它通常映射到IP地址127.0.0.1
• 192.168.0.1: 这是一个私有IP地址，通常用于本地网络中的路由器或其他设备
• www.google.com: 这是一个公开的网址，指向Google的主页

Port: 端口是网络上的一个地址，它表示某个特定的服务。提到了两个端口：8080 和 80。

• 8080: 这是另一个常用于HTTP的端口，但并不是默认的
• 80: (default) 这是HTTP服务的默认端口

URL : Job, search 表示服务器上的两种不同服务或功能

Parameters: 这里给出了lat=20和lon=120，这表示地理坐标的纬度和经度 lat = 20, lon = 120

如果客户端想要使用Job服务并请求某种数据，它们可能会发送一个URL类似于以下之一：

• http://localhost:8080/Job?lat=20&lon=120
• http://192.168.0.1:80/Job?lat=20&lon=120
• http://www.google.com/Job?lat=20&lon=120

同样地，对于search服务：

• http://localhost:8080/search?lat=20&lon=120
• http://192.168.0.1:80/search?lat=20&lon=120
• http://www.google.com/search?lat=20&lon=120

这个图展示了如何使用传输层(特别是TCP 或UDP) 在网络上进行应用间的通行.

• app: 代表不同的软件应用或进程, 它们希望在网络上发送或接收数据

• port: 端口就像应用发送或接收的门, 每个应用都与一个特定的端口关联, 以确保数据被发送到或从正确的应用接收.

• TCP or UDP : 这是传输层协议. 它负责网络的端到端通信和数据传输.

TCP : 控制传输协议: 它是面向连接的, 这意味着源和目标之间建立了专用的连接. 它保证数据包按照发送的顺序交付.

UDP : 用户数据包协议: 它是无连接的, 并且不保证数据包的交付或顺序. 但它更快且需要较少的开销.

• packet: 这是在网络上发送的数据. 每个数据包都会有一个目的端口号(port #) , 以确保它能够到达目的地的正确应用.

Image you have a physical address 1200 W 20th Street, Apt 10, Los Angeles, CA

Los Angles, CA : 城市, 可以被视为网络或IP地址 - 它缩小了数据应该发送到哪里的范围.

1200 W 20th Street : 街道, 类似于网络上的计算机或服务器

Apt 10: 公寓号码, 就像发送到大楼中某个公寓的邮件是为那个公寓的居民准备的, 发送到特定端口的数据是为特定应用准备的.

在这个比喻中，基于地址递送邮件的邮政服务类似于传输层(TCP/UDP)确保数据包能够到达正确的应用(通过端口)

Commonly used port numbers MySQL: 3306 Web: 80

• MySQL：默认的端口号是 3306。当你在网络上设置或连接到MySQL数据库服务器时，它通常在此端口上监听连接。
• Web (HTTP)：默认的端口号是 80。当你在浏览器中打开一个网站而不指定端口时，HTTP请求通常会发送到此端口。

HTTP request and response

Question: What does TCP/IP do in computer systems?

Answer: It's like a mail that assures a letter is sent to the correct recipient. If you want to send a message to 10.42.0.1, it should be delivered to the right machine.

However, this is not enough as we need to understand what message it is sending.

The HTTP protocol assures that our server can understand the meaning of the message correctly.

• What resource are you trying to access?
• What behavior are you trying to do?

这个图示展示了HTTP协议中的请求和响应的结构

• 请求部分 (上半部分)
• 请求行 (Request Line)：它定义了请求类型（在此为GET）、资源的URI（在此为/doc/test.html），和所使用的HTTP版本（这里是HTTP/1.1）
• 请求头 (Request Headers)：这些提供了关于请求、请求的资源和客户端自身的信息。例如:
  • Host: 请求的网站域名或IP地址。
  • Accept: 客户端可以处理的内容类型。
  • Accept-Language: 客户端接受的语言类型。
  • User-Agent: 有关发出请求的用户代理（通常是浏览器）的信息。
• 请求消息体 (Request Message Body)：在某些请求（如POST请求）中，这部分包含发送到服务器的数据。在这个例子中，它包含查询参数bookId=12345&author=Tan+Ah+Teck。
• 响应部分 (下半部分)：
• 状态行 (Status Line)：包括HTTP版本、状态码（这里是200，表示“OK”或成功）和状态描述。
• 响应头 (Response Headers)：这些提供了关于响应、被请求的资源和服务器自身的信息。例如:
  • Date: 响应生成的日期和时间。
  • Server: 服务器的信息。
  • Content-Type: 响应内容的MIME类型。
• 响应消息体 (Response Message Body)：这是服务器返回的实际数据。在这个例子中，它是一个简单的HTML，表示“My Home page”。

GET and POST - HTTP request methods

HTTP methods have four CRUD(Create/Read/Update/Delete) operations. Two commonly used methods for a request-response between a client and server are:

• GET - Request data from the server.
• Post - Create data on the server.
• PUT - Update data on the server.
• DELETE - Delete data on server.

There are also other methods like delete, put, etc. In our application, we'll use HTTP methods directly to indicate what kind of operation a client wants to take.

In the project, what HTTP methods shall we use in the following cases?

• Search for hotels nearby, give geolocation, and return a list of hotels

GET

• Get user's reservations, give the user information, and return a list of favorite positions.

GET

• Reserve/Cancel a stay, return OK if the operation is successfully done.

POST

• Login [username/password]

POST

What's REST?

REST（Representational State Transfer，表现层状态转换）是一种软件架构风格，主要用于分布式系统，尤其是Web应用。REST通常与HTTP协议一起使用，用于构建Web服务。以下是REST的主要概念和特点：

1. 资源 (Resources)：REST中的核心概念是“资源”，它可以是任何对象、数据或服务。每个资源都可以通过唯一的URI（统一资源标识符）来识别。
2. 无状态 (Stateless)：每个请求从客户端到服务器都必须包含理解和处理请求所需的所有信息。服务器不应保留客户端的任何上下文信息，即每个请求都是独立的。
3. 客户端-服务器 (Client-Server)：客户端负责用户界面和用户体验，而服务器负责存储和处理数据。这种分离使得各部分可以独立地开发和扩展。
4. 缓存 (Cacheable)：响应应该是可以缓存的。这可以提高性能，因为数据可以从缓存中取得，而不是每次都从服务器重新获取。
5. 统一接口 (Uniform Interface)：REST的一个关键特性是其统一的接口，这简化了系统架构，使得各部分可以独立地演进。这也使得REST服务和客户端之间的交互变得简单和一致。
6. 无连接 (Connectionless)：REST是无连接的，意味着服务器和客户端之间不需要持续的连接。
7. 分层系统 (Layered System)：REST允许使用分层的系统结构，每层只与相邻的层进行交互。这提供了灵活性，可以在不同的层上进行优化或添加额外的功能。
8. 使用标准的HTTP方法：在RESTful Web服务中，通常使用标准的HTTP方法（如GET、POST、PUT、DELETE）来执行对资源的操作。

A RESTful API is an application program interface (API) that uses HTTP methods like GET, PUT, POST, and DELETE to manage resources. It's also stateless.

一个RESTful API是一个应用程序接口（API），它使用HTTP方法，如GET、PUT、POST和DELETE来管理资源。它也是无状态的。

1. 使用HTTP方法来管理资源：这意味着RESTful API使用上述的HTTP请求方法（GET、PUT、POST和DELETE）来进行资源的增、查、改、删操作。
2. 无状态（stateless）：每次客户端向服务器发送请求时，服务器都会将其视为一个全新的请求，而不会考虑该客户端之前的任何活动或请求。这意味着每个请求都应包含所有必要的信息，使服务器能够理解和处理该请求，而不依赖于之前的任何请求。

RESTful API 是一种应用程序接口（API）设计风格，它遵循表示状态转移（REST，Representational State Transfer）的原则。以下是其主要特点和概念：

1. 资源中心化：在RESTful设计中，所有事物都被视为“资源”（resources），每个资源都有一个与之对应的统一资源标识符（URI）。例如，如果有一个在线书店的API，书、作者和出版商都可以被视为不同的资源。
2. 无状态（Stateless）：服务器不保存客户端的任何状态。每次请求都应该包含所有必要的信息供服务器处理。这意味着，服务器不应依赖之前的请求来响应当前的请求。
3. 使用标准的HTTP方法：RESTful API使用标准的HTTP请求方法来进行操作，如： - GET：检索资源 - POST：创建新资源 - PUT：更新资源 - DELETE：删除资源
4. 通信通过标准的HTTP状态码：例如，200 OK 表示请求成功，404 Not Found表示资源未找到，500 Internal Server Error表示服务器内部错误等。
5. 数据格式：RESTful API通常使用JSON或XML作为数据交换的格式。
6. 无状态性可以提高性能：由于每次请求都是独立的，服务器不需要维护或管理客户端状态，这有助于简化应用的结构并提高性能。

总的来说，RESTful API是一种简单、标准化、性能高的设计和编程风格，它被广泛应用于现代网络应用和移动应用的开发中

For example:

来看一个在餐馆的RESTful API设计例子：

1. 资源与URI

假设我们的在线书店有两大主要资源：MenuItems 和 Orders。这两个资源可以通过以下URI来表示：

• 菜单项：/menuItems
• 订单：/orders

2. 使用HTTP方法进行操作

• 获取所有菜单项:

• 方法：GET

• URI：/menuItems

• 获取特定ID的菜单项:

• 方法：GET

• URI：/menuItems/123 （其中123是菜单项的ID）

• 增加新的菜单项:

• 方法：POST

• URI：/menuItems

• 请求体（body）中会包含菜单项的详细信息，如名称、价格、描述等。

• 更新特定ID的菜单项:

• 方法：PUT

• URI：/menuItems/123

• 请求体中会包含要更新的信息。

• 删除特定ID的菜单项:

• 方法：DELETE

• URI：/menuItems/123

• 查看所有订单:

• 方法：GET

• URI：/orders

• 查看特定ID的订单:

• 方法：GET

• URI：/orders/456 （其中456是订单的ID）

• 下订单:

• 方法：POST

• URI：/orders
• 请求体中会包含订单的详细信息，如所选菜单项、数量、顾客姓名等。

3.响应与HTTP状态码

• 请求成功时，可能的返回是200 OK或201 Created（对于新创建的订单）。
• 如果请求了不存在的菜单项ID或订单ID，返回404 Not Found。
• 如果客户端发送的数据有误或不完整，返回400 Bad Request。

4. 数据格式

响应通常会使用JSON格式。例如：

请求：GET /menuItems/123

响应：

jsonCopy code
{
  "id": 123,
  "name": "宫保鸡丁",
  "price": 38.0,
  "description": "经典川菜，鸡肉嫩滑，辣中带甜。"
}

通过这种方式，餐馆管理系统的RESTful API为客户端（可能是一个移动应用或web应用）提供了一种简单、直观的方式来查看菜单、下订单或进行其他相关操作。

Question: 什么叫做resources yahoo.com/department?id=10

在RESTful API中，"resources"（资源）是指系统中可以被识别的对象或数据。每个资源都可以通过一个特定的URI（统一资源标识符）来定位。资源可以是物件、数据记录或者服务等。

例如，在这个URL yahoo.com/department?id=10 中，"department" 可被视为一个资源，它代表了某个特定的部门。而id=10 是这个资源的一个标识符，告诉我们是查询ID为10的部门。

Question: 什么叫做用http methods 去mange resources?

使用HTTP方法管理资源是指利用HTTP协议中定义的方法（如GET, POST, PUT, DELETE等）来对资源进行操作。

• GET: 用于检索资源。例如，我们可以使用GET方法获取ID为10的部门的详细信息
• PUT: 用于更新已存在的资源。如果我们要更新ID为10的部门的信息，我们可以使用PUT方法
• POST: 用于创建新资源。例如，如果我们要添加一个新部门，我们可以使用POST方法
• DELETE: 用于删除资源。如果我们要删除ID为10的部门，我们可以使用DELETE方法

通过这些HTTP方法，我们可以完整地管理（创建、读取、更新、删除）网络上的资源，这也是RESTful API的核心思想.

Summary of REST API

Several ideas we've already mentioned earlier: Using the HTTP method to indicate what kind of operation a client wants to take. Using the HTTP URL to indicate which service and data a client wants to use and what kind of data they request. Every request is separated, there is no support for doing one post request in several post requests, or doing a delete in a pair of get and post requests.

• 使用HTTP方法表示操作：例如，使用GET来获取数据、使用POST来提交新数据、使用PUT来更新数据以及使用DELETE来删除数据。

• 使用URL表示资源：URL的路径通常表示你想要操作的服务或数据。例如，/users可能代表用户列表，而/users/123可能特指ID为123的用户。

• 每个请求都是独立的：这意味着每个请求都包含了完成该操作所需的所有信息，服务器不需要记住前一个请求的状态。

Why do we want to do that ?

• Operations are directly based on HTTP methods, so that server doesn't need to parse extra things
• URL clearly indicates which resources a client wants, easy for client-side users to understand
• The server is running in stateless mode, improving scalability.

This idea it's a widely used pattern in web server design. The name is called REST or RESTful:https://en.wikipedia.org/wiki/Representational_state_transfer

Example

使用Java来写一个基于Spring MVC的RESTful API涉及许多步骤。下面是一个简化的步骤列表和代码示例，帮助你创建一个基于Spring MVC的RESTful API, 使用Java的Spring MVC框架创建一个关于餐馆的RESTful API:

1. 建立项目结构: 使用Spring Initializr或其他工具（如Maven或Gradle）来创建一个新的Spring Boot项目。

2. 添加依赖: 在pom.xml或build.gradle文件中，确保添加了spring-boot-starter-web的依赖

3. 定义模型: 创建一个Restaurant的实体类，例如：

public class Restaurant {
    private Long id;
    private String name;
    private String address;
    // getters, setters, etc.
}

4. 创建Controller: 在Controller类中，定义HTTP方法和路径来管理Restaurant资源

@RestController
@RequestMapping("/restaurants")
public class RestaurantController {

    @GetMapping("/{id}")
    public ResponseEntity<Restaurant> getRestaurantById(@PathVariable Long id) {
        // 返回指定ID的餐馆
    }

    @PostMapping
    public ResponseEntity<Restaurant> createRestaurant(@RequestBody Restaurant restaurant) {
        // 创建新的餐馆
    }

    @PutMapping("/{id}")
    public ResponseEntity<Restaurant> updateRestaurant(@PathVariable Long id, @RequestBody Restaurant restaurant) {
        // 更新指定ID的餐馆
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteRestaurant(@PathVariable Long id) {
        // 删除指定ID的餐馆
    }
}

5. 服务层和数据存储: 你可能需要一个服务层(RestaurantService)和一个数据存储层(RestaurantRepository)来处理业务逻辑和数据存储。Spring Data JPA是一个常用的库，它可以简化数据访问层的代码

6. 配置数据库: 如果你使用数据库来存储数据，你需要配置数据库连接和添加对应的JPA依赖。

7. 启动和测试: 使用Spring Boot的@SpringBootApplication注解标注主类，并使用SpringApplication.run()方法来启动应用程序。之后，你可以使用工具（如Postman）或浏览器来测试API

8. 以上只是一个简单的概述。在实际应用中，你可能还需要处理异常、验证、安全性、跨域资源共享（CORS）等多种复杂情况。但希望这个简单的概述可以为你提供一个关于如何使用Spring MVC创建关于餐馆的API的启示.

Spring MVC相当于一辆手动挡汽车，Spring Boot相当于把汽车变成自动挡，然后还加装了无钥匙进入、自动启停等功能，让你开车更省心。但是车的主体功能不变，你还是要用到Spring MVC.