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

环境:mysql、navicat、express

刚接触nodejs框架这块,只做了一个简单的数据展示,总体效果如下:(将数据库的数据显示到浏览器上

             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();
const mysql = require('mysql'); //调用mysql模块

//下面的配置必须要与自己本机上的mysql信息一致
let connection = mysql.createConnection({
	host:'localhost',   //主机地址
	port:3306,	    //端口
	user:'root',       //账号
	password:'root',   //密码
	database:'briup'   //连接的数据库
});
//连接到数据库
connection.connect();
//执行sql语句
var user_sql = 'SELECT * FROM test';
connection.query(user_sql,function(err,result){
	if(err){
		console.log('[query]-:'+err);
	}else{
//拿到result后给模板引擎
		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>

现在启动项目访问https://localhost:3000即可

$ npm start 

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

猜你喜欢

转载自blog.csdn.net/qq_42720683/article/details/88237029