node.js搭建服务器

 

首先我们看看需求

 

首先初始化我们的项目文件夹，idx文件夹里放我们页面的文件，在同一根目录放我们的服务器文件（hot就是用node搭建的服务器）

 

实现内容很简单，总共四个模块，增删改查，我们先用layui框架搭建下页面结构，还需要layui的css，js，和jquery，这里我就不写了，layui的使用详情可参考www.layui.com/

 

<form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入内容" autocomplete="off"
                    class="layui-input ipt">
            </div>
            <button class="layui-btn layui-btn-normal btn" lay-submit lay-filter="formDemo">发布消息</button>
        </div>
        <div class="layui-form-item">
            <table class="layui-table">
                <tbody id="tbd">

                </tbody>
            </table>
        </div>
    </form>

 

首先我们先把服务器给搭建起来，不会的小伙伴可以直接看代码，三步搭建服务器，express需要下载 

npm i express@4.17.1

 

端口自己设置（我设置的8080，不要设置8000以下，可能与系统接口冲突）

// 这是我们的数据，没有数据库所以用数组替代
var arr = ["吃饭", "睡觉", "打豆豆"]
// 1,引入express
const express = require("express")
// 2，搭建服务器
const app = express()
// 3，监听listen
app.listen(8080, () => {
    console.log("127.0.0.1:8080");
})

 

打开终端，切换到hot所在目录，运行

代码即可开启服务器，代码如下，记得打开服务器，请求数据需要服务器运行，修改代码后，需要重启服务器，停止服务器ctrl + c ，然后 在终端按↑ 可切换上一次代码，直接回车，开启服务器

第一个模块，渲染模块

因为进网页就会显示数据，所以我们先完成这个模块，先写请求，这里不用传参数，所以用get请求，我们把渲染模块封装成一个函数，后面增删改查都会调用，res为我们从服务器拿到的数据，是一个数组，我们把他们渲染到tbody里，这里可以使用模板引擎渲染，因为数据比较简单，我直接用的for循环添加tr到tbody中，代码如下

//    查询
        function getList() {
            $("tbody").html("")
            $.ajax({
                method: "GET",
                url: 'http://127.0.0.1:8080/list',
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg("获取资料失败")
                    }
                    const arr = res.data
                    for (i = 0; i < arr.length; i++) {
                        $("#tbd").append(`
                        <tr>
            <td> <span date-ids="${i}">${arr[i]}</span><a href="javascript:;" date-id="${i}">删除</a></td>
                         </tr>
                        `)
                    }
                }

            })
        }
        getList();

 

现在写服务器中的接口，要与请求的接口一致

服务器端代码如下

 

// -----渲染列表
app.get('/list', (req, res) => {
    res.send({
        status: 0,
        data: arr
    });
})

 

服务器代码还是比较简单的，添加一个get请求接口，req为传过来的参数，这里没有，res为传给html页面的数据，用send方法直接把数组arr传过去写完后重启服务器，就能渲染数据了，如图

后面的方法如出一辙，html页面写请求，服务器文件里写接口，通过传过来的数据把arr数组里的数据进行增删改查，然后再渲染到页面，我就不一一解释了，这里要注意（静态托管，data数据传过来的数据处理问题，和跨域）的问题，当你看到服务器报错 很长一段    cors为第三方包 下载代码

npm i cors

 

啥的，直接写下面代码

// 跨域问题
const cors = require('cors')
app.use(cors())
//  静态托管
app.use(express.static('./idx'))
// 4. 导入 Node 内置模块 querystring
const qs = require('querystring')

// 4,监听请求
// --------中间件
app.use((req, res, next) => {
    // 定义中间价具体的业务逻辑
    // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
    let str = ''
    // 2. 监听 req 的 data 事件
    req.on('data', (chunk) => {
        str += chunk
    })
    req.on('end', () => {
        // 在 str 中存放的是完整的请求体数据
        // 将字符串格式的请求体数据，解析成对象
        // 5. 调用 qs.parse() 方法，将查询字符串解析成对象
        const body = qs.parse(str)
        req.body = body
        next()
    })
})

 

下面是各个模块的html请求代码

//    查询
        function getList() {
            $("tbody").html("")
            $.ajax({
                method: "GET",
                url: 'http://127.0.0.1:8080/list',
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg("获取资料失败")
                    }
                    const arr = res.data
                    for (i = 0; i < arr.length; i++) {
                        $("#tbd").append(`
                        <tr>
            <td> <span date-ids="${i}">${arr[i]}</span><a href="javascript:;" date-id="${i}">删除</a></td>
                         </tr>
                        `)
                    }
                }

            })
        }
        getList();

        // 添加
        $(".btn").on("click", function (e) {
            e.preventDefault()

            $.ajax({
                method: "POST",
                url: "http://127.0.0.1:8080/add",
                data: { name: $(".ipt").val() },
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg("添加失败")
                    }
                    layer.msg("添加成功")
                    getList()
                    $(".ipt").val("")
                }
            })
        })
        //    删除
        $("tbody").on("click", "a", function (e) {
            e.preventDefault()
            var ids = $(this).attr("date-id")
            $.ajax({
                method: "POST",
                url: "http://127.0.0.1:8080/del",
                data: { id: ids },
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg("删除失败")
                    }
                    layer.msg("删除成功")
                    getList()
                }
            })
        })
        // 双击编辑功能
        $("tbody").on("dblclick", "span", function () {
            $(this).html(`<input type="text" class="pp">`)
        })
        // 失去焦点
        $("tbody").on("blur", ".pp", function () {
            var ids = $(this).parent().attr("date-ids")
            $(this).hide()
            $.ajax({
                method: "POST",
                url: "http://127.0.0.1:8080/edit",
                data: { name: $(".pp").val(), id: ids },
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg("编辑失败")
                    }
                    layer.msg("编辑成功")
                    getList()
                }
            })
        })

 

下面是各个模块服务器接口代码

// -----渲染列表
app.get('/list', (req, res) => {
    res.send({
        status: 0,
        data: arr
    });
})

// -------添加
app.post("/add", (req, res) => {
    arr.push(req.body.name)
    res.send({
        status: 0
    })
})

// --------删除
app.post("/del", (req, res) => {
    const newarr = arr.filter(function (value) {
        return value != arr[req.body.id]
    })
    arr = newarr
    res.send({
        status: 0
    })
})

// -------编辑
app.post("/edit", (req, res) => {
    arr[req.body.id] = req.body.name
    res.send({
        status: 0
    })
})