Ajax实现前后端数据交互(nodejs构建后端接口)

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);
        }
    }
}
  • 60
    点赞
  • 212
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值