当前位置：网站首页>nodejs+express实现数据库mysql的访问，并展示数据到页面上

nodejs+express实现数据库mysql的访问，并展示数据到页面上

2022-08-04 01:00:00 【m0_67392661】

1.Express基础框架的搭建

首先，创建一个websafe文件如下图所示
在这里插入图片描述
Cd命令到新创建的目录下。
在这里插入图片描述
重点步骤：

1.1初始化项目

npm init

在这里插入图片描述
一直往下enter键就可以
在这里插入图片描述
在这里插入图片描述
yes之后我们的项目中就会多一个json文件
在这里插入图片描述
1.2安装express

安装命令为：

npm install -g express-generator

在这里插入图片描述
只要执行这个命令等待执行结束即可。

1.3 Express创建一个目录，进入该目录

创建命令：

express -e websafe

在这里插入图片描述
在这里插入图片描述
1.4下载包的依赖

下载基础依赖命令：

npm install

下载mysql数据库依赖命令：

npm install mysql

完成上面四步操作后具体的项目结构如下所示：
在这里插入图片描述
这样的话我们就创建好一个初始的express项目架构

2.数据库的连接创建

前提：本地有搭建mysql数据库，且存在表名为mysql
然后创建建立连接的js文件（index.js），具体代码如下所示:

var express = require("express"); //引用外部模块接口，也就是获取模块对象
var router = express.Router();//创建路由实例
//调用mysql模块
const mysql = require("mysql");
//配置本机mysql连接基本信息
let connectInfo = mysql.createConnection({
	host: 'localhost',
	port: 3306,
	user: 'root',
	password: '123456',
	database: 'mysql'
})
//数据库建立连接
connectInfo.connect();
//查询sql语句
var sqlWord = 'select * from nodetest';
connectInfo.query(sqlWord, function (err, result) {
	if (err) {
	console.log('[query]-:' + err);
	} else {
	router.get('/', function (req, res, next) {
		res.render('index', {
		title: 'express测试实例连接数据库',
		data: result
	})
})
}
});
module.exports = router;

切记本地有mysql数据库，且数据库存在表名为nodetest

3. 页面的展示（忽略创建mysql本地数据库的过程）

创建页面通过变量展示,通过express框架中的index.ejs来创建一个表格进行页面data数据的展示，具体代码如下：

<!DOCTYPE html>
<html>

<head>
<title>
<%= title %>
</title>
<!-- 引入bootstrap框架 -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<link rel='stylesheet' href='/stylesheets/index.css' />
<!-- 样式都是基于public下面来的 -->
</head>

<body>
<div class="parts">
	<div class="part">
	<div class="fh3">家庭信息表 <sub> (测试nodejs+express+mysql)</sub></div>
		<table class="table table-bordered text-center">
			<tr>
				<td>id</td>
				<td>name</td>
				<td>address</td>
				<td>user</td>
			</tr>
			<% for(var i=0;i<data.length;i++){ %>
			<tr>
				<td>
				<%= data[i].id %>
				</td>
				<td>
				<%= data[i].name %>
				</td>
				<td>
				<%= data[i].address %>
				</td>
				<td>
				<%= data[i].user %>
				</td>
			</tr>
			<% } %>
		</table>
	</div>
</div>

</body>

</html>

样式可以自己随便定义一下，无关紧要的，需要demo的可以私我或者留下邮箱。

完成这些操作后你就会发现最终页面就会展示出数据库的相关数据，其实是采用了express搭建前台框架，nodejs后台实现，最终页面效果如下所示：
在这里插入图片描述

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

原网站

版权声明
本文为[m0_67392661]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_67392661/article/details/126113769

边栏推荐

猜你喜欢

随机推荐