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”,"*"); // 允许所有请求方式访问

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...