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

环境:mysql、navicat、express

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

<%= for(var i=0;i
    
        <%= data[i].date%>
        <%= data[i].schdule%>
	<%= data[i].important%>
    
<% } %>

---

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

             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文件：

  
    
    
    //引入bootstrap框架
    
  
  
    
mysql数据获取
    
	<% for(var i=0;i
	
	<% } %>
    

	

	    
id
	    
name
	    
age
	

	    
<%= data[i].id %>
	    
<%= data[i].name %>
	    
<%= data[i].age %>
	
  

 

现在启动项目

$ npm start 

访问localhost:3000就可以看到效果

 

                         ---------------本文完---------------