Ajax实现前后端数据交互（nodejs构建后端接口）

最新推荐文章于 2024-09-06 17:49:15 发布

결과론

最新推荐文章于 2024-09-06 17:49:15 发布

阅读量6.5k

点赞数 60

分类专栏： JS

本文链接：https://blog.csdn.net/Aweixuejiao/article/details/91374844

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

navicat

创建数据库
create database 数据库名;
创建数据表
语法： create table 表名 (字段名 varchar(20), 字段名 CHAR(1));
例如： create table peo (username varchar(20), sex varchar(20));
添加数据
往表中插入记录：
语法： insert into 表名 values (“字段一对应值”,“字段二对应值”,…);
insert into peo values (“张三”,“男”);
insert into peo values (“李四”,“女”);
insert into peo values (“王五”,“男”);
查询数据
select*from 表名
修改数据
update 表名 sex 字段名1=值1，[ 字段名2=值2，…] [ WHERE 条件表达式 ]
删除数据
delete from 表名 where

链接数据库流程
1.安装mysql模块： cnpm install mysql
2.在文件中导入mysql模块： var mysql = require(‘mysql’);
3.使用mysql对象的createConnection方法链接数据库

var mysql = require('mysql'); //导入mysql模块
var connection = mysql.createConnection({
host : '127.0.0.1', //数据库地址
user : 'root', //数据库用户名
password : 'admin', //数据库密码
database : 'logs_manager' //数据库名
});
connection.connect(); //启动链接
//打印出来是一个数据库链接对象，包含了数据库的各种信息
//与我们操作数据库的相关方法
console.info(connection) ;

查询数据库信息
方法：connection.query(sql,function (err, result) {});
Sql:表示要传入的操作数据库测sql语句
Function(){}：表示操作返回查询结果的回调函数

var sql = 'select * from peo where username="ww"';//像数据库查询
var sql = 'update peo set sex ="nvhai" where username="ww"';//像数据库修改
var sql = 'insert into peo values("ww","woman","19")';//添加
var sql = 'delete from peo where username = "ls"';//删除

预编译
其实这里可以写成预编译的方式，可以避免sql注入的问题，所谓预编译就是说对于原本在sql里面写值换成？问号用来占位，然后传入一个数组进去补全这个占位符

也就是connect.query方法会多一个参数，为一个数组，放入第二个位置。

安装express构建服务器
执行命令 cnpm install express 或者 yarn add express
使用express构建服务器

var express = require("express");//构建服务器
var app = express();
app.get("/", function(req, res) {
res.send("Hello World");//向前端发送数据
});
app.listen(8081,function() {
console.log("应用实例，访问地址为 http://127.0.0.1:8081");
});

用post获取，传参，添加到数据库
HTML代码post比get更安全，存储的数据量更大

<body>
    <form action="http://127.0.0.1:8080/add" method="POST">
        <input type="text" name="bookname">
        <input type="text" name="price">
        <input type="text" name="theme">
        <input type="text" name="pages">
        <button>按钮</button>
    </form>
</body>

创建数据库

var mysql = require("mysql");
function getconnect(){
    var connection = mysql.createConnection({
        host : '127.0.0.1', //数据库地址
        user : 'root', //数据库用户名
        password : 'qwerty', //数据库密码
        database : 'opt_test' //数据库名
        });
    return connection;
}
module.exports = getconnect;

利用post实现操作数据库

var newconnect = require("./nofz.js");//拉取数据库，下载的express和mysql不用相对路径
var express = require("express");//构建服务器
var app = express();//执行

//使用bodyParser模块，接收post参数
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

app.post("/",function(req,res){
   res.send("hello")
})
//增
app.post("/add", function (req, res) {
    console.log(req.body);
    var getcon = newconnect();
    getcon.connect();
    var sql = `insert into books values(?,?,?,?)`
    getcon.query(sql, [req.body.bookname, req.body.price, req.body.theme, req.body.pages], function (flas, trve) {//function的第一个参数是请求对象，第二个参数是响应对象
        if (flas) {
            console.log("注册失败", flas.message);
        }
        if (trve.affectedRows > 0) {//受影响行数大于0，说明操作数据库成功
            console.log("注册成功")
        }
        getcon.end();//结束数据库
    })
    res.send("注册成功");//向前端发送数据
});
//获取地址
app.listen(8080, function () {//第一个参数是地址
    console.log("应用实例，访问地址为 http://127.0.0.1:8080");
});

//1.创建AJAX对象
var xhr = new XMLHttpRequest();
//2.创建AJAX请求
xhr.open("get", "http://127.0.0.1:8080");//post请求将参数传入send（）方法中；
//3.发送AJAX请求
xhr.send();//post方法要加一句表头
//4.监听AJAX请求状态
// 通过onreadystatechange 方法即可请求监听状态
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) { //判断请求是否完成
        if (xhr.status == 200) { //判断请求是否成功
            var val = xhr.responseText; //获取请求返回的数据
            console.info(val);
        }
    }
}