前端+nodejs+mysql實現(xiàn)前后端聯(lián)通的完整代碼

更新時間：2025年04月02日 10:37:09 作者：Youyzq

Node.js主要屬于后端技術(shù),但也可以用于前端開發(fā)的某些場景,下面這篇文章主要介紹了前端+nodejs+mysql實現(xiàn)前后端聯(lián)通的完整代碼,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

創(chuàng)建項目

創(chuàng)建項目

npm init

初始化項目

一路回車即可

當有 package.json這個文件的時候就相當于已經(jīng)構(gòu)建完畢

3. 配置package.json文件

{
  "name": "yes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js" // 設(shè)置啟動文件
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mysql2": "^3.12.0" // 連接數(shù)據(jù)庫的插件
  }
}

創(chuàng)建index.js到根目錄上
創(chuàng)建index.html文件和index.js平級
創(chuàng)建component功能性代碼

代碼塊

粘貼上就能用這一套代碼
index.js

// 數(shù)據(jù)庫的方法
let mysqlFunction = require('./compents/heander')
// 啟動服務器的方法
let serve = require('./compents/serve')
let obj = {}
obj['/select'] = mysqlFunction.select
obj['/add'] = mysqlFunction.add
obj['/del'] = mysqlFunction.del

serve.creactServe(obj)

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<div class="abc"></div>
<form action="http://localhost:3002/add" method="post">
  名稱<input type="text" name="name">
  年齡 <input type="number" name="age">
  性別  <select name="sex" id="">
    <option value="男">男</option>
    <option value="女">女</option>

  </select>

  <button type="submit">新增</button>
</form>
<body>
  <script>
   const abc= document.querySelector('.abc')
   abc.addEventListener('click',(e)=>{
    if (e.target.nodeName=='SPAN') {
console.log('點擊了');      
var name = e.target.getAttribute('data-name');
console.log(name);
del(name)
    }
   })
  //  刪除
  function del(params) {
    const url = 'http://localhost:3002/del?name='+params;
    fetch(url, {
      method: 'GET',
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // Parse the JSON from the response
      })
      .then(data => {
       console.log(data);
       getdata()
      })
      .catch(error => console.error('Error:', error));
   }
  //  查詢
   function getdata(params) {
    const url = 'http://localhost:3002/select?age=23';
    fetch(url, {
      method: 'GET',
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // Parse the JSON from the response
      })
      .then(data => {
           let str = ``
        data.forEach(i=>{
          str+=`<div >${JSON.stringify(i)}<span data-name='${i.name}'>刪除<span></div>`
        })
        abc.innerHTML= str
      })
      .catch(error => console.error('Error:', error));
   }
   getdata()
  </script>
</body>

</html>

heander.js

這里是設(shè)置功能性代碼的地方并且鏈接數(shù)據(jù)庫的地方

//  引入mysql方法
let http = require('http')
let mysql = require('mysql2')
let pool = mysql.createPool({
  user: 'root',
  host: 'localhost',
  password: '123456',
  port: 3306,//端口號
  database: 'mydemo' //連接的數(shù)據(jù)庫
  , waitForConnections: true,// 當沒有可用連接時是否等待
  connectionLimit: 10,     // 最大連接數(shù)量
  queueLimit: 0            // 最大等待請求數(shù)量 (0 表示不限制)
})
// 連接數(shù)據(jù)庫
pool.getConnection((err) => {
  if (err) {
    console.log('連接失敗');
  } else {
    console.log('連接成功');
  }
})
// res 路徑 和post請求參數(shù)
// 查詢
async function select (response, data) {
  console.log(data);
  try {
    response.writeHead('200', {
      "Content-Type": 'application/json'
    })
    const [reslut] = await pool.promise().query(`select * from school where age=${data.age}`)
    console.log(reslut);
    response.end(JSON.stringify(reslut))
  } catch (error) {
    console.log(error);
    response.writeHead('400', {
      "Content-Type": 'application/json'
    })
    response.end(JSON.stringify(error))

  }
}
// 新增
async function add (response, data) {
  console.log(data);
  try {
    response.writeHead('200', {
      "Content-Type": 'application/json'
    })
    let sql = 'insert into school values(?,?,?,?)'
    let values = [null, data.name, data.age, data.sex]
    const [reslut] = await pool.promise().query(sql, values)
    console.log(reslut);
    response.end(JSON.stringify(reslut))
  } catch (error) {
    console.log(error);
    response.writeHead('400', {
      "Content-Type": 'application/json'
    })
    response.end(JSON.stringify(error))
    return
  }
}
// 刪除
async function del (response, data) {
  console.log(data);
  try {
    response.writeHead('200', {
      "Content-Type": 'application/json'
    })
    let sql = `delete from school where name='${data.name}'`
    const [reslut] = await pool.promise().query(sql)
    console.log(reslut);
    response.end(JSON.stringify(reslut))
  } catch (error) {
    console.log(error);
    response.writeHead('400', {
      "Content-Type": 'application/json'
    })
    response.end(JSON.stringify(error))
    return
  }
}
module.exports = {
  select,
  add,
  del
}

router.js

這個主要是對于路由做處理，來判斷用戶輸入的接口地址是否正確

// let heander = require('./heander')
function route (response, url, data, params) {
  // console.log(url, data, params);
  // console.log(data[url]);
  if (typeof data[url] == 'function') {
    data[url](response, params)
  } else {
    response.writeHead('404', {
      "Content-Type": 'application/json'
    })
    response.end('{error:請輸入正確路徑}')
  }
}
module.exports = route

serve.js

服務器模塊

let http = require('http')
let url = require('url')
let route = require('./router')
const querystring = require('querystring');
function creactServe (data) {
  const createserver = http.createServer(async (req, res) => {
    // // 設(shè)置 CORS 頭部
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    // 判斷get請求還是post請求
    console.log(req.method);
    if (req.method == 'GET') {
      route(res, url.parse(req.url, false).pathname, data, url.parse(req.url, true).query)
      // console.log(req.method);
      // console.log(url.parse(req.url, true).query);
      // res.end('{id:1}')
    } else {
      let data1 = []
      // 這里是post請求
      // 獲取post參數(shù)
      // 出現(xiàn)錯誤的時候
      req.on('error', (err) => console.log(err))
      // 當有數(shù)據(jù)的時候
      req.on('data', (result) => data1.push(result))
      // 當數(shù)據(jù)傳輸完畢以后
      req.on('end', (result) => {
        data1 = querystring.parse(Buffer.concat(data1).toString())
        console.log(data1);
        route(res, url.parse(req.url, false).pathname, data, data1)
        // res.end(JSON.stringify(queryString.parse(data1)))
      })

    }
    // 有人請求了以后才會執(zhí)行這里面的代碼
    // req請求,res響應
    // 設(shè)置請求頭
    // 返回json類型的格式
  })
  console.log('服務器啟動成功');
  // 設(shè)置端口
  createserver.listen('3002', '127.0.0.1')
}

module.exports = { creactServe }