Node+express+ejs+mysql制作查询数据呈现前端页面

最新推荐文章于 2023-03-31 14:47:47 发布

柒月VII

最新推荐文章于 2023-03-31 14:47:47 发布

阅读量1k

点赞数 2

分类专栏：前端学习文章标签：前端 express mysql node.js

本文链接：https://blog.csdn.net/weixin_43205774/article/details/127199304

版权

前端学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

一、实现样式

student

二、页面结构

1、文档结构

2、数据库mysql结构
mysql
3、使用到的模块
package

三、核心思路

该案例使用node+express+ejs+mysql共同实现，实现效果很简单，查询数据库，获取数据后，呈现在前端页面上面，连接mysql或者数据很简单，核心点在使用ejs模块，语法为 `<%= %>`

1、使用mysql模块连接mysql数据库，获取数据results，获取到的数据为一个数组形式
mysql.js

const mysql = require('mysql')

const db = mysql.createPool({
    host: '192.168.19.133',
    user: 'root',
    password: 'root123',
    database: 'node_mysql'
})

// 共享db
module.exports = db

// 连接测试mysql
// db.query('select * from ev_user', (err, results) => {
//     if (err) {
//         return results.send({ status: 1, msg: err, message })
//     }
//     console.log(results);
// })

2、在使用esj之前先配置esj

app.set('view engine', 'ejs'); //设置ejs模块
app.set('views', __dirname + '/views')  //文件路径

核心esj代码

exports.userlist = (req, res) => {
    const sqlstr = 'select * from ev_students'
    db.query(sqlstr, (err, results) => {
        if (err) return res.cc(err)
        console.log(results);
        res.render('students', { results })
    })

}

3、在上面views路径下面新建一个students.esj文件，该类型文件可以使用html来编写
students.ejs

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./students.css">
    <title>用户列表</title>
</head>
<style>
    h1 {
        text-align: center;
    }
    
    table {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        width: 800px;
    }
    
    table td,
    table th {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    
    table thead th {
        background-color: #CCE8EB;
        width: 100px;
    }
    
    table tr:nth-child(odd) {
        background: #fff;
    }
    
    table tr:nth-child(even) {
        background: #F5FAFA;
    }
</style>

</style>

<body>
    <h1>学生信息表</h1>
    <table>
        <tr>
            <th>编号</th>
            <th>学工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>手机号</th>
            <th>班级</th>
            <th>年级</th>
            <th>身份证号</th>
        </tr>
        <% for(let i=0;i<results.length;i++){ %>
            <tr>
                <td>
                    <%= results[i].id  %>
                </td>
                <td>
                    <%= results[i].idserial  %>
                </td>
                <td>
                    <%= results[i].username  %>
                </td>
                <td>
                    <%= results[i].sex  %>
                </td>
                <td>
                    <%= results[i].phone  %>
                </td>
                <td>
                    <%= results[i].class  %>
                </td>
                <td>
                    <%= results[i].major  %>
                </td>
                <td>
                    <%= results[i].cardid  %>
                </td>
            </tr>
            <%   }   %>

    </table>

</body>

</html>