前端知识点小结--mongodb,保准看明白

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 前端知识点小结--mongodb,保准看明白

app.listen(‘8989’)

cmd运行js;

打开html页面:

读取静态资源–app.post()

JS代码:

const express=require(‘express’);
const app=express();
// post请求需要依赖专门的模块
// 第一步:npm install body-parser -S;
// 第二步:在页面中引入
// 第三步:在post请求的第二个参数加上刚刚解析body-parser得到的参数。
var bodyParser = require(‘body-parser’)
var urlencodedParser = bodyParser.urlencoded({ extended: false })
// 静态资源读取
// /默认 寻找的路径需要是index.html
app.use(‘/’,express.static(‘./www/form’));
// app.post()可以处理post请求
// post请求参数处理比较麻烦,需要依赖一个模块 body-parser
// 具体用法可以参照手册
// post请求的第二个参数需要通过解析body-parser模块得到
app.post(‘/submit’,urlencodedParser,(req,res)=>{
// 获取post请求的参数 req.body
res.send(req.body);
})
app.listen(‘8989’);
按步骤进行即可
两者整合:
const express=require(‘express’);
const app=express();
var bodyParser = require(‘body-parser’)
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(‘/’,express.static(‘./www/form’));
app.post(‘/submit’,urlencodedParser,(req,res)=>{
res.send(req.body);
})
app.get(‘/submit’,(req,res)=>{
console.log(req.query);
res.send(您输入的用户名是${req.query.user});
})
app.listen(‘8989’);
静态资源读取—ajax
先在目录下再创建一个public文件夹
public一般放置的是css 、js文件;
js代码:
const express=require(‘express’);
const app=express();
// 引入处理post参数的模块
var bodyParser = require(‘body-parser’)
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(‘/’,express.static(‘./www/form’));
//把静态资源呈递
app.use(‘/public’,express.static(‘./public’));
app.post(‘/submit’,urlencodedParser,(req,res)=>{
// 获取post请求的参数 req.body
res.send(req.body);
})
app.get(‘/submit’,(req,res)=>{
// get请求的参数在url内部 req.query获取get请求参数
console.log(req.query);
res.send(${req.query.user});
})
app.listen(‘8989’);
index.html:

这是登录页面



按钮

已有账号请注册

ajax:不需要跳转

打开其他页面:

提交get请求,跳转:

post请求:

3、Mongodb数据库

===============================================================================

自己写的相关介绍链接:https://blog.csdn.net/weixin_53037175/article/details/111829602

连接数据库,和后台联系起来:

const express=require(‘express’);
const app=express();
// 引入数据库
var MongoClient = require(‘mongodb’).MongoClient;
// 数据库地址
var url = “mongodb://localhost:27017”;
app.use(‘/zsh’,(req,res)=>{
// 插入数据库
// 连接数据库 把数据库和后台联系起来
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db(“student”);
dbo.collection(“stu1”). find({}).toArray(function(err, result) { // 返回集合中所有数据
if (err) throw err;
console.log(result);
db.close();
res.send(result);
});
});
})
app.use(‘/’,(req,res)=>{
MongoClient.connect(url, function(err,db) {
if (err) throw err;
// 选择数据库
var dbo = db.db(“student”);
var myobj = { name: “菜鸟教程”, url: “www.runoob” };
// 插入数据操作
dbo.collection(“stu1”).insertOne(myobj, function(err, res1) {
if (err) throw err;
db.close();
res.send(‘数据插入成功了’);
});
});
})
app.listen(‘8989’);

4、数据库增删改查操作

==============================================================================

首先是静态资源HTML

index.html

请注册

//addata,提交数据到指定的路径地址,这个根据js的要求修改
封装好的js文件,一般是放在自己创建文件夹里(比如model):
dao.js
//数据库操作
// 先下载好数据库包再引入,这个也可以在php中操作数据库
const MongoClient=require(‘mongodb’).MongoClient;
// 数据库地址,27017是默认是数据库端口号
const url=“mongodb://localhost:27017”;
// 把数据库连接的操作,封装起来。
function _connect(callback){
// 连接上数据库
//连接数据库是异步操作,不知道什么时候连接成功了。用到回调函数的概念
MongoClient.connect(url, function(err, db) {
// 连接数据库成功
if (err) throw err;
// 说明连接数据库成功了 db代表连接成功以后返回的数据
callback(db);
});
}
//插入数据操作:
// module.exports导出数据
module.exports insert=function(databse,type,myobj,callback){
_connect(function(db){
// db连接成功的数据
// db.db(‘操作的数据库’)
var db=db.db(database);
//判断myobj类型,转换为数组作为语句集合插入数据库
if(myobj instanceof Array){
myobj=myobj
}else{
myobj=[myobj]
}
// 一条数据是对象 insertOne 多条数据是数组 用insertmMany
db.collerction(type).insertMany(myobj,function(err,r){
if err throw err;
bd.close();
// r得到的是成功插入数据的信息
callback®;
})
})
}
//查看操作:
// 查询封装的时候,考虑是否需要分页是否需要排序
// 需要书写函数参数的默认值,因为用户有可能不会书写
module.exports.find=function(databse,type,callback,myobj={},mysort={},myskip=0,mylimit=0){
_connect(function(db){
// 查询数据
var dbo = db.db(database);
// sort排序
// skip跳过多少条数据
// limit()限制取数据的数量
dbo.collection(type).find(myobj).sort(mysort).skip(myskip).limit(mylimit).toArray(function(err, result) { // 返回集合中所有数据
if (err) throw err;
console.log(result);
db.close();
callback(result);
})
})
}
//更新操作:
module.exports.update=function(databse,type,myobj,updateObj,callback){
_connect(function(db){
var dbo = db.db(dbname);
var updateStr = {$set: {updateObj}};
// updateOne(查询条件(可以是id也可以是语句),更改后数据)
dbo.collection(col).updateOne(myobj, updateStr, function(err, res) {
if (err) throw err;
console.log(“文档更新成功”);
db.close();
callback(res)
});
})
}
//删除操作:
module.exports.delete=function(database,type,myobj,callback){
_connect(function(db){
var dbo = db.db(dbname);
// updateOne(查询条件,更改的数据)
dbo.collection(col).deleteOne(myobj, function(err,obj) {
if (err) throw err;
db.close();
callback(obj);
});
})
}
编写好封装的js包文件后,写对应的js文件
01.js
const express=require(‘express’);
const app=express();
// md5加密 一般进行多层加密 一般是2-3层
const md5=require(‘md5’);
//引用写好的封装文件,./–表示同级目录
const dao=require(‘./model/dao.js’);
app.use(‘/’,express.static(‘./www/’));
//引用静态资源文件如js,css
app.use(‘/public’,express.static(‘./public/’));
//对应的插入数据代码
app.get(‘/addata’,(req,res)=>{
//前台html发送过来的数据–input的user以及pass
var obj={
proname:req.query.user,
propass:req.query.pass
}
dao.insert(‘product’,‘phone’,obj,function®{
res.send®;
})
})
//删除
app.get(‘/del’,(req,res)=>{
var obj={
proname:req.query.user
}
dao.delete(‘product’,‘phone’,obj,®=>{
res.send®;
})
})
//查看
app.get(‘/find’,(req,res)=>{
dao.find(‘product’,‘phone’,®=>{
res.send®
},{},{},0,10)
})
//更新
app.get(‘/updata’,(req,res)=>{
var myobj=“name”:“zs”;
var updateStr = “name”:“ls”
dao.updata(‘product’,‘phone’,myobj, updateStr,®=>{
res.send®
})
})
app.listen(‘8989’);

上面是get请求的,post请求:

先修改html代码:

01.js文件中:


相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
7月前
|
前端开发 网络协议 JavaScript
|
7月前
|
JSON 前端开发 网络协议
前端知识点-----跨域
前端知识点-----跨域
74 0
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
存储 NoSQL 前端开发
前端轻量级数据库mongodb
【10月更文挑战第2天】MongoDB 是一个基于分布式文件存储的开源数据库系统,不属于前端轻量级数据库,而是后端数据库。它使用 BSON 格式存储数据,支持复杂的数据结构,适用于内容管理系统、物联网等领域。MongoDB 通过动态模式和面向对象的数据存储方式,提供了灵活的数据模型。在 Web 应用中,它通常作为后端存储,通过 API 与前端交互,实现高效的数据管理和实时更新。
|
4月前
|
缓存 运维 前端开发
前端必备的运维知识点
【8月更文挑战第25天】前端必备的运维知识点
98 1
|
4月前
|
缓存 负载均衡 前端开发
前端必会的nginx知识点
【8月更文挑战第22天】前端必会的nginx知识点
86 0
|
7月前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
53 1
|
7月前
|
缓存 JavaScript 前端开发
【前端】Vue2知识点大全!
【前端】Vue2知识点大全!
246 1
【前端】Vue2知识点大全!
|
7月前
|
前端开发 JavaScript API
【前端】Vue3知识点合集
【前端】Vue3知识点合集
114 0
【前端】Vue3知识点合集
|
7月前
|
安全 前端开发 JavaScript
【利用AI让知识体系化】前端安全攻防知识点(二)
【利用AI让知识体系化】前端安全攻防知识点