js第六周

93 阅读8分钟

MongoDB基础

  • MySQL的SQL语句是关系型数据库通用的
  • Mongo是非关系型

1、安装&启动mongo

1、解压mongodb-win32-x86_64-2008plus-ssl-3.6.11.zip文件
2、解压好了进入到bin文件夹:mongo.exe(客户端) 和 mongod.exe(服务器端)
3、如何启动:
        在当前bin文件夹打开命令行cmd或powershell都可以,但是路径千万不能有中文,输入:.\mongod.exe --dbpath=你想要的绝对路径地址 - 服务器启动成功
        服务器开好,千万不要关闭
        再打开一个命令行,输入:.\mongo.exe - 再打开上一个服务器命令行看看是否连接成功 - 客户端开启成功
 4、安装一个mongoDB图形化界面:更美观,更方便 - 主要用于看
    安装mongodb-compass-1.33.1-win32-x64.exe 更直观看到数据库的数据

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

  • 1、数据库操作

          1、查询数据库:show dbs
          2、创建/切换数据库:use 数据库名称; - 如果是一个空的数据库,show dbs是查看不到的,至少要创建一个表才能看到
          3、查看当前选中的数据库:db
          4、创建数据表:db.createCollection("表名");
          5、删除数据库:db.dropDatabase() - 能忘了就忘了,会坐牢
    
  • 2、数据表操作:

       1、创建数据表:db.createCollection("表名",{size:5242880,capped:true,max:5000}); - 第二个参数限制操作,最大存储空间为5M,最多为5000条数据 - 个人不推荐做限制
       2、查看目前所有的数据表:db.getCollectionNames();
       3、删除数据表:db.表名.drop();
       
       
    

-3、数据操作:

1、增:db.表名.save({属性名:属性值,....}) - 一次只能插入一条数据			-注册
   举例: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.表名.update({条件},{要改的新内容})                         -  修改密码
   举例:db.表名.update({name:"paoge",pwd:"666666"},{age:17}) - 这句话会把名字为paoge和密码为666666的替换为只剩age
         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,其他的不要,10相当于是开关 - 我们登陆时只需要判断用户名和密码是否正确
       db.表名.find().sort({age:1}) - 按照age升序排列,降序的话换为-1
       db.表名.find().skip(0).limit(2) - 跳过前0条,再拿2条,可以理解为前两条;
       db.表名.find().count() - 获取此表有多少条数据

Nodejs如何与MongoDB关联起来

  • 1、安装mongoose第三方模块

  • 2、使用步骤:

           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");
    
            4SQL语句
                      增:
                          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;//查询到数据库中的东西
                          })
                      
                      
    

全栈思路(不太全):前端->后端<->数据库

  • 1、先搭建node.js的服务器,让用户可以看到我们的页面
  • 2、每一个action也是一个路由,需要判断路由的不同,执行不同的数据库操作
  • 3、mongoose.model只能执行一次,模块化的方式,进行引入

ajax

  • 1、概念

      同步交互:用户向服务器端发起请求的时候,直到服务器进行响应的全过程,用户是不可以做其他事情的(等)
       典型:网址请求、表单请求 - 目前我们一直都在使用同步交互
    
      异步交互:用户向服务器端发起请求的时候,直到服务器进行响应的全过程,用户是可以做其他事情的(不等)
       典型:ajax请求
    
      ajax:asynchronous JavaScript and XML; 直译:异步的js和xml - 前端技术
      不严格的定义:页面不会完整的刷新,只会导致局部页面发生变化
      我们早就见过异步技术/代码了:
      1、定时器:定时器里面的内容再耗时也不会卡住后续代码 - 做特效
      2、ajax:目的:再不刷新页面的情况下就和服务器端进行交互/沟通 - 我们哪怕不用表单提交也能和服务器端对话了,可以将服务器端的数据放到前端
    
  • 如何使用:固定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; - 得到服务器端响应的文本,难就难在你拿到你想要的东西要干嘛(数据渲染、判断...)
                          }
                  }
    

数据格式

1、XML数据格式

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

2、如何使用xml:
	1、创建xx.xml文件
	2、必须写上声明标签<?xml version="1.0" encoding="utf-8"?> 
                   version - 版本号:目前的版本只有1.0和1.1,必须写为1.0
        3、必须写上【一个】根标签,而且只能写一个根标签(标签),没有任何的预定义标签,所有的标签都是自定义的,意味着你想写什么标签随意
        4、标签里面内容随意
        5、需要使用node.js去读取你存储好的xml文件,响应给前端,
	   前端依然使用ajax去访问node.js,接住响应的数据必须写为xhr.responseXML - 得到的就是一个dom对象,可以使用核心DOM来进行解析
           缺点:核心DOM语法解析XML非常繁琐

2、JSON数据格式

JavaScript Object Notation:js对象表示法,本身就是js的一部分

  • 作用:数据格式 类似 XML

  • 优点:比XML 更简洁、更快、更容易解析

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

          1、后端的操作:哪些数据JSON字符串:后端把数据库的数据取出来,整理为一个JSON字符串:
                  1、先要认识哪些叫做JSON字符串:
                          1'[1,2,3,4,5]'
                          2'{"key":value}'
                          3'[{},{},{},{},{}]'
                          4'{"names":["代老师","冉老师","卢老师"]}'
    
                  2、怎么才能变为JSON字符串:
                          *JSON.stringify(x);
    
          2、前端:依然使用ajax去获取数据,但是真正重要的是xhr.responseText;
                  拿到JSON字符串并不方便我们获取数据,怎么转化?
                          1eval("("+jsonTxt+")"); - 只要外层是{},优先级就会出现问题,导致转化报错
                          2、*JSON.parse(jsonTxt);
    

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

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

框架

目的:来简化开发

  • 当今社会最流行的3大框架:

      vue.js
      react.js
      angular.js
    
  • 插件库

      1、日期插件:
         1、wdatepicker.js:- 丑
              1、下载引入:<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
              2、书写js:
                        inp.onfocus=function(){
                                  WdatePicker({
                                        el:"inp",//el -> element 你的日期选择器选择的元素是哪个
                                        //更多的键值对可以看源代码
                                  });
                         } 
         2、layUI.js - 插件库:提供了HTML/CSS/JS,那我们只需要下载,梭代码
                  组件:组成网页一部分的部件(比如:导航条...)
                  插件:跟组件差不多,但是有js功能(比如:轮播、选项卡...)
                  框架:包含各个方面
    
                  插件的固定使用步骤:
                      1、引入该引入的
                      2、选择你喜欢的梭到你的项目中
                      3、根据设计图修改css
                      4、ajax那数据进行渲染
                       
    2、无敌的插件库:
         1、jQuery插件库 - 尽量使用简单易用的插件,方便以后修改 - 缺陷:一个账号一天只能下载两次
         2、jQuery之家 - 免费