node.js 链接 数据库
1.前提
-
电脑已安装node,可以通过win+R 键，输入cmd，然后输入，node -v,检查版本；
.
-
再输入npm -V，检查npm的安装版本
-
以上都有之后，建立一个空文件夹，名字：projects，里面创建三个空文件夹，分别为：jq,html,api
-
在jq文件夹中，引入自己下好的jq库
2.新建JSON文件
- 用vsCode，打开文件夹projects，
- 鼠标选中api文件夹，右键单击，选中在集成终端中打开，输入: npm init (里面的所有选项， 都是回车 一直回车到出现文件路径 ) 检查api文件夹 下是否已经出现package.json文件
- 再输入 ：npm install express mysql cor body-parser，等待安装。安装后 出现两个json文件
- 在api文件夹中，创建两个js文件，分别为http.js, db.js
3.编写代码
- 首先打开http.js文件，导入我们已经安装好的库
//引入模块
const express=require('express');
const app=express();
const url=require('url')
const db=require('./db.js');
- 解决跨区域问题
// 解决跨区域问题
// 导入中间件 cors
const cors = require('cors');
// 在路由之前调用app.use(cors())配置中间件
app.use(cors());
app.all("*",function(req,res,next){
res.header("Acess-Control-Allow-Origin","*");
next();
})
- 设置端口；在api文件夹终端打开 输入node http.js,测试是否设置成功
// 设置端口
app.listen(8888,function(){
console.log('正在启动888....');
})
- 我们打开db.js文件，连接数据库（注意跟自己所调用的数据库名字相同，用户名和密码，也是自己数据库的一样）
// 引入mysql中间件
const mysql=require('mysql')
// 创建连接
let connection=mysql.createConnection({
// host 数据库主机名
host:"localhost",
// user 用户名
user:"root",
// password 密码
password:"123456",
// 所连接的数据库名称
database:"in37"
})
//连接数据库
connection.connect();
- 因为我这里数据库中已经有表了，所以接下来的数据主要围绕这张表来写。
- 接下来抛出学号和姓名
// 前面一个参数为获取路径，这个路径可以自己取，为了方便，这里写的是/表名/getOne ，后面的req:request 请求,res:response 响应；callback 返回值
module.exports.selectBySno=function(sno,sname,callback){
let sql=`select * from student where sno='${sno}' and sname='${sname}'`;
connection.query(sql,function(err,data){
callback(data);
})
}
- 返回http.js文件中写获取数据的方法，
//通过学号和姓名登录 get请求得到数据
// let 两个变量分别请求url，获取到学号和姓名，并且采用三元写法，若返回值为undefined，则为空，否则返回对应的值
app.get('/student/getOne',(req,res)=>{
let sno=url.parse(req.url,true).query.sno==undefined?"":url.parse(req.url,true).query.sno;
let sname=url.parse(req.url,true).query.sname==undefined?"":url.parse(req.url,true).query.sname;
connection.query(sql,function(err,data){
callback(data);
})
})
- 需要我们创建HTML页面，来测试显示是否调用数据库显示成功，创建一个login.html页面和index.html页面，用来做跳转，这里登录的条件就是输入的学号和姓名，必须与调用的数据库中的表的数据一致
<body>
<table>
<tr>
<td>学号</td>
<td><input type="text" id="tSno"></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" id="tSname"></td>
</tr>
<tr>
<td colspan="2"></td>
<button id="btnLogin">登录</button>
</tr>
</table>
</body>
- 在body标签后面引入我们的jq库，在页面中调用请求用jq来写
<script src="../jq/jquery-3.5.1.min.js"></script>
<script>
$(function(){
// 给登录按钮设置点击事件
$("#btnLogin").click(function(){
$.ajax({
url:"http://127.0.0.1:8888/student/getOne",
data:{
sno:$("#tSno").val(),
sname:$("#tSname").val(),
},
//
success:function(result){
if(result.data.length>0){
alert("登录成功");
window.location.href="./index.html";
}else{
alert("登录失败");
$("#Sno").val("");
$("#Sname").val("");
}
}
})
})
})
</script>
- 实现效果
到这里也就成功连接到数据库内容 并且成功登录跳转