[TOC]

1. Effect display

1.1 Directory Structure

├ ─ ─ node_modules # third-party plug-in module package files ├ ─ ─ the control # file operation module │ └ ─ ─ control. Js ├ ─ ─ the router # routing module │ └ ─ ─ the router. The js ├ ─ ─ the static # static resource files stored images font CSS file | ├ ─ ─ views # to store HTML template file ├ ─ ─ app. Js # main entry documents ├ ─ ─ the json # to operate the json fileCopy the code

2. Initialize the project

 #Create project quickly - manually configure without -y
 npm init -y
Copy the code

3. Install the plug-in

Install the Express framework, body-ParserPOST request parsing, and Art-Template template rendering plug-in Nodemon automatic restart tool

#Install Express
npm install --save express 
#Installation art - the template
npm install --save art-template
npm install --save express-art-template
#Install the body - the parser
npm install --save body-parser
#Install the Automatic Node restart tool
npm install --global nodemon
Copy the code

4. Create the service plug-in configuration

Create the main entry file app.js in the project root directory

File: app. Js

// Introduce the Express framework
const express = require('express');
/ / into the body - the parser
const bodyParser = require('body-parser');
// Create a service
const app = express();
// Configure post to parse body-parser
app.use(bodyParser.urlencoded({extended:false}));
/ / the port number
let port = 3000
// Configure static resources
app.use('/static', express.static('static'))
// Configure the template engine
app.engine('html'.require('express-art-template'));
/ / start
app.listen(port,() = >{
    console.log('Started successfully')})Copy the code

5. Routing module

Router ->router.js

Render templates must be placed in the templateviewsdirectory

router.js

const express = require('express');
const router = express.Router();
// Home page render data
router.get('/'.(req, res) = > {
    // Template rendering
    res.render('index.html', {
        listData: {
            name:'Fake data'}}); })// Export the routing module
module.exports = router 
Copy the code

5.1 Importing a Routing Module

Const router = require(‘./router/router’)/app.use(router)

File: app. Js

const express = require('express');
const bodyParser = require('body-parser');
/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the introduction of routing module -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
const router = require('./router/router')
//------------------------------------------------------
const app = express();
app.use(bodyParser.urlencoded({extended:false}));
let port = 3000
app.use('/static', express.static('static'))
app.engine('html'.require('express-art-template'));
/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- mount routing -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
app.use(router)
//------------------------------------------------------
app.listen(port,() = >{
    console.log('Started successfully')})Copy the code

After the configuration is complete, you can enter nodemon./app.js to start. Then enter the local IP address and port number 3000 in the browser, 192.168xx:3000

5.2 Configuring a Static HTML Template

layuiThe framework’s official websitewww.layui.com/

layuiUse: download files from the official websitestaticFiles are imported separately in HTMLlayui.cssandlayui.all.jsYou can use

There are two HTML files, a home page and a search page

Home page: index. HTML

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".. /static/css/layui.css">
    <style>
        .layui-table {
            text-align: center;
        }

        .layui-layout-admin {
            padding: 20px;
        }

        .layui-layout-admin .layui-center {
            text-align: center;
        }

        #form {
            padding: 20px;
        }

        .search {
            width: 300px;
        }

        .flex {
            display: flex;

        }

        .justify-between {
            justify-content: space-between;

        }

        .top-nav {
            width: 100%;
        }
        .margin-bottom{
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="layui-container layui-layout-admin">
        <div class="margin-bottom">
            <span class="layui-breadcrumb">
                <a href="/">Home page</a>
            </span>
        </div>
        <div class=" flex justify-between top-nav">
            <button type="button" class="layui-btn" id="add">add</button>
            <form action="/search">
                <div class="search flex">
                    <input type="text" name="text" placeholder="Keywords" class="layui-input input-search ">
                    <button class="layui-btn search-butt" type="submit">search</button>
                </div>
            </form>

        </div>
       <! -- Use layui table -->
        <div class="layui-row">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th class="layui-center">ID</th>
                        <th class="layui-center">The name of the</th>
                        <th class="layui-center">gender</th>
                        <th class="layui-center">age</th>
                        <th class="layui-center">Interest in</th>
                        <th class="layui-center">Admission date</th>
                        <th class="layui-center">operation</th>
                    </tr>
                </thead>
                <tbody>
                   <tr>
                        <td>4</td>
                        <td>After the came</td>
                        <td>male</td>
                        <td>22</td>
                        <td>
                            <span>writing</span>,<span>reading</span>,<span>A daze</span>,</td>
                        <td>2021-01-21</td>
                        <td>
                            <! -- Operation button -->
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-sm edit" data-id="4">
                                    <i class="layui-icon"></i>
                                </button>
                                <button data-id="4" type="button" class="layui-btn layui-btn-sm delete">
                                    <i class="layui-icon"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <! -- Use layui form -->
        <form lay-filter="from" class="layui-form layui-form-pane" action="" id="form" style="display: none;">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">The name</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="Please enter a title" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">gender</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="1" title="Male">
                    <input type="radio" name="gender" value="2" title="Female" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">age</label>
                <div class="layui-input-block">
                    <input type="number" name="age" required lay-verify="required" placeholder="Please enter a title"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">Interest in</label>
                <div class="layui-input-block checkbox-item">
                    <input type="checkbox" name="like[xiezuo]" title="Writing" value="Writing">
                    <input type="checkbox" name="like[yuedu]" title="Reading" value="Reading" checked>
                    <input type="checkbox" name="like[fadai]" title="Stunned" value="Stunned">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">Admission date</label>
                <div class="layui-input-block">
                    <input type="text" name="EnterDate" id="test1" required lay-verify="required" placeholder="Please enter a title"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">Submit immediately</button>
                    <button type="reset" class="layui-btn layui-btn-primary">reset</button>
                </div>
            </div>
        </form>
    </div>
    <script src=".. /static/layui.all.js"></script>
</body>

</html>
Copy the code

Search page template

Search: search. HTML

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".. /static/css/layui.css">
    <style>
        .layui-table {
            text-align: center;
        }

        .layui-layout-admin {
            padding: 20px;
        }

        .layui-layout-admin .layui-center {
            text-align: center;
        }

        #form {
            padding: 20px;
        }

        .search {
            width: 300px;
        }

        .flex {
            display: flex;

        }

        .justify-between {
            justify-content: space-between;
            

        }
        .justify-center{
            justify-content: center;
        }
        .top-nav {
            width: 100%;
        }
    </style>
<link id="layuicss-laydate" rel="stylesheet" href="Http://192.168.1.103:3000/static/css/modules/laydate/default/laydate.css? V = 5.0.9" media="all"><link id="layuicss-layer" rel="stylesheet" href="Http://192.168.1.103:3000/static/css/modules/layer/default/layer.css? V = 3.1.1" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="http://192.168.1.103:3000/static/css/modules/code.css" media="all"></head>

<body>
    
    <div class="layui-container layui-layout-admin">
        <div>
            <span class="layui-breadcrumb" style="visibility: visible;">
                <a href="/">Home page</a><span lay-separator="">/</span>
                <a><cite>search</cite></a><span lay-separator="">/</span>
                <a><cite>small</cite></a>
              </span>
        </div>
        <div class=" flex justify-center top-nav">
            <form action="/search">
                <div class="search flex ">
                    <input type="text" name="text" placeholder="Keywords" class="layui-input input-search " value="Small">
                    <button class="layui-btn search-butt" type="submit">search</button>
                </div>
            </form>
        </div>
        <div class="text">Key words: small</div>
        <div class="layui-row">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th class="layui-center">ID</th>
                        <th class="layui-center">The name of the</th>
                        <th class="layui-center">gender</th>
                        <th class="layui-center">age</th>
                        <th class="layui-center">Interest in</th>
                        <th class="layui-center">Admission date</th>
                        <th class="layui-center">operation</th>
                    </tr>
                </thead>
                <tbody>
                    
                    <tr>
                        <td>11</td>
                        <td>Children are</td>
                        <td>male</td>
                        <td>6</td>
                        <td>
                            
                            <span>writing</span>,<span>reading</span>,<span>A daze</span>,</td>
                        <td>2021-01-15</td>
                        <td>
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-sm edit" data-id="11">
                                    <i class="layui-icon"></i>
                                </button>
                                <button data-id="11" type="button" class="layui-btn layui-btn-sm delete">
                                    <i class="layui-icon"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    
                </tbody>
            </table>
        </div>
        <! Fill in the form -->
        <form lay-filter="from" class="layui-form layui-form-pane" action="" id="form" style="display: none;">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">The name</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required="" lay-verify="required" placeholder="Please enter a title" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">gender</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="1" title="Male"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>male</div></div>
                    <input type="radio" name="gender" value="2" title="Female" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>female</div></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">age</label>
                <div class="layui-input-block">
                    <input type="number" name="age" required="" lay-verify="required" placeholder="Please enter a title" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">Interest in</label>
                <div class="layui-input-block checkbox-item">
                    <input type="checkbox" name="like[xiezuo]" title="Writing" value="Writing"><div class="layui-unselect layui-form-checkbox"><span>writing</span><i class="layui-icon layui-icon-ok"></i></div>
                    <input type="checkbox" name="like[yuedu]" title="Reading" value="Reading" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>reading</span><i class="layui-icon layui-icon-ok"></i></div>
                    <input type="checkbox" name="like[fadai]" title="Stunned" value="Stunned"><div class="layui-unselect layui-form-checkbox"><span>A daze</span><i class="layui-icon layui-icon-ok"></i></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">Admission date</label>
                <div class="layui-input-block">
                    <input type="text" name="EnterDate" id="test1" required="" lay-verify="required" placeholder="Please enter a title" autocomplete="off" class="layui-input" lay-key="1">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="formDemo">Submit immediately</button>
                    <button type="reset" class="layui-btn layui-btn-primary">reset</button>
                </div>
            </div>
        </form>
    </div>
    <script src=".. /static/layui.all.js"></script>
</body></html>
Copy the code

6. Render home page data

Create a JSON file db.json in the root directory before rendering the home page data

6.1 Creating the DB. json File

File: db. Json

{
    "list": [{"name": "Zhang"."gender": 1."age": 22."interest": {
                "like[xiezuo]": "Writing"."like[yuedu]": "Reading"."like[fadai]": "Stunned"
            },
            "EnterDate": "2021-01-21"."id": 4}}]Copy the code

6.2 Read and write operations for Encapsulated Files

Db. Json file after the creation of a module dedicated to the file to add, delete, modify, search, control->control.js

  • Encapsulate a read file operation that converts a string into an object and returns it

  • Convert an object to a string and write it to a db.json file

File: control. Js

// Import the fs module
const fs = require('fs');
// Set the path to the file to read
const path = './db.json'
/ / read the file
exports.Read = () = >{
    let fileData = ' '
    try{
        [readFileSync] [readFileSync]
        fileData = fs.readFileSync(path,'utf-8');
        console.log(fileData)
    }catch (err) {
        / / make a mistake
        console.log(err)
    }
    // The read file is returned as an object
    return JSON.parse(fileData)
}
// Write file - receives data to append to a parameter
exports.Write= (data) = >{
    try{
        // The node API is also used to write files synchronously.
        fs.writeFileSync(path,JSON.stringify(data),'utf8')}catch(err){
        / / error
        console.log(err)
    }
}
Copy the code

6.2 inrouter.jsThe use ofcontrol.js

After completing the above two reading and writing apis, the home page data can be rendered, and the file Control. js can be referenced in router.js

Documents: the router. Js

Request the address type parameter instructions
/ GET There is no Render the home page template and data 
const express = require('express');
// Introduce read and write files
const control = require('.. /control/control.js')
const router = express.Router();
// Home page render data
router.get('/'.(req, res) = > {
    / / read the file
    let data =  control.Read();
    res.render('index.html', {
        listData: data.list // Mount the data to the template
    });
})
module.exports = router 
Copy the code

6.3 Rendering Data

Render data in a template using template syntax

Art – the template website aui. Making. IO/art – templat…

File: index. HTML

{{each listData}}
<tr>
    <td>{{$value.id}}</td>
    <td>{{$value.name}}</td>
    <td>{{$value.gender==1? 'male ':' female '}}</td>
    <td>{{$value.age}}</td>
    <td>
        {{each $value.interest}}
        <span>{{$value}}</span>, {{/ each}}</td>
    <td>{{$value.EnterDate}}</td>
    <td>
        <div class="layui-btn-group">
            <! Select * from 'data-id'; select * from 'data-id';
            <button type="button" class="layui-btn layui-btn-sm edit" data-id="{{$value.id}}">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button  type="button" class="layui-btn layui-btn-sm delete" data-id="{{$value.id}}">
                <i class="layui-icon">&#xe640;</i>
            </button>
        </div>
    </td>
</tr>
{{/each}}
Copy the code

7. Implement the new {add} function

7.1 the back-end

Documents: the router. Js

  • Here to receive the form data structure {” name “:” came after “, “gender” : 1, “age” : 22, “interest” : {” like [xiezuo] “, “writing”, “like [yuedu]”, “reading”, “like [fadai]” : “stunned”}, “Ente rDate”:”2021-01-21″}

  • Read data from db.json

  • Convert the data from the front end into objects

  • I’m going to assign an ID to this entry, so I’m going to get the ID of the last entry in the table and then I’m going to add 1

  • After assigning the ID, push the data into the data read above

  • Data is written to a file

Request the address type parameter instructions
/add POST The form data Add data to the list 
/ / add
router.post('/add'.(req, res) = > {
    / / read the file
    let data =  control.Read();
    // Get data from the front end
    let getData =JSON.parse(req.body.data);
    ID / / distribution
    getData.id = data.list[data.list.length-1].id + 1
    // Add data
    data.list.push(getData)
    // Write to the file
    control.Write(data);
    // return to the front end
    res.json(getData);
})
Copy the code

7.2 the front

I’m going to create two global variables, addEdit to keep track of whether the current user clicked Add or edit. The form here is common, and the userID variable is going to keep track of the ID saved when the current user clicked Edit or delete

File: index. HTML

Ajax passing values must be settraditional: trueOtherwise, the node side will not be able to retrieve the normal data. Another problem is that the inner data must be converted into A JSON string otherwise the Node will not be able to retrieve the normal data

let addEdit = 1 // Determine if the current click is to edit or add [1: to add, 2: to edit]
let userID = 0  // Save the current ID when clicking Edit and delete
layui.use(['layer'.'jquery'.'form'.'laydate'].function () {
     const $ = layui.$
     const form = layui.form;
     const laydate = layui.laydate;
     // Click the Add button to pop up the new form
     $('#add').click(function () {
        addEdit = 1
        layer.open({
            type: 1.content: $('#form') // This form is hidden in an HTML file and not displayed directly
        });
        // Reset the form
        document.getElementById('form').reset();
     });
     // Listen for submissions
     form.on('submit(formDemo)'.function (data) {
         // Get the form's data and assign it to dataItem
        var dataItem = {
            "name": data.field.name,
            "gender": parseInt(data.field.gender),
            "age": parseInt(data.field.age),
            "interest": {},
            "EnterDate": data.field.EnterDate
        };
         / / here special processing boxes, become we want the data structure of {" like [xiezuo] ", "writing", "like [yuedu]", "reading", "like [fadai]" : "stunned"}
        $('.checkbox-item input').each((index, item) = > {
            if (item.checked) {
                dataItem.interest[item.name] = item.value
            }
        });
         //addEdit=1
        if (addEdit == 1) {
           // The value must be set to traditional: true, otherwise the node side will not get the normal data, and the inner data must be converted to json string otherwise the Node will not get the normal data
            $.ajax({
                url: '/add'.type: 'POST'.data: { data: JSON.stringify(dataItem) },
                traditional: true.success: (msg) = > {
                    layer.msg("Added successfully!");
                    // Refresh the page after successfully adding
                    setTimeout(() = > {
                        window.location.reload();
                    }, 500)}}}else {
            // Implement the modification operation
        }
        return false;
    });
})
Copy the code

8. Implement the {delete} function

  • Receive the ID from the front end
  • Read the file data first
  • useES6Array methodsfindIndexRetrieve ID Returns the subscript of the current ID if found
  • Using array methodsspliceDelete current data
  • Written to the file

8.1 the back-end

Request the address type parameter instructions
/delete GET id You want to delete some data 
/ / delete
router.get('/delete'.(req, res) = > {
    / / read the file
    let data =  control.Read();
    // Retrieve user returns index
    let userIndex = data.list.findIndex(item= > item.id == req.query.id);
    / / delete
    data.list.splice(userIndex, 1);
    // Write to the file
    control.Write(data);
    res.json(data);
})
Copy the code

8.2 the front

  • A pop-up prompts the user whether to delete the data
  • Confirm: Refresh the page when the deletion request is successfully sent
 / / delete
$('.delete').click(function () {
    // Get the ID of the currently clicked node
    userID = $(this).attr('data-id');
    // Use layui to confirm the popover
    layer.confirm('Are you sure you want to delete? ', {
        btn: ['confirm'.'cancel'].btn1: function (index, layero) {
            layer.close(index);
            // Send a delete request when the user clicks ok /delete passes the ID
            $.ajax({
                url: '/delete'.type: 'GET'.data: { id: userID },
                traditional: true.success: (res) = > {
                    layer.msg("Delete successful!");
                    setTimeout(() = > {
                        window.location.reload();
                    }, 500)}})}}); })Copy the code

9. Realize the function of modifying {modify}

9.1 the back-end

  • Get the ID from the front end
  • Get read file data and then look up the ID corresponding data object back to the front end
  • The front end takes the data and assigns values to the form
Request the address type parameter instructions
/getInfo GET ID Returns the information the user wants to modify
/edit POST ID Modifying User Information

Documents: the router. Js

// Read user information
router.get('/getInfo'.(req, res) = > {
    let data =  control.Read();
   // the user find method returns the data corresponding to the ID to the front end
    let userInfo = data.list.find(item= > item.id == req.query.id);
    res.json(userInfo);
})
// Modify user information
router.post('/edit'.(req, res) = > {
    / / get the data
    let getData =JSON.parse(req.body.data);
    / / read the file
    let data =  control.Read();
    // Retrieve user returns index
    let userIndex = data.list.findIndex(item= > item.id == getData.id);
    // Update user information
    data.list[userIndex] = getData
    // Write to the file
    control.Write(data);
    res.json(getData);
})
Copy the code

9.2 the front

  1. Click on the modify button
// Click the Edit button
$(".edit").click(function (e) {
    // Setting the global variable to 2 marks modification
    addEdit = 2
    // Get the ID of the current data to be modified
    userID = $(this).attr('data-id');
    // Get the data to be modified and assign to the form
    $.ajax({
        url: '/getInfo'.type: 'get'.data: { id: userID },
        traditional: true.success: (data) = > {
            let fromData = {
                "name": data.name,
                "gender": data.gender,
                "age": data.age,
                "like[xiezuo]": false."like[yuedu]": false."like[fadai]": false."EnterDate": data.EnterDate
            }
            // Assign a value to the checkbox
            $('.checkbox-item input').each((index, item) = > {
                if (data.interest[item.name]) {
                    fromData[item.name] = true}});// Form assignment
            form.val("from", fromData);
        },
        error: (err) = > {
            console.log(err, 'Wrong')
        }

    })
    layer.open({
        type: 1.content: $('#form') // In this case, content is a DOM. Note that it is best to store this element in the outer layer of the body, otherwise it may be affected by other relative elements
    });
})
Copy the code

2. Click submit button

// Listen for submissions
form.on('submit(formDemo)'.function (data) {
    var dataItem = {
        "name": data.field.name,
        "gender": parseInt(data.field.gender),
        "age": parseInt(data.field.age),
        "interest": {},
        "EnterDate": data.field.EnterDate
    };
    $('.checkbox-item input').each((index, item) = > {
        if (item.checked) {
            dataItem.interest[item.name] = item.value
        }
    });
    if (addEdit == 1) {
		// Add data
    } else {
        / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- confirm modify form -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / /
        dataItem.id = parseInt(userID);
        $.ajax({
            url: '/edit'.type: 'POST'.data: { data: JSON.stringify(dataItem) },
            traditional: true.success: (msg) = > {
                layer.msg("Modification successful!");
                setTimeout(() = > {
                    window.location.reload();
                }, 500); }})}return false;
});
Copy the code

10. Implement {search} search function

10.1 the back-end

Request the address type parameter instructions
/search
  • useindexOfMethods,nameSearch for keywords in the field, if anypushTo the temporary object
  • Render temporary object data to the front end
/ / search
router.get('/search'.(req, res) = > {
    let list = []
    / / read the file
    let data =  control.Read();
    // Retrieve user returns index
    data.list.forEach((item, index, array) = >{
        if(item.name.indexOf(req.query.text)! = -1){
            list.push(item)
        }
    })
    // Write to the file
    // control.Write(data);
    res.render('search.html', {
        listData: list,
        search:req.query.text
    });
})
Copy the code

10.2 the front

File: search. HTML

<div class="layui-container layui-layout-admin">
    <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- bread crumbs navigation -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
    <div>
        
        <span class="layui-breadcrumb">
            <a href="/">Home page</a>
            <a><cite>search</cite></a>
            <a><cite>{{search}}</cite></a>
        </span>
    </div>
    
     <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the search form -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
    <div class=" flex justify-center top-nav">
        <form action="/search">
            <div class="search flex ">
                <input type="text" name="text" placeholder="Keywords" class="layui-input input-search " value="{{search}}">
                <button class="layui-btn search-butt" type="submit">search</button>
            </div>
        </form>
    </div>
     <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- search keywords -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
    <div class="text">Keywords: {{search}}</div>
    <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - >
    <div class="layui-row">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th class="layui-center">ID</th>
                    <th class="layui-center">The name of the</th>
                    <th class="layui-center">gender</th>
                    <th class="layui-center">age</th>
                    <th class="layui-center">Interest in</th>
                    <th class="layui-center">Admission date</th>
                    <th class="layui-center">operation</th>
                </tr>
            </thead>
            <tbody>
                {{each listData}}
                <tr>
                    <td>{{$value.id}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.gender==1? 'male ':' female '}}</td>
                    <td>{{$value.age}}</td>
                    <td>
                        {{each $value.interest}}
                        <span>{{$value}}</span>, {{/ each}}</td>
                    <td>{{$value.EnterDate}}</td>
                    <td>
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm edit" data-id="{{$value.id}}">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button data-id="{{$value.id}}" type="button" class="layui-btn layui-btn-sm delete">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
Copy the code

I’m not using Ajax here and I’m making a judgment that the user can’t submit an empty form

/ / search
$('.search-butt').click(function () {
    let text =  $('.input-search').val();
    if(text==' '){
        layer.msg("Please enter your keywords");
        return false}})Copy the code

Github storage address: github.com/xueyun2/nod…