牧马人的忧伤

Node 第 3 天1. 学习目标◆ 能够说出 pageage.json 文件中属性的含义 ◆ 知道怎么解决包下载慢的问题 ◆ 了解如何开发包 ◆ 了解如何发布包 ◆ 熟练模块的加载机制 ◆ 熟练 express基本操作 2. 包管理配置2.1 包管理配置的概念npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件，用来记录与项目有关的一些配置信息，例如： 项目的名称、版本号、描述等 项目中都用到了哪些包 哪些包只会在开发期间会用到 哪些包在开发和部署时都需要用到 2.2 理解 package.json 配置文件的作用2.2.1 多人协作的问题 包的体积 整个项目的体积是 30.4M 第三方包的体积是 28.8M 项目源代码的体积 1.6M 遇到的问题 第三方包的体积过大，不方便团队成员之间共享项目源代码 解决方案 共享时剔除node_modules 2.2.2 如何记录项目中安装了哪些包 在项目根目录中，创建一个叫做 package.json的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除 node_ ...

nodejs事件循环与多进程why 事件循环对于深入理解nodejs异步至关重要 fs, net,http,events 事件循环是企业面试中的最高频考题之一 能驾驭nodejs多进程是一名资深前端工程师的标志 课程介绍 了解事件循环的概念 学习浏览器中的事件循环机制 学习nodejs中的事件循环机制 了解多进程，多线程之间的区别 学习nodejs中的多进程并使用cluster来开启多进程 学习目标 深入掌握浏览器与nodejs中的事件循环机制，并且能理解它们之间的区别 使用cluster开启多进程 第一章 事件循环介绍浏览器中的事件循环为了协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking）等，用户代理（user agent）必须使用事件循环（event loops）。 To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must u ...

Node.js 网络通信Node 是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性，具备良好的可伸缩性，使得它十分轻量，适合在分布式网络中扮演各种各样的角色。同时 Node 提供的 API 十分贴合网络，适合用它基础的 API 构建灵活的网络服务。本课程的内容就是给大家介绍 Node 在网络通信编程方面的具体能力。 利用 Node 可以十分方便的搭建网络服务器。在 Web 领域，大多数的编程语言需要专门的 Web 服务器作为容器，如 ASP、ASP.NET 需要 IIS 作为服务器，PHP 需要打在 Apache 或 Nginx 环境等，JSP 需要 Tomcat 服务器等。但对于 Node 而言，只需要几行代码即可构建服务器，无需额外的容器。 Node 提供了 net、dgram、http、https 这4个模块，分别用于处理 TCP、UDP、HTTP、HTTPS，适用于服务器端和客户端。 第1章 网络通信相关概念我们每天使用互联网，你是否想过，它是如何实现的？ 全世界几十亿台电脑，连接在一起，两两通信。上海的某一块网卡送出信号，洛杉矶的另一块网卡居然就收到了，两者实际 ...

web应用开发框架内容简介 koa入门与使用 egg介绍以及实战 adonis简介 学习目标 掌握nodejs后端开发思想 掌握koa基本使用以及其生态 能使用egg开发实际项目 第一章 koa入门与使用 简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。 新 下一代， 超前 新的语法， es7 优雅 安装Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持. 你可以使用自己喜欢的版本管理器快速安装支持的 node 版本： $ nvm install 7 $ npm i koa 基本用法1.架设http服务只要三行代码，就可以用 Koa 架设一个 HTTP 服务。 const Koa = require('koa'); const app = new Ko ...

SASS： 引言 众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。 关于sass sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails的大力推动，逐渐被更多开发者使用。 sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。 sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。 中文文档：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网 安 ...

Next.js服务器端渲染学习目标 了解Next.js的作用 掌握Next.js中的路由 掌握Next.js中布局组件的创建 掌握Next.js中的静态文件服务 掌握Next.js中获取页面数据的方法 掌握Next.js中组件样式的书写 使用Next.js完成豆瓣电影案例 能够自定义头部元素head 2.1 什么是Next.js?Next.js官网 Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护。 Next.js带来了很多好的特性： 默认服务端渲染模式，以文件系统为基础的客户端路由 代码自动分割使页面加载更快 以webpack的热替换（HMR）为基础的开发环境 使用React的JSX和ES6的module，模块化和维护更方便 可以运行在Express和其他Node.js的HTTP 服务器上 可以定制化专属的babel和webpack配置 使用服务器端渲染好处： 对SEO友好 提升在手机及低功耗设备上的性能 快速显示首页 2.2 Next.js初体验mkdir hello-next cd h ...

1. 使用变量sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。 sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。 1-1. 变量声明sass变量的声明和css属性的声明很像： $highlight-color: #F90 这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Hel ...

服务器端渲染（SSR)学前准备 ES6 Node Vue React Angular 什么是服务器端渲染 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。 服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。 为什么使用服务器端渲染优点： 更好的 SEO，因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备 。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求j ...

1. Nuxt.js服务器端渲染学习目标 了解Nuxt.js的作用 掌握Nuxt.js中的路由 掌握layouts、pages以及components的区别 能够在Nuxt.js项目中使用element-ui 掌握Nuxt.js中异步获取数据的方式 完成豆瓣电影小案例 掌握SEO的优化 1.1 Nuxt.js入门1.1.1 什么是Nuxt.jsVue服务端渲染官网 Nuxt.js官网 Nuxt.js 是一个基于 Vue.js 的通用应用框架。 1.1.2 第一个Nuxt应用程序npm i create-nuxt-app -g create-nuxt-app my-nuxt-demo cd my-nuxt-demo npm run dev 1.1.3 文件结构分析└─my-nuxt-demo ├─.nuxt // Nuxt自动生成，临时的用于编辑的文件，build ├─assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 st ...

一、项目简介1、后台管理系统的功能划分电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 2、后台管理系统的开发模式（前后端分离） 前后端分离之后，开发流程将如下图所示。 在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发，其中前端工程师再开发完成之后可以独自进行mock测试，而后端也可以使用接口测试平台进行接口自测，然后前后端一起进行功能联调并校验格式，最终进行自动化测试 3、电商后台管理系统的技术选型 前端项目技术栈 Vue Vue-router Element-UI Axios Echarts 后端项目技术栈 Node.js Express Jwt Mysql Sequelize 二、登录/退出功能1、登录业务流程① 在登录页面输入用户名和密码 ② 调用后台接口进行验证 ③ 通过验证之后，根据后台的响应状态跳转到项目主页 2、登录业务的相关技术点http 是无状态的,怎样记录用户的登录状态？ 通过 cookie在客户端记录状态 通过 session 在服务器端记录状态 通过t ...

uni-app的基本使用基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 项目：黑马商城项目 uni-app介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app？ 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。 环境搭建安装编辑器HbuilderX 下载地址 HBuilderX是通用的前端开发工具，但为uni-app做了特别 ...

Virtual DOM的实现原理课程目标 了解什么是虚拟DOM,以及虚拟DOM的作用 Snabbdom的基本使用（Vue内部的虚拟Dom是改造了开源库Snabbdom） Snabbdom的源码解析 在面试的时候经常会问到虚拟DOM是怎么工作的，通过查看Snabbdom源码，可以对这块内容有更加深入的了解。 1、什么是Virtual DOMVirtual Dom(虚拟DOM),是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM. 我们为什么用虚拟DOM来模拟真实的DOM呢？ 因为我们知道一个DOM对象中的成员是非常多。所以创建Dom对象的成本非常高。 如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少，成本也就低了。 2、为什么使用Virtual DOM 手动操作Dom比较麻烦，还需要考虑浏览器兼容性问题，虽然有Jquery等库简化DOM操作，但是随着项目的复杂度越来越高，DOM操作复杂提升，既要考虑Dom操作，还要考虑数据的操作。 为了简化DOM的复杂操作于是出现了各种的MVVM框架，MVVM框架解决了视图和状态的同步问题，也就是当数 ...