JS知识点总结(6)+Node.js+MongoDB+Ajax

Gibyh
231 阅读7分钟

MongoDB

mongodb基础

  1. 安装&启动mongo
    • 安装:解压mongodb-win32-x86_64-2008plus-ssl-3.6.11.zip文件
    • 进入bin文件夹:mongo.exe(客户端)和mongod.exe(服务器端)
    • 启动:当前bin文件夹里打开cmd命令行或打开powersheel(注意路径不能有中文),输入.\mongod.exe --dbpath=服务器的绝对路径
      • 再开命令行,输入.\mongo.exe 启动mongo的客户端,检查服务器是否链接成功
  2. mongo语法(SQL语句,在客户端命令行使用)
    • 数据库操作
      • 查询数据库:show dbs
        • 注意:无法查看空数据库,至少在数组库中创建一个表
      • 创建/切换数据库:use 数据库名
      • 查看当前数据库:db
      • 删除数据库:db.dropDatabase()
    • 数据表操作
      • 创建数据表:db.createCollection('表名',{size:5242880,capped:true,max:5000})
        • 第二个参数为限制操作,意为最大存储空间为5M，最多为5000条数据,推荐不写限制)
      • 查看当前所有数据表:db.getCollectNames()
      • 删除数据表:db.表名.drop()
    • 数据操作
      • 增:
        • db.表名,save({属性名:属性值,...}) -- 一次只能插入一条数据
        • db.表名.save([{},{},{}...]) -- 一次插入多条数据(建议键名统一)
      • 删:db.表名.remove({键值对})
      • 改:db.表名.update({条件},{修改后的新内容})
        • db.表名.update({name:'user'},{pwd:'123'}) -- 按条件找到的数据被新数据完全覆盖
        • db.表名.update({name:'user'},{$set:pwd:'123'}) -- 按条件找到的数据只修改pwd
      • 查:
        • db.表名.find({}) -- 找到所有数据
        • db.表名.find({age:{$gte:18}}) -- 找到所有age大于18的数据
        • db.表名.find({},{name:1}) -- 找到所有数据,只需要name部分,相当于开关,1为开,只取这部分;0为关,不取这部分数据
        • db.表名.find().sort({age:1}) -- 找到所有数据,按照age升序排列,降序为-1
        • db.表名.find().skip(0).limit(2) -- 跳过前0条,拿取2条数据
        • db.find().count() -- 获取此表的有多少条数据
  3. 查看数据库工具:mongoDB图形化界面:MongoDBCompass

Node.js与MongoDB关联

  1. 引入:const mongoose = require('mongoose');
  2. 连接数据库:mongoose.connect('mongodb://127.0.0.1/数据库名称');
  3. 创建出一个新的数据表,同时设置数据类型的控制,防止用户恶意输入 var xxxSchema=mongoose.Schema({ name:String, age:Number, pwd:String, email:String, vip:String }) var 模型名=mongoose.model("模型名",xxxSchema,"数据表名"); 注意:模型名首字母大写,mongoose.model只能执行一次,用模块的方式进行引入
  4. 操作数据
//增:
var user=new 模型名({
name:"XXX",
pwd:"XXX",
email:"XXX",
...
})
user.save((err)=>{
console.log(err);//错误提示对象，null说明没有错误
//插入完毕后要干什么在这里写代码
})
//删
模型名.deleteOne/deleteMany({条件},(err)=>{
//删除完毕后要干什么在这里写代码
})
//改
模型名.updateOne/updateMany({条件},{新内容},(err)=>{
//修改完毕后要干什么在这里写代码
})
//查
模型名.find({条件},(err,result)=>{
result;//查询到数据库中的东西
})

Ajax

基础概念

  • 同步交互
    • 定义:用户向服务器端发起请求,直到服务器进行响应的全过程，用户是不可以做其他事情的（等）
    • 典型:网址请求、表单请求
  • 异步交互
    • 定义:用户向服务器端发起请求,直到服务器进行响应的全过程，用户是可以做其他事情的（不等）
    • 典型:ajax请求
  • ajax：asynchronous JavaScript and XML; 直译：异步的js和xml
    • 不严格的定义：页面不会完整的刷新，只会导致局部页面发生变化
    • 典型:异步技术/代码了：
      1. 定时器：定时器里面的内容再耗时也不会影响后续代码执行
      2. ajax：在不刷新页面的情况下就和服务器端进行交互/沟通(无需提交表单)

使用方法

//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.readyState 发起请求
       //xhr.status 服务器响应
       var data=xhr.responseText;
   			//得到服务器端响应的文本,进行数据渲染、判断...
   		}
   	}

注意:get请求和post请求的区别

  • GET:显示在url地址上,安全性低,大小最大2kb
  • 需要获取数据,和安全性无感的操作,比如:搜索框、ajax请求
  • POST:安全高,大小无限制
    • 只要跟安全性相关的,都用post,比如:登录/注册

数据格式

保存数据有两种方式：

  1. 把数据放到数据库(json数据)
  2. 把数据保存在一个文件之中.xml文件(已淘汰,老项目可能使用)

XML

==面试题==HTML\XHTML\DHTML\XML分别是什么？ HTML:网页 XHTML:更严格的网页 DHTML:动态的网页(D:Dynamic)不是新技术、新概念,只是现有技术整合的统称,让网页在离线版依然具有动态特效.包含HTML+css+js(dom) XML:配置文件|数据格式

创建xml

  1. 新建建xx.xml文件
  2. 必须写上声明标签<?xml version="1.0" encoding="utf-8"?>
    • version - 版本号:目前的版本只有1.0和1.1，但是1.1升级的并不理想，所以市场上还是主流使用1.0版本，淘汰,不再更新
  3. 没有任何的预定义标签,所有的标签都是自定义的;必须写一个根标签(也是自定义的,但只能存在一个)
  4. 标签名==>键名,标签里的内容==>键值 使用xml
  5. 使用node.js读取你存储好的xml文件,响应给前端，
  6. 前端使用ajax访问node.js,接住响应的数据必须写为xhr.responseXML
  7. 得到的就是一个dom对象,可以使用核心DOM来进行解析
    • 缺点：核心DOM语法解析XML非常繁琐

JSON

JSON定义:数据格式 JavaScript Object Notation(js对象表示法,本身就是js的一部分.属于字符串数据表示法) 优点:比XML 更简洁、更快、更容易解析 JSON字符串的格式:

  1. '[1,2,3,4,5]'

  2. '{"key":value}'

  3. '[{},{},{},{},{}]'

  4. '{"names":["代老师","冉老师","卢老师"]}'

  5. 后端的操作:

    1. 先要将JSON数据从数据库取出
    2. 将数据整理为字符串
      • JSON.stringify(x);

  6. 前端:

    1. 通过Ajax获取数据xhr.responseText
    2. 将字符串还原为JSON数据
      • eval("("+jsonTxt+")");
        • 注意:只要数据的外层是{},优先级就会出现问题,导致报错
      • JSON.parse(jsonTxt);(推荐使用)

WebStorage

h5十大新特性：

  1. 语义标签(√)
  2. 增强型表单(√)
  3. 视频和音频(√)
  4. Canvas绘图(用于数据可视化,比如饼状图,柱状图,曲线图... 框架:echars.js)
  5. SVG绘图(用于画小图标,矢量图标库)
  6. 拖拉API
  7. WebWorker
  8. WebStorage
  9. WebSocket
  10. 地理定位(百度/高德地图开放平台)

WebStorage:

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

插件&插件库

  • 基本概念:

    • 组件：组成网页一部分的部件（比如：导航条...）
    • 插件：跟组件差不多，但是有js功能（比如：轮播、选项卡...）
    • 框架：包含各个方面

  • 日期插件:wdatepicker.js

    • 下载引入：<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8">
    • 书写js：
 inp.onfocus=function(){WdatePicker({
     el:"inp",//el -> element 你的日期选择器选择的元素是哪个
     //更多的键值对可以看源代码
   });
 }
  • layUI.js插件库:提供了HTML/CSS/JS,只需要下载,梭代码
    • 插件的固定使用步骤：
      1. 引入JS/css...
      2. 选择你喜欢的梭到你的项目中
      3. 根据设计图修改css
      4. ajax获取数据进行渲染
  • 其他插件库(推荐)：
    • jQuery插件库
      • 尽量使用简单易用的插件,方便以后修改 -
      • 注：一个账号一天只能下载两次
    • jQuery之家(免费)
avatar
文章
阅读
粉丝