Account details: User: ID:1 password:123456
Admin: ID:2 password:123456
Manager: ID:1 password:123456
Frontend:
-
HTML5:
- The document structure is defined using HTML5 tags such as
<!DOCTYPE html>,<html>,<head>,<meta>,<link>,<script>,<body>,<div>,<img>,<a>,<button>,<ul>,<li>,<nav>,<hr>,<p>, etc.
- The document structure is defined using HTML5 tags such as
-
CSS:
- External styles are linked using the
<link>tag with references to both a local CSS file (format.css) and an external CSS file from PureCSS and Mapbox.
- External styles are linked using the
-
Vue.js:
- The Vue.js library is included via
<script>tags. It's a JavaScript framework for building user interfaces, and it's utilized to dynamically generate menu items based on data (v-for="ITEM in top_menu") and bind values to the DOM ({{ITEM.title}}).
- The Vue.js library is included via
-
JavaScript:
- Several JavaScript files are included using
<script>tags, namelyvue.jsandtool.js. These scripts likely contain custom JavaScript code for additional functionality.
- Several JavaScript files are included using
-
Mapbox:
- Mapbox is integrated into the page using Mapbox GL JS library. The Mapbox API is used to display a map (
<div id='map'></div>) with a specified style ('mapbox://styles/mapbox/streets-v11'). The access token is provided in the script (mapboxgl.accessToken).
- Mapbox is integrated into the page using Mapbox GL JS library. The Mapbox API is used to display a map (
-
Responsive Design:
- PureCSS is used for styling, and it provides a responsive grid system and various styles for UI components. The class
pure-button pure-button-primaryis from PureCSS, styling a login button.
- PureCSS is used for styling, and it provides a responsive grid system and various styles for UI components. The class
-
Asynchronous Loading:
- The
deferattribute is used for asynchronous loading of JavaScript files, ensuring that the scripts are executed in order after the HTML has been fully parsed.
- The
In summary, the provided HTML document uses HTML5 for structure, CSS for styling (including styles from PureCSS and Mapbox), Vue.js for dynamic content, JavaScript for scripting and functionality, and Mapbox for displaying an interactive map.
Backend:
-
Express.js:
- Web application framework for Node.js.
-
Session Management:
req.sessionfor storing and retrieving user information.
-
Middleware for Database Connection Pooling:
- Use of
req.pool.getConnectionfor managing database connections.
- Use of
-
MySQL Queries:
- Interacting with a MySQL database for retrieving and updating user information, fetching trip details, and getting hotspots.
-
Routing:
- Defining routes for handling different HTTP requests (
GET,POST) on various endpoints.
- Defining routes for handling different HTTP requests (
-
RESTful API Endpoints:
- Designing endpoints such as
/getUserInfor,/updateInfor,/getTrips, and/getHotspotsto provide specific functionalities over HTTP.
- Designing endpoints such as
-
JSON Responses:
- Returning data in JSON format using
res.json().
- Returning data in JSON format using
-
Data Retrieval and Update:
- Executing SQL queries to retrieve user information, update user details, and fetch trip and hotspot data.
-
Dynamic SQL Query Building:
- Constructing SQL queries dynamically based on the parameters received in the request.
-
Conditional Statements:
- Using conditional statements to check and modify data based on certain conditions, such as health status.
-
Error Handling:
- Implementing error handling with
res.sendStatus(500)for database connection and query errors.
- Implementing error handling with