koa 路由、視圖模塊化（二）

時間 2019-11-10

原文原文鏈接

1.項目目錄javascript

2.路由html

根目錄/routes/index.js -- 首頁java

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

router.get('/', async (ctx) => {
  await ctx.render('default/index');
})

// 注意 前臺和後臺匹配路由的寫法不同
router.get('/case', async (ctx) => {
  ctx.body = '案例'
})

router.get('/about', async (ctx) => {
  await ctx.render('default/about');
})

module.exports = router.routes();

根目錄/routes/api.js -- api接口後端

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

router.get('/', async (ctx) => {
  ctx.body = {
    "title": "這是一個api"
  }
})

router.get('/newslist', async (ctx) => {
  ctx.body = {
    "title": "這是一個新聞接口"
  }
})

router.get('/focus', async (ctx) => {
  ctx.body = {
    "title": "這是一個輪播圖的api"
  }
})

module.exports = router.routes();

根目錄/routes/admin.js -- 後端管理api

const router = require('koa-router')();
const user = require('./admin/user.js');
const focus = require('./admin/focus.js');
const newscate = require('./admin/newscate.js');

// 配置admin的子路由(層級路由)
router.get('/', async (ctx) => {
  ctx.body = '後臺管理系統首頁';
})

router.use('/user', user)
router.use('/focus', focus)
router.use('/newscate', newscate)

module.exports = router.routes();

根目錄/routes/admin/user.js -- 用戶app

/**
 * 用戶的增長修改刪除
 */
const router = require('koa-router')();

router.get('/', async (ctx) => {
  // ctx.body = '用戶首頁';
  await ctx.render('admin/user/index');
})

router.get('/add', async (ctx) => {
  await ctx.render('admin/user/add');
})

router.get('/edit', async (ctx) => {
  await ctx.render('admin/user/edit');
})

router.get('/delete', async (ctx) => {
  ctx.body = '刪除用戶';
})

module.exports = router.routes();

根目錄/routes/admin/focus.js -- 輪播圖koa

/**
 * 輪播圖的增長修改刪除
 */
const router = require('koa-router')();

router.get('/', async (ctx) => {
  await ctx.render('admin/focus/index');
})

router.get('/add', async (ctx) => {
  await ctx.render('admin/focus/add');
})

router.get('/edit', async (ctx) => {
  await ctx.render('admin/focus/edit');
})

router.get('/delete', async (ctx) => {
  ctx.body = '刪除輪播圖';
})

module.exports = router.routes();

根目錄/routes/admin/newscate.js -- 新聞分類async

/**
 * 新聞分類的增長修改刪除
 */
const router = require('koa-router')();

router.get('/', async (ctx) => {
  ctx.body = '新聞分類首頁';
})

router.get('/add', async (ctx) => {
  ctx.body = '增長新聞分類';
})

router.get('/edit', async (ctx) => {
  ctx.body = '編輯新聞分類';
})

router.get('/delete', async (ctx) => {
  ctx.body = '刪除新聞分類';
})

module.exports = router.routes();

3.視圖模塊化

根目錄/views/default/index.html網站

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h2>這是一個網站的首頁</h2>
  <div>
    box
  </div>
</body>

</html>

4.入口文件

/**
 * koa 路由模塊化
 */
const Koa = require('koa');
const router = require('koa-router')();
const path = require('path');
const render = require('koa-art-template');
// 引入子模塊(子路由)
const admin = require('./routes/admin.js');
const api = require('./routes/api.js');
const index = require('./routes/index.js');

// 實例化
var app = new Koa();

// 配置 koa-art-template 模板引擎
render(app, {
  root: path.join(__dirname, 'views'),
  extname: '.html',
  debug: process.env.NODE_ENV !== 'production'
})

// 配置路由
// router.use('/', index)
router.use(index)

/**
 * /admin 配置子路由(層級路由)
 * /admin/user
 */
router.use('/admin', admin);

/**
 * /api/newslist 新聞列表的api
 */
router.use('/api', api); /*在模塊裏面暴露路由而且啓動路由*/

// 啓動路由
app.use(router.routes()).use(router.allowedMethods())

app.listen(8008);