koa 搭建模块化路由/层级路由
搭建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 搭建模块化路由/层级路由的更多相关文章
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- 入职第二天:使用koa搭建node server是种怎样的体验
今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧! 按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的 ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...
- vue路由--动态路由
前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...
- vue路由--静态路由
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是 ...
- [水煮 ASP.NET Web API2 方法论](3-2)直接式路由/属性路由
问题 怎么样可以使用更贴近资源(Controller,Action)的方式定义路由. 解决方案 可以使用属性路由直接在资源级别声明路由.只要简单的在 Action 上使用属性路由 RouteAttri ...
- 海蜘蛛网络科技官方网站 :: 做最好的中文软路由 :: 软件路由器 :: 软路由 :: 软件路由 :: RouterOs
海蜘蛛网络科技官方网站 :: 做最好的中文软路由 :: 软件路由器 :: 软路由 :: 软件路由 :: RouterOs 企业简介 武汉海蜘蛛网络科技有限公司成立于2005年,是一家专注于网络新技术研 ...
- ASP.NET没有魔法——ASP.NET MVC 直连路由(特性路由)
之前对Controller创建的分析中,知道了Controller的创建是有两个步骤组成,分别是Controller的类型查找以及根据类型创建Controller实例. 在查询Controller的类 ...
- Angular routing生成路由和路由的跳转
Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...
随机推荐
- Python基础知识(五)------字典
Python基础知识(四)------字典 字典 一丶什么是字典 dict关键字 , 以 {} 表示, 以key:value形式保存数据 ,每个逗号分隔 键: 必须是可哈希,(不可变的数据类型 ...
- Matlab迭代器模式
迭代器(Iterator)模式,又叫做游标(Cursor)模式.提供一种方法访问一个容器(container)或者聚集(Aggregator)对象中各个元素,而又不需暴露该对象的内部细节.在采用不同的 ...
- react native 集成react navigation报错
集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:
- mysql高级用法(1)- mariadb的主从搭建
Mariadb介绍: mariadb是mysql的一个分支,需要进一步了解的参考:https://mariadb.org/ 安装参考教程:window版安装:Mariadb 介绍 1 (安装) lin ...
- ss-套接字监控工具
ss(Socket Statistics) - another utility to investigate sockets(研究套接字的另一个实用程序,原先的是netstat) ss用于转储套接字统 ...
- thymeleaf模板、thymeleaf语法相关中文文档教程
thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...
- Python基础->for循环、字符串以及元组
python流程控制>for循环.字符串以及元组 学习有关序列的思想.序列:一组有顺序的东西.所有的序列都是由元素组成的,序列中的元素位置是从0开始编号的,最后一个元素的位置是它长度减一. fo ...
- django项目使用layui插件给网站设置一个日历挂件,很简单实用。
进入https://www.layui.com/首页下载layui文件 下载解压后把文件放在static静态文件中, html页面引入css和js <link rel="stylesh ...
- danci1
oddball 英 ['ɒdbɔːl] 美 adj. 古怪的:奇怪的 n. 古怪:古怪的人 rather than 英 美 而不是:宁可…也不愿 grasp 英 [grɑːsp] 美 [ɡræsp] ...
- 20199301《Linux内核原理与分析》第十二周作业
ShellShock攻击实验 一.环境搭建 下载 $ sudo su $ wget http://labfile.oss.aliyuncs.com/bash-4.1.tar.gz 安装 $ tar x ...