前端+nodejs+mysql实现前后端联通的完整代码

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

Node.js主要属于后端技术,但也可以用于前端开发的某些场景,下面这篇文章主要介绍了前端+nodejs+mysql实现前后端联通的完整代码,文中通过代码介绍的非常详细,需要的朋友可以参考下

创建项目

创建项目

npm init

初始化项目

一路回车即可

当有 package.json这个文件的时候就相当于已经构建完毕

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" // 设置启动文件
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mysql2": "^3.12.0" // 连接数据库的插件
  }
}

创建index.js到根目录上
创建index.html文件和index.js平级
创建component功能性代码

代码块

粘贴上就能用这一套代码
index.js

// 数据库的方法
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

这里是设置功能性代码的地方并且链接数据库的地方

//  引入mysql方法
let http = require('http')
let mysql = require('mysql2')
let pool = mysql.createPool({
  user: 'root',
  host: 'localhost',
  password: '123456',
  port: 3306,//端口号
  database: 'mydemo' //连接的数据库
  , waitForConnections: true,// 当没有可用连接时是否等待
  connectionLimit: 10,     // 最大连接数量
  queueLimit: 0            // 最大等待请求数量 (0 表示不限制)
})
// 连接数据库
pool.getConnection((err) => {
  if (err) {
    console.log('连接失败');
  } else {
    console.log('连接成功');
  }
})
// res 路径 和post请求参数
// 查询
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) => {
    // // 设置 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参数
      // 出现错误的时候
      req.on('error', (err) => console.log(err))
      // 当有数据的时候
      req.on('data', (result) => data1.push(result))
      // 当数据传输完毕以后
      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)))
      })

    }
    // 有人请求了以后才会执行这里面的代码
    // req请求,res响应
    // 设置请求头
    // 返回json类型的格式
  })
  console.log('服务器启动成功');
  // 设置端口
  createserver.listen('3002', '127.0.0.1')
}

module.exports = { creactServe }

如何使用

先启动服务，找到终端

npm run start

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

然后再找到index.html文件

即可开始使用，目前目前功能，增删查询

总结

到此这篇关于前端+nodejs+mysql实现前后端联通的文章就介绍到这了,更多相关前端+nodejs+mysql前后端联通内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Node.js 使用 gRPC从定义到实现过程详解
gRPC是一个高性能、开源的远程过程调用（RPC）框架,由 Google 开发,它支持多种编程语言,旨在简化和优化分布式系统中的服务通信,本文给大家介绍Node.js 使用 gRPC从定义到实现过程,感兴趣的朋友跟随小编一起看看吧
2024-07-07
Node.js 子线程Crash 问题的排查方法
这篇文章主要介绍了Node.js 子线程Crash 问题的排查,本文通过代码例子给大家详细讲解，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
快速删除 node_modules 目录的集中方法(多种方法)
本文介绍了三种快速删除node_modules目录的方法：使用rimraf工具、通过npx运行rimraf以及在Windows命令提示符中使用del命令,每种方法都适合不同的操作系统和使用场景
2024-11-11
npm install安装失败报错:The operation was rejected by your
这篇文章主要给大家介绍了关于npm install安装失败报错:The operation was rejected by your operating system的相关资料,文中给出了多种解决方法供大家参考学习,需要的朋友可以参考下
2023-04-04
Nodejs 复制文件/文件夹的方法
这篇文章主要介绍了Nodejs 复制文件/文件夹的方法,需要的朋友可以参考下
2017-08-08
Node.js中require的工作原理浅析
这篇文章主要介绍了Node.js中require的工作原理浅析,通过分析node.js的源码得到本文,需要的朋友可以参考下
2014-06-06
Node.js Express 框架 POST方法详解
这篇文章主要介绍了Node.js Express 框架 POST方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
详解使用抽象语法树AST实现一个AOP切面逻辑
这篇文章主要为大家介绍了使用抽象语法树AST实现一个AOP切面逻辑的简单方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
koa2的中间件功能及应用示例
这篇文章主要介绍了koa2的中间件功能及应用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
傻瓜式解读koa中间件处理模块koa-compose的使用
这篇文章主要介绍了傻瓜式解读koa中间件处理模块koa-compose的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10

前端+nodejs+mysql实现前后端联通的完整代码

目录

创建项目

代码块

如何使用

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具