node.jsリンクデータベース

node.jsリンクデータベース

1. 前提

  1. コンピューターにノードがインストールされている場合は、win+R キーを使用して cmd を入力し、次に「node -v」と入力して、バージョンを確認します
    ここに画像の説明を挿入

  2. 次に、「npm -V」と入力して、インストールされている npm のバージョンを確認します。
    ここに画像の説明を挿入

  3. 上記をすべて行った後、空のフォルダーを作成し、projects という名前を付け、その中に jq、html、api という 3 つの空のフォルダーを作成します。
    ここに画像の説明を挿入

  4. 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>
  • 効果を実感してください
    ここに画像の説明を挿入
    ここに画像の説明を挿入
    。この時点で、データベース コンテンツに正常に接続し、ログインしてジャンプできるようになります。

おすすめ

転載: blog.csdn.net/weixin_44042442/article/details/123358945