开始做一个koa+mongodb项目（二）koa2搭建基本页面

一、安装

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项目（三）权限登录