（三）express+mysql获取数据并渲染

在第二讲里面讲了如何连接mysql并获取数据，那么数据如何在页面上渲染呢？
有两种方式：
一、第一种在原本的项目里面就已经实现了，使用res.render('页面',数据)的方式；
二、写一个接口，前端通过ajax请求接口得到数据并渲染；
先把之前都放在app.js里面连接mysql的配置单独放在一个配置文件里面:

// 创建数据库连接
const mysql = require("mysql")
const connection = mysql.createConnection({
    host: "localhost",
    port:3306,
    user: "root",
    password: "123456",
    database: 'allan'
})
connection.connect((err) => {
    if (err) { console.log("连接失败") }
    else { console.log("连接成功") }
})
 
let query=(sql, callback)=>{
    connection.query(sql, function (err, rows) {
        callback(err, rows);
    });
}

exports.query = query;

在app.js里面引入保证之前写的功能正常

var db=require("./server/config/db");

做好这些，我们在routes的index里面写代码：

image.png

一、第一种实现

• 引入mysql配置文件

var db = require("../server/config/db");

• 请求数据库数据

router.get('/', function(req, res, next) {
    var sql = 'select * from userlist';
    db.query(sql, (err, rows) => {
        if(err) console.log(err)
        res.render('index', { title: 'Express', test: rows });
    })
});

在views文件夹下面的index.jade渲染请求到的数据：

image.png

效果:

image.png

还可以这么改，在li标签里面价格div标签包裹，这都是jade的语法，可自行搜索，不想用jade的话，请看下一节ejs类似html的模板。

each val,key in test
   li: div #{val.user} - #{val.sex} - #{val.age}

二、第二种方法，写一个接口

• 在routes的index加上

router.get('/getData', function(req, res, next) {
    var sql = 'select * from userlist';
    db.query(sql, (err, rows) => {
        if(err) console.log(err)
        res.json({list:rows});
    })
});

然后请求http://localhost:3000/getData就获取到数据了。

image.png