前端+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.delserve.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 }