1.项目目录

2.路由

根目录/routes/index.js -- 首页

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 -- 后端管理

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 -- 用户

/**
* 用户的增加修改删除
*/
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 -- 轮播图

/**
* 轮播图的增加修改删除
*/
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 -- 新闻分类

/**
* 新闻分类的增加修改删除
*/
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);

.

koa 路由、视图模块化(二)的更多相关文章

  1. Laravel教程 二:路由,视图,控制器工作流程

    Laravel教程 二:路由,视图,控制器工作流程 此文章为原创文章,未经同意,禁止转载. View Controller 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就 ...

  2. koa 路由模块化(一)

    1.项目目录 2.入口文件 根目录/app.js /** * koa 路由模块化 */ const Koa = require('koa'); const router = require('koa- ...

  3. koa 路由配置

    Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等) 组成的,涉及到应用如何响应客户端对某个网站节点的访问. 通俗的讲:路由就是根据不 ...

  4. Vue-初步了解vue-router的三要素:路由map 、路由视图、路由导航

    安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...

  5. Xamarin XAML语言教程模板视图TemplatedView(二)

    Xamarin XAML语言教程模板视图TemplatedView(二) (2)打开MainPage.xaml文件,编写代码,将构建的控件模板应用于中TemplatedView.代码如下: <? ...

  6. 用Decorator控制Koa路由

    在Spring中Controller长这样 @Controller public class HelloController{ @RequestMapping("/hello") ...

  7. Eclipse的Debug各种视图介绍(二)

    本文链接:https://blog.csdn.net/u011781521/article/details/55000066    http://blog.csdn.net/u010075335/ar ...

  8. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  9. Laravel 5系列教程二:路由,视图,控制器工作流程

    免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就要进入Laravel ...

随机推荐

  1. 4、nfs(存储服务器)

    1.NFS基本概述 NFS是Network File System的缩写及网络文件系统.NFS的主要功能是通过局域网络让不同的主机系统之间可以共享文件或目录. 通常中小企业首选NFS作为集群架构的存储 ...

  2. JAVA程序员成长路线图

    https://www.cnblogs.com/godtrue/p/4283708.html

  3. Ubuntu .tar.xz文件解压缩命令

    1.解压缩.tar.xz文件 这是两层压缩,外面是xz压缩方式,里层是tar压缩 所以可以分两步实现解压 $ xz -d filename.tar.xz $ tar -xvf filename.tar ...

  4. Educational Codeforces Round 71 (Rated for Div. 2) E XOR Guessing (二进制分组,交互)

    E. XOR Guessing time limit per test1 second memory limit per test256 megabytes inputstandard input o ...

  5. ClassLoader心得

              我们都知道,jvm执行的代码,都是通过jvm加载系统加入的.加载系统的第一步是通过ClassLoader加载class二进制信息,jvm规范中并没有规定class的来源类型,这就给 ...

  6. Java应用的理解

    一.程序 对每个程序来说,不管用什么语言开发出来的,他的功用分为三种: 1.接收输入流 2.处理数据 3.传出输出流 接收输入流,包括从网络.文件.用户输入等:传出输出流,包括网络.文件.显示设备等: ...

  7. 【踩坑记录】 使用form标签的 reset() 方法报错原因及处理方法

    如果form标签内包含了 id 为 reset 的元素,在调用form的 reset() 方法时,会报xxx.reset is not a function,原因是在调用form的 reset() 方 ...

  8. JAVA bean为何要实现序列化

    简而言之:序列化,就是为了在不同时间或不同平台的JVM之间共享实例对象.即序列化出于两个原因:①.用于持久化到磁盘上:②.用于作为数据流在网络上传输. 所谓的Serializable,就是java提供 ...

  9. 【JS】类型检测

    本文首发于我的个人博客 : http://cherryblog.site/ 前言 js 中的类型检测也是很重要的一部分,所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检 ...

  10. redis配置主从备份以及主备切换方案配置(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/gsying1474/article/de ...