教程.NodeJS的常见用法

最新推荐文章于 2023-12-25 10:04:20 发布
最新推荐文章于 2023-12-25 10:04:20 发布
阅读量122 收藏
点赞数
分类专栏： WEB前端 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flowingcloud28/article/details/130579860
版权

代码实例

操作数据库

综合示例如下，设备管理系统（DMS），可以实现通过NodeJS连接MySQL数据库，实现接口，并且可跨域，然后读取到前端页面上。


数据库

使用MySQL数据库，信息如下：

host: 'localhost',
user: 'root',
password: '123456',
database: 'test'

创建 device 表，包含三个字段：id，name，note


前端

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>Document</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
            <el-card class="box-card membersTab">
                <!-- 查询 -->
                <div style="margin-bottom: 40px;">
                    <el-button @click="getData(input)" style="display: inline-block;" type="primary">查询</el-button>
                    <el-input style="width: 60%;" v-model="input" placeholder="请输入内容"></el-input>
                </div>
                <!-- 新增 -->
                <div style="margin-bottom: 40px;">
                    <el-button type="success" @click="handleInsert(id,name,note)">新增</el-button>
                    <el-input style="width: 20%;" v-model="id" placeholder="请输入id"></el-input>
                    <el-input style="width: 20%;" v-model="name" placeholder="请输入name"></el-input>
                    <el-input style="width: 20%;" v-model="note" placeholder="请输入note"></el-input>
                </div>

                <el-divider></el-divider>

                <!-- 数据表格 -->
                <el-table
                    :data="tableData.slice((pageSettings.currentPage-1)*pageSettings.PageSize,pageSettings.currentPage*pageSettings.PageSize)"
                    stripe style="width: 100%" @sort-change="sortChange">
                    <el-table-column label="id" width="180" sortable prop="id"></el-table-column>
                    <el-table-column label="name" width="180" sortable prop="name"></el-table-column>
                    <el-table-column label="note" width="180" sortable prop="note"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="handleDelete(scope)">删除</el-button>
                            <el-button size="mini" type="warning" @click="btn_edit(scope)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="tabListPage">
                    <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageSettings.currentPage" :page-sizes="pageSettings.pageSizes"
                        :page-size="pageSettings.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageSettings.totalCount">
                    </el-pagination>
                </div>

                <!-- 编辑表单 -->
                <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="ID" :label-width="formLabelWidth">
                            <el-input v-model="form.id" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="NAME" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="NOTE" :label-width="formLabelWidth">
                            <el-input v-model="form.note" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="handleUpdate(form)">确 定</el-button>
                    </div>
                </el-dialog>
            </el-card>
        </template>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    input: '',
                    id: '',
                    name: '',
                    note: '',
                    pre_params: '',
                    dialogFormVisible: false,
                    formLabelWidth: '120px',
                    form: {},
                    tableData: [],

                    // 分页配置
                    pageSettings: {
                        // 分页配置
                        // 默认显示第几页
                        currentPage: 1,
                        // 总条数，根据接口获取数据长度(注意：这里不能为空)
                        totalCount: 1,
                        // 个数选择器（可修改）
                        pageSizes: [3, 5, 10, 20],
                        // 默认每页显示的条数（可修改）
                        PageSize: 10,
                    },
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                // 实现全页面排序
                sortChange({ prop, order }) {
                    this.tableData.sort(this.compare(prop, order));
                },
                sortChange(column) {
                    this.pageIndex = 1; // 排序后返回第一页
                    if (column.order === "descending") {
                        this.tableData.sort((a, b) => b[column.prop] - a[column.prop]);
                    } else if (column.order === "ascending") {
                        this.tableData.sort((a, b) => a[column.prop] - b[column.prop]);
                    }
                },

                // 查询
                getData() {
                    let that = this;

                    axios({
                        method: 'get',
                        url: 'http://localhost:8888/query',
                        params: {
                            name: that.input
                        }
                    }).then(
                        function (res) {
                            that.tableData = res.data;
                            console.log(that.tableData);

                            // 判断如果存在返回值，则将当前页改为1，否则无法显示内容
                            if (that.tableData.length > 0) {
                                that.pageSettings.currentPage = 1
                            }

                            // 将数据的长度赋值给totalCount
                            that.pageSettings.totalCount = that.tableData.length
                        }
                    ).catch(err => console.log(err))
                },

                // 功能_新增
                handleInsert(param) {
                    let that = this;

                    axios({
                        method: 'post',
                        url: 'http://localhost:8888/insert',
                        data: Qs.stringify({
                            id: that.id,
                            name: that.name,
                            note: that.note
                        })
                    }).then(
                        function (res) {
                            that.getData();
                            console.log(res);
                        }
                    ).catch(err => console.log(err));
                },

                // 功能_删除
                handleDelete(param) {
                    let that = this;

                    axios({
                        method: 'post',
                        url: 'http://localhost:8888/delete',
                        data: Qs.stringify({
                            id: param.row.id
                        })
                    }).then(
                        function (res) {
                            that.getData();
                            console.log(res.data);
                        }
                    ).catch(err => console.log(err));
                },

                // 功能_修改
                btn_edit(params) {
                    this.dialogFormVisible = true;
                    pre_params = params.row;
                    console.log(pre_params);

                    // 将被编辑行的原数据带入到编辑表单
                    this.form = {
                        id: pre_params.id,
                        name: pre_params.name,
                        note: pre_params.note
                    }
                },
                handleUpdate(params) {
                    let that = this;
                    console.log(params);

                    axios({
                        method: 'post',
                        url: 'http://localhost:8888/update',
                        data: Qs.stringify({
                            id: params.id,
                            name: params.name,
                            note: params.note,
                            pre_params: pre_params
                        })
                    }).then(
                        function (res) {
                            that.getData();
                            console.log(res.data);
                        }
                    ).catch(err => console.log(err));

                    this.dialogFormVisible = false;
                },

                // 分页
                // 每页显示的条数
                handleSizeChange(val) {
                    // 改变每页显示的条数 
                    this.pageSettings.PageSize = val
                    // 注意：在改变每页显示的条数时，要将页码显示到第一页
                    this.pageSettings.currentPage = 1
                },
                // 显示第几页
                handleCurrentChange(val) {
                    // 改变默认的页数
                    this.pageSettings.currentPage = val
                }
            }
        })
    </script>
    <style lang="">
        .membersTab {
            width: 800px;
            margin: 20px auto;
        }
    </style>
</body>

</html>

后端

js

// 使用expres框架，并创建应用
var express = require('express')
const app = express()

// 解决跨域请求
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// 使用bodyParser中间件
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended: true
}));

// 使用连接池，连接数据库
var mysql = require("mysql");
var pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'test'
});

// DMS.新增
app.post('/insert', (req, res) => {
    console.log('-------------------START INSERT---------------------');
    console.log(req.body);
    const sql = `insert into device(id,name,note) values('${req.body.id}','${req.body.name}','${req.body.note}')`;
    console.log(sql);

    pool.query(sql, (err, data) => {
        if (err) {
            console.log(err);
            res.send(err)
        } else {
            res.send(data)
        }
    })
    console.log('-------------------END INSERT---------------------');
})

// DMS.删除
app.post('/delete', (req, res) => {
    console.log('-------------------START DELETE---------------------');
    console.log(req.body);
    // 删除数据
    const sql = `delete from device where id = '${req.body.id}'`
    console.log(sql);

    pool.query(sql, (err, data) => {
        if (err) {
            console.log(err);
            res.send(err)
        } else {
            res.send(data)
        }
    })
    console.log('-------------------END DELETE---------------------');
})

// DMS.修改
app.post('/update', (req, res) => {
    console.log('-------------------START UPDATE---------------------');
    console.log(req.body);

    // 删除数据
    const sql = `update device set id = '${req.body.id}', name = '${req.body.name}', note = '${req.body.note}' where id = '${req.body.pre_params.id}'`
    console.log(sql);

    pool.query(sql, (err, data) => {
        if (err) {
            console.log(err);
            res.send(err)
        } else {
            res.send(data)
        }
    })
    console.log('-------------------END UPDATE---------------------');
})

// DMS.查询
app.get('/query', (req, res) => {
    console.log('-------------------START QUERY---------------------');
    console.log(req.query.name);

    // 判断输入框是否为空
    if (req.query.name == '' || req.query.name == undefined) {
        var sql = 'select * from device order by id'
    } else {
        // 可改为模糊查询
        // var sql = `select * from device where name = '${req.query.name}' order by id`
        var sql = `select * from device where name like '%${req.query.name}%' order by id`
    }
    console.log(sql);

    pool.getConnection((err, connection) => {
        connection.query(sql, function (err, data) {
            console.log(data)
            if (err) {
                console.log(err);
                return;
            }
            res.send(data)

            //释放连接
            connection.release();
            console.log('-------------------END QUERY---------------------');
        });
    });
})



// 端口必须要监听
app.listen(8888, () => {
    console.log("http://localhost:8888")
})



读取本地文件

// api请求：
// method: "get",
// url: "http://localhost:8081/query",
// params: {
//     filename: "input.txt",
// },

// 使用expres框架，并创建应用
const express = require('express');
const app = express();
const fs = require('fs');

// cors解决跨域问题
const cors = require('cors');
app.use(cors());

// 使用bodyParser中间件
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended: true
}));

// 查询
app.get('/query', (req, res) => {
    var filename = req.query.filename;
    console.log(filename);

    // 规定格式：fs.readFile(filename, 'utf-8', (err, data) => {})，如果不指定'utf-8'将解析错误。
    fs.readFile(filename, 'utf-8', (err, data) => {
        if (err) {
            console.log(err);
            res.send(err);
        } else {
            console.log(data);
            res.send(data)
        }
    });
})

// 端口必须要监听
app.listen(8080, () => {
    console.log("http://localhost:8080")
})



常见问题处理

跨域问题

使用cors跨域

const cors = require('cors');
app.use(cors());

手动配置

首先，需要定义app，通过express框架

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

解决跨域接收请求

//设置跨域请求
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

解决跨域返回

// 使用中间件 允许跨域
// app.use(path,中间件函数)
app.use('/', (req, res, next) => {
    // 注意, 需要带 '*'
    res.set('Access-Control-Allow-Origin', '*');        
    next();
});


异步等待

即promise()函数的 async / await 用法。

await必须用在async标记的函数内部。

使用示例如下：

async function write() {
    console.log(1);
    
    // 写法1
    // await new Promise(function(resolve, reject) {
    //     setTimeout(function() {
    //         console.log(2);
    //         resolve(0);
    //     }, 2000);
    // });
    
    // 写法2
    var res = await new Promise((resolve, reject) => {
        setInterval(() => {
            resolve(2)
        }, 1000);
    })
    console.log(res);
    
    console.log(3);
}

write()
// 输出结果：
// 1
// 2 (1s后执行)
// 3

正常情况依次打印三个数字，由于2被设置了延时，所以应该最后打印2。

但是在使用了 async / await 之后，函数执行顺序必须等待打印2完成后才会执行后续。



res的各方法之间的区别

res.wirte()

必须和res.end()成对出现

res.write() 负责向前端返回数据，res.end() 负责结束请求。如果没有 res.end()，浏览器将会一直处于请求状态。

数据不做处理，原封不动返回

res.write()的返回数据是没有经过处理的，原封不动的返回原数据，所见即所得。

在结束浏览器响应请求之前，允许多次调用

使用 res.write() 可以输出多条语句，即在res.end() 之前可以执行多次，且返回的数据会被拼接到一起。

只允许输出字符串类型和Buffer对象两种数据类型

例如，如果输出数字则会报错。


res.send()

数据会被处理

会自动发送更多的响应报文头，包括返回数据类型，所以不会有乱码。

只允许调用一次

即等同于 res.write() + res.end()

支持多种内容格式

允许String、Array、Buffer对象、对象、json等。


res.json()

同 res.send()，响应结果都是json。



解析参数失败

引入 body-parser 模块，作为中间件

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended: true
}));
迷路的刘云儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js超详细教程！
liubenzun的博客
04-12 953
nodejs超详细教程！
Node.js 如何使用
sam80000的博客
11-27 2172
学习路径 引用 https://www.bilibili.com/video/BV1QT4y1A7NR?p=1 一、了解Node.js Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js 是一个开源和跨平台的 JavaScript 运行时环境，运行在服务器端。可以解析js代码，没有浏览器安全级别的限制，提供了很多系统级别的API 文件读写 File System 进程的管理 process 网
Node JS 的基本使用
lilygg的博客
11-06 6562
一、概述 1.什么是Node.js Node.js是一个基于"ChromeV8引擎"的JavaScript"运行环境"； 2.什么是V8引擎 V8引擎是一款专门解释和执行JS代码的虚拟机,任何程序只要集成了V8引擎都可以执行JS代码 例如 将V8引擎嵌入到浏览器中，那么我们写的JavaScript代码就会被浏览器所执行； 将V8引擎嵌入到NodeJS中，那么我们写的JavaScript代码就会被NodeJS所执行。 3.什么是运行环境 运行环境就是生存...
Node.js入门 01：基础使用与说明
Naisu的各种笔记
10-15 2616
文章目录目的总结 目的 总结
Node.js 使用详情
世间万物皆不如你
06-27 1234
Node.js 具有以下特点：单线程：Node.js 使用单线程模型，避免了多线程编程的复杂性。异步非阻塞 I/O：Node.js 使用事件驱动的编程模型，能够处理大量并发连接。跨平台：Node.js 支持 Windows、Linux 和 macOS 等主要操作系统。本文对 Node.js 的基本概念、安装方法、Web 服务器的创建、依赖管理、Express 框架、文件系统操作以及事件循环与异步编程进行了详细介绍。
Node.js 的使用
wbskb的博客
04-24 159
npm 软件包/querystring 模块方法/http 模块
Javascript.NodeJS：从C＃调用NodeJS中的Javascript
02-05
Jering.Javascript.NodeJS目录总览Jering.Javascript.NodeJS使您能够调用JavaScript中 ，从C＃。 借助此功能，您可以使用C＃项目中的javascript库和脚本。 您可以使用此库来替代最近淘汰的 。 替换了INodeService的...
hudson.plugins.nodejs.tools.NodeJSInstaller 版本最高为17.9.0
04-13
用于解决jenkins安装nodeJs插件后不能选择nodejs版本，将该文件上传到服务器，然后 docker cp ./hudson.plugins.nodejs.tools.NodeJSInstaller 容器ID:/var/jenkins_home/updates 然后重启Jenkins
hudson.plugins.nodejs.tools.NodeJSInstaller
08-23
jenkins的nodejs12.8插件，在jenkins版本太老，不能更新插件时使用，上传文件到linux进入/root/.jenkins/updates/，重启jenkins即可。
nodejs.pdf nodejs初级教程 nodejs初级教程
09-23
nodejs初级教程
Redist.NodeJS：将NodeJS可执行文件放置在应用程序的输出目录中
02-15
Jering.Redist.NodeJS TODO发布包： 目录 概述 Jering.Redist.NodeJS地方在您的应用程序的输出目录中的可执行文件。 该软件包将自动更新。 软件包版本对应于NodeJS版本。 安装 使用包管理器： PM> Install-...
node.js 详解
m0_55557411的博客
04-18 2万+
node.js 详解
node.js的基本用法
2201_75896691的博客
12-25 550
现在：前端---h5+c3+es6+nodejs+element-UI+vue+微信小程序。以前：前端---h5+c3+js+jq+bootstrip+PHP。-- 使用 esc 键，能够快速清空当前已输入的命令 -->-- 使用 ↑ 键，可以快速定位到上一次执行的命令 -->-- ctrl+左右键，可以快速定位到特殊字符前 -->-- tab键可以快速生成执行的路径 -->-- cd .. 返回上一级目录-->-- cls 清除控制台记录 -->以前：后台---MVC+layui。
node.js的安装和使用（保姆教程）
D_AKJS
09-13 4075
关于node.js 的安装和使用
Node.js教程（想入门就来点进来看看)
Autumn_Xiao的博客
08-24 2024
Node对前端的工程师来说还算是友好的，转Node.js也是相对较容易接受如果你是一个前端程序员，你不懂得像 PHP、Python 或 Ruby 等动态编程语言，然后你想创建自己的服务，那么 Node.js 是一个非常好的选择。Node.js 是运行在服务端的 JavaScript，如果你熟悉 Javascript，那么你将会很容易的学会 Node.js。当然，如果你是后端程序员，想部署一些高性能的服务，那么学习 Node.js 也是一个非常好的选择。相信你应该了解一些基本的计算机编程术语。
【前端开发-----NodeJS】nodejs快速入门教程，想要快速入门nodejs就看这一篇文章就够了，基础部分特详细，按要点整理知识点
m0_67844671的博客
09-25 6999
nodejs快速入门教程，想要快速入门nodejs就看这一篇文章就够了，特详细的保姆级教程；基础部分特详细，按要点整理知识点；内容包括文件操作，路径处理，模块化，中间件，路由，身份认证，数据库操作，数据校验等等；用express框架快速搭建自己的后端服务器。
Node.JS教程
热门推荐
stc_ljc的博客
08-22 12万+
本文章主要是关于Node.js基础、Express、Koa2、MongoDB、MySQL、以及全栈项目和即时通讯和基于Mocha做测试，基于最新版V16.13和官网+周边生态，从而实现编写Restful Api接口和动态web网站的开发，即时通讯应用的开发
node.js的使用
qq_64156125的博客
02-01 82
1.读写本地磁盘的文件 2.操作数据库 3.创建web服务器。
hudson.plugins.nodejs.tools.nodejsinstaller
最新发布
01-10
使用hudson.plugins.nodejs.tools.nodejsinstaller插件，我们可以通过指定版本号来安装Node.js。该插件会自动下载对应版本的Node.js安装文件，并执行安装过程。安装完成后，我们就可以在Hudson上运行Node.js项目了。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值