Ordering case
Document structure
Case effect display
In this case, the following functions are mainly completed.
Display of main page
On this page, you can enter your mobile phone number and the meal you want to order. After you click order, you will be prompted with success, and you can view all orders.
Click the mobile number and the order details of the user will pop up.
The style of this case is not the key point, but mainly to learn how to complete the function, so ugly is ugly.
Page, service, etc
We use order.js as the starting point of the project
Static page
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>home page</title> <link rel="stylesheet" href="/css/index.css"> </head> <body> <div class="box"> <h2>Micro ordering system</h2> Cell-phone number:<input type="text" id="phone"><br> Delicious food:<input type="text" id="food"><br> <input type="submit" value='Order me to order.' id="btn"><br> <a href="">View all orders</a> </div> </body> </html>
/*index.css*/ .box{ width:400px; height: 250px; margin: 50px auto; padding:20px; border: 10px solid #e35757; background-color: lightblue; } input{ margin:5px 0; }
Such a basic page is completed
Service establishment
In order.js, the package modules needed by the project are introduced and services are built
//order.js const express = require('express'); const app = express(); //Route files in the public directory automatically. app.use(express.static('public')); app.listen(3000);
Function realization
Next, we start to analyze the function. The first and most important thing is to submit the information we input to the background for processing. We need to use ajax to exchange data without refreshing the page.
Submission of data
Bind the click event to the submit order button and submit the ajax request to the background. The ajax file here is the ajax that I used to package, which can be found in Package code interpretation Full package code To view.
We save the ajax code in the js folder and introduce it in the page.
<script src="/js/ajax.js"></script> <script> console.log(ajax); let oBtn = document.getElementById('btn'); oBtn.onclick = function () { //Send ajax request to the background, and pass the mobile phone number and food to the back end. }
After running, the console output ajax function to prove the success of ajax reference.
Next, configure the content of ajax. Set what data will be sent to which address when clicking submit button and what data will be returned after sending successfully
let oPhone = document.getElementById('phone'); let oFood = document.getElementById('food'); ajax({ //Click to send a request to the order address url:'order', //Send data as post type:'post', data: { phone:oPhone.value, food:oFood.value, }, success(msg){ alert(msg) } })
Next, configure the routing for the order.
app.post('/order',function (req,res) { res.send('order success') });
Enter the phone number and food, click to order, and you will be prompted that the order is successful
data processing
Next, the data submitted by the foreground is processed. Download the body parser package introduced to handle post requests.
const bodyParser = require('body-parser');
And write the necessary code to introduce bodyParser
app.use(bodyParser.urlencoded({ extended: false }))
Using req.body, we can get the data in object form
app.post('/order',function (req,res) { console.log(req.body); res.send('order success'); });
