搭建node项目目录以及基本的文件

初始化package.json文件

执行下面命令生成package.json文件

npm init --yes

创建项目目录

创建路由目录routes,存放静态资源目录public,视图目录views

安装项目所需的依赖

"dependencies": {
"art-template": "^4.12.2",
"koa": "^2.5.0",
"koa-art-template": "^1.1.1",
"koa-bodyparser": "^4.2.0",
"koa-router": "^7.4.0",
"koa-session": "^5.8.1",
"koa-static": "^4.0.2",
"mongodb": "^3.0.4"
}

app.js文件初始化

const Koa = require('koa')
const router = require('koa-router')(); var app=new Koa(); //配置路由
router.get('/',(ctx)=>{
ctx.body='这是一个首页'
}) //启动路由
app.use(router.routes()).use(router.allowedMethods()); app.listen(8008);

然后启动node服务

配置路由

接下来我们定义两个路由模块admin.js(不启动路由只是导出路由模块)和api.js(在模块中启动路由(接口模块))

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

router.get('/',(ctx)=>{
ctx.body='后台管理系统首页'
}) router.get('/user',(ctx)=>{
ctx.body='用户管理'
}) router.get('/focus',(ctx)=>{
ctx.body='轮播图管理'
})
router.get('/news',(ctx)=>{
ctx.body='新闻管理'
}) module.exports=router;
var router=require('koa-router')();

router.get('/',(ctx)=>{
ctx.body={"title":"这是一个api"};
}) router.get('/newslist',(ctx)=>{
ctx.body={"title":"这是一个新闻接口"};
}) router.get('/focus',(ctx)=>{
ctx.body={"title":"这是一个轮播图的api"};
}) module.exports=router.routes();

然后在项目入口中即app.js引入两个路由子模块,api.js路由模块中已经启动了路由,引入后直接使用,admin.js路由模块没有启动路由只是导出,引入后需要启动路由

const Koa = require('koa')
const router = require('koa-router')();
//引入路由的子模块
var admin = require('./routes/admin.js');
var api = require('./routes/api.js'); var app=new Koa(); //配置路由
router.get('/',(ctx)=>{
ctx.body='这是一个首页'
}) // 配置子路由 层级路由
router.use('/admin',admin.routes());
router.use('/api',api); // 在模块里面暴露路由并且启动路由(启动路由在子模块中) //启动路由
app.use(router.routes()).use(router.allowedMethods()); app.listen(8008);

重启服务进行测试,访问根路由的时候是首页

以上案例中模块只分了一个层级,如果项目比较复杂有可能会分更多的层级,接下来我们把admin.js这个路由模块在细分一个层级

首先在routes中在创建一个admin的路由,表示存放admin模块中的子模块,里面分别(newscate.js,user.js)

// 用户的增加修改删除

var 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();
// 用户的增加修改删除

var 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();

然后将这两个子模块在admin.js模块中引入

var router = require('koa-router')();
var user = require('./admin/user.js');
var newscate = require('./admin/newscate.js'); //配置admin的子路由 层级路由
router.get('/',(ctx)=>{
ctx.body='后台管理系统首页'
}) router.use('/user',user);
router.use('/newscate',newscate); module.exports = router.routes();

最后将admin在app.js中引入

const Koa = require('koa')
const router = require('koa-router')();
//引入路由的子模块
var admin = require('./routes/admin.js'); var app=new Koa(); //配置路由
router.get('/',(ctx)=>{
ctx.body='这是一个首页'
}) // 配置子路由 层级路由
router.use('/admin',admin.routes()); //启动路由
app.use(router.routes()).use(router.allowedMethods()); app.listen(8008);

重启node服务,浏览器访问测试结果

项目中有很多路由时只有一级的,比如/about去访问关于我们的页面,这种情况我们可以在routes中定义一个index.js的模块

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

router.get('/',async (ctx)=>{
ctx.body='这是一个首页'
})
//注意 前台后后台匹配路由的写法不一样
router.get('/case',(ctx)=>{
ctx.body='案例'
}) router.get('/about',async (ctx)=>{
ctx.body='关于我们'
}) module.exports = router.routes();

然后再app.js中引入并使用

const Koa = require('koa')
const router = require('koa-router')(); //引入路由的子模块index
var index = require('./routes/index.js');
var admin = require('./routes/admin.js'); var app=new Koa(); //配置路由
router.use(index); // 配置子路由 层级路由
router.use('/admin',admin); //启动路由
app.use(router.routes()).use(router.allowedMethods()); app.listen(8008);

重启服务,浏览器访问测试

koa 搭建模块化路由/层级路由的更多相关文章

  1. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  2. 入职第二天:使用koa搭建node server是种怎样的体验

    今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧! 按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的 ...

  3. vue路由--命名路由

    有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...

  4. vue路由--动态路由

    前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...

  5. vue路由--静态路由

    vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是 ...

  6. [水煮 ASP.NET Web API2 方法论](3-2)直接式路由/属性路由

    问题 怎么样可以使用更贴近资源(Controller,Action)的方式定义路由. 解决方案 可以使用属性路由直接在资源级别声明路由.只要简单的在 Action 上使用属性路由 RouteAttri ...

  7. 海蜘蛛网络科技官方网站 :: 做最好的中文软路由 :: 软件路由器 :: 软路由 :: 软件路由 :: RouterOs

    海蜘蛛网络科技官方网站 :: 做最好的中文软路由 :: 软件路由器 :: 软路由 :: 软件路由 :: RouterOs 企业简介 武汉海蜘蛛网络科技有限公司成立于2005年,是一家专注于网络新技术研 ...

  8. ASP.NET没有魔法——ASP.NET MVC 直连路由(特性路由)

    之前对Controller创建的分析中,知道了Controller的创建是有两个步骤组成,分别是Controller的类型查找以及根据类型创建Controller实例. 在查询Controller的类 ...

  9. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

随机推荐

  1. Python基础知识(五)------字典

    Python基础知识(四)------字典 字典 一丶什么是字典 ​ dict关键字 , 以 {} 表示, 以key:value形式保存数据 ,每个逗号分隔 ​ 键: 必须是可哈希,(不可变的数据类型 ...

  2. Matlab迭代器模式

    迭代器(Iterator)模式,又叫做游标(Cursor)模式.提供一种方法访问一个容器(container)或者聚集(Aggregator)对象中各个元素,而又不需暴露该对象的内部细节.在采用不同的 ...

  3. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  4. mysql高级用法(1)- mariadb的主从搭建

    Mariadb介绍: mariadb是mysql的一个分支,需要进一步了解的参考:https://mariadb.org/ 安装参考教程:window版安装:Mariadb 介绍 1 (安装) lin ...

  5. ss-套接字监控工具

    ss(Socket Statistics) - another utility to investigate sockets(研究套接字的另一个实用程序,原先的是netstat) ss用于转储套接字统 ...

  6. thymeleaf模板、thymeleaf语法相关中文文档教程

    thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...

  7. Python基础->for循环、字符串以及元组

    python流程控制>for循环.字符串以及元组 学习有关序列的思想.序列:一组有顺序的东西.所有的序列都是由元素组成的,序列中的元素位置是从0开始编号的,最后一个元素的位置是它长度减一. fo ...

  8. django项目使用layui插件给网站设置一个日历挂件,很简单实用。

    进入https://www.layui.com/首页下载layui文件 下载解压后把文件放在static静态文件中, html页面引入css和js <link rel="stylesh ...

  9. danci1

    oddball 英 ['ɒdbɔːl] 美 adj. 古怪的:奇怪的 n. 古怪:古怪的人 rather than 英 美 而不是:宁可…也不愿 grasp 英 [grɑːsp] 美 [ɡræsp] ...

  10. 20199301《Linux内核原理与分析》第十二周作业

    ShellShock攻击实验 一.环境搭建 下载 $ sudo su $ wget http://labfile.oss.aliyuncs.com/bash-4.1.tar.gz 安装 $ tar x ...