前端+nodejs+mysql实现前后端联通

万万哇  论坛元老 | 2025-5-6 13:28:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1802|帖子 1802|积分 5406

创建项目


  • 目录布局


  • 创建项目


   npm init
  初始化项目

一路回车即可
当有 package.json这个文件的时候就相当于已经构建完毕
3. 设置package.json文件
  1. {
  2.   "name": "yes",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo "Error: no test specified" && exit 1",
  8.     "start": "node index.js" // 设置启动文件
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "mysql2": "^3.12.0" // 连接数据库的插件
  14.   }
  15. }
复制代码

  • 创建index.js到根目录上

  • 创建index.html文件和index.js平级
  • 创建component功能性代码
代码块

   粘贴上就能用这一套代码
index.js
  2. // 数据库的方法
  3. let mysqlFunction = require('./compents/heander')
  4. // 启动服务器的方法
  5. let serve = require('./compents/serve')
  6. let obj = {}
  7. obj['/select'] = mysqlFunction.select
  8. obj['/add'] = mysqlFunction.add
  9. obj['/del'] = mysqlFunction.del
  11. serve.creactServe(obj)
复制代码
index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <div class="abc"></div>
  10. <form action="http://localhost:3002/add" method="post">
  11.   名称<input type="text" name="name">
  12.   年龄 <input type="number" name="age">
  13.   性别  <select name="sex" id="">
  14.     <option value="男">男</option>
  15.     <option value="女">女</option>
  17.   </select>
  19.   <button type="submit">新增</button>
  20. </form>
  21. <body>
  22.   <script>
  23.    const abc= document.querySelector('.abc')
  24.    abc.addEventListener('click',(e)=>{
  25.     if (e.target.nodeName=='SPAN') {
  26. console.log('点击了');      
  27. var name = e.target.getAttribute('data-name');
  28. console.log(name);
  29. del(name)
  30.     }
  31.    })
  32.   //  删除
  33.   function del(params) {
  34.     const url = 'http://localhost:3002/del?name='+params;
  35.     fetch(url, {
  36.       method: 'GET',
  37.     })
  38.       .then(response => {
  39.         if (!response.ok) {
  40.           throw new Error('Network response was not ok');
  41.         }
  42.         return response.json(); // Parse the JSON from the response
  43.       })
  44.       .then(data => {
  45.        console.log(data);
  46.        getdata()
  47.       })
  48.       .catch(error => console.error('Error:', error));
  49.    }
  50.   //  查询
  51.    function getdata(params) {
  52.     const url = 'http://localhost:3002/select?age=23';
  53.     fetch(url, {
  54.       method: 'GET',
  55.     })
  56.       .then(response => {
  57.         if (!response.ok) {
  58.           throw new Error('Network response was not ok');
  59.         }
  60.         return response.json(); // Parse the JSON from the response
  61.       })
  62.       .then(data => {
  63.            let str = ``
  64.         data.forEach(i=>{
  65.           str+=`<div >${JSON.stringify(i)}<span data-name='${i.name}'>删除<span></div>`
  66.         })
  67.         abc.innerHTML= str
  68.       })
  69.       .catch(error => console.error('Error:', error));
  70.    }
  71.    getdata()
  72.   </script>
  73. </body>
  75. </html>
复制代码
heander.js
   这里是设置功能性代码的地方并且链接数据库的地方
  1. //  引入mysql方法
  2. let http = require('http')
  3. let mysql = require('mysql2')
  4. let pool = mysql.createPool({
  5.   user: 'root',
  6.   host: 'localhost',
  7.   password: '123456',
  8.   port: 3306,//端口号
  9.   database: 'mydemo' //连接的数据库
  10.   , waitForConnections: true,// 当没有可用连接时是否等待
  11.   connectionLimit: 10,     // 最大连接数量
  12.   queueLimit: 0            // 最大等待请求数量 (0 表示不限制)
  13. })
  14. // 连接数据库
  15. pool.getConnection((err) => {
  16.   if (err) {
  17.     console.log('连接失败');
  18.   } else {
  19.     console.log('连接成功');
  20.   }
  21. })
  22. // res 路径 和post请求参数
  23. // 查询
  24. async function select (response, data) {
  25.   console.log(data);
  26.   try {
  27.     response.writeHead('200', {
  28.       "Content-Type": 'application/json'
  29.     })
  30.     const [reslut] = await pool.promise().query(`select * from school where age=${data.age}`)
  31.     console.log(reslut);
  32.     response.end(JSON.stringify(reslut))
  33.   } catch (error) {
  34.     console.log(error);
  35.     response.writeHead('400', {
  36.       "Content-Type": 'application/json'
  37.     })
  38.     response.end(JSON.stringify(error))
  40.   }
  41. }
  42. // 新增
  43. async function add (response, data) {
  44.   console.log(data);
  45.   try {
  46.     response.writeHead('200', {
  47.       "Content-Type": 'application/json'
  48.     })
  49.     let sql = 'insert into school values(?,?,?,?)'
  50.     let values = [null, data.name, data.age, data.sex]
  51.     const [reslut] = await pool.promise().query(sql, values)
  52.     console.log(reslut);
  53.     response.end(JSON.stringify(reslut))
  54.   } catch (error) {
  55.     console.log(error);
  56.     response.writeHead('400', {
  57.       "Content-Type": 'application/json'
  58.     })
  59.     response.end(JSON.stringify(error))
  60.     return
  61.   }
  62. }
  63. // 删除
  64. async function del (response, data) {
  65.   console.log(data);
  66.   try {
  67.     response.writeHead('200', {
  68.       "Content-Type": 'application/json'
  69.     })
  70.     let sql = `delete from school where name='${data.name}'`
  71.     const [reslut] = await pool.promise().query(sql)
  72.     console.log(reslut);
  73.     response.end(JSON.stringify(reslut))
  74.   } catch (error) {
  75.     console.log(error);
  76.     response.writeHead('400', {
  77.       "Content-Type": 'application/json'
  78.     })
  79.     response.end(JSON.stringify(error))
  80.     return
  81.   }
  82. }
  83. module.exports = {
  84.   select,
  85.   add,
  86.   del
  87. }
复制代码
router.js
   这个主要是对于路由做处理，来判定用户输入的接口地点是否正确
  1. // let heander = require('./heander')
  2. function route (response, url, data, params) {
  3.   // console.log(url, data, params);
  4.   // console.log(data[url]);
  5.   if (typeof data[url] == 'function') {
  6.     data[url](response, params)
  7.   } else {
  8.     response.writeHead('404', {
  9.       "Content-Type": 'application/json'
  10.     })
  11.     response.end('{error:请输入正确路径}')
  12.   }
  13. }
  14. module.exports = route
复制代码
serve.js
   服务器模块
  1. let http = require('http')
  2. let url = require('url')
  3. let route = require('./router')
  4. const querystring = require('querystring');
  5. function creactServe (data) {
  6.   const createserver = http.createServer(async (req, res) => {
  7.     // // 设置 CORS 头部
  8.     res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  9.     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  10.     res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  11.     // 判断get请求还是post请求
  12.     console.log(req.method);
  13.     if (req.method == 'GET') {
  14.       route(res, url.parse(req.url, false).pathname, data, url.parse(req.url, true).query)
  15.       // console.log(req.method);
  16.       // console.log(url.parse(req.url, true).query);
  17.       // res.end('{id:1}')
  18.     } else {
  19.       let data1 = []
  20.       // 这里是post请求
  21.       // 获取post参数
  22.       // 出现错误的时候
  23.       req.on('error', (err) => console.log(err))
  24.       // 当有数据的时候
  25.       req.on('data', (result) => data1.push(result))
  26.       // 当数据传输完毕以后
  27.       req.on('end', (result) => {
  28.         data1 = querystring.parse(Buffer.concat(data1).toString())
  29.         console.log(data1);
  30.         route(res, url.parse(req.url, false).pathname, data, data1)
  31.         // res.end(JSON.stringify(queryString.parse(data1)))
  32.       })
  34.     }
  35.     // 有人请求了以后才会执行这里面的代码
  36.     // req请求,res响应
  37.     // 设置请求头
  38.     // 返回json类型的格式
  39.   })
  40.   console.log('服务器启动成功');
  41.   // 设置端口
  42.   createserver.listen('3002', '127.0.0.1')
  43. }
  45. module.exports = { creactServe }
复制代码
如何使用

先启动服务，找到终端
   npm run start

这个就是在package.json中设置的

  然后再找到index.html文件

即可开始使用，现在现在功能，增删查询

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

万万哇

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表