怎么快速搭建一个node koa2 ssr项目?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1.创建目录 koa2
2.npm init 创建 package.json,然后执行 npm install
3.通过 npm install koa 安装 koa 模块
4.通过 npm install supervisor 安装supervisor模块, 用于node热启动
5.在根目录下中新建 index.js 文件,作为入口文件, 内容如下:
const Koa = require('koa'); // Koa 为一个class const app = new Koa(); app.use(async (ctx, next) => { await next(); ctx.response.body = 'Hello, koa2!'; }); app.listen(9527, () => { console.log('This server is running at http://localhost:' + 9527) })
6.配置package
{ "name": "koa", "version": "1.0.0", "description": "", "main": "koa.js", "scripts": { "serve": "supervisor koa.js" }, "author": "", "license": "ISC", "dependencies": { "koa": "^2.7.0", "supervisor": "^0.12.0" } }
7 . 启动
npm run serve
cnpm i koa-router const router = new Router(); // 实例化路由 router.get('/', async (ctx, next) => { ctx.response.body = '<h6>好家伙</h6>'; }); app.use(router.routes());
路由参数
//请求地址 www.*****/sss?from=1 router.get('/hello/:name', async (ctx, next) => { var name = ctx.params.name; // 获取请求参数 sss var from = ctx.query.from; // 1 ctx.response.body = `<h6>好家伙, ${name}!</h6>`; });
post
const bodyParser = require('koa-bodyparser'); app.use(bodyParser()); router.post('/login', async (ctx, next) => { let name = ctx.request.body.name; let password = ctx.request.body.password; console.log(name, password); ctx.response.body = `<h5>好家伙, ${name}!</h5>`; });
get
router.get('/', async (ctx, next) => { ctx.response.body = '<h5>好家伙</h5>' });
使用html模板,将html从js中分离出去,有助于项目开发和管理。而且,html模板在koa2中,必须通过中间件来实现。
nunjucks.configure(resolve(__dirname, 'views'), { autoescape: true }); app.use(views(__dirname + '/views', { map: { html: 'nunjucks' } }));
静态资源环境在服务端是十分常用的一种服务,在后台开发中不仅有需要代码处理的业务逻辑请求,也会有很多的静态资源请求。比如请求js,css,jpg,png这些静态资源请求。也非常的多,有些时候还会访问静态资源路径。
app.use( staticCache(resolve("dist"), { maxAge: 365 * 24 * 60 * 60 }) )
入口文件(index.js)
const Koa = require('koa') const bodyParser = require('koa-bodyparser'); const staticCache = require('koa-static-cache'); const views = require('koa-views') const {resolve} = require('path') const R = require('ramda') const MIDDLEWARES = ['router'] //中间件配置文件 const nunjucks = require('nunjucks') const logsUtil = require('../utils/logs.js'); //中间件导入 路由导入 const useMiddlewares = (app) => { R.map( R.compose( R.forEachObjIndexed( initWith => initWith(app) ), require, name => resolve(__dirname, `./middlewares/${name}`) ) )(MIDDLEWARES) } ;(async () => { const app = new Koa(); // view engine setup nunjucks.configure(resolve(__dirname, 'views'), { autoescape: true }); //views with nunjucks app.use(views(__dirname + '/views', { map: { html: 'nunjucks' } })); app.use(bodyParser()); app.use(logsUtil.accessInfo()); //访问日志 //静态资源配置缓存 app.use( staticCache(resolve("dist"), { maxAge: 365 * 24 * 60 * 60 }) ) app.on('error', err => { }); app.use(async (ctx,next) => { await next() if(parseInt(ctx.status) === 404){ ctx.response.redirect("/404") } }); await useMiddlewares(app) //导入中间件 app.listen(9527,() => { console.log('Server running on port %d', 9527); }) })()
1.新建middlewares文件夹 在下面新建router.js
2.新建lib文件夹 在下面新建decorator.js
3.新建routes下面新建views.js
router.js
const { Route } = require('../lib/decorator') const { resolve } = require('path') export const router = app => { const apiPath = resolve(__dirname, '../routes') const router = new Route(app, apiPath); router.init() }
decorator.js
const Router = require('koa-router') const { resolve } = require('path') const _ = require('lodash') const glob = require('glob') const R = require('ramda') const symbolPrefix = Symbol('prefix') const routerMap = new Map() const isArray = c => _.isArray(c) ? c : [c] export class Route { constructor (app, apiPath) { this.app = app this.apiPath = apiPath this.router = new Router() } init () { glob.sync(resolve(this.apiPath, './**/*.js')).forEach(require) for (let [conf, controller] of routerMap) { const controllers = isArray(controller) let prefixPath = conf.target[symbolPrefix] if (prefixPath) prefixPath = normalizePath(prefixPath) const routerPath = prefixPath + conf.path this.router[conf.method](routerPath, ...controllers) } this.app.use(this.router.routes()) this.app.use(this.router.allowedMethods()) } } const normalizePath = path => path.startsWith('/') ? path : `/${path}` const router = conf => (target, key, descriptor) => { conf.path = normalizePath(conf.path) routerMap.set({ target: target, ...conf }, target[key]) } export const controller = path => target => (target.prototype[symbolPrefix] = path) export const get = path => router({ method: 'get', path: path }) export const post = path => router({ method: 'post', path: path }) export const put = path => router({ method: 'put', path: path }) export const del = path => router({ method: 'delete', path: path }) export const use = path => router({ method: 'use', path: path }) export const all = path => router({ method: 'all', path: path })
view.js
const { controller, get } = require('../lib/decorator') @controller('') export class viewController { @get('/') async home(ctx, next) { await ctx.render('index', { }) } @get('/service') async enter(ctx, next) { await ctx.render('service', { title: '', }) } @get('/404') async pageNUll(ctx, next) { await ctx.render('404', { title: ' ', }) } }
cnpm i koa-log4 config/logs.jsvar path = require('path'); //日志根目录 var baseLogPath = path.resolve(__dirname, '../logs') /*报错输出日志*/ //错误日志目录、文件名、输出完整路径 var errorPath = "/error"; var errorFileName = "error"; var errorLogPath = baseLogPath + errorPath + "/" + errorFileName; /*请求数据得到响应时输出响应日志*/ //响应日志目录、文件名、输出完整路径 var responsePath = "/response"; var responseFileName = "response"; var responseLogPath = baseLogPath + responsePath + "/" + responseFileName; /*操作数据库进行增删改等敏感操作记录日志*/ //操作日志目录、文件名、输出完整路径 var handlePath = "/handle"; var handleFileName = "handle"; var handleLogPath = baseLogPath + handlePath + "/" + handleFileName; /*访问级别日志*/ var accessPath = "/access" var accessFileName = "access"; var accessLogPath = baseLogPath + accessPath + "/" + accessFileName; /*访问级别日志*/ var reqPath = "/req" var reqFileName = "req"; var reqLogPath = baseLogPath + reqPath + "/" + reqFileName; module.exports = { //日志格式等设置 appenders: { "rule-console": {"type": "console"}, "errorLogger": { "type": "dateFile", "filename": errorLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", "path": errorPath }, "resLogger": { "type": "dateFile", "filename": responseLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", // "maxLogSize": 204800, // "numBackups": 3, "path": responsePath }, "handleLogger": { "type": "dateFile", "filename": handleLogPath,//生成文件路径和文件名 "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", // "maxLogSize": 204800, // "numBackups": 3, "path": handlePath }, "accessLogger": { "type": "dateFile", "filename": accessLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", // "maxLogSize": 204800, // "numBackups": 3, "path": accessPath }, "reqLogger": { "type": "dateFile", "filename": reqLogPath, "pattern": "-yyyy-MM-dd.log", "alwaysIncludePattern": true, "encoding": "utf-8", // "maxLogSize": 204800, // "numBackups": 3, "path": reqPath }, }, //供外部调用的名称和对应设置定义 categories: { "default": {"appenders": ["rule-console"], "level": "all"}, "resLogger": {"appenders": ["resLogger"], "level": "info"}, "errorLogger": {"appenders": ["errorLogger"], "level": "error"}, "handleLogger": {"appenders": ["handleLogger"], "level": "all"}, "accessLogger": {"appenders": ["accessLogger"], "level": "all"}, "reqLogger": {"appenders": ["reqLogger"], "level": "error"} }, "baseLogPath": baseLogPath }
log.js
var log4js = require('koa-log4'); var logsConfig = require('../config/logs.js'); //加载配置文件 log4js.configure(logsConfig); //调用预先定义的日志名称 var resLogger = log4js.getLogger("resLogger"); var errorLogger = log4js.getLogger("errorLogger"); var handleLogger = log4js.getLogger("handleLogger"); var reqLogger = log4js.getLogger("reqLogger"); var consoleLogger = log4js.getLogger(); exports.accessInfo = () => log4js.koaLogger(log4js.getLogger('accessLogger'));//访问日志 exports.logInfo = (data) => {consoleLogger.info(data)} ............. .............
关于怎么快速搭建一个node koa2 ssr项目问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。