node.js使用Koa搭建基础项目

Koa 是由 Express 原班人马打造的超轻量服务端框架

与 Express 相比,除了自由度更高,可以自行引入中间件之外,更重要的是使用了 ES6 + async,从而避免了回调地狱

不过也是因为代码升级,所以 Koa2 需要 v7.60 以上的 node.js 环境

一、创建项目

  1.手动创建一个项目目录,然后快速生成一个 package.json 文件

    $ npm init -y

  安装 koa    //当前版本 2.4.1

    $ npm install koa -s

  然后创建一个 app.js

const Koa = require(‘koa‘);
const app = new Koa();

app.use(async ctx => {
 ctx.body = ‘hello 你好‘;
});

app.listen(3000);

  在cmd中输入node app.js就可以启动项目了,在浏览器输入http://localhost:3000/ 查看效果

  

  或者你在package.json,更改代码:

  

  输入命令,npm start也是一样的,可以运行项目,这样一个最基础的koa应用就好了!

  2.利用脚手架 koa-generato 来生成项目

    打开cmd,输入:

     $ npm install koa-generator -g

     $ koa2 demo -e --ejs     后面是使用ejs模板的

   cd到demo文件下,输入命令npm install

   运行项目 npm start

二、项目结构

  看一下利用脚手架生成的项目结构:

  

  先搞清楚bin里的www为项目入口,通过它引入app.js配置内容。

  node_moudel为模块加载生成的文件夹,里面全是模块功能的源码。

  public公共文件夹,放一些样式、页面js逻辑、图片。

  routers路由,功能为分发请求。

  views为视图文件,jade是一个文本格式,其内容还可以是我们最熟悉的html。

  app.js和package.json是配置文件

三、配置路由

  手动创建项目时,需要配置路由。

const Koa = require(‘koa‘);
const app = new Koa();

app.use(async ctx => { //有一个 ctx,这是一个 Koa 提供的 Context 对象,封装了 request 和 response
 ctx.body = ‘hello 你好‘;
});

app.listen(3000);

  每一次 HTTP Request 都会创建一个 Context 对象,我们可以通过 Context.request.path 来获取用户请求的路径,然后通过 Context.response.body 给用户发送内容

  Koa 默认的返回类型是 text/plain,如果要返回一个 html 文件(或者一个模块文件),就需要修改 Context.response.type

  另外,Context.response 可以简写,比如 Context.response.type 简写为 Context.type,Context.response.body 简写为 Context.type

  1.如果不用koa-router,这样显的很麻烦,下面来看一下:

    在目录下创建views文件,在views新建index.html文件,在文件中写入

  在app.js添加如下代码:

const Koa = require(‘koa‘);
const fs = require(‘fs‘);
const app = new Koa();

app.use(async (ctx, next) => {
 if (ctx.request.path === ‘/‘) {
 ctx.type = ‘text/html‘;
 ctx.body = fs.createReadStream(‘./views/index.html‘);
 } else {
 await next();
 }
});

app.listen(3000);

  运行项目,node app.js.  在浏览器输入:http://localhost:3000,就可以显示出index.html页面了,如果网址输入错误的话,页面就会显示 no found

  2.引入路由中间件koa-router

    安装koa-router,   $ npm install koa-router

    2.1.在根目录下创建一个routes目录,存放路由文件,新建index.js文件   
// routes/index

const fs = require(‘fs‘);
const router = require(‘koa-router‘)() // 引入自调用

router.get(‘/‘, async (ctx, next) => {
 ctx.type = ‘text/html‘;
 ctx.body = fs.createReadStream(‘./views/index.html‘);
});

module.exports = router

    修改app.js文件:

// app.js

const Koa = require(‘koa‘);
const app = new Koa();

const index = require(‘./routes/index‘)
app.use(index.routes(), index.allowedMethods())

app.listen(3000);

    运行项目,node app.js

四、静态资源加载

  在实际项目中,需要加载很多静态文件,如css、js文件,但是你没有使用插件,静态资源是无法显示的,举个例子:

  在根目录下新建public文件,在public文件下新建css文件,css文件下新建index.css文件

   

index.css

h1{
    color: red;
}

  在index.html文件中引入index.css文件,再运行项目,是没有效果的:

  

  使用koa-static -S加载静态资源  $ npm install koa-static -S

  在app.js中新增如下代码:  

const static = require(‘koa-static‘);
// 将 public 目录设置为静态资源目录
const main = static(__dirname + ‘/public‘);
app.use(main);

  然后在index.html相对引入就可以了,运行就可以看到红色的字体了。

<link rel="stylesheet" href="/css/index.css">

五、模板引擎

  上面加载html文件是使用fs模块的,下面使用koa-views中间件来加载html文件

  安装koa-views $ npm install koa-views -S

  在app.js中将views目录设置为模板目录:

const views = require(‘koa-views‘)
app.use(views(__dirname + ‘/views‘)); // html文件、ejs文件、pug文件等......

在路由文件中,使用render方法:

const router = require(‘koa-router‘)()

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

module.exports = router

  运行项目就可以啦,记录下每天学习内容...

原文地址:https://www.cnblogs.com/0314dxj/p/11359428.html

时间: 2024-08-13 19:41:35

node.js使用Koa搭建基础项目的相关文章

基于ligerUI+jbpm5自定义表单+Node.js的J2ee大型金融项目《财务预算系统》开发全程实录

基于ligerUI+jbpm5自定义表单+Node.js的J2ee大型金融项目<财务预算系统>开发全程实录 对这个课程感兴趣的可以加我雾非雾QQ2748165793, 讲师介绍: 3年对日外包电信行业软件专家,六年项目开发经验,二年高端培训机构教学管理经验,惠普全球研发中心骨干.现任北风金牌合作讲师. 项目经验丰富: 日本电信NTT DATA SYSTEM 日本航空ANA SYSTEM 日本TAHOO BB 在线信息平台 惠普DDC--InternalManagement SYSTEM(内部管

J2EE实战视频教程:基于LigerUI+JBPM5+Node.js的J2EE大型金融项目

基于LigerUI+JBPM5自定义表单+Node.js的J2EE大型金融项目<财务预算系统>开发全程实录适合人群:初级课时数量:150课时用到技术: nodejs SSH jscharts LigerUI Jpbm5.4涉及项目:实际金融行业项目咨询qq:1840215592 针对岗位:Java高级软件开发工程师,金融行业开发工程师, JBPM工作流开发工程师,Node.js开发工程师.课程简介:本课程系讲师在实际金融行业工作中的一真实项目,除简化了部分业务逻辑外,基础架构及核心模块超均来自

下载基于LigerUI+JBPM5自定义表单+Node.js的J2EE大型金融项目《财务预算系统》开发全程实录

基于LigerUI+JBPM5自定义表单+Node.js的J2EE大型金融项目<财务预算系统>开发全程实录 地址:http://pan.baidu.com/s/1eRBSHGY 密码:q8x8 课程分为三季:第一季:基础篇,主要内容包括:基础设置,主要是对整个框架的搭建,对流程的控制,对所用到的技术进行基础讲解.第二季:中级篇,主要内容包括:预算编制及预算调整,主要将第一部分所用到的技术知识进行深化,以及对业务的讲解.第三季:高级篇,主要内容包括:预算执行及报表分析,主要是完成整个项目的业务流

使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作者:潘良虎链接:https://www.zhihu.com/question/20215561/answer/26419995来源:知乎原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/ WebSocket简介 谈到Web实时推送,就不得不说

安装使用Mongoose配合Node.js操作MongoDB的基础教程【转载】

这篇文章主要介绍了安装使用Mongoose来让Node.js操作MongoDB的基础教程,前端js+后端node+js操作MongoDB正是所谓最流行的一种JavaScript全栈开发方案,需要的朋友可以参考下 安装mongoose 使用express准备一个TestMongoDB项目,命令序列如下: express TestMongoDB cd TestMongoDB npm install 执行完上面的命令后,使用下面的命令安装mongoose: npm install mongoose -

在windows环境下基于sublime text3的node.js开发环境搭建

首先安装sublime text3,百度一堆,自己找吧.理论上sublime text2应该也可以.我只能说一句:这个软件实在是太强悍了. 跨平台,丰富的插件体系,加上插件基本上就是一个强悍的ide了.目前我在使用的主要是Emmet.Python.还有一些格式化的插件(xml,json),加上这次安装的node.js. node.js的安装就不用多说了,直接http://nodejs.org/ 点击install下载window版本的安装程序后安装即可.默认的安装会将安装目录加到path环境变量

Mac OS X下面 Node.js环境的搭建

MAC下面的Node.js环境的搭建 1.第一步安装Xcode-----安装homebrew包管理工具---安装Node.js ----安装文档数据库MongoDB ---最后安装缓存Redis 2.安装文本编辑器sublimeText 3.最后web storm 1.去home-brew官网把那行安装命令复制 直接复制放到命令行里面去 2.然后再次打开终端 执行 brew install nodejs 3.可以查看node的版本  node —version 4.安装文档数据库 brew in

Node.js 博客搭建

Node.js 博客搭建:https://www.linuxidc.com/Linux/2017-02/140115.htm https://www.cnblogs.com/mrcln/p/9308729.html 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/11725444.html

基于Hexo+Node.js+github+coding搭建个人博客——基础篇

附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My Blog Trip - Power By Hexo 记录一下搭建的基本过程以及遇到的一些问题,仅供参考 = =废话不多说,进入主题 Hexo博客搭建的基础大致流程为: 安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pa