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();
})
//使用中间件用于解析body数据
app.use(express.json())
app.use(express.urlencoded({extended:true}))
- 设置端口;在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;
db.selectBySno(sno,sname,function(data){
res.json({data: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>
- 实现效果
到这里也就成功连接到数据库内容 并且成功登录跳转