您的位置:

Easyweb:基于Egg和Layui的Web全栈开发框架

一、Easywebprint

Easywebprint是Easyweb集成的一个自定义日志打印模块,它通过重写Egg框架中的Logger组件来实现日志的自定义输出。

可以通过配置文件来指定输出日志的级别和输出位置,具体设置如下:


// config.default.js
config.logger = {
  outputJSON: false,
  level: 'DEBUG',
  consoleLevel: 'DEBUG',
  dir: path.join(appInfo.baseDir, 'logs'),
};

在应用中就可以直接使用全局变量logger来写日志了,如下:


async index() {
  const { ctx, logger } = this;
  logger.info('index action');
  await ctx.render('index');
}

二、Easywebpack egg

Easywebpack是一个基于Webpack的模块化打包工具,它能够将多种不同类型的资源组合在一起进行打包。Easywebpack egg则是Easywebpack的一个Egg插件,它可以为Egg应用提供强大的Webpack构建和压缩功能。

安装和配置Easywebpack egg需要步骤如下:


$ npm install easywebpack egg-webpack webpack --save-dev

// plugin.js
exports.webpack = {
  enable: true,
  package: 'egg-webpack',
};

在应用中直接使用Webpack进行构建即可,如下:


// webpack.config.js
module.exports = {
  entry: {
    app: './src/index.js',
  },
};

// build.js
const Easywebpack = require('easywebpack');
const webpackConfig = require('./webpack.config');
const easyWebpack = new Easywebpack(webpackConfig);

async function build() {
  await easyWebpack.run();
}

build();

三、Easywebpack require png

Easywebpack require png是Easywebpack的一个插件,它可以将PNG格式的图片转换为Base64编码,从而优化应用的加载速度。

需要先安装easy-plugin-img到项目中,并在easywebpack.config.js配置文件中进行设置:


// easywebpack.config.js
{
  plugins: ['easy-plugin-img']
}

然后就可以在应用中使用像下面这样的代码:


import logo from '../assets/logo.png';
const img = new Image();
img.src = logo;
document.body.appendChild(img);

四、Easyweb和Layui关系

Easyweb是基于Egg和Layui的Web全栈开发框架,它利用Egg提供的目录约定和插件机制,实现了一系列易于使用的功能模块,如路由、控制器、数据库操作和模板渲染等。

而Layui是一款经典模块化前端框架,它与Easyweb结合使用可以帮助Web开发人员快速搭建出美观、易维护、高性能的Web应用。

下面是一个示例:


// app/controller/home.js
const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    await this.ctx.render('home', { title: 'welcome to easyweb' });
  }
}

module.exports = HomeController;

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

// app/view/home.html



  
   
  {{ title }}
  <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.3.0/css/layui.css">


  
   

{{ title }}

<script src="//cdn.bootcss.com/layui/2.3.0/layui.js"></script>