nodejs练习笔记（四）使用koa-generater脚手架搭建项目

最新推荐文章于 2024-05-15 10:05:59 发布

sam-zy

最新推荐文章于 2024-05-15 10:05:59 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/qq_35831134/article/details/109339826

版权

nodejs基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

koa-generater脚手架搭建项目

一、使用koa-generater脚手架搭建项目

1.打开cmd，安装koa脚手架

$ npm install koa-generator -g

2.创建项目，sam：项目名称

$ koa2 sam -e --ejs

3.安装当前脚手架中的第三方包(可能cd到sam文件下)

$ npm install

4.cd到sam文件下，运行项目 npm start

5.这样直接访问127.0.0.1:3000就可以了

二、目录结构

bin里的www为项目入口，通过它引入app.js配置内容。

node_moudel为模块加载生成的文件夹,里面全是模块功能的源码。

public公共文件夹,放一些样式、页面js逻辑、图片。

routers路由，功能为分发请求。

views为视图文件，jade是一个文本格式，其内容还可以是我们最熟悉的html。

app.js和package.json是配置文件

打开www文件把端口修改一下

三、配置路由

1.网页模板加载html文件

在views新建index.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>我的第一个网页</title>
</head>
<body>
    <h1>我的第一个网页标题</h1>
    <p>我的第一个段落。</p>
    <p><font color="blue">我的第一个网页，蓝色文字。</font></p>
</body>
</html>

在app.js增加以下代码：

const fs = require('fs');
app.use(async (ctx, next) => {
 if (ctx.request.path === '/') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});

app.js

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const fs = require('fs');
const index = require('./routes/index')
const users = require('./routes/users')
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))
//index.html文件
app.use(async (ctx, next) => {
 if (ctx.request.path === '/') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});
// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});
module.exports = app

2..koa-router 引入路由中间件koa-router

使用koa-views中间件来加载html文件

$ npm install koa-router

index.js

const router = require('koa-router')()
const fs = require('fs');
router.get('/', async (ctx, next) => {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
});
router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})

router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})

module.exports = router

app.js

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const index = require('./routes/index')
const users = require('./routes/users')
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
 // extension: 'ejs'
}))
// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});
module.exports = app

3.koa-views，使用koa-views中间件来加载html文件，

$ npm install koa-views -S

修改app.js文件

app.use(views(__dirname + '/views', {
// extension: 'ejs'
}));
index.js

const router = require('koa-router')()
const fs = require('fs');
router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})

router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})

module.exports = router

四、静态资源加载

在实际项目中，需要加载很多静态文件，如css、js文件，但是你没有使用插件，静态资源是无法显示的，举个例子：

使用koa-static -S加载静态资源

$ npm install koa-static -S

在根目录下新建public文件，在public文件下新建css文件，css文件下新建index.css文件

index.css

h1{
    color: red;
}

在index.html相对引入, 再运行就可以看到红色的字体了。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>我的第一个网页</title>
</head>
<body>
    <h1>我的第一个网页标题</h1>
    <p>我的第一个段落。</p>
    <p><font color="blue">我的第一个网页，蓝色文字。</font></p>
</body>
</html>
 
<link rel="stylesheet" href="/css/index.css">