node.jsリンクデータベース
1. 前提
-
コンピューターにノードがインストールされている場合は、win+R キーを使用して cmd を入力し、次に「node -v」と入力して、バージョンを確認します
。 -
次に、「npm -V」と入力して、インストールされている npm のバージョンを確認します。
-
上記をすべて行った後、空のフォルダーを作成し、projects という名前を付け、その中に jq、html、api という 3 つの空のフォルダーを作成します。
-
jq フォルダーに、独自の jq ライブラリを導入します。
2. 新しい JSON ファイルを作成します
- vsCodeでフォルダープロジェクトを開き、
- マウスで API フォルダーを選択し、右クリックして、統合ターミナルで開くことを選択し、次のように入力します: npm init (その中のすべてのオプション。ファイル パスが表示されるまで Enter キーを押します) package.json が API フォルダーに表示されているかどうかを確認します。書類
- 次に、「npm install Express mysql cor body-parser」と入力し、インストールを待ちます。インストール後に 2 つの json ファイルが表示されます
- api フォルダーに、http.js、db.js という 2 つの 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 フォルダーでターミナルを開き、ノード 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>
- 効果を実感してください
。この時点で、データベース コンテンツに正常に接続し、ログインしてジャンプできるようになります。