第六周

努力为KTM
113 阅读8分钟

mongo就是基于json的数据库：json就是JavaScript Object Notation - JS的一部分，所以用法和JS的用法都很像，都是用.去做操作

1、安装&启动：

1、解压我提供的mongodb-win32-x86_64-2008plus-ssl-3.6.11.zip文件
2、打开bin文件夹，里面有：mongo.exe（客户端） 和 mongod.exe（服务器端）
3、如何启动：
	在bin文件夹中打开cmd：输入：.\mongod.exe --dbpath=你想要保存的绝对文件夹路径 - 服务器开启成功，而且那个文件夹就是保存着你以后要存储的所有的数据
	千万不要关闭mongo服务器端的cmd
	再打开一个cmd：输入：.\mongo.exe - 再上一个cmd可以查看我们是否连接成功 - 客户端开启成功

2、mongo的语法：都是在客户端cmd输入

1、数据库的操作

	1、查询所有数据库：show dbs
	2、创建/切割数据库：没有就创建，有了就切换：use 数据库名称
	3、查看当前选中的数据库：db
	4、创建数据表：db.createCollection("表名");- 没有限制，无限，一定要先创建数据表后，我们才能查看到自己创建的数据库
	5、删除数据库：db.dropDatabase(); - 一旦删除就不能恢复，不推荐，因为要坐牢，最好忘记

2、数据表的操作
	1、创建数据表：db.createCollection("表名",{size:5242880,capped:true,max:5000}); - 最大存储空间为5mb，最多存储5000个，意味着这个数据表做了限制，不推荐
	2、查看目前所有的数据表：db.getCollectionNames();
	3、删除数据表：db.表名.drop(); - 一旦删除就不能恢复，不推荐

3、*****数据的操作
	1、增：db.表名.save({键值对,...}) - 一次只能插入一条数据
		db.表名.save([{},{},{},{},....]) - 一次插入多条数据
		举例：db.user.save({name:"paoge",pwd:"123123",age:18,email:"pg@qq.com",vip:1})
		          db.user.save([{name:"hujiayuan",pwd:"333333",age:17,email:"hjy@qq.com",vip:0},{name:"luohongliang",pwd:"666666",age:16,email:"lhl@qq.com",vip:0},{name:"zhaoxiao",pwd:"999999",age:64,email:"zx@qq.com",vip:1}])

	2、删：db.表名.remove({}) - 不推荐，删除数据库中所有的数据
		db.表名.remove({条件}) - 条件依然也是键值对，比如： db.user.remove({name:"paoge1"}) - 会删除数据表中name叫做paoge1的所有数据

	3、改：db.表名.update({条件},{$set:{新内容}})
		举例：db.user.update({name:"zhaoxiao"},{$set:{age:65,pwd:"222222"}})

	4、查：db.表名.find(); - 找所有
		db.表名.find({pwd:"666666"}); - 找到所有密码为666666的数据
		db.表名.find({},{name:1,pwd:1}); - 找到所有的数据，但是只返回name和pwd（登录！）
		db.表名.find().sort({age:1}); - 按age升序排列！
		db.表名.find({age:{$gte:18}}) - 拿到所有age大于等于18的数据，gt大于 gte大于等于 lt小于  lte小于等于（获取成年人）
		db.表名.find({name:/o/}) - 甚至可以用正则（模糊查询）
		db.表名.find().skip(5).limit(5) - 跳过前5条，在拿5条数据，理解为5-10条数据（点击分页条应该拿到哪些数据）
		db.表名.find().count() - 获取到此表有多少条数据（做出分页条）

3、安装mongDBCompass软件：图形化界面，直观、好看、方便 - 仅仅用于我们方便查看

4、Node.js操作mongoDB - Node.js官方并没有提供过操作数据库的API

1、安装第三方模块：mongoose
	
2、使用步骤：
	1、引入：var mongoose=require("mongoose");
	2、连接数据库：mongoose.connect("mongodb://127.0.0.1/h52302");
	3、创建出一个新的数据表的同时，设置数据类型的控制，防止用户乱输
		var UserSchema=mongoose.Schema({
			name:String,
			pwd:String,
			age:Number,
			email:String,
			vip:String
		})
		//		模型名随意的        数据的控制         表名，没有则为创建，有了则为选中！
		var User=mongoose.model("User",UserSchema,"user")


	4、增：2步
		1、创建要插入的对象
		var x=new User({
			name:"袍哥1",
			pwd:"123456",
			age:"123",
			email:"pg@qq.com",
			vip:"1"
		})
		2、创建好的对象插入到数据表中
		x.save().then(()=>{
			console.log("插入完毕了，你要干什么，必须放在这个里面，因为他也是异步")
		})
            5、删：
		User.deleteOne/deleteMany({条件}).then(()=>{
			console.log("删除完毕了，你要干什么，必须放在这个里面，因为他也是异步")
		})

	6、改：
		User.updateOne/updateMany({条件}).then(()=>{
			console.log("修改完毕了，你要干什么，必须放在这个里面，因为他也是异步")
		})

	7、查：
		User.find({条件}).then((rs)=>{
			rs->查询到的数据
		})
	
	条件的写法和上午的写法是一模一样的！

	目前：前端能传到后端的技术，只有一个：form表单，action属性可以随便自定义一个路由名称，后端解析此路由就可以通过Object.query.键名得到前端传来的东西

AJAX:

1、概念：

 同步交互：用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是不可以做其他事情的（等）
	典型：网址提交、表单提交 - 都是属于同步交互

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

*****Ajax：Asynchronous JavaScript And XML - 异步的JavaScript和XML
不严格的定义：页面不完全刷新，只会导致页面局部发生变化的技术
其实我们早就见过异步技术/代码了：
	1、定时器 - 做特效
	2、Node操作mongo的增删改查 - 后端交互数据库的
	3、ajax - 目的：在不刷新页面的情况下和服务器端进行交互 - 可以将服务器端的数据放到前端（比较验证，数据渲染）

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

1、创建ajax核心对象：
	var xhr=new XMLHttpRequest();

2、建立和 服务器 的连接
	xhr.open("GET/POST","路由");

3、向服务器端发送请求消息：
	xhr.send();//但是此方法很特殊

	特殊：
		1、GET：send方法会失效，但是还不能省略，必须写为：
			xhr.open("GET","路由?name=value&...");
			xhr.send(null);

		2、POST：send方法可用，必须写为：- 暂时不用
			xhr.open("POST","路由");
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send("name=value&...");

4、绑定状态监听事件
	xhr.onreadystatechange=()=>{
		if(xhr.readyState==4&&xhr.status==200){
			xhr.responseText; - 拿去到后端给我们的东西，难就难在这个点，你拿到了要干什么？
		}
	}

JSON:数据格式

    1、XML
1、面试题：HTML、XHTML、DHTML、XML分别是什么？
	HTML - 网页：预定义了很多标签，我们学习后，就可以直接使用前辈们预定义好的标签做出网页
	XHTML - 更严格的网页，HTML5->XHTML->HTML4.01，比如<input disabled="disabled" />
	DHTML - 动态效果网页，在离线端，我们的网页也具有动态特效，其实并不是新技术也不是新概念，而是现有技术的一个整合统称：HTML+CSS+JS(dom)
	XML - 配置文件|数据格式：未知的标记，没有提供过任何预定义标签！全靠自定义

2、如何使用XML，其实就是创建一个后缀.xml的文件
	1、必须写上声明标签：<?xml version="1.0" encoding="utf-8"?>
		version - 版本号，目前只有1.0和1.1版本，但是1.1升级并不理想，没有人使用，所以可以说1.0是唯一的版本，而且你学了以后都不用再学了，以后都不会更新了，已经被淘汰了，有更棒的人代替了他（JSON）
		encoding - 编码格式
	2、必须写上一个根标签，而且只能写一个根标签，而且必须是双标签
	3、里面你随意，你想放什么就放什么
	4、恭喜你，学完了

	开发中，正常来说后端会想办法将数据库中的数据整理为一个.xml的文件

	前端：依然使用ajax去获取xml
		1、路由：写为"xx.xml";
		2、xhr.responseText 换成 xhr.responseXML - 可以使用【核心DOM】去操作你需要好的东西。淘汰的原因：现在来操作数据都要使用核心DOM，太麻烦了！

2、JSON：JavaScript Object Notation：JS对象表示法，本身就是JS的一部分

作用和XML类似，都是用于当一个数据格式
好处：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式可以极大的提升程序员的开发效率

1、哪些属于JSON字符串
	1、'[1,2,3,4,5]'
	2、'{"key":value}'
	3、*'[{},{},{},{}]'
	4、'{"names":["袍哥","钟哥","苗姐"],"ages":[18,19,20]}'

2、后端把数据库的数据取出来整理为一个JSON字符串：JSON.stringify(obj);

3、前端依然使用ajax去获取响应的数据，真正重要的：xhr.responseText
	将JSON字符串解析为一个对象，那么方法：
		1、eval("("+JSONtxt+")")
		2、*JSON.parse(JSONtxt)

JQueryUI

     1、jQueryUI：基于jQuery（基于JavaScript的一个框架，是三大框架出现之前，全球最火的一个，但是现在已经被淘汰了）的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库
三大框架：Vue（中国人自己的框架：最后诞生，也借鉴了react和angular）+React+Angular（在国内几乎没有市场，三大框架中最早诞生的）
组件库 - 组件：组成网页一部分的部件，代码重用，一般不具备JS功能的，比如：导航条、图文显示...
插件库 - 跟组件差不多，但是带有JS功能 - 选项卡、轮播...

如何使用：
	1、下载jQueryUI - 不需要你们做
	2、必须在页面上进行引入 - 顺序不能错，一定要先引入jQuery的JS，再引入jQueryUI的JS
		<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css">
		<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
		<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
	3、挑选出你需要的/喜欢的插件，直接梭到你的项目之中
	4、根据设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
	5、*使用ajax去获取数据库中的数据，来进行页面渲染！
	6、千万别忘了调用jQuery提供的xx方法来实现功能！

	个人比较推荐的JQUI的插件：
		1、选项卡/标签页
		2、菜单
		3、手风琴/折叠面板
		4、模糊查询/自动完成
		5、JQ动画/特效
		6、交互部分自己试着玩玩
avatar
文章
阅读
粉丝