前端路线--Nodejs（day04）

已于 2022-04-25 10:53:26 修改
阅读量867 收藏
点赞数
分类专栏： 前端 文章标签： 前端
于 2022-04-23 19:05:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/124368439
版权

day04-01连接数据库

//1.引入模块
let mongoose=require('mongoose');

//2.连接数据库
mongoose.connect('mongodb://127.0.0.1:27017/FirstGroup').then(()=>{
	console.log('数据库连接成功');
}).catch(()=>{
	console.log(err)
});

day04-02-第一种插入数据形式

// cmd下载使用mongoose模块   cnpm install mongoose --save

// 1、引入模块
let mongoose = require("mongoose");

// 2、连接数据库
// mongoose.connect("数据库路径")  返回:promise对象
mongoose.connect("mongodb://127.0.0.1:27017/student").then(() => {
    console.log("数据库连接成功");
}).catch(err => {
    console.log(err);
})

// 3、创建一个集合规则
let userSchema = new mongoose.Schema({
    username: String,  //用户名
    age: Number,  //年龄
    sex: String   //性别
})

// 4、利用集合规则创建集合
let Users = mongoose.model("Users", userSchema)

// 5、向集合中添加数据
// 第一种插入数据形式
let users = new Users({
    username: "二哥哥",
    age: 28,
    sex: "男"
})
users.save()  //将集合文档插入到数据库中

day04-03-第二种插入数据形式

// 使用mongoose模块   cnpm install mongoose --save

// 1、引入模块
let mongoose = require("mongoose");
// mongoose.connect("数据库路径")  //连接mongodb数据库

// 2、连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(() => {
    console.log("数据库连接成功");
}).catch(err => {
    console.log(err);
})

// 3、创建一个集合规则
let userSchema = new mongoose.Schema({
    username: String,  //用户名
    age: Number,  //年龄
    sex: String   //性别
})

// 4、利用集合规则创建集合
let Users = mongoose.model("Users", userSchema)

// 5、向集合中添加数据

// 第二种插入数据形式
Users.create({
    username: "好谷",
    age: 8,
    sex: "未知"
}).then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
})

day04-04-查询数据

// 使用mongoose模块   cnpm install mongoose --save

// 1、引入模块
let mongoose = require("mongoose");
// mongoose.connect("数据库路径")  //连接mongodb数据库

// 2、连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(() => {
    console.log("数据库连接成功");
}).catch(err => {
    console.log(err);
})

// 3、创建一个集合规则
let userSchema = new mongoose.Schema({
    username: String,  //用户名
    age: Number,  //年龄
    sex: String   //性别
})

// 4、利用集合规则创建集合
let Users = mongoose.model("Users", userSchema)

// 5、查询数据

// 查询Users集合中的所有数据
// Users.find().then(result => {
//     console.log(result);
// })

// 查询age等于28 的数据
// Users.find({ age: 28 }).then(result => {
//     console.log(result);
// })

// 查询age大于10 的数据
// Users.find({ age: { $gt: 10 } }).then(result => {
//     console.log(result);
// })

// 查询数据按照age从小到大排序
// Users.find().sort({ age: 1 }).then(result => {
//     console.log(result);
// })

Users.find().sort({ age: 1 }).skip(1).limit(1).then(result => {
    console.log(result);
})

day04-05-更新数据

// 使用mongoose模块   cnpm install mongoose --save

// 1、引入模块
let mongoose = require("mongoose");
// mongoose.connect("数据库路径")  //连接mongodb数据库

// 2、连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(() => {
    console.log("数据库连接成功");
}).catch(err => {
    console.log(err);
})

// 3、创建一个集合规则
let userSchema = new mongoose.Schema({
    username: String,  //用户名
    age: Number,  //年龄
    sex: String   //性别
})

// 4、利用集合规则创建集合
let Users = mongoose.model("Users", userSchema)

// 5、更新数据
// Users.updateOne({ username: "二哥哥" }, { age: 38 }).then(result => {
//     console.log(result);
// })

// updateMany(条件,更新的数据) 更新多条数据
Users.updateMany({}, { age: 99 }).then(result => {
    console.log(result);
})

day04-06-删除数据

// 使用mongoose模块   cnpm install mongoose --save

// 1、引入模块
let mongoose = require("mongoose");
// mongoose.connect("数据库路径")  //连接mongodb数据库

// 2、连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(() => {
    console.log("数据库连接成功");
}).catch(err => {
    console.log(err);
})

// 3、创建一个集合规则
let userSchema = new mongoose.Schema({
    username: String,  //用户名
    age: Number,  //年龄
    sex: String   //性别
})

// 4、利用集合规则创建集合
let Users = mongoose.model("Users", userSchema)

// 5、删除数据

// 删除一条数据
// Users.findOneAndDelete({ username: "二哥哥" }).then(result => {
//     console.log(result);
// })

Users.deleteMany({}).then(result => {
    console.log(result);
})

day04-07-定义规则

let mongoose = require("mongoose"); //cnpm install mongoose --save

// 连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(result => {
    console.log("成功");
}).catch(err => {
    console.log(err);
})

// 创建集合规则
let newsSchema = new mongoose.Schema({
    title: {
        type: String, //标题的类型
        required: true, //必填项
        minlength: 2, //最小长度
        maxlength: 10, //最大长度
        trim: true //去除首尾的空格
    },
    age: {
        type: Number,
        min: 18, //最小年龄
        max: 100 //最大年龄
    },
    sex: {
        type: String,
        // 枚举 ["男","女","保密"]
        enum: { //只能选数组中的数据
            values: ["男", "女", "保密"],
            message: "性别要合法哦"
        }
    }
})

// 根据集合规则创建集合
let News = mongoose.model("News", newsSchema)
News.create({
    title: "河南新冠清零",
    age: 66,
    sex: "男"
}).then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
})

day04-08-案例–从页面申请数据库响应

const http = require("http");
const {News} = require("./module/News.js")
const app = http.createServer((req, res) => {
    // http://localhost:3000/add
    // http://localhost:3000/list
    // console.log(req.url); // /add
    if (req.url == "/list") {
        News.find().then(result => {
            // console.log(result)  result是一个数组,里面是对象
            // console.log(Array.isArray(result))
			
			//遍历该数组将里面的内容给str
            let str = ""
            result.forEach(item => {
                str += `<li>${item.title}---${item.age}---${item.sex}</li>`
            })
            let oHtml = `<!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>
            </head>
            
            <body>
                <ul>
                    ${str}
                </ul>
            </body>
            
            </html>`
			
			//将oHtml渲染在页面
            res.write(oHtml)
            res.end()
        })
    }
})

app.listen(3000, () => {
    console.log("3000running");
})

模块里的News

let mongoose = require("mongoose"); //cnpm install mongoose --save

// 连接数据库
mongoose.connect("mongodb://127.0.0.1:27017/student").then(result => {
    console.log("成功");
}).catch(err => {
    console.log(err);
})

// 创建集合规则
let newsSchema = new mongoose.Schema({
    title: {
        type: String, //标题的类型
        required: true, //必填项
        minlength: 2, //最小长度
        maxlength: 10, //最大长度
        trim: true //去除首尾的空格
    },
    age: {
        type: Number,
        min: 18, //最小年龄
        max: 100 //最大年龄
    },
    sex: {
        type: String,
        // 枚举 ["男","女","保密"]
        enum: { //只能选数组中的数据
            values: ["男", "女", "保密"],
            message: "性别要合法哦"
        }
    }
})

// 根据集合规则创建集合
let News = mongoose.model("News", newsSchema)

// 暴露News
module.exports = {
    News
}

day04-09-拖拽

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
            cursor: pointer;
        }

        .container {
            width: 500px;
            height: 500px;
            border: 2px solid #ccc;
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>
    <!--  给一个元素添加一个draggable="true"那么这个元素就变成了可拖拽的元素 -->
    <div class="box" draggable="true"></div>
    <div class="container"></div>
    <script>
        let oBox = document.querySelector(".box");
        let oContainer = document.querySelector(".container")
        oBox.ondragstart = function () {
            // console.log("ondragstart开始");
        }
        oBox.ondrag = function () {
            // console.log("ondrag拖拽的过程");
        }
        oBox.ondragend = function () {
            // console.log("ondragend拖拽结束");
        }
        // 拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了
        // drag 拖拽
        // drop 释放

        // 拖拽的源对象上事件
        // ondragstart  开始
        // ondrag       拖拽的过程
        // ondragend    拖拽结束

        // 拖拽到目标上方的事件
        // ondragenter  进入目标的事件
        // ondragover   在目标上方悬停
        // ondragleave  离开目标
        // ondrop       释放
        oContainer.ondragenter = function () {
            // console.log("ondragenter 进入目标的事件");

        }

        oContainer.ondragover = function (e) {
            // console.log("ondragover 在目标上方悬停");
            e.preventDefault()  //阻止默认行为
        }

        oContainer.ondragleave = function () {
            console.log("ondragleave 离开目标");
        }
        oContainer.ondrop = function () {
            console.log("ondrop 释放");
            oContainer.appendChild(oBox)
        }

    </script>
</body>

</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 1px dashed #ccc;
            margin: 50px auto;
            border-radius: 10px;
            position: relative;
        }

        .box:hover {
            border-color: blue;
        }



        .box span {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            color: #999;
        }

        .box:hover span {
            color: #666;
        }

        #list li {
            width: 200px;
            height: 200px;
            border: 1px dashed #ccc;
            margin: 50px auto;
            border-radius: 10px;
            float: left;
            overflow: hidden;
        }

        #list li img {
            width: 200px;
            height: 200px;

        }
    </style>
</head>

<body>
    <div class="box">
        <span>+</span>
    </div>
    <ul id="list"></ul>
    <script>
        // 获取box
        var oBox = document.querySelector(".box");
        var oList = document.getElementById("list")

        oBox.ondragenter = function () {
            this.innerHTML = "进入目标了"
        }
        oBox.ondragover = function (e) {
            e.preventDefault()
        }
        oBox.ondrop = function (e) {

            e.preventDefault()
            console.log(e.dataTransfer.files);
            let fileList = e.dataTransfer.files
            for (var i = 0; i < fileList.length; i++) {
                uploadFn(fileList[i])
            }
        }



        // 上传文件的函数
        function uploadFn(file) {
            console.log(file);
            // 创建一个读取文件的对象
            var reader = new FileReader()
            // DataURL形式读取文件
            reader.readAsDataURL(file)
            reader.onload = function () {
                var li = document.createElement("li")
                var img = new Image()  //<img>
                console.log(img);
                img.src = reader.result
                li.appendChild(img) //将图片插入li中

                oList.appendChild(li) //将li插入ul中
            }
        }
    </script>
</body>

</html>

案例–拖拽小盒子2

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
            cursor: pointer;
        }

        .container1 {
            width: 500px;
            height: 500px;
            border: 2px solid #ccc;
            position: absolute;
            left: 10px;
        }

        .container2 {
            width: 500px;
            height: 500px;
            border: 2px solid #ccc;
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>
    <!--  给一个元素添加一个draggable="true"那么这个元素就变成了可拖拽的元素 -->
    <div class="container1">
        <div class="box" draggable="true" id="box"></div>
    </div>
    <div class="container2"></div>
    <script>
        var oContainer1 = document.querySelector(".container1")
        var oContainer2 = document.querySelector(".container2")
        document.ondragstart = function (e) {
            console.log(e.target); //拖动的那个元素  <div class="box" draggable="true" id="box"></div>
            console.log(e.dataTransfer);
            console.log("开始");
			//获得拖动元素的信息并存储在aa
			//e.dataTransfer.setData(数据名,数据)	相当于node中的Bus Emmiter
            e.dataTransfer.setData("aa", e.target.id)
        }

        document.ondragenter = function () {
            console.log("进入目标了");

        }
        document.ondragover = function (e) {
            e.preventDefault()
        }

        document.ondrop = function (e) {
            console.log(e.dataTransfer.getData("aa"));
            var aa = e.dataTransfer.getData("aa")  //"box"
            var oBox = document.getElementById(aa)
            console.log(e.target);
            console.log(oBox);
            e.target.appendChild(oBox)
        }

    </script>
</body>

</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js 微信小程序 部署服务器_微信小程序开发入门（一），Nodejs搭建本地服务器...
weixin_39603469的博客
12-19 1378
1. 如何模拟真实环境中，读取服务端数据，首先需要使用Nodejs搭建一个本地服务器的环境。在搭建web服务器之前，需要先安装node.js(安装版本最好为6.9.x)安装后node.js，接下来就需要安装http的镜像文件npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)接下来在桌面创建...
huaweicloud-sdk-nodejs-obs
04-29
支持初始化ObsClient时指定user_agent参数；所有接口支持返回OBS服务内部错误码Indicator；日志新增socket连接建立耗时打印；新增ObsClient.setObjectMetadata接口，用于修改对象元数据；ObsClient.putObject/...
微信小程序开发教程：用nodejs从mysql获取一组数据，全部展现到微信小程序。数据交互保姆级教程
qq_25501981的博客
12-03 2394
目前这些就是基本的从mysql数据库中获取数据后，展示到微信小程序前端的方法，至于我后面写的 wx:for="{{ imgPaths[index] }}" 和 wx:for="{{ commentListzy[item.iddt] }}" ，我下次教大家。
小程序中this.setData是什么啊
weixin_35749796的博客
12-21 2088
在小程序中，this.setData 是一个用于修改页面数据的函数。它的作用是将传入的对象的属性和值应用到小程序页面的数据对象上，并触发页面的重新渲染。 使用方法如下： this.setData({ key: value, key2: value2, ... }); 其中 key 和 value 为要修改的数据的键和值，可以同时修改多个数据。例如： this.setData({ ...
NodeJS基础配置修改
mnicsm的博客
04-11 733
1.修改镜像仓库源 npm config set registry https://registry.npm.taobao.org --将镜像仓库源修改成taobao的 npm config get registry --查看修改结果 2.修改nodejs默认下载路径、 npm config set prefix "D:\nodejs\node_global" npm co...
微信小程序：使用箭头函数的时this.setdata怎么破？
胡世林的博客
06-11 4366
在使用箭头函数的时候是很方便的，有时候我们也会遇到一些情况，比如下面随便搜到的一片博客当然，像这位兄弟说的直接使用es5的写法绝对是没问题的。先澄清一点，这个个人感觉应该不是腾讯的bug，而是你在函数中使用的时候，this，并没有this的定义，可能大家都以为只要有函数，就会有this存在，既然你想有个this，也许你可以考绿在全局中定义一个context，并在onload中赋值如：也许大家会有更...
前端路线--Nodejs（day09）
Yan9_9的博客
05-03 361
01-app路由没有模块化 //设置一个路由--不使用模块化 let express = require('express'); //开启一个服务器 let app = new express(); //不使用模块化设置路由接口 app.get('/home', (req, res) => { res.send('home页面'); }); //定义一个userlist路由,通过get形式提交表单数据。 //访问地址：http://localhost:3000/userlist //ur
前端路线--Nodejs（day07）
Yan9_9的博客
04-29 691
好谷大牛后台管理系统 文件目录 app.js文件 /* cnpm install express ejs body-parser md5 mongoose moment --save 1.搭建服务器 2.引入ejs模板 2.1配置模板类型 2.2配置模板路径 2.3配置静态资源目录 3.配置路由渲染ejs文件 3.1路由模块化--在项目目录day07中新建router文件夹 3.2在router文件夹中新建用户user_router.js文件,内部放置和用户相关的
前端路线--Nodejs（day01）
Yan9_9的博客
04-20 210
Node基础–环境搭建 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //Node的下载 // 去官网node.js，不同别的,一定要装C盘。 // JS和No
前端路线--Nodejs（day10）
Yan9_9的博客
05-05 526
01-session //session 存储在服务端 // 作用，可以验证用户登录状态，如果登录session存在，可以判断已经登录了，否则需要登录 // session的存在依赖于cookie // session也有有效期，主要是设置cookie的有效期 // session在nodejs中借助于第三方模块 express-session // cnpm install express-session --save // session的用法只要一直操作网站，session的时间要从新计算 //
aliyun-iot-demo-nodejs:Nodejs模拟硬件设备接入阿里云IoT物联网套件，基础版demo+高级版demo
05-18
思路：温湿度计通过MQTT协议连接到IoT套件，规则引擎针对数据上报Topic配置转发到函数计算(FunctionComputer)中编写好的函数pushData2DingTalk，函数Nodejs脚本处理数据，post到钉钉群机器人的Webhook，配置了温湿度...
前端开源库-microtime-nodejs
08-29
前端开源库-microtime-nodejsmicrotime nodejs，用于microtime（https://github.com/wadey/node-microtime）包的本机javascript填充程序
spm-agent-nodejs：NodeJS监视代理
02-04
spm-agent-nodejs 这是的代理。 收集以下信息并将其传输到SPM（云或本地版本）： 操作系统指标（CPU /内存） 进程记忆 EventLoop统计信息 垃圾收集器统计 Web服务器统计信息（请求，错误率，响应时间等）适用于...
node-modbus-tcp:NodeJS Modbus TCPIP
05-02
Modbus TCP / IP流 这是一个非常简单的模块，使用NodeJS Streams2读取Modbus TCP数据并将其转换为JSON，反之亦然。安装如果您只是开始或尝试使用该库，建议您尝试使用 。 它更完整（它支持所有标准功能代码），并且...
Node多版本管理器NVM安装使用
最新发布
GongWeiBuQi的博客
07-11 174
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 737
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 854
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1010
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
tencentcloud-sdk-nodejs-nlp怎么导入uniapp
05-18
要在uniapp中使用tencentcloud-sdk-nodejs-nlp，你可以尝试以下步骤： 1. 在你的uniapp项目中创建一个新的文件夹，例如“tencentcloud-sdk-nodejs-nlp”。 2. 在该文件夹下，创建一个新的js文件，例如“index.js”...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值