express+nodejs+mysql实现数据在前台页面的展示

最新推荐文章于 2024-07-09 18:42:04 发布

otatoz

最新推荐文章于 2024-07-09 18:42:04 发布

阅读量7.9k

点赞数 12

分类专栏： node.js 文章标签： express ejs mysql nodejs

本文链接：https://blog.csdn.net/qq_42720683/article/details/88237029

版权

node.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

环境:mysql、navicat、express

express中使用的是ejs模板引擎，ejs语法如下（通过 <%for (var i=0;i<data.length;i++)%> 遍历data中的值，通过<%= %>将数据渲染到页面上）

<%= for(var i=0;i<data.length;i++){ %>
    <tr>
        <td><%= data[i].date%></td>
        <td><%= data[i].schdule%></td>
	<td><%= data[i].important%></td>
    </tr>
<% } %>

本案例只是一个简单的数据展示，总体效果如下：（将数据库的数据显示到浏览器上）

mysql界面：

浏览器界面：

步骤如下

在桌面创建文件夹 myapp

在node 命令行中，进入创建的文件夹
```
$ cd myapp
```
初始化项目
```
$ npm init
```
安装express
```
$ npm install -g express-generator
```

用express创建一个目录，并进入

$ express -e firstexpress

$ cd firstexpress

下载相关依赖
```
$ npm install
```
```
$ npm install mysql --save
```
完成后的目录结构如下：

index.js文件：

var express = require('express');
var router = express.Router();

//调用mysql模块
const mysql = require('mysql'); 

//下面的配置必须要与自己本机上的mysql信息一致
let connection = mysql.createConnection({
	host:'localhost',   //主机地址
	port:3306,	    //端口
	user:'root',       //账号
	password:'root',   //密码
	database:'briup'   //连接的数据库
});
//连接到数据库
connection.connect();

//执行sql语句，从test表中查询数据
var user_sql = 'SELECT * FROM test';
connection.query(user_sql,function(err,result){
    if(err){
	console.log('[query]-:'+err);
    }else{
        //拿到result将其作为data渲染给模板引擎，比如这里的index页面
        router.get('/', function(req, res, next) {
	    res.render('index', { 
	          title: 'express&mysql测试',
	          data:result 
            });
        });
    }
})

module.exports = router;

index.ejs文件：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    //引入bootstrap框架
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>mysql数据获取</h1>
    <table class="table table-bordered text-center">
	<tr>
	    <td>id</td>
	    <td>name</td>
	    <td>age</td>
	</tr>
	<% for(var i=0;i<data.length;i++){ %>
	<tr>
	    <td><%= data[i].id %></td>
	    <td><%= data[i].name %></td>
	    <td><%= data[i].age %></td>
	</tr>
	<% } %>
    </table>
  </body>
</html>

现在启动项目