后端与前端交互（服务端为node.js，前端为HTML）

m0_62541343

已于 2022-11-29 19:09:55 修改

阅读量1k

点赞数

分类专栏： web开发文章标签：前端 node.js javascript

于 2022-11-29 18:57:10 首次发布

本文链接：https://blog.csdn.net/m0_62541343/article/details/128103218

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML需要注意的是：

1.test的意思是查询的意思，这是因为js里面是这样写的，这里是跟js同步。

如果将test改为insert的意思注册的意思，

2.专门来显示返回的数据：

3.还有就是这个HTML代码的js部分用了Jquery库

一般jquery库是刀郎$这个符号

HTML代码：

JS代码：

HTML需要注意的是：

1.test的意思是查询的意思，这是因为js里面是这样写的，这里是跟js同步。

如果将test改为insert的意思注册的意思，

$.get('http://localhost:3000/test?'+params,function(msg){
                    $("#msg").html(msg);
                });

2.专门来显示返回的数据：


    <div id="msg"></div>

3.还有就是这个HTML代码的js部分用了Jquery库

 $(function(){

一般jquery库是刀郎$这个符号

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.1.1.js"></script>
</head>
<body>
    <form id="form">
        用户名：<input type="text" name="username" id="username" /><br>
        密码：<input type="password" name="password" id="password"/><br>
        Email:<input type="email" name="email" id="email"/><br>
        用户ID:<input type="number" name="userid" id="userid"/><br>
        <input type="button" id="submit" value="提交表单"/>
    </form>

    <div id="msg"></div>
    
    <script>
        $(function(){
            $("#submit").click(function(){
                let username = document.getElementById('username');
                let passwd = document.getElementById('password');
                let userid = document.getElementById('userid');
                let email = document.getElementById('email');
                let params = 'id=' + userid.value.trim() + '&username='+username.value.trim() +'&password=' + passwd.value.trim() +'&email=' + email.value.trim();
                console.log(params);
                
                $.get('http://localhost:3000/test?'+params,function(msg){
                    $("#msg").html(msg);
                });               
            })
        })
    </script>   
</body>
</html>

JS代码：

1.注意的是：需要导入三个框架。分别是express,mysql和cors

express是请求和回应的，是web应用框架。

mysql是连接数据库的。

cors是跨域的。

2.需要注意的是数据库的用户名和密码需要正确，

还有就是数据库名要存在，表我用的是user，还有就是数据库是MYSQL。

3.一般刚开始用node.js控制mysql的时候mysql会报错，错误如下

[SELECT ERROR] - ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

意思是连接错误，意思是mysql8.0以上加密方式，Node还不支持。说的是目前的数据库连接使用的node-mysql模块不符合新版的规则，所以会报出这个错误，那我们只需要修改旧的模块便可以解决问题了。

网上查一下：

mysql> alter user 'root'@'localhost' identified with mysql_native_password by '123456';

把模块改一下就行了

解决问题链接如下：

(30条消息) Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv_畱䶒的博客-CSDN博客_er_not_supported_auth_mode: client does not suppor

//引入express框架
const { response } = require('express');
const express = require('express');
//路径处理模块
const path = require('path');
//MySql数据库连接模块
const mysql = require('mysql');
const connect = mysql.createConnection({
    host:'localhost',
	//数据库的用户名和密码
    user:'root',
    password:'kkkkk',
	//数据库中的表名
    database:'并列成绩排名',
	//mysql数据库默认的端口
    port:3306,
	useConnectionPooling: true
});
//
//var result = null;
//按ID查询，返回结果；
async function queryByID(id){
	//connect.connect();
	return new Promise(
		function(resolve,reject){
			console.log("mysql has connnected");
			var result;
			var  sql = 'select * from user where id = ' + id;

			connect.query(sql,function (err, results) {
			if(err){
				console.log('[SELECT ERROR] - ',err.message);
				return;
			}

			if(results)
			{
				for(var i = 0; i < results.length; i++)
				{
					result = null;
					console.log("%d\t%s\t%s", i, results[i].name, results[i].email);  
					result = results[i].name +"||"+ results[i].email		
					resolve(result);					
				}
			}

			});		
		
	})
	//connect.end();
}
//插入一条数据；
async function insertUser(name,passwd,email){
	//connect.connect();
	return new Promise(
		function(resolve,reject){
			console.log("mysql has connnected");
		
			let sql = "insert into user (name,age,email)values(?,?,?)";//?是占位符
			//设置参数
			let params=[name,passwd,email];
			connect.query(sql,params,(err,result)=>{
				if (err) {
					console.error("插入失败" + err.message);
					result;
				}else{
					console.log("插入成功");
					resolve("插入成功");
				}

			});	
	})
	//connect.end();
}
//创建Web服务器
const app = express();

//cors跨域共享资源
//导入cors模块
const cors = require('cors');
//注册 cors 全局模块
app.use(cors())

//静态资源访问服务功能
//path.join()用于把多个路径片段拼接成一个完整的路径字符串
app.use(express.static(path.join(__dirname,'public')))

//对应get
app.get('/test',(req,res)=>{
	queryByID(req.query.id).then(rsp => {
		res.send('发送：id=' + req.query.id + '|name=' + req.query.username +'|passwd='+ req.query.password + '|查询结果：' + rsp);
	});

})
//对应insert
app.get('/insert',(req,res)=>{
	insertUser(req.query.username,req.query.password,req.query.email).then(rsp => {
		res.send('发送：id=' + req.query.id + '|name=' + req.query.username +'|passwd='+ req.query.password +'|email='+ req.query.email + '|查询结果：' + rsp);
	});

})
//监听端口
app.listen(3000);

console.log('服务器启动成功，port:3000');