Code Monkey home page Code Monkey logo

images's Introduction

Koa

基于 Node.js 平台的下一代 Web 开发框架。

官网

使用

node ./app.js

静态资源

koa-static

npm i koa-static -S

修改app.js

const koaStatic = require('koa-static');
app.use( koaStatic(path.join(__dirname, 'assets')) );

指定静态资源访问路径: /public/...

const koaStatic = require('koa-static');
const mount = require('koa-mount');

app.use(mount('/public' koaStatic(__dirname , 'public')));

路由

koa-router

npm i koa-router
const router = new Router();
router.get('/', (ctx, next)=>{
    // ...
})

app.use(router.routes());
app.use(router.allowedMethods());

视图解析

koa-views

npm i koa-views
app.use(views(path.join(__dirname, 'views'),{
  extension:'ejs'
}));

router.get('/', (ctx, next)=>{
    // ...
    const props = { ... };
    ctx.render('index',{ props })
})

代理

koa2-proxy-middleware

npm  i koa2-proxy-middleware
const proxy = require('koa2-proxy-middleware');

app.use(proxy({
  targets: {
    '/api/(.*)': {
        target: 'http://target/', //需要代理的地址
        changeOrigin: true,
        pathRewrite: { 	
            '/api': ""
        }
    }
  }
}))

压缩

  • sharp

    对图片压缩

    // const readStream = ctx.req.pipe(sharp());
    // const writeStream = readStream.pipe(ctx.res);
    // // 设置图片质量为70%
    // await sharp(readStream).resize(500).toFile(writeStream, { quality: 50 });

app.use(async (ctx,next)=>{
  ctx.type = 'png';
  ctx.body = await sharp(imagePath).resize(500).png({compressionLevel: 5}).toBuffer();
})
  • compress

对内容压缩(图片貌似不行) 配置没效果,但可以起作用

npm i koa-compress
const compress = require('koa-compress');

app
  .use(compress({
    filter: mimeType=> /javascript/.test(mimeType),
    threshold: 1024,
    gzip: true
  }))

其他中间件

  • koa2-connect-history-api-fallback
    将所有未匹配的HTTP请求重定向到指定的静态HTML页面,比如index.html
npm i koa2-connect-history-api-fallback
const  history = require('koa2-connect-history-api-fallback');

app.use(history({ 
     whiteList: ['/api']
 }));
  • koa-bodyparser
    处理客户端提交的数据,并封装到ctx.request.body 如果是附件,需要使用koa-multer
npm i koa-bodyparser
const bodyParser = require('koa-bodyparser');

app.use(bodyParser());

app.use((ctx,next)=>{
    const body = ctx.request.body;
    await next();
})
  • koa-json 处理Json响应数据,美化输出json数据格式?感觉没什么用
npm i koa-json
const json = require('koa-json');

app.use(json());

技术点

js库很多,但不一定需要用到,当然熟悉了原理就是利器,否则...

  • jquery
  • imagesloaded 图片加载完成后处理
  • turn.js 翻页效果
  • Tween.js 渐变
  • Bounce.js 页面设计器
  • Move.js 缩放、倾斜、移动等动效
  • Anime.js
  • Mo.js 形状,漩涡,爆发和交错,
  • Matter.js 物理运动、碰撞、惯性动画库
  • parallax.js 视差效果
  • Dynamics.js 控制持续时间、频率、预期尺寸和强度等动效
  • Single Element CSS Spinners 加载中特性
  • p5.js
  • Babylon.js

images's People

Contributors

sucls avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.