其他分享
首页 > 其他分享> > MongDB&&Ajax

MongDB&&Ajax

作者：互联网

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