分享前端工程化、动效魔法与性能之舞！

在开发中，有时会遇到这种问题：通过浏览器去访问一个接口可以正常获取到信息，但是通过点击事件去请求这个接口却无法正常获取到想要的信息。此时，你可能就是遇到跨域问题了， 在Egg中的解决方案如下：1. 安装插件npm i egg-cors --save2. 配置插件// config/plugin.jsexports.cors = { enable: true, package: 'egg-cors',};3. 配置白名单// config/confi......

1.接入微信支付应用1. 必须是个体工商户、企业、政府及事业单位之一。2. 点击 微信支付商户平台 ，点击“接入微信支付”以便注册微信支付商户号，扫码验证后创建申请单、填写商户资料、提交申请后给官方审核，审核时间约为1到5个工作日。3. 官方审核通过后就会发送审核通过的邮件到你申请时填写的邮箱，邮件里就会包含应用APPID和微信支付商户号等信息。4. 通过邮件的信息登录商户平台，选择“账户中心”选项卡，点击“API密钥”菜单，首次打开时会要求安装操作证书，按要求安装完成后再次打开即可设置密.

1. 接入支付宝应用1.必须注册企业支付宝账户，如果已有企业支付宝账户忽略此步骤；2. 在支付宝开放平台，申请应用、填写名称、上传应用图标，在功能列表中选择或添加想要的支付功能类型；3. 打开支付宝文档中心，下载对应系统的签名工具，签名工具下载存放电脑上的路径不能有中文和空格。点击RSA签名验签工具，在软件打开的对话框中点击“生成密钥”，此时就会生成商户的应用公钥和应用私钥，并自动生成保存有应用公钥和应用私钥的文件。复制应用公钥到申请的应用中设置应用公钥，设置保存后就会生成一个支付宝公钥；.

1. 在模板文件中引入分页插件及其依赖。<!-- 引入插件和插件的依赖--><link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css"><script type="text/javascript" src="/public/admin/bootstrap/js/jquery-.........

1. 在HTML文件中引入需要的文件。<!-- 引入批量上传的插件 --><link href="/public/admin/diyUpload/css/webuploader.css" rel="stylesheet" type="text/css" /><link href="/public/admin/diyUpload/css/diyUpload.c...

1. 在HTML文件中引入需要的文件。<!-- 引入开源的图标库文件 --><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- 引入编辑器............

1. 定义模板文件<form action="/admin/focus/doAdd?_csrf=<%=csrf%>" method="post" enctype="multipart/form-data"> <ul> <li> 分类：<select name="type" id="type" style="widt...

1. 单文件上传1. 模板文件<!-- csrf为egg所提供的安全机制，需要在模板文件上绑定--><form action="/admin/focus/doSingleUpload?_csrf=<%=csrf%>" method="post" enctype="multipart/form-data"> <ul> .........

1. 安装模块npm i egg-mysql --save2. 配置模块// config/plugin.js'use strict';exports.ejs = { enable: true, package: 'egg-view-ejs',};// 配置插件exports.mysql = { enable: true, packag...

1. 安装模块npm i egg-mongoose --save2.配置 egg-mongoose 插件// config/plugin.js'use strict';exports.ejs = { enable: true, package: 'egg-view-ejs',};// 配置egg-mongoose插件exports.mongoose = ...

1. 安装模块npm i egg-mongo-native --save2. 配置插件// config/plugin.js'use strict';exports.ejs = { enable: true, package: 'egg-view-ejs',};// 添加egg-mongo-native插件exports.mongo = { ...

Cheerio 是 node.js 的抓取页面的模块，为服务器特别定制的，快速、灵活、适合各种 Web 爬虫程序，可以让我们用 JQuery 语法来解析爬取的网页数据。1. 安装模块。cnpm i cheerio --save2. 引入模块。var cheerio = require('cheerio');3.加载要解析的内容，并处理汉字乱码问题。const $ =............

在项目开发中，有许多场景需要执行一些定时任务，Egg 提供了一套机制来让定时任务的编写和维护更加优雅。1. 定时任务的使用场景1. 定时上报应用状态。2. 定时从远程接口更新本地缓存。3. 定时进行文件切割、临时文件删除。2. 定时任务的写法所有的定时任务都统一存放在app/schedule目录下，每一个文件都是一个独立的定时任务，可以配置定时任务的属性和要执行的...............

1. 控制器的继承项目中多个控制器使用公共的方法时，可以将这些方法写在一个基类控制器中，其它的控制器全部继承于这个基类控制器，这样基类中的方法就可以在其它的控制器中使用了。定义基类控制器// app/core/base.js'use strict';const Controller = require('egg').Controller;// 所有控制器的基类class Ba.........

1. 路由的写法1. 路由 + 控制器，最常用的写法。router.get('/admin/user',controller.admin.user.index);2. 路由别名 + 路由 + 控制器。router.get('adminUser', '/admin/user', controller.admin.user.index);3. 路由 + 中间件 + 控制器。.........

1. 自定义中间件全局配置1. 在 middleware 文件夹中定义中间件文件，如 auth.js，并实现自定义的功能。module.exports = (option, app) => { return async function auth(ctx, next) { // 获取配置所传的参数 console.log(option); .........

Session是另一种记录客户状态的机制，不同的是 cookie 保存在客户端浏览器中，而session 保存在服务器上。 当浏览器访问服务器并发送第一次请求时，服务器端会创建一个 session 对象，生成一个类似于 key,value 的键值对， 然后将 key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带 key(cookie)，找到对应的 session(valu............

Cookie 可以实现同一个浏览器访问同一个域的时候不同页面之间的数据共享，并且在关闭浏览器重新打开以后数据还存在，即实现数据的持久化，在Egg中设置与获取cookie比较方便。最简单的设置：this.ctx.cookies.set('username','Lucy');以上设置由于没有加任何的配置选项，当浏器关闭以后cookie就销毁了，另外这种最简单的设置也没法将cookie设置.........

用过Koa的码农都知道，在Koa中获取POST提交的数据需要配置第三方的中间件，而Egg继承于Koa，在这一方面做了优化，获取POST提交的数据不需要再配置其它的中间件了，并添加了安全机制 CSRF 的防范，在Egg中获取用户提交的POST数据主要有以下两种方法。第一种：在用户访问需要POST提交数据的页面时，返回CSRF密钥，当用户提交数据时，将CSRF密钥一起返回，以下是具体的实现。1.........

中间件是在匹配路由前、匹配路由后做的一系列的操作，Egg 是基于 Koa 实现的，所以 Egg 的中间件形式和 Koa 的中间件形式是一样的，都是基于洋葱圈模型，下面用一个实例来介绍在Egg中如何使用中间件，以屏蔽用户IP为例。首先在 config 文件夹中的 config.default.js 中配置中间件。'use strict';module.exports = appInfo .........

Egg 框架提供了多种扩展点扩展自身的功能，在开发中，我们既可以使用已有的扩展 API 来方便开发，也可以对扩展点进行自定义扩展，进一步加强框架的功能，Egg 中的扩展点有以下5个：1. Application扩展文件为 application.js，存放于extend文件夹下。// 外部可以通过 this.app.getUrl() 调用方法module.exports = { .........

Egg 提供了 this.ctx.curl 方法获取远程的数据，让我们可以轻松的实现一个简单的爬虫功能，以下是一个使用的具体示例。首先在config文件夹下的 config.default.js 中定义要获取数据的域名。'use strict';module.exports = appInfo => { const config = exports = {}; // us.........

Egg是一个标准的MVC框架，其中service就代表model层，专门用于和数据打交道，本篇将讲解如何在egg中定义service并在controller中调用。1. 使用方法首先在service文件夹下定义服务文件news.js，并在文件中添加方法getNewsList。'use strict';const Service = require('egg').Service;c.........

egg-view-ejs 是Egg 中比较常用的模板引擎，虽然性能不是很高，但是它的语法规则却是极其的简单，使用起来很方便，下面简单介绍一下它的用法。1. 安装模板引擎npm i egg-view-ejs --save2. 在 config 文件夹下找到 plugin.js 文件，导出ejs'use strict';// 导出 ejsexports.ejs = { .........

Egg中获取路由传参与Koa差不多，主要的区别在于Egg中的控制器继承于Controller，所以在获取传参的时候要修改 this 的指向，下面用一个实例来说明如何获取路由传参。首先在app文件夹下的 router.js 中添加路由。'use strict';module.exports = app => { const { router, controller } = .........

1.Egg.js 目录结构介绍2.Egg.js 目录约定规范3.VS Code + Egg 开发工具配置

1.Egg.js 是什么？Egg.js 是阿里旗下产品，基于 Node.js 和 Koa ，是一个 Node.js 的企业级应用开发框架，可以帮助开发团队和开发人员降低开发和维护成本。 Express 和 Koa 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常适合做个人项目，但框架本身缺少约定，标准的 MVC 模型会有各种千奇百怪的写法，而Egg 按照约定进行开发，奉行约定..............................