简单实现express前后端交互

Tahiti0325

已于 2022-07-28 21:32:41 修改

阅读量604

点赞数

分类专栏：笔记文章标签： ajax jquery mysql node.js

于 2022-07-27 00:13:14 首次发布

本文链接：https://blog.csdn.net/ZengJiajia0325/article/details/126005445

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上了web课，对于使用PHP实现前后端交互已经有了一定程度的了解（可以说是会用了）。但是一直以来，觉得node.js的前后端交互与PHP的前后端交互，仿佛很相似，但是一写就卡住。

这几天通过一个小例子摸到了一点门路。此处以jQuery实现的ajax为例。

话不多说，看代码。

首先展示目录结构：

project_name

---local_modules

---connection.js

---node_modules（此处展开省略）

---public

---css

---js

---c-test.js

---test.html

---router

---s-test.js

---index.js

---package-lock.json

---package.json

index.js：

var express = require('express'); 
var app = express();   

const path = require('path');

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/static',express.static(path.join(__dirname,'public')));   //静态资源访问功能


var test=require('./router/s-test');
app.use('/test',test);//为路由对象匹配请求路径

var server = app.listen(8082, function () { 
    console.log("Server running at http://localhost:8082"); 
});

端口可自行修改，此处为8082。由于请求的路径是“/test”，因此打开的地址应该为：http://localhost:8082/test

connection.js:

var mysql = require('mysql');

const pool = mysql.createPool({
    host:'localhost',
    port:3306,
    database:'test',
    user:'root',
    password:'123456',
    connectionLimit:20,
    multipleStatements:true
});

module.exports = pool;

可根据自身的数据库信息进行修改

test.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>TEST</title>
</head>
<body>
    <h1 id="t"></h1>

    <input type="text" placeholder="请输入查询的用户名" id="name">
    
    <button id="btn">显示</button>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="/static/js/c-test.js"></script>
</body>
</html>

c-test.js:

function onBtnClick(){
    var name=$('#name').val();
    console.log(name);
    $('#t').text(name);
    $.post('/test',
    {
        username:name
    },
    function(data){    
        console.log(data);
        alert(data.msg);
        var rs=data.data;
        console.log(rs[0].realname);
        var str="<ul>";
        str+="<li>"+rs[0].realname+"</li>";
        str+="</ul>";
        $('#t').append(str);
    },"json");
}

function init() {
    $('#btn').on('click',onBtnClick);
}

init();

s-test.js:

var express = require('express');
var fs = require('fs');
const pool = require('../local_modules/connection');
var test = express.Router();

test.get('/',(req,res)=>{
    fs.readFile('./public/test.html', (err,data)=> {
        res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
        return res.end(data);
    }); 
})

test.post('/',(req,res,next)=>{
    var username=req.body.username;
    console.log(username);
    pool.getConnection(function (err, conn) {
        if (err) {
            console.log("数据库连接失败");
        } else {
            console.log("数据库连接成功");
            // 定义sql查询语句
            let sql = "select * from user where username = ?";       
            // 查询操作
            // console.log(sql);

            conn.query(sql, [username], function (err, result) {
                if (err) {
                    console.log("数据库查询失败");
                } else {
                    if(result[0]==null){
                        res.status(200).json({
                            code: 0,
                            msg: '用户不存在！',
                            data: ''
                        });
                    }else{
                        res.status(200).json({
                            code: 1,
                            msg: '用户存在！',
                            data: result
                        });
                    }
                }
            })
            conn.release();

            // res.status(200).json({
            //     code: 1,
            //     msg: '成功！',
            //     data: ''
            // });
        }
    })
});

module.exports = test;

这个小例子实现的功能是，输入用户名，显示用户的真实姓名。所以数据库test的表user包含的字段至少有username和realname。

大概就是这样，虽然是个小例子，但是通过这个小例子，还是可以掌握很多东西的。