2020.03.18

• 一、安装
• 安装依赖

二、新建文件

• app.js文件
• routes文件夹

三、启动服务

• 1、运行
• 2、依次输入localhost:3000/admin

四、引入静态资源

五、介绍art-template

• （一）安装、配置
• 1、koa art-template高性能模板引擎的使用

（二）_HOST_动态获取静态资源

六、局部分离

一、安装

1.先安装好Node.js，koa，数据库等一些基本的开发环境。可看我之前的博文
2.安装好以后，打开一个cmd，开始新建我们的项目文件夹

cmd进入空文件夹，建立一个

pack.json

文件。

npm init --yes

安装依赖

依次安装好koa-router、koa-static等依赖，或者可以直接在package.json里复制以下我打好的代码，再进行

npm install

一键安装（可用cnpm更快速）

{
"name": "teach",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"art-template": "^4.13.2",
"koa-art-template": "^1.1.1",
"koa-bodyparser": "^4.3.0",
"koa-router": "^8.0.8",
"koa-session": "^6.0.0",
"koa-static": "^5.0.0",
"koa2": "^2.0.0-alpha.7"
}
}

二、新建文件

app.js文件

routes文件夹

Routes文件夹先新建好这几个js做准备，routes用于放置我们的路由页面

以

index.js

示例

var router = require('koa-router')();

router.get('/',async (ctx)=>{

ctx.body="首页";

})

module.exports=router.routes();

其他页面如上，回到

app.js

，引入koa模块，配置好路由，启动端口

//引入 koa模块

var Koa=require('koa'),

router = require('koa-router')(),

//引入模块

var index=require('./routes/index.js');

var api=require('./routes/api.js');

var admin=require('./routes/admin.js
');

router.use('/admin',admin);

router.use('/api',api);

router.use(index);

app.use(router.routes());
/*启动路由*/

app.use(router.allowedMethods());

app.listen(3000);

三、启动服务

1、运行

在浏览器输入localhost:3000
如显示首页则启动成功

2、依次输入localhost:3000/admin

localhost:3000/api
如无问题，则路由配置成功。

四、引入静态资源

静态页面是在站长之家下的前后台页面。
https://www.chinaz.com/

1、首先安装koa-static 、koa-art
2、在app.js引入
3、新建public文件夹，再底下新建一个admin
4、把静态资源引入到Public（CSS、JS、images）
5、新建views文件夹，渲染静态资源

~~ ~~

五、介绍art-template

（一）安装、配置

依照npm官方文档，我们按文档配置好就可以了，

1、koa art-template高性能模板引擎的使用

2.配置中间件

render(app, {
root: path.join(__dirname, 'views'),
extname: '.html',
debug: process.env.NODE_ENV !== 'production'
});

3.渲染
await ctx.render(‘index’, { title:‘lqs’ })

（二）_HOST_动态获取静态资源

关于__HOST__
就是一个变量，用于全局配置
不一定要用这个名字，你可以自行取名。
新下载下来的站长之家模板需要更改路径，如何动态获取静态资源？
此时通过log打印出来request，以下就是这个host

这时候我们在app.js配置全局的变量，并绑定数据配置到我们的页面

~~ ~~

六、局部分离

在静态页面中，
把header、footer、nav侧边栏分离，
再用分别引入进去
因为这些都在几个页面都是一样的头部和底部
这样分离出去就方便了修改代码，只需要修改一个页面而不是多个。
此处省略
引入

Heade引入r示例

{{include ‘admin/public/header.html’}}

这时候我们的页面就大概配置好啦。

下一章：开始做一个koa+mongodb项目（三）权限登录