This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Node Creates a Web server

Request response processing between the server and the browser

  • Request: The browser sends a request to the server for a file.
  • Processing: After the server receives the browser request, it finds the corresponding file.
  • Response: The server reads and retrieves the contents of the file and returns it to the browser.

Use THE HTTP module to set up the Web server

  • HTTP is a system module that allows us to create a Web server in a simple process

Create a Web server step 4:

  1. Load/import/import the HTTP module
  2. Creating a server object
  3. Starting a server
  4. Listen for server requests and process them
//1. Load/import the HTTP module
const http = require('http');

//2. Create the server object
const server = http.createServer();

//3. Start the server
server.listen(3000.() = > {
    console.log('Server is running... ');
});

//4. Listen for browser requests and process them
//on: This method is used to listen for events
// Parameter 1: event type. Request indicates the browser request event
// Argument 2: the callback function that is triggered when a browser request is listened to. This function has two arguments req and res
// Req (request) : request object
// res (response) : response object
server.on('request'.(req, res) = > {
    // The end method returns the data to the browser, which displays the string
    res.end('Hello Nodejs');
});
Copy the code

Different urls display different content

Core: Req (request object) has the URL property, which holds the URL address of the current request

Note: The url property holds an address that has no protocol, IP, port number, and starts with / :

// Target: Different URL addresses display different content

//1. Load the HTTP module
const http = require('http');

//2. Create a server
const server = http.createServer();

//3. Start the server
server.listen(3000.() = > {
    console.log('server is running... ');
});

//4. Listen for browser requests
server.on('request'.(req, res) = > {
    // The url property of the req object holds the url address of the current request
    //console.log(req.url);
    
    const url = req.url;

    if (url === '/') {
        res.end('index-page');

    } else if (url === '/admin/login') {
        res.end('login-page');

    } else if (url === '/goods/list') {
        res.end('list-page');

    } else {
        res.end('not found'); }})Copy the code

Different URLS display different HTML pages

Core: fs.readFile reads the contents of an HTML page and returns the file contents to the browser via the res.end method

//4. Listen for browser requests
server.on('request'.(req, res) = > {
    // The url property of the req object holds the url address of the current request
    //console.log(req.url);
    
    const url = req.url;
    
    if (url === '/') {
        // Call fs.readfile to read the index.html page
        // Return the content of the page to the browser using the res.end method
        fs.readFile('./view/index.html'.(err, data) = > {
            if (err) {
                return res.end('not found!!! '); } res.end(data); })}else if (url === '/login') {
        fs.readFile('./view/login.html'.(err, data) = > {
            if (err) {
                return res.end('not found!!! '); } res.end(data); })}})Copy the code

How to solve the problem that the Browser displays Chinese garbled characters

Core: Use the setHeader method in res (Response object)

// res.setHeader('content-type', 'text/html; charset=utf-8');
//4. Listen for browser requests
server.on('request'.(req, res) = > {
    // The url property of the req object holds the url address of the current request
    //console.log(req.url);
    
    const url = req.url;
    res.setHeader('content-type'.'text/html; charset=utf-8');
    if (url === '/') {
        res.end('home');

    } else if (url === '/admin/login') {
        res.end('Login page');

    } else if (url === '/goods/list') {
        res.end('List page');

    } else {
        res.end('not found'); }})Copy the code

Static resource loading

  1. Enter the address in your browser and press enter to send the request.
  2. The server finds the corresponding file and returns the content to the browser.
  3. The browser receives the content from the server and begins parsing it.
    • When the link tag is parsed, the server is asked again to obtain the contents of the a.ss file.
    • When the script tag is parsed, the server is again requested for the contents of the B. js file.
    • When the img tag is parsed, request the server again to get the image file.

//4. Listen for browser requests
server.on('request'.(req, res) = > {
    // The url property of the req object holds the url address of the current request
    //console.log(req.url)
    const url = req.url;
    if (url === '/') {
        // Call fs.readfile to read the index.html page
        // Return the content of the page to the browser using the res.end method
        fs.readFile('./view/index.html'.(err, data) = > {
            if (err) {
                return res.end('not found!!! '); } res.end(data); })}else if (url === '/login') {
        fs.readFile('./view/login.html'.(err, data) = > {
            if (err) {
                return res.end('not found!!! ');
            }
            res.end(data);
        })

    /** ** ** ** ** ** ** ** ** ** ** ** ** ** *
    } else if (url.startsWith('/public')) {
        // url = '/public/css/a.css';
        // url = '/public/css/aa.css';
        // url = '/public/js/b.js';
        // url = '/public/img/c.jpg'
        fs.readFile('. ' + url, (err, data) = > {
            if (err) {
                return res.end('not found!!! '); } res.end(data); })}})Copy the code

Praise support, hand stay fragrance, and have glory yan, move your small hand to make a fortune yo, thank you for leaving your footprints.

Past excellent recommendation

Front ten thousand literal classics – basic

Front swastika area – advanced chapter

Let’s talk about two of the most common administrative tools used in front-end development

Talk about regular expressions

Hand touch hand take your liver Nodejs (1)

Obtain the file BLOB stream address to download the function