11.10读书笔记

2021年11月24日 阅读数:6
这篇文章主要向大家介绍11.10读书笔记,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Vue.js的安装

  • 下载Vue.js到本地,经过<script>引入
  • 经过CDN(Content Delivery Network)引入
  • npm安装或npm安装vue-cli

Vue.js的5大特性

  • 组件
  • 模板
  • 响应式设计
  • 过渡效果
  • 单文件组件

ES6的一些经常使用语法

  • 默认参数
  • 模板文本
  • 多行字符串
  • 解构赋值
  • 加强的对象文本
  • 箭头函数
  • Promie实现
  • 块做用域构造let
  • 模块

Babel

大多数浏览器对JavaScript的版本支持并非到最新的版本,为了向下兼容,须要将ES6以上的代码进行转换。Babel是一个普遍使用的转码器,将ES6代码转为ES5代码,从而在现有浏览器环境下执行。这意味着咱们如今就可使用ES6编写程序而不用担忧现有环境是否支持。php

  • Babel的配置文件是.babelrc,用于设置转码规则和插件
  • 要使用某类转码器,须要安装相应的包,例如:
#使用ES6转码规则
npm install --save-dev babel-preset-es2015
#使用react转码规则
npm install --save-dev babel-preset-react
  • 转码命令
#将aaa.js转码,转码结果输出到xxx.js文件
babel aaa.js --out-file xxx.js
#转码结果输出到标准输出(在屏幕中打印)
babel aaa.js

Webpack

网页功能愈来愈复杂,JavaScript代码也随之越复杂,随着各类框架的使用,依赖的包也愈来愈多,这些复杂的内容要想让浏览器都能识别,就须要一些繁琐的操做,而Webpack的使用就是将这些繁琐操做简单化
在处理应用程序时,Webpack会构建一个依赖关系图,其中包含应用程序所须要的各个模块,而后将全部这些模块打包成一个或多个模组,经过终端或更改Webpack.config.js文件来设定各项功能。html

  • 使用Webpack3.6.0
    在项目目录下安装webpack3.6.0
    npm install --save-dev webpack@3.6.0
    新建app文件夹做为JS代码的存放处,新建public文件夹做为index.html的文件夹,在app文件夹中新建两个JS文件

    在index.html中引入Webpack生成的bundle.js文件(打包后会自动生成)

    编辑Webpack的配置文件webpack.config.js(须要本身建立)

    运行webpack命令打包输出,会在项目根目录下生成一个bundle.js的文件
  • npm中--save与--save-dev的区别
  • 不推荐全局安装Webpack,由于会将咱们项目中的Webpack锁定到指定版本,而且在使用不一样的Webpack版本的项目中,可能会致使构建失败
  • 在项目根目录下运行webpack打包时遇到问题,参考博客https://blog.csdn.net/weixin_44135121/article/details/90513634获得解决
  • 使用Vue-cli时无需自行配置Webpack
  • Webpack4是Webpack的一次重大升级,使用Webpack4时彻底不须要配置任何一个文件就能够完成一个项目的构建工做
  • 使用Webpack4
    运行npm init -y

    这时会在当前目录下生成一个package.json文件


    在当前目录下安装Webpack

    安装webpack-cli(Webpack4中已将webpack自己和它的CLI分开)

    在package.json文件中添加一个构建脚本

    在当前目录下新建src文件夹和index.js文件,并在index.js中添加以下代码做为测试(Webpack4不须要定义入口点,它将./src/index.js做为默认值)
    console.log("Hello World");
    
    运行npm run build命令,成功后会在当前目录下创建dist文件夹,并生成main.js

    ***---
    Webpack4提供了两种不一样的构建模式
    在package.json中为script字段新增两个命令

    开发模式:加速开发、减小构建时间、不考虑生成大小(未压缩),构建命令以下:
    npm run dev
    生产模式:用于生产环境,构建命令以下:
    npm run production

经过CLI构建Vue应用

经过CLI工具初始化一个以Webpack为模板,项目名称为movie_view的项目

执行后发生错误,参考vue : 没法加载文件 D:\nodejs\node_global\vue.ps1,由于在此系统上禁止运行脚本解决

配置好后等待安装项目依赖

项目创建完毕

此时的项目是一个未经npm安装的项目,在项目根目录下运行npm install安装项目须要的插件

npm run dev命令运行项目,在浏览器中显示

项目运行成功
vue

输出Hello World!
在编写代码前先来看一下项目的文件结构

components文件夹下新建一个名为NewHelloWorld.vue的新组件

.../router/index.js中引入NewHelloWorld.vue

npm run dev运行代码


运行项目时遇到了很多问题,可能是代码规范的问题,注意不能使用Tab键缩进,属性键值对间要有空格,模板的字符串两边要各留出一个空格,.js文件最后要有一个空行等,具体根据命令行提示。node

开发环境与生产环境

  • package.json文件包括了咱们使用npm install命令安装的全部包和版本

    npm run dev命令实际是对上图中详细命令的简写,若不限麻烦,也可在命令行中输入详细的命令,如node build/build.js代替npm run build
    开发环境——npm run dev
    运行此命令会启动一个本地的测试服务器,程序会默认打开http://localhost:8080/#/方便开发者调试(要自动打开浏览器须要配置/config/index.js中autoOpenBrowser字段为true)
    生产环境——npm run build
    以生产模式运行会在项目文件夹中生成一个dist文件夹,其中有一个index.html和一个静态资源文件夹,咱们能够本身启动一个测试服务器,如经过php -S 127.0.0.1:999来启动一个php自带的测试服务器,而后再浏览器中输入http://127.0.0.1:999/#/来测试

MongoDB

MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库中功能最丰富、最像关系数据库的产品。它支持的数据结构很是松散,是相似JSON的BSON格式,所以能够存储比较复杂的数据类型。MongoDB的最大特色是它支持的查询语言功能很是强大,其语法相似于面向对象的查询语言,几乎能够实现相似关系数据库单表查询的绝大部分功能,并且还支持对数据创建索引。
MongoDB服务端可运行在Linux、Windows或Mac OSX平台,支持32位和64位应用,默认端口是27017
对于开发者来讲,若是由于业务需求或项目初始阶段而致使数据的具体格式没法明肯定义的话,MongoDB的鲜明特性就脱颖而出了。MongoDB的几个优势:
速度快、动态结构、易管理、使用高效的二进制数据存储、文件格式为BSONreact

Express

Express是一个简洁而灵活的Node.js Web应用框架,提供一系列强大特性帮助开发人员建立各类Web应用。Express不对Noe.js已有的特性进行二次抽象,只是在它之上扩展了Web应用所需的功能,它提供了丰富的HTTP工具,来自Connect框架的中间件能够随取随用,让建立强健、友好的API变得快速而简单。webpack

NoSQL

NoSQL泛指非关系型数据库,随着Web 2.0的兴起,传统的关系数据库在应对Web 2.0网站,特别是超大规模和高并发的SNS类型的Web 2.0纯动态网站已经显得力不从心,暴露了不少难以克服的问题。而非关系型数据库则因为自己的特色获得了很是迅速的发展。NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战,尤为是大数据应用难题。NoSQL数据库在如下几种状况下比较适用:数据模型比较简单;对数据库性能要求较高;不须要高度的数据一致性;对于给定的key,比较容易映射复杂值的环境。常见的NoSQL数据库类型有4种:
键值存储数据库
如:Tokyo Cabinet/Tyrant、Redis、Voldemort、Oracle BDB
列存储数据库
如:Cassandra、HBase、Riak
文档型数据库
如:CouchDB、MongoDB、SequoiaDB
图形数据库
如:Neo4J、InfoGrid、Infinite Graphes6

Node.js

Node.js是一个基于Chrome V8引擎阿JavaScript运行环境,用于方便地搭建响应速度快、易于扩展的网络应用。它使用了一个事件驱动、非阻塞式的I/O模型,这使得其开发既轻量又高效,并且很是适合在分布式设备上运行数据密集型的实时应用。web

  • Node.js有如下优势:
    1.采用事件驱动、异步编程,为网络服务而设计。
    2.非阻塞模式的I/O处理给Node.js带来在相对低系统资源耗用下的高性能与出众的负载能力,很是适合用于依赖其余I/O资源的中间层服务。
    3.轻量高效,是数据密集型分布式部署环境下的实时应用系统的完美解决方案。sql

  • Node.js的缺点以下:
    1.可靠性低
    2.单进程、单线程,只支持单核CPU,不能充分利用多核CPU服务器,一旦这个进程崩溃,整个Web服务就崩溃了。mongodb

Express-Hello World

初始化一个npm项目

安装Express框架并将其存入package.json文件中

编写入口文件(这里使用默认的index.js

运行程序

浏览器中访问

一个简单的电影网站后台编写

安装Express应用生成器

建立项目并根据提示安装依赖、启动应用

注意这里


浏览器中输入http://localhost:3000打开测试页面

项目创建后的文件结构

(本项目中使用Mongoose做为链接MongoDB的中间件)
在项目中安装mongoose中间件

新建一个路由做为测试路由

重启测试服务器,在浏览器中访问


在数据库中能够看到,数据插入成功

使用Supervisor监控代码的修改
使用这个中间件能够简化测试服务器的启动与结束,并且若是代码被修改过,会自动从新载入代码
全局安装Supervisor

启用supervisor

用户操做模块开发

新建路由文件的注意事项

先建一个存放各类model的文件夹models

写一个用于链接数据库的公用模块db.js,放于根目录的common文件夹中

新建user.js做为数据集

在users.js中新建路由

编写各路由的具体代码

  • 注册路由

    启动测试服务器,使用Postman测试结果

    若是注册成功,提示相应的信息,而且能够在数据库中找到注册信息


    (其余的路由测试步骤与以上大体相同,再也不赘述)
  • 关于登陆的完整性验证
    1.登陆操做要验证用户名及密码,通常要生成一个Token值做为用户的登陆状态,此值在全部的登陆验证操做中要做为参数携带(这里咱们使用crypto这个中间件来生成Token);
    2.通常进行完整性验证时须要将全部字段进行组合后加密,在后端也一样要经过组合验证来检测其完整性


(未完待续。。。。。。)