第三方组件 art-template 模板引擎

中文文档http://aui.github.io/art-template/zh-cn/docs/index.html

标准语法

原始语法

渲染模板

核心方法

 

输出

标准语法 模板一级特殊变量可以使用 $data 加下标的方式访问:{{$data[‘user list’]}}

原始语法

原文输出

标准语法

原始语法 原文输出语句不会对 HTML 内容进行转义处理,可能存在安全风险,请谨慎使用。

 

条件

标准语法

原始语法

 

循环

标准语法 target 支持 array 与 object 的迭代,其默认值为 $data。$value 与 $index 可以自定义:{{each target val key}}

原始语法

 

变量

标准语法

原始语法

 

模板继承

标准语法

原始语法

 

编写layout.html

继承后往layout.html写入文本

 

 

子模板

标准语法 不支持声明 object 与 array,只支持引用变量,而原始语法不受限制。

art-template 内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。

原始语法

 

过滤器

注册过滤器

过滤器函数第一个参数接受目标值。

标准语法 过滤器语法类似管道操作符,它的上一个输出作为下一个输入。

原始语法

接下来我们使用 curl 命令来下载安装:

 

使用 brew 安装

使用brew安装好的MongoDB,默认会在如下位置创建相关文件

  • the configuration file (/usr/local/etc/mongod.conf)
  • the log directory path(/usr/local/var/log/mongodb)
  • the data directory path (/usr/local/var/mongodb)

启动关闭MongoDB有两种方法

方法一:使用brew

方法二:使用环境变量 在用户根目录下使用如下命令

MongoDB 术语

连接操作MongoDB使用的包

 

mongoose的基本使用

英文文档mongoose https://mongoosejs.com/docs/guide.html

导入数据

windows使用这个命令如果失败,前添加系统环境变量,我的是C:\Program Files\MongoDB\Server\4.2\bin文件下

连接数据库

创建数据

查询数据

删除数据

修改数据

模型常用验证规则

集关联

同步API,异步API

  • 同步API只有当前API执行完成后,才能继续执行下一个API
  • 当前API的执行不会阻塞后续代码的执行
  • 同步API可以从返回值中拿到API执行结果但是异步API是不可以的
  • 基本上有回调方法的是异步,没有回调方法的是同步(个人总结仅供参考)
  • 同步API从上到下依次执行,前面的代码会阻塞后面的代码
  • 异步API不会等待API执行完成后,再去执行下面代码

 

promise避免地狱回调

什么是地狱回调直接上代码,这就地狱回调,我要依次读取1~6.txt文件,只有上一个成功才能读取下一个,文件

promise出现的目的是解决Node.js异步编程中,回调地狱的问题,基本使用

promise的链式操作避免地狱回调(重点)

使用async 和 await解决地狱回调比使用promise简单

异步函数是异步编程语法的终极解决方案,他可以让我们异步代码写成同步代码的形式,让代码不再有回调函数嵌套,使代码变的清晰明了

async关键字

  • 普通函数定义前加async关键字,普通函数变成异步函数
  • 异步函数默认返回promise对象
  • 在异步函数内使用return关键字进行结果返回 结果会被包裹在promise对象中 return 关键字代替了resolve方法
  • 在异步函数内使用throw关键字抛出程序异常
  • 调用异步函数在链式调用then方法获取异步函数执行结果
  • 调用异步函数在链式调用catch方法获取异步函数执行的错误信息

await关键字

  • await关键只能出现在异步函数中
  • await promise ; await只写promise对象其他对象是不可以的
  • await 关键字可是暂停异步函数向下执行 知道 promise返回结果

使用util promisify 改造现有异步api,让其返回promise对象

使用这种方式是不是比地狱回调好多了^_^

 

request 请求头 常用属性和方法

response 响应头 常用属性和方法

http状态码

  • 200 请求成功
  • 400 客户端请求有语法错误
  • 404请求的资源没有被找到
  • 500 服务器内部错误

URL模块 常用方法

querystring模块 常用方法

 

获取post的请求参数

小型web服务器

如何安装Gulp 4

首先,如果已经安装了gulp,先把以前版本删除。

然后我们需要安装gulp-cli。

现在,运行gulp -v应该看能到一些输出:


gup3 VS gulp4 区别

Gulp 4最大的变化就是你不能像以前那样传递一个依赖任务列表。

Gulp3,如果有一个任务A,B和C的列表,你想在一个序列中运行(确保A在B开始之前完成,而B在C开始之前完成),代码如下:

在Gulp 4中,你不能再这样做了。你会得到以下错误:

不要用Gulp3的方式指定依赖任务,你需要使用gulp.seriesgulp.parallel,因为gulp任务现在只有两个参数。

gulp.series:按照顺序执行
gulp.paralle:可以并行计算

或者这样

重点

 

相关任务必须在被调用之前发生。

在Gulp 3中,可以让你的文件引用它们之前的任务,因为一切都是默认异步执行的。现在,您需要在依赖关系在您的gulp文件中定义之后放置调用依赖项的任务。否则,你会得到这样的错误:

解决方法:使依赖任务在文件的底部。

gulp4中需要指定task结束
gulp4中,必须告诉gulp我们的task任务已经完成了。gulp3中,我们不必要这么做,因为如果没有发出异步完成信号,那么当任务返回时,gulp会认为它已经完成了,gulp4中必须明确指出任务完成了。


  1. 使用回调函数作为您的任务的第一个参数,只需在完成时调用该函数。
  1. 告诉gulp任务完成的另一个常见方法是 返回(return) 一个流或者** Promise**:

浏览器同步刷新,而不是样式注入

我的Gulp 3文件没有问题,在HTML重建上进行刷新,并在CSS更改上进行闪电般的风格注入,但升级到Gulp 4后,浏览器现在会在CSS更改后重新加载。

  • 需要以不同的方式做三件事。首先确保您将一个文件数组传递给Browsersync构造函数
  • 其次,如果你有任务bs.stream()结束styles,你可以删除它。
  • 第三,当你想在你的开发服务器上进行实时风格注入时,你的watch和browserSync任务需要并行运行,而不是终止,就像这样:

第三方模块 nodemon

  • nodemon是一种工具,可在检测到目录中的文件更改时通过自动重新执行代码.

1.安装

2.使用 用 nodemon 代替 node 执行文件

 

 

 

第三方模块 nrm

  • nrm(npm registry manager):npm 下载地址切换工具
  • npm默认的下载地址在国外国内下载速度很慢

1.安装

2.使用

 

 

 

第三方模块 Gulp

前段构建工具 ,将机械化操作编写成任务,主要用于 压缩js css less sass  es5 es6语法转换 压缩 公共文件插入 修改刘阿联酋 自动刷新等

Gulp中提供的方法

1.安装

2.在项目根目录中创建  gulpfile.js 文件

3.在项目根目录中创建  src 文件夹 和 dist 文件夹

4.在gulpfile.js文件中编辑任务

5.在命令行中执行gulp任务

Gulp插件

Gulp常用参考方法参考

 

第三方模块 mime

1.安装

2.使用

系统模块 URL模块

系统模块 querystring模块

 

 

Node.js的组成

  • javaScript 是由三部分组成 ECMAScript DOM BOM
  • Node.js 是由ECMAScript 及 Node环境提供的一些附加API组成的,包括文件,网络,路径等等一些强大的API
  • 在所有ECMAScript语法在Node环境中都可以使用

 

node.js全局对象global

  • 在浏览器中全局对象是window,在node中全局对象是global
  • node中全局对象下有以下方法,可以在任何地方使用,global可以使用

javaScript开发弊端

  • 文件依赖问题
  • 文件冲突问题

Nodejs模块化开发

  • 一个功能就是一个模块,多个模块可以组成完整的应用,抽离一个模块不会影响其他功能运行.
  • Node.js规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到
  • 模块内可以使用export对象进行成员导出,使用require方法导入其他模块

 

模块化开发案例

a.js

b.js

模块成员的另一种导出方式

什么是系统模块

Node运行环境提供的API,因为这些APi都是以模块的方式进行开发,所以我们又称Node运行环境提供的API为系统模块

系统模块fs文件操作

系统模块path路径操作

  • 不同的操作系统路径的分隔符不统一
  • windows上是 \/
  • linux上是 /

相对路径vs绝对路径

  • 大多数情况下使用绝对路径 , 因为相对路径有时候相对的是命令行工具的当前工作目录
  • 读取文件或者设置文件路径时都会选择绝对路径
  • 使用 __dirname获取当前文件所在的绝对位置

案例

什么是第三方模块

别人写好的,具有特定功能的,我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被防止在一个文件夹中,所以又名包.

第三方模块既有两种存在形式:

  • 以js文件存在,提供实现项目具体功能的API接口
  • 以命令行工具形式存在,辅助项目开发

获取第三方模块

npm (node package manager):node的第三方模块管理工具

  • 下载:npm install 模块名称
  • 卸载:npm uninstall package 模块名称

如果选择包安装的方式

  • 命令行工具: 全局安装  -g
  • 库文件:本地安装

package.json文件

项目描述文件,记录了当前项目信息,例如项目名称 版本 作者 github地址,当前项目依赖了那些第三方模块等.使用 npm init -y命令生成

项目依赖

  • 在项目开发阶段和线上运营阶段,都需要的第三方包,称为项目依赖
  • 使用npm install 包名会默认被添加到package.json文件的 dependencies 字段中
  • npm install –production  使用这个命令安装线上环境的依赖

开发依赖

  • 在项目的开发阶段需要的依赖,向上运营阶段不需要依赖的第三方包,称为开发依赖
  • 使用 npm install 包名 –save-dev命令将包添加到package.json文件的devDependencies字段中

package-lock.json文件的作用

  • 锁定包版本,确保再次下载时不会因为包依赖而产生不同版本
  • 加快下载速度,因为改文件中已经记录项目所依赖第三方包的树张结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作

模块查找规则

1当模块拥有路径但没有后缀时

  • require方法根据模块路径查找模块,如果是完整路径直接引用模块
  • 如果模块后省略,先找同名js文件 ,再找同名文件夹,
  • 如果找到同名文件夹,再到文件夹中找index.js
  • 如果文件夹中没有index.js就会到当前所在文件夹中的package.js文件中(以当前案例为参考是./mode/add的package.js ),查找main选项中的入口文件.
  • 如果指定的文件不存在或者没有指定入口文件就会报错,模块没有找到

2.没有路径没有后缀时

  • 首先假设是系统模块,如果系统模块里没有
  • node.js会去node_modules文件夹中,先看有没有.js文件,再看是否有同名文件
  • 如果有文件看是否有index.js文件如果没有
  • 看改文件夹中package.json中的main字段来确定模块入口文件
  • 如果这都没有就保存

 

 

 

 

 

什么是ES6

ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本的标准化规范,ES6实际上是一个泛指,泛指ES2015及后续的版本

为什么使用ES6

每一次标准的诞生都意味着语言的完善,功能的加强,javaScript语言本身也有这一些令人不满意的地方

  • 变量提升增加了程序运行时的不可预测性
  • 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

ES6的新增语法

let关键字

let声明变量只在所处于的块级有效,在大括号中,使用let关键字的声明的变量才具有块级作用域

let 金典面试题

变量i是全局变量,函数指向时输出的都是全局作用域下的i值

指向的是局部变量

const关键字

  • 具有块级作用域
  • 声明常量时必须赋值   //missing initializer in const declaration
  • 常量就是值(内存地址)不能变化的量 ,复杂数据类可以这样不改变内存地址的方式修改里面的值 “常量名[‘name’] = 111 ;常量名.name = 222 “

let const var 的区别

 

解构赋值

数组解构

对象解构

箭头函数

箭头函数不绑定this关键字,箭头函数中的this,指向函数定义位置中的上下文this

箭头函数面试题

在对象中使用this , this 指向window

…变量名  剩余参数  展开运算语法

  • 如果 …变量名  放到形参的位置,或者等号左边 代表接受剩余参数
  • 如果 …变量名  参数是一个数组,没有放到等号左边或形参的位置,代表展开数组,

剩余参数

利用剩余参数解构

展开运算语法

使用展开运算符合并数组

使用展开运算符将 伪数组 转换为 数组 ,这样就可以使用数组中的方法

模板字符串

还可以在里面执行函数

Set数据结构

ES6提供了新的数据结构Set.它类似与数组,但是成员的值都是唯一的,没用重复的值

set去除数组中重复数据

set数据结构常用方法

 

正则表达式(Regular Expression)适用于匹配字符串中字符组合的模式.在javaScript中,正则表达式也是对象

https://regex101.com/     正则表达式 测试练习

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions     正则表达式 手册

创建正则表达式

正则表达式对象 常用方法

正则表达式中的特殊字符

边界符

字符类

量词符

预定义符

小括号中括号大括号总结

  • 大括号 量词符. 里面表示重复次数
  • 中括号 字符类 .里面表示字符集合。匹配方括号中的任意字符.
  • 小括号 表示优先级 ,就是把小括号里的内容单独看做一个整体  如匹配首尾空格的正则表达式:(^\s*)|(\s*$)

正则替换

案例