使用node创建简单的web服务器接口并发送get和post请求完成交互！（代码）

最新推荐文章于 2023-11-09 11:55:39 发布

湖边看客

最新推荐文章于 2023-11-09 11:55:39 发布

阅读量357

点赞数

文章标签：前端服务器运维

本文链接：https://blog.csdn.net/VVVVV16/article/details/127016937

版权

整个项目的实现结果是点击add按钮就能发送post请求向web服务器中添加数据

并刷新页面重新获取数据渲染页面

一、先展示一下基本的结构

二、npm init -y 先初始化一个包管理工具

我们在整个过程中会用到三个包

express 用来创建web服务器 body-parser 用来做中间的数据桥梁 cors解决同源问题

三、看一下我的html代码（中间引入了jq）


<body>
    <input type="text" placeholder="果名" class="name" value="li">
    <input type="text" placeholder="数量" class="num" value="1">
    <input type="text" placeholder="价格" class="price" value="5">
    <button class="add">add</button>
    <table width="300" border="1">
        <thead class="thead">
            <tr>
                <td>商品</td>
                <td>数量</td>
                <td>价格</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody class="tbody">

        </tbody>
    </table>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    $(function () {

        $.ajax({
            url: ' http://127.0.0.1:8080/goodslist',
            method: 'get',
            success(res) {
                renderpage(res)
            }
        })
        $('.add').on('click', function () {
            let name = $('.name').val()
            let num = $('.num').val()
            let price = $('.price').val()

            $.ajax({
                url: "http://127.0.0.1:8080/addgoods",
                method: 'post',
                data: {
                    name,
                    num,
                    price
                },
                success(res) {
                    let data = JSON.parse(res)
                    renderpage(data)
                }
            })

        })
        function renderpage(res) {
            let data = JSON.parse(res).list
            let str = ''
            data.forEach(item => {
                str += ` <tr>
                <td>${item.name}</td>
                <td>${item.num}</td>
                <td>${item.price}</td>
                <td><button>删除</button></td>
            </tr>`
            });
            $('.tbody').html(str)
        }


    })
</script>

四、我的后台web代码

const express = require('express')
const fs = require('fs')
const cp = require('child_process')
const cors = require('cors')
const bodyParser = require('body-parser')

const app = express();
app.use(bodyParser.urlencoded({
    extended: false
}));
app.use(bodyParser.json());
app.use(cors());




app.get('/goodslist', (rep, res) => {
    fs.readFile('./goodslist.json', 'utf8', (err, data) => {
        if (err) throw err
        res.send(data)
    })
})


app.post('/addgoods', (req, res) => {
    // console.log(11, req.body.name, req.body.num, req.body.price);
    let newFluit = {
        name: req.body.name,
        num: req.body.num,
        price: req.body.price
    }
    console.log(newFluit);
    fs.readFile('./goodslist.json', 'utf8', (err, data) => {
        if (err) throw err
        let dataArr = {
            ...JSON.parse(data)
        }
        dataArr.list.push(newFluit)
        // console.log(111, dataArr);
        let str = `${JSON.stringify(dataArr)}`

        fs.writeFile('./goodslist.json', str, err => {
            throw err
            console.log('写入成功');
        })

    })
})




app.listen(8080, () => {
    console.log('serve running at http://127.0.0.1:8080/goodslist');
})

这样一个简单的前后台交互的web服务就实现了