node=day5

(1)反馈

  1、sublime没有格式化功能,如果需要则需安装插件实现HTML-CSS-JS Prettify,安装完毕后快捷键为Ctrl+Shift+H

    

  2、回调函数,详见js中的异步模式--- 回调函数篇

  3、封装ajax方法,详见封装ajax方法

  4、关于JS模块化问题,详见关于JS模块化问题

  5、package-lock锁文件作用,详解package-lock锁文件作用 

  6、find和findIndex原理,详见find和findIndex原理 .

  7、Express判断页面不存在,404情况

        

(2)MongoDB简介+安装

  1、关系型数据库和非关系型数据库

    

     

  2、语言支持

     

     数据库和语言没有关系,可以互相结合去用

  3、安装

具体下载和安装步骤,也可以结合下文MongoDB下载安装步骤+文件解析 .

  下载链接:MongoDB 预编译二进制包下载地址:https://www.mongodb.com/download-center/community

注意:在 MongoDB 2.2 版本后已经不再支持 Windows XP 系统。最新版本也已经没有了 32 位系统的安装文件。即官方宣布,不再优化支持32位

  32位下载地址:https://www.mongodb.org/dl/win32/i386,下面开始进行安装

     

     

默认安装到C盘,一般直接采用默认路径即可,除非C盘快满了
安装到C盘后,启动和访问该程序的速度变快,但C盘是系统盘,安装的东西越少越来,C盘安装的东西多,电脑就会很卡。
这里因为我的C盘快满了,所以我放到D盘根目录下的MongoDB文件夹(注意:这里我是在D盘下手动创建的MongoDB文件夹)

    

     

     

     

    

  4、配置环境变量

     安装完毕后,在CMD命令行输入指令检测安装状态

    

此时提示mongod不是内部或外部命令,也不是可以运行的程序或批量处理文件。所以接下来要开始配置环境变量

    将mongob.exe所在目录加到环境变量→用户变量→Path里

    

     

     

配置完成后,重启CMD,重新检测

    

至此MongoDB的安装和配置便已经完成

(3)验证

mongod --version

  

  配置完环境变量后如下

  

   

(4)上午小结

  

  数组遍历及其他方法:详见下文数组遍历及其他方法.

   

   

(5)开启和关闭数据库

   1、检验MongoDB

    

  2、开启服务有两种方式

    ①按照菜鸟教程所写步骤,安装MongoDB服务,此后便可以右击启动

    ②另一种启动方式,CMD输入mongod

注意:默认数据存储目录为/data/db,如果启动不成功查看该盘根目录是否有该文件。第一次启动需要手动创建,
例如当前在c盘启动服务,启动失败

    

     接下来在c盘下新建data/db目录

    

     接下来再次启动

    

此时便启动成功,如果想切换db路径,可以在启动时输入该指令
mongod --dbpath 自定义的db路径(例如,我在D:MongoDB程序的文件夹下创建了datadb,那这里便可以在C盘【另一个盘】去启动D盘下自定义的数据库服务)

    

  3、关闭服务

    关闭服务十分简单,与关闭node服务类似,Ctrl+C或者点击右上角关闭CMD

(6)MongoDB基本感知

  1、连接数据库

注意:在连接数据库之前,必须保证数据库是开启状态,即已经开启服务

    

接下来需要再打开一个CMD操作,输入mongo连接本机数据库
再次强调:数据库服务此时必须是开启状态,即另一个CMD下必须是开启数据库服务态

    输入mongo后如果本地启动了数据库服务便会进行连接

    

  2、数据库图像操作软件

之前的php,经常配合使用MySQL关系型数据库,常用的数据库操作软件是猫传Navicat

    

     

注意:正如上图所示,该数据库管理和设计工具只能操作关系型数据库,因为MongoDB属于非关系数据库,所以无法使用

  3、断开

    

  4、小结

    

  5、基本命令

①查看显示所有数据库show dbs

    

    当前显示出的为系统数据库

②db查看当前操作的数据库
③use 数据库名称
    切换到指定的数据库,如果没有则会新建

  如下所示:

  

   db会输出test,默认在test数据库,但查看数据库show dbs时没有打印出test,为什么呢?

只有当数据库存储数据时,在show dbs时才会出现。所以use 数据库名称,如果该数据库不存在则会创建,但show dbs时不可见,除非往里存储数据。

  例如,接下来创建个数据库叫studentsInfo,并使用db查看当前数据库

  

    但是使用show dbs查看所有数据库时不显示,因为当前的studentsInfo数据库没有存储数据

   

   接下来插入数据

  

此时已经存储数据,那么show dbs查看所有数据库时则可见

  

   然后查看当前数据库的所有集合

  

④查看数据库所有存储数据集合show collections

  接下来查询集合所有数据

  

⑤查询集合所有数据db.集合名.find()

  此外,还可以接着往里插入数据,这里注意

①MySQL需要设置数据表,且格式必须一致
②这里的id也具有唯一性
③插入数据时不必和之前数据格式一致,比较随意自由。即这里集合是任意的,十分灵活;可以理解为JS对象,格式灵活。而MySQL不能这么随意插入,除非更改表结构

  

日常开发里都是结合node去操作数据库,而不是直接来CMD里进行复杂操作,这里简单体会一下即可。
接下来介绍下通过node.js连接操作数据库

(7)初始mongoose

接下来看下在node中如何操作MongoDB数据库,首先看下第一种方式:使用官方MongoDB包

  1、npm网站搜索MongoDB包

     

这是MongoDB数据库官方提供的JS包,用于连接操作数据库;相关源码则存储在GitHub上

    

里面有相关安装和使用步骤及案例

    ①安装

      

     ②快速开始

初始化项目,安装MongoDB包

      

       

       

    ③启动MongoDB服务,指定数据存储目录

      

     ④连接数据库

      

     ⑤插入文档

      

     ⑥更新文档

      

     ⑦删除文档

      

     ⑧查询文档

      

至此便是数据库的增删改查。
注意:官方提供的原生代码比较繁琐,在真实开发里使用较少

  2、第二种方式:使用第三方mongoose来操作MongoDB数据库

mongoose本质上是基于官方node-mongodb-native再次做了封装

  

   接下来写个案例,体会一下

  ①新建项目mongoose-demo,初始化项目(创建package.json)

  ②安装第三方包→mongoose依赖包(npm新版5.xxx之后,默认下载时自带--save,所以下载生产依赖时可以不带参数)

    

     ③在项目根目录下新建demo.js温江,将mongoose官方文档案例代码粘到文档里

    

     

     完整代码如下

        

  ④测试

分析代码可知,案例默认连接test数据库;
接下来运行测试下,注意:保证数据是启动的

    启动数据库

    连接服务

接下来支持mongoose案例脚本代码

    

此时再次查看所有数据库

    

接下来可以查看该数据表数据

    

  ⑤此外也可以结合循环保存多个

    

     

     

以上便是mongoose结合node的初步体会,可以发现和js开发十分相似

     

(8)MongoDB数据库基本概念

  1、数据表与集合

数据库里的构成与MySQL不同
MySQL是数据表构成,使用前需要设计表结构,较为严谨 MongoDB是集合构成,格式较为灵活

  2、集合里面是文档

  3、整体关系

    

可以这样理解
1、整个MongoDB数据库是个大对象
2、里面有多个数据库qq、taobao、百度
  接下来将不同网站数据存储到不同数据库

  4、数据库→集合,每个数据库由集合构成,类似于MySQL数据表,可以简单理解为数据(数据集合)

    

  5、集合里的基本单位是“对象”,即数据集合是由多个对象构成

一个对象可以称之为一个文档

     

     整体数据库存储结构如下

    

  6、MongoDB数据库存储结构

1、MongoDB中可以有多个数据库,存储不同逻辑数据的存储目录,较为灵活
2、一个数据库里可以有多个集合(简单理解为数据)
3、一个集合可以有多个文档,集合的基本单位为对象,文档格式随意,甚至可以为空

    

(9)mongoose开始

接下来结合官方指南,简单测试下案例功能

   1、新建文件,重新编写mongoose案例

    

     接下来结合中文文档,依次手写步骤

    

  2、引包+链接数据库

    

  3、设计集合结构(可以理解为数据表结构)

虽然MongoDB从底层来讲,比较灵活,不需要设计表结构;
但是数据结构不能乱存,不方便查询管理,如下所示

    

MongoDB文档结构(对象结构)比较随意,但不建议这样乱存,所以要通过代码来设计表结构

    约束的目的是保证数据的严格完整,避免脏数据

/*1、引包*/
var mongoose = require('mongoose')
var Schema = mongoose.Schema/*Schema译为架构、结构*/
/*  
    2、连接数据库
    案例连接本地test数据库
    注意:如果数据库不存在则会被创建,直到插入数据后便看见了
*/
mongoose.connect('mongodb://localhost/demo')
/*
    3、设计集合结构(通俗理解为设计表结构)
        字段名称就是表结构中的属性名
        值为属性值的类型
*/
/*
    blogSchema博客文档架构
    title标题、 author作者、body文章内容、comments评论、date日期
*/
var blogSchema = new Schema({
    title:String,
    author:String,
    body:String,
    comments:[{body:String,date:Date}],
    date:{type:Date,default:Date.now},
    hidden:Boolean,
    meta:{
        votes:Number,
        favs:Number
    }
})

    上面博客数据表设计较为繁琐,所以接下来设计个简单的用户数据表结构

    

     但这样设计不够严谨,没有办法实行约束,例如“必须具有用户名”,所以类似于Vue中的Props限定,我们可以在userName后加上其他约束

    

  4、将设计的文档架构发布为模型

    

    参数分析

参数1:大写名词单数字符串表示数据库名词,mongoose约定:“会自动将大写名词的字符串转成小写复数的集合名词”
参数2:架构Schema

返回值:数据表设计模型的“构造函数

    

  5、拿到User返回值→设计模型的构造函数,开始进行相关操作(增删改查)

(10)mongoose之新增数据

  

   

   接下来看下,如何通过User即设计架构发布为模型后返回的构造函数进行增加操作,按照之前设计的格式进行添加

  

添加完后,还需要进行持久化存储

  

   目前为止,还需要进一步完善,即持久化存储之后,监听存储成功or失败

  

  接下来看下最终存储的回调函数参数result返回结果

  

接下来开始进行测试,注意:需要保证数据库正常开启

  

注意:
    这里_id为自动生成,确保数据唯一性

  小结:

基于设计的集合架构Schema(即数据表结构),进行模型发布,返回构造函数;然后对构造函数进行实例化插入,插入完毕后还需要进行持久化存储,且持久化存储需要回调函数监听存储状态

  运行多次后接下来可以去数据库查看数据

  

(11)mongoose之查询

  1、查询所有,得到结果为数组[]

     

     

  2、接下来测试下按条件查询

    ①再次插入其他数据

      

       持久化存储保存,然后将存储代码注释掉,接下来只验证查询功能

      接下来查询时便只会存在两个对象,如果存储了多个相同,此时可以先切换数据库,重新添加。查询结果如下

      

  3、按条件查询

在find的回调函数参数前加入条件对象即可

    

     

注意:当没有所查询数据时,便返回空数组,如下所示:查询“张三678”

    

     

find方法:返回匹配到的元素,放入数组,返回值为匹配元素数组。
如果只想返回一个,可以使用findOne,如下所示

  4、findOne

此时得到的便是一个对象,按照条件查询单个;

    

     

注意:如果findOne没有写条件,则会返回数据集合中的首个文档数据,如下所示

    

     

     这里因为第一个是张三,所以返回张三。

注意:如果此时没有符合条件的,则返回null

    

  5、小结

    

     

(12)mongoose之删除数据

  

   

n代表number删除了一个
ok代表成功删除1个

  接下来可以利用find查询所有或者直接从CMD切换数据库到该数据库查看,如果不带条件则会都删除,此时查询为空

  

   如下,利用find查询

  

   小结:

  

   

   

(13)mongoose之更新数据

为了方便测试,这里我们一nodemon启动服务,以后再次修改密码,便不用手动重启。
例如:这里我们将userName为admin的密码password改为666666

  1、根据id更新

    首先找到id,然后结合findByIdAndUpdate进行查询更新

注意:三个参数id、改变数据、回调函数

    

     

    结果如下:

    

     此外,可以去CMD通过指令查看数据库更新数据

    

接下来结合mongoose将之前的CRUD案例改为数据库操作,之前为文件操作

    

(14)将CRUD案例改为MongoDB数据库操作版本

  首先将之前的CRUD案例代码粘贴过来

  

  1、将原来自己封装的student.js改为students-fs.js,然后再新建一个文件,名为student.js

    

     先把基础格式写出来

    

     然后结合之前所写,设计集合结构(数据表结构)

    

其中id会在数据库自动生成,所以只需要设计另外几个文档格式即可

    完整代码如下

      

  2、接下来修改之前的路由配置文件,因为与之前自定义调用API有所不同,所以这里需要对调用处依次修改

    首先看下第一个,查询渲染所有数据

    

分析后可知find方法也mongoose的查询方法类似,所以这里不用修改
    接下来根据报错信息,
    1、安装mongoose模块
    2、开启数据库服务,指令mongod
    3、连接数据库,指令mongo
    关于MongoDB的安装,mongod和mongo的区别,详见MongoDB的安装,mongod和mongo的区别.

    ①启动数据库服务

       

     ②CMD连接数据库,方便后期测试

      

     ③再次启动服务器,查看页面渲染部分功能

      

       

       因为此时数据库为空,所以底下没有展示数据列表,接下里可以手动切换到0204数据库,往里插入数据

      

       此时数据库已经存在一条数据,再次刷新页面,如下所示,便可以看到刚才添加的数据了

      

此时id为数据库自动添加,我们把它换成下标

      

       

  3、接下里处理添加学生

    原来代码如下所示

    

     接下来结合mongoose添加数据语法进行改写

    

mongoose添加数据语法为new 模型,然后save持久化存储

      

       接下来测试下添加学生功能,此时便可以成功添加了

      

       此外,也可以通过CMD查看数据库存储文档

      

  4、接下来改写更新数据功能

       

这里我们使用findByIdAndUpdate的API进行更新,根据id只更新一个
此外,也可以结合结合mongobooster可视化工具进行辅助操作,详情参见文章MongoDB可视化工具之mongoBooster.
先看5编辑功能改写

  5、编辑功能---渲染编辑更新页面

    这里注意,数据库存储形式为_id,所以需要在页面修改下

    

     此时点击编辑时,发现右下角有引号

     

     所以接下来去除引号

    

注意:replace语法默认将第一个匹配的替换掉,无法替换多个。所以这里需要结合正则-g进行全局匹配

    此时便可以预览编辑页面

     

       

   6、完成编辑功能---页面新数据保存提交

    

     

至此便可以正常保存新数据

  7、删除功能

    

这里我们利用id删除,即API为findByIdAndRemove

    

(15)使用Node操作MySQL数据库

  关于MySQL安装细节,详见下文MySQL数据库安装步骤.

(16)总结

  

   

   

(17)回调地域

  详见文章浅谈JS回调地狱.

(18)Promise相关

   详见下几篇文章

(19)Promise应用场景

   详见文章Promise应用场景.

(20)封装Promise版本的ajax方法

   详见文章封装Promise版本的ajax方法.

(21)promise数据库操作

   详见文章promise数据库操作案例.

.

原文地址:https://www.cnblogs.com/fightjianxian/p/12244743.html