搭建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. 用jQuery的toggle方法实现元素的左右滑动隐藏

    通常情况下给元素加toggle方法通常会是上下滑动隐藏,而有时我们又需要左右滑动隐藏怎么办呢 $(document).ready(function(){ $('#example').click(fun ...

  2. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  3. 在vue组件中访问vuex模块中的getters/action/state

    store的结构: city模块: 在各模块使用了命名空间的情况下,即 namespaced: true 时: 组件中访问模块里的state 传统方法: this.$store.state['模块名' ...

  4. Nuxt.js vue init nuxt-community/koa-template 初始化项目报错

    报错提示: Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functi ...

  5. SocksCap代理

    所有Windows应用都可以使用Socks代理上网,即使不支持Socks代理的应用也可以用Socks代理上网 配置代理 点击"添加",代理类型可以修改, 支持代理测试 运行程序 点 ...

  6. nrm 工具的使用

    一.什么是nrm? 这是官方的原话: 开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 最近NPM经常 down 掉, 这个还是很有用的哈哈 顾名思义,就 ...

  7. unity shader入门(二)语义,结构体,逐顶点光照

    下为一个逐顶点漫反射光照shader Shader "study/Chapter6/vertexShader"{ Properties{_Diffuse("Diffuse ...

  8. App抓包代理设置

    1.设置Fiddler 打开Fiddler,Tools  -->  Fiddler Options  -->  HTPS (配置完后记得要重启Fiddler) 选中"Decrpt ...

  9. ssm的maven项目启动tomcat时报错,Cannot find class: XXXX解决办法

    最近在写一个ssm的项目,启动总是报错.原因网上查了也没找到.最后终于解决.下面直接上代码 问题描述: 严重: Allocate exception for servlet ssm-dispatche ...

  10. RocketMQ-c#代码

    导入包: https://github.com/gaufung/rocketmq-client-dotnet/tree/master using org.apache.rocketmq.client. ...