JS第6周总结

Day1

一、MongoDB基础

以JSON为主格式 ​

1.mongo语法

1、数据库操作：
            1、查询数据库：show dbs
            2、创建/切换数据库：use 数据库名称;
            3、查看当前选中的数据库：db
            4、创建数据表：db.createCollection("表名");
            5、删除数据库：db.dropDatabase()
​
2、数据表操作：
            1、创建数据表：db.createCollection("表名",{size:5242880,capped:true,max:5000}); 
            2、查看目前所有的数据表：db.getCollectionNames();
            3、删除数据表：db.表名.drop();
​
3、数据操作：
            1、增：db.表名.save({属性名:属性值,....})
​
            2、删：db.表名.remove({键值对}) 
            3、改：db.表名.update({条件},{新内容}) 
            4、查：      db.表名.find({})
                         db.表名.find({age:{$gte:18}}) - 找到所有年龄大于等于18的数据
                         db.表名.find({name:/正则/}) - 甚至可以写入正则来进行模糊查询
                         db.表名.find({},{name:1,age:1}) 
                         db.表名.find().sort({age:1}) - 按照age升序排列，降序的话换为-1
                         db.表名.find().skip(0).limit(2) - 跳过前0条，再拿2条，可以理解为前两条；
                         db.表名.find().count() - 获取此表有多少条数据

二、Nodejs与MongoDB关联起来

1. 使用步骤：

   1、引入：const mongoose = require('mongoose');
   2、连接数据库：mongoose.connect('mongodb://127.0.0.1/数据库名称');
   3、//创建出一个新的数据表的同时，设置数据类型的控制，防止用户恶意输入
               var userSchema=mongoose.Schema({
                   name:String,
                   age:Number,
                   pwd:String,
                   email:String,
                   vip:String
               })
               var 模型名=mongoose.model("Users",userSchema,"users");
   4、SQL语句：
               增：
                       var user=new 模型名({
                           name:"dy1",
                           age:"abc",
                           pwd:"123123",
                           email:"dy1@qq.com",
                           vip:"0"
                       })
                       user.save((err)=>{
                           console.log(err);
                       })
   ​
               删：
                       模型名.deleteOne/deleteMany({条件},(err)=>{
                           
                       })
   ​
               改：
                       模型名.updateOne/updateMany({条件},{新内容},(err)=>{
                           
                       })
   ​
               查：- 重点
                       模型名.find({条件},(err,result)=>{
                          
                       })

Day2

一、ajax

ajax：asynchronous JavaScript and XML

二、如何使用

1、创建ajax的核心对象XMLHttpRequest;
        var xhr=new XMLHttpRequest();
​
2、建立和服务器端的连接
        xhr.open("GET","路由");
​
3、向服务器端发送请求
        xhr.send();
​
        特殊：GET请求：xhr.send()会失效，但是还不能省略，必须写为xhr.send(null); 请求消息需要放到路由后面
            xhr.open("GET","路由?key=value&key=value");
​
4、绑定状态监听事件
        xhr.onreadystatechange=()=>{
            if(xhr.readyState==4&&xhr.status==200){
                xhr.responseText; 
            }
        }

Day3

一、XML数据格式

HTML\XHTML\DHTML\XML分别是什么？

HTML - 网页

XHTML - 更严格的网页

DHTML - 动态的网页：D：Dynamic - 不是新技术、新概念，只是现有技术整合的统称，让我们的网页在离线版依然具有动态特效 DHTML：HTML+CSS+JS(dom)

XML - 配置文件|数据格式

1.1如何使用xml

1、创建xx.xml文件
2、必须写上声明标签<?xml version="1.0" encoding="utf-8"?>
3、必须写上一个根标签，而且只能写一个根标签（标签），没有任何的预定义标签，所有的标签都是自定义的

二、JSON数据格式

JavaScript Object Notation：js对象表示法

变为JSON字符串：
            *JSON.stringify(x);

前端使用ajax去获取数据

1、eval("("+jsonTxt+")");
2、*JSON.parse(jsonTxt);

三、h5十大新特性

1. 语义标签

2. 增强型表单

3. 视频和音频

4. Canvas绘图

5. SVG绘图 

6. 拖拉API

7. WebWorker

8. WebStorage：客户端存储技术/前端存储技术：

               1、把数据放在location的查询字符串里面
               2、cookie技术：几乎淘汰了，解析方式非常麻烦，能存储的大小2kb
               3、WebStorage：使用起来简单快速，解析方便，能存储4mb
                   作用：1、能在客户端存储数据
                             2、跨页面也能使用
                   分两大类：
                       1、sessionStorage - 会话级，浏览器一旦关闭数据就会死亡了
                       2、localStorage     -  本地级，永久存储此数据
               操作：xxxStorage是一个对象
                   保存：xxxStorage.属性名=属性值;
                   读取：xxxStorage.属性名
                   删除：xxxStorage.removeItem("属性名");
                   清空：xxxStorage.clear();

9. WebSocket

10. 地理定位 - 百度/高德地图

Day4

GET：显示在url地址上，安全性低，大小优先2kb 

POST：安全高，大小无限制 只要跟安全性相关的，都用post

Day5

3大框架：
    vue.js
    react.js
    angular.js

一、简单的插件库

1.1 日期插件

1. wdatepicker.js

1、下载引入：<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
2、书写js：
inp.οnfοcus=function(){
WdatePicker({
el:"inp",//el -> element 
});
}

1. layUI.js

   插件的固定使用步骤：
       1、引入该引入的
       2、选择你喜欢的梭到你的项目中
       3、根据设计图修改css
       4、ajax那数据进行渲染

1.2 无敌的插件库

1、jQuery插件库 
2、jQuery之家