JS·第六周

day1

一丶MongoDB基础

1.安装&启动mongo

解压mongodb-win32-x86_64-2008plus-ssl-3.6.11.zip文件

解压好了进入到bin文件夹：mongo.exe（客户端） 和 mongod.exe（服务器端）

在当前bin文件夹打开命令行cmd或powershell都可以，但是路径千万不能有中文，输入：.\mongod.exe --dbpath=你想要的绝对路径地址 - 服务器启动成功

再打开一个命令行，输入：.\mongo.exe - 再打开上一个服务器命令行看看是否连接成功 - 客户端开启成功

2.mongo语法：- 目前都是在客户端的命令行里面使用

（1）数据库操作

查询数据库：show dbs

创建/切换数据库：use 数据库名称; 
- 如果是一个空的数据库，show dbs是查看不到的，至少要创建一个表才能看到

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

创建数据表：db.createCollection("表名");

删除数据库：db.dropDatabase() 

（2）数据表操作

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

查看目前所有的数据表：db.getCollectionNames();

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

（3）数据操作

增 //注册

        db.表名.save({属性名:属性值,....}) - 一次只能插入一条数据

        举例：db.users.save({name:"hjf",age:18,pwd:"123123",email:"hjf@qq.com",vip:"0"})

       db.表名.save([{},{},{},...]) - 一次只能插入一条数据

删//修改密码

        db.表名.remove({键值对})

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

改//修改密码

        db.表名.update({条件},{要改的新内容})

        db.表名.update({name:"paoge",pwd:"666666"},{$set:{age:17}}) - 仅仅只修改了age

查

        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().skip(0).limit(2) - 跳过前0条，再拿2条，可以理解为前两条

3.安装一个mongoDB图形化界面：更美观，更方便 - 主要用于看

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

二丶Nodejs如何与MongoDB关联起来

1.安装mongoose第三方模块

cmd运行 npm i mongoose

2.使用步骤

引入：const mongoose = require('mongoose');

连接数据库：mongoose.connect('mongodb://127.0.0.1/数据库名称');

创建出一个新的数据表的同时，设置数据类型的控制，防止用户恶意输入

        var userSchema=mongoose.Schema({
                name:String,
                age:Number,
                pwd:String,
                email:String,
                vip:String
            })
                //模型名首字母大写        //设置的数据类型名            //数据表名
            var 模型名=mongoose.model("Users",userSchema,"users");

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;//查询到数据库中的东西
                    })

                 fz.User.find({},{name:1},(err,jieguo)=>{}

---

day2

一丶AJAX

1.概念

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

        典型：网址请求、表单请求 - 目前我们一直都在使用同步交互

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

        典型：ajax请求

2.如何使用：固定4步骤

（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数据格式

1.面试题：HTML\XHTML\DHTML\XML分别是什么？

        HTML - 网页

        XHTML - 更严格的网页

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

        XML - 配置文件|数据格式

2.其实保存数据有两种方式

        把数据放到数据库

        把数据保存在一个文件之中.xml文件 

3.如何使用xml

        创建xx.xml文件

        必须写上声明标签<?xml version="1.0" encoding="utf-8"?>

        必须写上【一个】根标签，而且只能写一个根标签（标签），没有任何的预定义标签，所有的标签都是自定义的，意味着你想写啥子标签随便你

        需要使用node.js去读取你存储好的xml文件，响应给前端

        前端依然使用ajax去访问node.js，接住响应的数据必须写为xhr.responseXML - 得到的就是一个dom对象，可以使用核心DOM来进行解析

二丶***JSON数据格式：JavaScript Object Notation：js对象表示法，本身就是js的一部分

1.作用：数据格式 类似 XML

2.优点：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式/结构能极大的提升我们程序员的开发效率

3.属于【字符串】数据表示法

4.后端的操作：哪些数据JSON字符串：后端把数据库的数据取出来，整理为一个JSON字符串：

先要认识哪些叫做JSON字符串

                1、'[1,2,3,4,5]'
                2、'{"key":value}'
                3、'[{},{},{},{},{}]'
                4、'{"names":["代老师","冉老师","卢老师"]}'

怎么才能变为JSON字符串

                *JSON.stringify(x);

5.前端：依然使用ajax去获取数据，但是真正重要的是xhr.responseText;

                *JSON.parse(jsonTxt);

三丶h5十大新特性

1.语义标签

2.增强型表单

3.视频和音频

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

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

6.拖拉API

7.WebWorker

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

        把数据放在location的查询字符串里面

        cookie技术：几乎淘汰了，解析方式非常麻烦，能存储的大小2kb

        WebStorage：使用起来简单快速，解析方便，能存储4mb

                作用：能在客户端存储数据//跨页面也能使用

                分两大类：

                                sessionStorage - 会话级，浏览器一旦关闭数据就会死亡了

                                localStorage     -  本地级，永久存储此数据

                操作：

                        localStorage/sessionStorage是一个对象

                        保存：xxxStorage.属性名=属性值;

                        读取：xxxStorage.属性名

                        删除：xxxStorage.removeItem("属性名");

                        清空：xxxStorage.clear();

9.WebSocket

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

---

day4

一丶简单的插件库

1.日期插件

wdatepicker.js

下载引入：<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>

书写js：inp.οnfοcus=function(){
                    WdatePicker({
                        el:"inp",//el -> element 你的日期选择器选择的元素是哪个
                        //更多的键值对可以看源代码
                    });
                }

2.layUI.js - 插件库：提供了HTML/CSS/JS，那我们只需要下载使用

组件：组成网页一部分的部件（比如：导航条...）

插件：跟组件差不多，但是有js功能（比如：轮播、选项卡...）

框架：包含各个方面

插件的固定使用步骤

        1、引入该引入的
        2、选择你喜欢的梭到你的项目中
        3、根据设计图修改css
        4、ajax那数据进行渲染

3.jQuery插件库