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

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"> 


 

nodejs练习笔记(五)域名解析&MySQL数据库应用:https://blog.csdn.net/qq_35831134/article/details/109341061

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考链接:https://www.cnblogs.com/0314dxj/p/11359428.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sam-zy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值