nodejs-增删改查（没有上传数据库）-demo

最新推荐文章于 2021-09-09 20:22:00 发布
最新推荐文章于 2021-09-09 20:22:00 发布
阅读量273 收藏
点赞数
分类专栏： node.js 三-框架类 前端后端demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/107088859
版权

在这里插入图片描述
命令行有
npm init -y
node i express
在这里插入图片描述
axios.js

// 需要输入的命令行
// 最开始创建文件夹时 npm init -y
// npm i express
// 如果不安装nodemon 梅西修改过后都得重新运行，很麻烦
// 如果之前没有安装 需安装 npm i nodemon -g
// 执行文件 nodemon 文件名
// 或者在package.json增添一下东西
/*  "scripts": {
  "dev": "nodemon app.js"
}, */
// 执行文件 npm run dev  （run可省略）
const fs = require("fs");
const express = require("express");
const app = express();

if (!fs.existsSync("./db")) {
  fs.mkdirSync("./db");
}
// 因为前面页面用的是axios，这个让express能够格式化请求体中的json数据
// 否则新增的数据内容无法正常存储，只会存储上id
app.use(express.json());
app.use("/", express.static("./public"));



// ./routes/api/v1/pets.js 这个路径下的文件夹文件都需要自己去创建
// 第一个参数是网址 ，可自己随便命名，但是最好按照api的命名规范，同时要清晰易懂
app.use("/api/v1/pets", require("./routes/api/v1/pets.js"));
// app.use("/api/v1/movies", require("./routes/api/v1/movies.js"));

app.listen(3333, () => {
  console.log("服务器运行在3333端口");
}); /*  */

pets.js

const router = require('express').Router();
const fs = require('fs');



//  /api/v1/pets/--查询所有
router.get('/', (req, res) => {
    if (fs.existsSync('./db/pets.json')) {
        const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
        res.json(pets);
    } else {
        fs.writeFileSync('./db/pets.json', "[]");
        res.json([]);
    }
});



//  /api/v1/pets/:name--根据名字查询信息
router.get('/name', (req, res) => {
    // console.log(req.query.name)
    console.log(req.query)
    const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
    /*   find() 方法返回通过测试（ 函数内判断） 的数组的第一个元素的值。
    如果没有符合条件的元素返回 undefined
    find() 对于空数组， 函数是不会执行的。
    find() 并没有改变数组的原始值。 */
    const pet = pets.find(item => item.name == req.query.name);
    res.json({
        code: 1,
        info: pet ? pet : {},
    });
});


//  /api/v1/pets/:id--查询一条信息
router.get('/:id', (req, res) => {
    const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
    const pet = pets.find(item => item.id == req.params.id);
    res.json({
        code: 1,
        info: pet ? pet : {},
    });
});


//  /api/v1/pets/--存储数据
router.post('/', (req, res) => {
    const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
    pets.push({
        id: Date.now(),
        ...req.body
    });
    fs.writeFileSync('./db/pets.json', JSON.stringify(pets));
    res.json({
        code: 1,
        msg: '数据存储成功'
    });
});
//  /api/v1/pets/:id--修改信息
router.put('/:id', (req, res) => {
    const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
    const index = pets.findIndex(item => item.id == req.params.id);
    pets[index] = {
        id: req.params.id,
        ...req.body
    };
    fs.writeFileSync('./db/pets.json', JSON.stringify(pets));
    res.json({
        code: 1,
        msg: '数据修改成功'
    });
});

//  /api/v1/pets/:id--删除信息
router.delete('/:id', (req, res) => {
    const pets = JSON.parse(fs.readFileSync('./db/pets.json').toString());
    const index = pets.findIndex(item => item.id == req.params.id);
    pets.splice(index, 1);
    fs.writeFileSync('./db/pets.json', JSON.stringify(pets));
    res.json({
        code: 1,
        msg: '信息删除成功'
    });
});

module.exports = router;

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息管理</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">列表页</h3>
            </div>
            <div class="panel-body">
                <!-- search---查询 新增 -->
                <div class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control" id="searchName" placeholder="请输入姓名">
                    </div>
                    <button type="submit" class="btn btn-default btn-primary" id="btnSearch"
                        onclick="search()">查询</button>
                    <a href="./add.html" class="btn btn-default btn-danger">新增</a>
                </div>

                <!-- 列表--查询 -->
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>技能</th>
                            <th>头像</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="list">
                        <!-- <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr> -->
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        // 发起一个get请求,是一个promise对象，成功之后调用then里面的回调函数
        //  参数一 表示请求的地址
        // axios发送请求的时候content-type默认为application/json，传递的数据是json格式的
        // jquery发送请求的时候content-type为url编码的，传递的数据是一个类似于：a=值&b=值2
        axios.get('/api/v1/pets')
            .then((res) => {
                console.log(res);// res.data表示服务器接口输出的内容
                let strHtml = '';
                res.data.forEach((item, index) => {
                    strHtml += `
                    <tr>
                        <td>${index+1}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.edu}</td>
                        <td><img src="${item.img}"style="width:150px;height:120px;" /></td>
                        <td>
                            <button type="submit" class="btn btn-default btn-primary" οnclick="delOne('${item.id}')">删除</button>    
                            <a href="./amend.html?id=${item.id}" class="btn btn-default btn-danger" >修改</a>    
                        </td>
                    </tr>`;
                });
                document.getElementById("list").innerHTML = strHtml;
            });



        // 查询名字
        function search() {
            var name = document.getElementById('searchName').value;
            var str = '';
            axios.get('/api/v1/pets/name', {
                    params: {
                        name: name
                    }
                })
                .then(res => {
                    console.log(res);
                    str += `
                    <tr>
                        <td>${res.data.info.id}</td>
                        <td>${res.data.info.name}</td>
                        <td>${res.data.info.age}</td>
                        <td>${res.data.info.edu}</td>
                        <td><img src="${res.data.info.img}" style="width:150px;height:120px;" /></td>
                        <td>
                            <button type="submit" class="btn btn-default btn-primary" οnclick="delOne('${res.data.info.id}')">删除</button>    
                            <a href="./amend.html?id=${res.data.info.id}" class="btn btn-default btn-danger" >修改</a>    
                        </td>
                    </tr>`;
                    document.getElementById('list').innerHTML = str;
                    // window.location.reload();
                });
        }

        // 删除
        function delOne(id) {
            if (confirm('是否删除')) {
                axios.delete('/api/v1/pets/' + id)
                    .then(res => {
                        window.location.reload();
                    });
            }
        }
    </script>
</body>

</html>

add.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息录入</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">信息录入</h3>
            </div>
            <div class="panel-body">
                <!--  -->

                <!-- <form action="" method="POST" role="form"> -->
                <legend>信息录入</legend>

                <div class="form-group">
                    <label for="">姓名</label>
                    <input type="text" class="form-control" placeholder="请输入姓名" id="name">
                </div>
                <div class="form-group">
                    <label for="">年龄</label>
                    <input type="text" class="form-control" placeholder="请输入年龄" id="age">
                </div>
                <div class="form-group">
                    <label for="">技能</label>
                    <textarea type="text" class="form-control" placeholder="请输入技能" id="edu"></textarea>
                </div>
                <div class="form-group">
                    <label for="">头像</label>
                    <input type="text" class="form-control" placeholder="请输入头像地址" id="img">
                </div>


                <button type="submit" class="btn btn-primary btn-block" onclick="btnSave()">提交</button>
                <!-- </form> -->


            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        function btnSave() {
            var name = document.querySelector('#name').value;
            // console.log(imgTxt);
            var age = document.querySelector('#age').value;
            var edu = document.querySelector('#edu').value;
            var img = document.querySelector('#img').value;

            if (name && age && edu && img) {
                // .post发送post请求
                //    参数一 表示地址
                //    参数二 表示传递的数据
                axios.post('/api/v1/pets', {
                    name,
                    age,
                    edu,
                    img,
                }).then(res => {
                    console.log(res);
                    alert('添加成功');
                    window.location.href = "./index.html";
                });
            } else {
                alert('请填写完整');
            }

        }
    </script>
</body>

</html>

amend.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息修改</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">信息修改</h3>
            </div>
            <div class="panel-body">
                <!--  -->

                <form action="" method="POST" role="form">
                    <legend>信息修改</legend>

                    <div class="form-group">
                        <label for="">姓名</label>
                        <input type="text" class="form-control" placeholder="请输入姓名" id="name">
                    </div>
                    <div class="form-group">
                        <label for="">年龄</label>
                        <input type="text" class="form-control" placeholder="请输入年龄" id="age">
                    </div>
                    <div class="form-group">
                        <label for="">技能</label>
                        <textarea type="text" class="form-control" placeholder="请输入技能" id="edu"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">头像</label>
                        <input type="text" class="form-control" placeholder="请输入头像地址" id="img">
                    </div>


                    <button type="submit" class="btn btn-primary btn-block" onclick="btnAmend()">提交</button>
                </form>


            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        // URLSearchParams可以获取当前url中的search值,通过get方法
        var params = new URLSearchParams(window.location.search);
        var id = params.get('id');

        var nameTxt = document.querySelector('#name');
        console.log(imgTxt);
        var ageTxt = document.querySelector('#age');
        var eduTxt = document.querySelector('#edu');
        var imgTxt = document.querySelector('#img');
        axios.get('/api/v1/pets/' + id)
            .then(res => {
                nameTxt.value = res.data.info.name;
                ageTxt.value = res.data.info.age;
                eduTxt.value = res.data.info.edu;
                imgTxt.value = res.data.info.img;
            });

        function btnAmend() {

            // if (imgTxt && ageTxt && eduTxt & imgTxt) {
            axios.put('/api/v1/pets/' + id, {
                    name: nameTxt.value,
                    age: ageTxt.value,
                    edu: eduTxt.value,
                    img: imgTxt.value
                })
                .then(res => {
                    alert('修改成功');
                    window.location.href = "./index.html";
                });
            // }
        }
    </script>
</body>

</html>
咩有猫腻.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui增删改查
hmjcxy的博客
07-20 541
layui增删改查
Nodejs-增删改查-案列方法
qq_45802159的博客
01-03 295
const express = require('express'); const path = require('path') const fs = require('fs') const rout = express.Router(); const file_path = path.join(__dirname, '../data/student.json') // 查询学生列表 搜...
nodejs-web demo（增删改查）
04-25
nodejs 开发一个小demo，用于初学者学习，内含登录以及增删改查功能。
node.js与mongo交互的简单demo(增删改查)
我要出家当道士
12-28 338
node.js与mongo交互的简单demo(增删改查)
nodejs的增删改查调用demo
u014194297的博客
05-18 345
查了很多资料都是直接使用curd的方法，都没有oop的使用方法，自己写一个 先上数据库操作类：dboperator.js 'use strict' //引入mysql模块 var mysql = require('mysql'); // function DB() { var DB =function() { if (this instanceof DB) { this.connect(); } else { throw { error_msg: 'Pl
nodejs不连接mysql的crud_nodejs连接mongodb数据库实现增删改查
weixin_36169520的博客
01-25 90
准备1.通过npm命令安装mongodbCRUD操作在此之前应对MongoDB数据库有所了解，知道它的一些增删查改命令。1.增加var MongoClient = require("mongodb").MongoClient;var DB_URL = "mongodb://localhost:27017/chm";function insertData(db){var devices = db.c...
node.js无数据库，使用express+json形式实现增删改查
weixin_52031970的博客
09-09 1381
借鉴了下面这篇文章，写了自己的express增删改查 https://segmentfault.com/a/1190000018087665 想使用nodejs（express）搭建一个完整的前后端，完成数据的增删改查，又不想使用数据库，那使用json文件吧。 以下node.js使用了淘宝镜像 1、先全局安装express cnpm i express -g 2、安装express的脚手架工具express-generator cnpm i -g express-generator 3.
NodeJs-Demo:这是NodeJS项目，数据库MySQL
05-25
在Node.js项目中，常常通过第三方库如`mysql2`或`sequelize`来与MySQL进行交互，实现数据的增删改查操作。 **NodeJs-Demo项目** "NodeJs-Demo"是一个示例项目，展示了如何在Node.js环境中使用JavaScript进行后端...
mongodb_demo:使用nodejs 利用mongoose操作、mongodb的范例，其中包括数据库的链接，以及简单的增删改查
05-07
使用nodejs 利用mongoose操作、mongodb的范例，其中包括数据库的链接，以及简单的增删改查 知识点介绍： schema 一种以文件形式存储的数据库模型骨架，无法直接通往数据库端，不具备数据库操作的能力，仅仅是数据库...
Nodejs + sequelize 实现增删改查操作
12-16
1. 下载资源库 npm install sequelize –save npm install mysql2 –save // npm install mysql 提示不完整 2. 创建数据库配置文件 db.js,配置数据库 var Sequelize = require('sequelize'); module.exports = new Sequelize('blog', 'root', '123456', { host: 'localhost', // 数据库地址 dialect: 'mysql', // 指定连接的数据库类型 operatorsAliases: fa
nodejs不连接mysql的crud_nodejs连接mongodb实现数据CRUD
weixin_39732316的博客
01-25 61
const mongoose = require('mongoose')const Schema = mongoose.Schema// 1. 连接数据库// 指定连接的数据库不需要存在，当你插入第一条数据之后就会自动被创建出来mongoose.connect('mongodb://localhost/test', {useMongoClient: true})// 2. 设计文档结构(表结构)/...
nodejs实战express笔记之增加编辑与删除功能
doujiao_pengpeng的博客
10-23 1333
思路：一个用户在线时，只允许他在自己发表的文章页进行编辑或删除，编辑时只能编辑文章内容，不能编辑文章标题1、在文章页面添加编辑和删除链接<span><a class="edit" href="/edit/<%= post.name %>/<%=post.time.day %>/<%= post.title %>">编辑</a></span> <span><a class="edit" href="/
node--更新数据库问题
weixin_30577801的博客
03-25 147
昨天测试blog的comment功能，在新增comment相关的代码之后，重启应用，出现Cannotcall method 'forEach'ofundefined 。反复核对代码，都没发现异常，最后将数据库文件删除之后，再重启数据库，一切正常。 原因：由于之前的数据库存储的文件中，每篇文章没有comment属性 转载于:https://www.cnblogs.com/sylarmeng/...
NodeJs的小Demo
人生不设限前进向梦想
06-01 2160
一、Node.Js是运行在服务端的JavaScript。 二、创建一个Demo Node.js的组成部分 1、引入required模块：我们可以使用require指令来载入NOde.js模块。 2、创建服务器：服务器可以监听客户端的请求。 3、接受请求与响应请求：服务器很容易创建，客户端可以使用浏览器或终端发送HTTP请求，服务器接收请求后返回响应数据。 1）在server....
nodejs之MySQL插入数据
weixin_43755916的博客
09-06 9416
const mysql=require(‘mysql’); //创建链接池 var pool=mysql.createPool({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’, //使用的数据库 connectionLimit:20 //设置连接池的数量 }); //插入数据 pool...
nodejs+ajax+mysql +html实现数据传输
前端开发-陈善强
11-16 2819
打开俩个服务器:apache和nodejs 1、在apache服务器中运行html，html代码如下： 图上是打开nodejs服务器后，连接数据库，执行数据查询，在apache服务器打开网页数据请求成功后，显示效果 <!DOCTYPEhtml> <htmllang="en"> <head> <meta charset="UTF-8"...
Node js web开发简单demo学习笔记
u012178428的博客
02-03 3688
基于node js的基本的数据库增删改查简单例子实现
Mac本Nodejs数据库增删改查
最新发布
05-19
在 Mac 上进行 Node.js 数据库增删改查操作，需要先安装数据库以及相关的 Node.js 模块。以下是一个简单的示例，使用 MySQL 数据库和 Sequelize ORM 模块。 1. 安装 MySQL 数据库和 Sequelize ORM 模块 可以使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值