第六周笔记

1、mongoDB基础：以json为主格式，自由MySQL的SQL的语句是关系型数据库通用的，mongod是非关系型

1、安装与启动Mongo

1、解压mongoddb-win32-86_64-2008plus-ssl-3.6.11.zip文件夹

2、解压好进入到bin文件夹：Mongo.exe(客服端)和mongo.exe（服务器）

3、如何启动

        在当前bin文件夹进入到（终端 (/cmd/powershell命令行）输入 .\mongod.exe --dbpath = 文件夹路径  、 服务器启动成功、服务器开启了，不要关闭

在打开一个命令行，输入.\mongo.exe-在打开一个服务器用命令行查看是否连接成功

2、mongo语法：（都是在客户端使用的命令行）

1、数据库操作

         1、查询数据库:show dbs

          2、创建、切换数据库:use 数据库名称；如果是一个空的数据库，shou  dbs是查不到的，至少要创建一个标才能看到

          3、查看当前选中的数据库：db

           4、创建数据表：db.createCollection("输入创建表的名字”)

            5、删除数据库：db.dropDatabase() -不建议使用

2、数据表操作：

                 1、创建数据表：dbcreateCollection("表名"，){size:5242880,capped:true,max:5000}); - 第二个参数限制操作，最大存储空间为5M，最多为5000条数据 - 个人不推荐做限制

                 2、查看目前所有的数据表：db:getcollectiionNames();

                 3、删除数据表：db.表名.drop();

3、数据操作

       1、增加：db.(表名).sace({属性名：属性值。。})一次只能插入一条数据

        举例如下：

        db.users.save({name:"hjf",age:18,pwd:"123123",email:"hjf@qq.com",vip:"0"})
        db.表名.save([{},{},{},...]) - 一次只能插入一条数据
        个人建议：键名要统一
   

        2、删除：db.表名.remove({键值对})        

        举例： db.表名.remove({username:"lr"})

        3、改：db.表名.uodate({条件}，{写入需要改的新内容})；

        举例：

         举例：db.表名.update({name:"paoge",pwd:"666666"},{age:17}) - 这句话会把名字为paoge             和密码为666666的替换为只剩age为17
         db.表名.update({name:"paoge",pwd:"666666"},{$set:{age:17}}) - 仅仅只修改了age

           4、查：

            db.表名.find({})-查找所有的

           db.表名.find({age:18}) - 找到所有年龄为18的数据
           db.表名.find({age:{$gte:18}}) - 找到所有年龄大于等于18的数据
           db.表名.find({name:/输入正则表达式/}) - 甚至可以写入正则来进行模糊查询
           db.表名.find({},{name:1,age:1}) - 只需要name和age，其他的不要，1和0相当于是开关 - 我们登陆时只需要判断用户名和密码是否正确
            db.表名.find().sort({age:1}) - 按照age升序排列，降序的话换为-1
            db.表名.find().skip(0).limit(2) - 跳过前0条，再拿2条，可以理解为前两条；
            db.表名.find().count() - 获取此表有多少条数据

2、安装一个MongoDB图形化界面：更美观，更方便-主要用于看

       安装mongodb-compass-1.33.1-win32-x64.exe

----------------------------------------------------------------------------------------------------------------------------

Nodejs如何与mongodDB关联？

       1、安装Mongoose第三方模块

       2、使用步骤

                 1、引入：conts 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);//错误提示对象，

                                  null说明没有错误 //插入完毕后要干什么在这里写代码

                                   })

                        

                                   删：
                                  模型名.deleteOne/deleteMany({条件},(err)=>{
                                  //删除完毕后要干什么在这里写代码
                                 })

                                  改：
                                  模型名.updateOne/updateMany({条件},{新内容},(err)=>{
                                 //修改完毕后要干什么在这里写代码
                                  })

                                 查：- 重点
                                 模型名.find({条件},(err,result)=>{
                                 result;//查询到数据库中的东西
                                 })
 

      ---------------------------------------------------------------------------------------------------------------------------

Ajax基础：

              1、概念： 同步交互：用户向服务器端发起请求的时候，直到服务器进行响应的全过程，用户是不可以做其他事情的（等） 典型：网址请求、表单请求 - 目前我们一直都在使用同步交互                   

                异步交互：用户向服务器端发起请求的时候，直到服务器进行响应的全过程，用户是可以做其他事情的（不等）
                 典型：ajax请求

                ajax：asynchronous JavaScript and XML; 直译：异步的js和xml - 前端技术
                不严格的定义：页面不会完整的刷新，只会导致局部页面发生变化
                我们早就见过异步技术/代码了：
                  1、定时器：定时器里面的内容再耗时也不会卡住后续代码 - 做特效
                  2、ajax：目的：再不刷新页面的情况下就和服务器端进行交互/沟通 -

                  我们哪怕不用表单提交也能和服务器端对话了，可以将服务器端的数据放到前端

              2、如何使用Ajax：固定4步骤

                1、创建Ajax的核心对象XMLhttpRequest;

                       var xhr = new XMLhttpRequest;

                2、建立和服务器端的连接

                        xhr.open("GET","路由");

                3、向服务器发送请求

                        xhr.send(null);

                 
                特殊：GET请求：xhr.send()会失效，但是还不能省略，必须写为xhr.send(null);

                请求消息需要放到路由后面
                xhr.open("GET","路由?key=value&key=value");    

                4、绑定状态监听事件

                   xhr.onreadystateChang=()=>{

                    if (xhr.readtstate==4&&xhr.state==200) {

                                xhr.responseText;

                                 得到服务器端响应的文本，难就难在你拿到你想要的东西要干嘛（数据渲染、判断...）

                        }        

                    }

---------------------------------------------------------------------------------------------------------------------------------

数据格式

        1、xml数据格式

               1、面试题：HTML\XHTML\DHTML\XML分别是什么？ HTML - 网页 XHTML - 更严格的网页 DHTML - 动态的网页：D：Dynamic - 不是新技术、新概念，只是现有技术整合的统称，让我们的网页在离线版依然具有动态特效 DHTML：HTML+CSS+JS(dom) XML - 配置文件|数据格式 其实保存数据有两种方式： 1、把数据放到数据库 2、把数据保存在一个文件之中.xml文件 - low
 

XML数据格式       

2、如何使用xml：
    1、创建xx.xml文件
    2、必须写上声明标签<?xml version="1.0" encoding="utf-8"?>
        version - 版本号：目前的版本只有1.0和1.1，但是1.1升级的并不理想，所以市场上还是主流使用1.0版本，学完过后以后也不需要在学了，因为他不会更新了，淘汰了
    3、必须写上【一个】根标签，而且只能写一个根标签（标签），没有任何的预定义标签，所有的标签都是自定义的，意味着你想写啥子标签随便你
    4、里面随你，想放啥子就放啥子
    5、恭喜你学完了

    需要使用node.js去读取你存储好的xml文件，响应给前端，
    前端依然使用ajax去访问node.js，接住响应的数据必须写为xhr.responseXML - 得到的就是一个dom对象，可以使用核心DOM来进行解析
    缺点：核心DOM语法解析XML非常繁琐

  ------------------------------------------------------------------------------------------------------------------------------      JSON数据格式：JavaScript Object Notation：js对象表示法，本身就是js的一部分 作用：数据格式 类似 XML 优点：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式/结构能极大的提升我们程序员的开发效率 属于【字符串】数据表示法

1、后端的操作：哪些数据JSON字符串：后端把数据库的数据取出来，整理为一个JSON字符串：
    1、先要认识哪些叫做JSON字符串：
        1、'[1,2,3,4,5]'
        2、'{"key":value}'
        3、'[{},{},{},{},{}]'
       

2、怎么才能变为JSON字符串：
        *JSON.stringify(x);

2、前端：依然使用ajax去获取数据，但是真正重要的是xhr.responseText;
    拿到JSON字符串并不方便我们获取数据，怎么脱衣服？
        1、eval("("+jsonTxt+")"); - 只要外层是{}，优先级就会出现问题，导致脱衣服报错
        2、*JSON.parse(jsonTxt);

3、h5十大新特性： 一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图 - 数据可视化，比如饼状图，柱状图，曲线图... 有现成的框架，echars.js三阶段就会学习

五、SVG绘图 - 画小图标 - 我们画的丑，但是网上一大堆

六、拖拉API

七、WebWorker

八、WebStorage：客户端存储技术/前端存储技术：
    1、其实有两种：
        1、把数据放在location的查询字符串里面
        2、cookie技术：几乎淘汰了，解析方式非常麻烦，能存储的大小2kb
        3、WebStorage：使用起来简单快速，解析方便，能存储4mb
            作用：1、能在客户端存储数据
                      2、跨页面也能使用
            分两大类：
                1、sessionStorage - 会话级，浏览器一旦关闭数据就会死亡了
                2、localStorage     -  本地级，永久存储此数据

            操作：xxxStorage是一个对象
                保存：xxxStorage.属性名=属性值;
                读取：xxxStorage.属性名
                删除：xxxStorage.removeItem("属性名");
                清空：xxxStorage.clear();

九、WebSocket

十、地理定位 - 百度/高德地图

1、为什么你们现在开发这么缓慢？ 1、不够熟悉 - 解决：多敲多练，猛肝自然强 2、我们目前学习的所有的东西都需要自己纯手敲，我们学的都是原生的东西 - 最值钱

2、我们需要有各种各样的框架，目的：来简化开发 主要是三阶段：vue.js+react.js（2个8周）+uniapp+小程序 底层就是原生JavaScript，一定进行了简化开发，比如：vue和react提供了虚拟DOM

当今社会最流行的3大框架：
    vue.js（国人自己开发，鱿鱼须开发的，借鉴了react和angular，三大框架中最简单，10家公司7家都要）
    react.js（如果你的原生JS学的越好，这个就越简单）
    angular.js（北上广深杭：10家公司没有一家，重庆：20家没有一家，国外很多）

jquery框架：3大框架出现之前，全球最流行的，只有一些老项目可能用到：淘宝

我们目前要学的：简单的插件库+express框架（node.js的框架）

2、layUI.js - 插件库：提供了HTML/CSS/JS，那我们只需要下载，梭代码
        组件：组成网页一部分的部件（比如：导航条...）
        插件：跟组件差不多，但是有js功能（比如：轮播、选项卡...）
        框架：包含各个方面

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

2、无敌的插件库：
    1、jQuery插件库 - 尽量使用简单易用的插件，方便以后修改 - 缺陷：一个账号一天只能下载两次
    2、jQuery之家 - 免费了