ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

MongDB&&Ajax

2021-01-28 19:58:46  阅读:223  来源: 互联网

标签:function MongDB express xhr Ajax && mongoose var response


MongDB

快速开发互联网Web项目
先进行环境变量配置
net start mongodb //启动系统的服务
mongod //启动服务器

命令

在这里插入图片描述

show databases 或 show dbs          //展示所有数据库
db                            //表示自己所在的库
use    +    库名称                  //使用哪个库
show    collections              //显示数据库中所有的集合

crud

db.集合.insert(文档)
db.集合.find(),可以传一个对象,比如{_id:01} 返回的是数组
db.集合.findOne() 返回的是对象
在这里插入图片描述

update

默认会用新对象替换旧对象
在这里插入图片描述

db.stus.update({age:11},{$set:{address:“海边”}}); //增加一个新的属性
如果属性相同会对属性修改
在这里插入图片描述
消除address属性
在这里插入图片描述
update默认改第一个,红线是筛选条件

db.stus.updateMany() 这个可以一次性改多个

db.stus.deleteOne({_id:"oneOnly"})

删除一个

db.stus.deleteMany({_id:"oneOnly"})

删除多个

db.集合.remove({},true) 可以一个也可以多个      //写true的话就只删除一个,不写默认删多个

显示集合 show collections
删除集合 db.stus.drop()
删除所在的库 db.dropDatabase()
在这里插入图片描述

db.stus.update(
    {name:"arrays"},
    {$push:
            {arr:"m" }
    }
    )

在这里插入图片描述
在这里插入图片描述
有元素为hero的就可以

$push:向数组中添加一个新的元素,可以重复,但

$addToset

不能重复,重复则添加失败,类似java中的set

db.stus.find({name:{$gt:500}})
寻找大于500的,如果gte则寻找大于等于500的
在这里插入图片描述

分页

db.stus.find().limit(数字)
db.stus.find().skip(10).limit(10)
skip跳过的行数,limit显示的行数
在这里插入图片描述
or表示或
在这里插入图片描述
逗号代表和
在这里插入图片描述

原有基础变动,可以填负数
在这里插入图片描述
1表示升序,-1降序

Mongoose

cnpm i mongoose --save
安装mongoose

var mongoose=require("mongoose");
mongoose.connect("mongodb://localhost/mytext",{useNewUrlParser: true});
mongoose.disconnect();  断开连接
mongoose.connection.once("open",function () {
     console.log("sucess");
});
mongoose.connection.once("close",function () {
   console.log("close");
});

两个监听函数,disconnect断开
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
collection的名字会变复数,stu变stus
在这里插入图片描述
在这里插入图片描述

findOne和find用法一样,不过返回不是数组是对象
doc是Model的实例
在这里插入图片描述
在这里插入图片描述

封装

var mongoose=require("mongoose");
mongoose.connect("mongodb://localhost/practise");
mongoose.connection.once("open",function () {
    console.log("sucess");
});
mongoose.connection.once("close",function () {
    console.log("close");
});
var mongoose = require("mongoose");
var schema = mongoose.Schema;
var stuSchema = new schema({
    name:String,
    age:Number,
    gender: {
        type:String,
        default:"female"
    }
});
var documentModel = mongoose.model("student",stuSchema);
model.exports=documentModel;
require("./connectionMongo");
var Student=require("./students");

Ajax

在这里插入图片描述
爬虫爬不到
客户端发送浏览器请求叫请求报文
请求方式,url,http协议版本
在这里插入图片描述
在这里插入图片描述

express框架

npm i express
1.const定义的变量不可以修改,而且必须初始化。
2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

var express = require("express");
var app=express();
app.get("/first",function (request,response) { 
    response.setHeader("Access-Control-Allow-Origin","*"); // 设置允许跨域
    response.send("hello");
});
app.listen(8000,function () {
        console.log("服务监听")
})

localhost:8000可以看到发送的信息
在这里插入图片描述

window.onload=function () {
    var bAjax = document.getElementById("b-ajax");
    var ajaxReturn = document.getElementById("return-Me");
    bAjax.onclick=function () {
           var xhr = new XMLHttpRequest();
           xhr.open("post","http://localhost:8000/first");
           xhr.send();
           xhr.onreadystatechange=function () {
                    if (xhr.readyState==4){
                        if (xhr.status>=200&&xhr.status<300){
                            ajaxReturn.innerHTML=xhr.response;
                        }
                    }
           }
    }
}

Post请求

var express = require("express");
var app=express();
app.post("/first",function (request,response) {
    response.setHeader("Access-Control-Allow-Origin","*"); // 设置允许跨域
    response.send("hello");
});
app.listen(8000,function () {
        console.log("服务监听")
})
window.onload=function () {
    var bAjax = document.getElementById("b-ajax");
    var ajaxReturn = document.getElementById("return-Me");
    bAjax.onclick=function () {
           var xhr = new XMLHttpRequest();
           xhr.open("post","http://localhost:8000/first");
           xhr.send();
           xhr.onreadystatechange=function () {
                    if (xhr.readyState==4){
                        if (xhr.status>=200&&xhr.status<300){
                            ajaxReturn.innerHTML=xhr.response;
                        }
                    }
           }
    }
}

post和get区别

get 在url后用?string&拼接的方式传,post在send()中传
设置头信息
在这里插入图片描述
自定义请求头要加
express中
在这里插入图片描述
将post改为all

服务端响应JSON数据

在这里插入图片描述
var jObj = JSON.stringify(obj);
response.send(jObj);
可以传Json数据
在这里插入图片描述

服务器自动更新

cnpm install -g nodemon
cls清屏

terminal控制台`   nodemon express.js
Ie浏览器对ajax会有缓存

在这里插入图片描述
express 延时响应
在这里插入图片描述
请求超时的操作
在这里插入图片描述

xhr.οnerrοr=function(){
alert(“断网了”)
}
上面是自动取消

xhr的abort可以取消请求,一般写在事件的回调函数中
为了防止多次相同的请求

var express = require("express");
var app=express();
app.post("/first",function (request,response) {
    response.setHeader("Access-Control-Allow-Origin","*"); // 设置允许跨域
    var obj={name:"你好ma ",age:11};
    var jObj = JSON.stringify(obj);
    setTimeout(function () {
        response.send(jObj);
    },1000)

});
app.listen(8000,function () {
        console.log("服务监听")
})
window.onload=function () {
    var bAjax = document.getElementById("b-ajax");
    var ajaxReturn = document.getElementById("return-Me");
    var xhr;var isSend=false;
    bAjax.onclick=function () {
        if (isSend){
            xhr.abort();
        }
          xhr = new XMLHttpRequest();
        isSend=true;
           xhr.open("post","http://localhost:8000/first?t="+Date.now());
           xhr.send();
           xhr.onreadystatechange=function () {
                    if (xhr.readyState==4){
                        isSend=false;
                        if (xhr.status>=200&&xhr.status<300){
                           var jObj=xhr.response;
                       var obj=JSON.parse(jObj);
                       ajaxReturn.innerHTML=obj.name;
                        }
                    }
           }
    }
}

jQuery发送ajax

在这里插入图片描述
将data当作“”json”解析

$(function () {
        $("#b-ajax").click(function () {
            $.get("http://localhost:8000/first",{name:"你好ma ",age:11},
            function (data) {         //data是响应体
                var obj = JSON.parse(data);
                $("#return-Me").html(obj.name);
            })
        });

})

在这里插入图片描述

axios发送ajax

get方式

  axios.get("http://localhost:8000",{
              params:{                         //请求参数
                  username:"123",
                  password:456
              },
              header:{
                  head:"请求头信息"
              }

post

 bAjax.onclick=function () {
        axios({
           url:"http://localhost:8000/first",
           method:"Get",
           params:{id:10},
           headers:{head:"头信息"},
            data:{username:"123",password:456}

        }).then(function (response) {
            response.status;
            response.statusText;
            response.headers;
            response.data;
        });
    }

fetch

     fetch("http://localhost:8000/first",{
            method:"post",
            headers:{"Access-Control-Allow-Origin":"*"},
            body:{username:"123",password:456},  //请求体
        }).then(function (response) {
                  
        })

同源策略:来源有相同的域名端口号
跨域解决方案:JSONP
只支持get请求,利用script标签实现跨域
express:
在这里插入图片描述
html:
在这里插入图片描述

在这里插入图片描述
jQuery发送jsonp

bAjax.onclick=function () {
          $.getJSON("http://127.0.0.1:8000/first?callback=?",function (data) {
           
          });
    }

express

const express = require("express");
const app=express();
app.all("/first",function (request,response) {   //创建路由规则
    // response.setHeader("Access-Control-Allow-Origin","*"); // 设置允许跨域
    var obj={name:"zhangsan"};
    var jo = JSON.stringify(obj);
    var back = request.query.callback;
    response.end("${back}(${obj})");
});
app.listen(8000,function () {
    console.log("服务监听")
})

cors:
跨域资源共享
response.setHeader(“Access-Control-Allow-Origin”,""); // 设置允许跨域
response.setHeader(“Access-Control-Allow-Headers”,"
"); // 允许用户自己设置请求头信息
response.setHeader(“Access-Control-Allow-Method”,"*"); // 允许所有请求方式访问

标签:function,MongDB,express,xhr,Ajax,&&,mongoose,var,response
来源: https://blog.csdn.net/fpxrng/article/details/111868319

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有