koajs 项目实战（一）
（一）koa
1.Koa（koajs）-- 基于 Node.js 平台的下一代 web 开发框架
koa1
npm install koa -g
npm install koa-generator -g
koa eduline1
cd eduline1
npm install
运行：npm start
访问：http://localhost:3000
koa2
npm install koa@2 -g
npm install koa-generator -g
koa2 eduline2
cd eduline2
npm install
运行：npm start
访问：http://localhost:3000
2.koajs 框架解决的问题
解决了 Express 中具有的回调陷阱问题，大大优化了开发体验。
koa1: Generator + yield es6
示例：
index.js
var router = require('koa-router')();
router.get('/', function *(next) {
// 注：yield 后面必须是一个 Promise
// let rs = yield new Promise(function(resolve,reject){
// setTimeout(function() {
// console.log('执行setTimeout');
// resolve('返回结果');
// },2000);
// })
// reject的用法
let rs = 'null';
try{
rs = yield new Promise(function(resolve,reject){
setTimeout(function(argument) {
console.log('执行setTimeout');
reject('出错');
},2000);
})
}catch(err){
console.log(err);
}
console.log('aaaaaaaa=' + rs);
this.body = 'hello,koa1' + rs;
// yield this.render('index', {
// title: 'Hello World Koa!'
// });
});
module.exports = router;
koa2: asyinc + await es7
示例：
index.js
const router = require('koa-router')()
router.get('/', async (ctx, next) => {
// await 后面需要接 Promise
// let rs = await new Promise(function(resolve,reject){
// setTimeout(function(){
// console.log('执行setTimeout');
// resolve('返回结果');
// },2000);
// })
// reject的用法
let rs = 'null';
try{
rs = await new Promise(function(resolve,reject){
setTimeout(function(){
console.log('执行setTimeout');
reject('出错');
},2000)
})
}catch(err){
console.log(err);
}
ctx.body = 'hello,koa2' + rs;
// await ctx.render('index', {
// title: 'Hello Koa 2!'
// })
})
module.exports = router
3.目前流行版本为 koa1 和 koa2
性能： koa2 > koa1 > Express
但： koa2 项目中如果安装多个插件，性能呈几何状下降，显示 koa2 尚不稳定。
（二）项目框架
客户端： jquery + bootstrap
服务端： koa1(koa2) + mongose(数据库mongodb) + ejs模板
（三）修改模板
安装ejs模块：
npm install --save ejs
koa1:
app.js
app.use(views('views', {
root: __dirname + '/views',
// default: 'jade'
default: 'ejs' // 默认使用ejs语法
}));
users.js
// 默认路由
router.get('/', function *(next) {
this.body = 'this is a users response!';
}); // 登录页路由
router.get('/login', function *(next) {
// this.body = 'login页面'; // 绑定login.ejs文件
yield this.render('login',{});
});
koa2:
app.js
app.use(views(__dirname + '/views', {
// extension: 'pug'
extension: 'ejs' // 默认使用ejs语法
}))
users.js
// 默认路由
router.get('/', async function (ctx, next) {
// ctx.body = 'this is a users response!'
ctx.state = {
title:'我是koa2的login'
};
}) // 登录页路由
router.get('/login', async function (ctx, next) {
await ctx.render('login', {});
});
ejs 格式
（四）引入 bootstrap 并创建 index 界面
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>在线教育</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> --> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 务必在bootstrap.min.js之前引入 -->
<script src="/javascripts/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/javascripts/bootstrap.min.js"></script> <!-- <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" /> -->
<style>
.horul{
float: left;
font-size: 1.5em;
line-height: 2em;
}
.horul li{
display: inline-block;
list-style: none;
height: 25px;
width: 3em;
text-align: center;
}
.menu{
width: 1024px;
background-color: #005f3d;
height: 1.5em;
margin: 0 auto;
font-size: 1.5em;
display: hidden;
text-align: center;
}
.menu span{
float: left;
display: inline-block;
color: #ffffff;
margin-left: 1em;
}
.answer tr td div{
width: 45px;
height: 45px;
background-color: green;
color: #ffffff;
text-align: center;
}
a,a:hover,a:visited{
color: #ffffff;
}
</style>
</head>
<body>
<div style="width:1024px;height:3em;margin:1em auto;">
<span class="glyphicon glyphicon-comment" style="float:left;font-size:2em;"><b>源库</b></span>
<ul class="horul">
<li>问答</li>
<li>文章</li>
<li>笔记</li>
<li>活动</li>
</ul>
<div style="float:right;line-height:2em;">
<input type="text" placeholder="请输入关键词" style="width:240px;height:30px;" />
<span class="glyphicon glyphicon-zoom-in" style="font-size:1.5em;cursor:pointer;" />
<input type="button" class="btn btn-success" value="登录/注册" />
</div>
</div>
<div class="menu">
<span>home</span>
<span>|</span>
<span><a href="#">javascript</a></span>
<span>php</span>
<span>python</span>
<span>java</span>
<span>mysql</span>
<span>ios</span>
<span>android</span>
<span>node.js</span>
<span>html5</span>
<span>lunux</span>
<span>c++</span>
<span>...</span>
</div>
<div style="width:1024px;margin:1em auto;">
<div style="border:1px solid green;width:720px;float:left;">
<ul class="horul">
<li>最新</li>
<li>最热</li>
<li>未回答</li>
</ul>
<table class="table">
<tbody class="answer">
<tr>
<td>
<div>0<br/>回答</div>
</td>
<td>36<br/>浏览</td>
<td>node.js如何与vue.js两线开发</td>
</tr>
<tr>
<td><div>3<br/>回答</div></td>
<td>12<br/>浏览</td>
<td>node.js如何与vue.js两线开发</td>
</tr>
</tbody>
</table>
</div>
<div style="border:1px solid green;width:300px;float:right;">
<table class="table">
<caption>排行榜</caption>
<tbody>
<tr>
<td>1</td>
<td>Bangalore</td>
</tr>
<tr>
<td>2</td>
<td>Mumbal</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
效果图：
（五）显示登录注册模态对话框
1.index.ejs添加模态框
<input type="button" class="btn btn-success" data-toggle="modal" data-target="#loginModal" href="./users/login" value="登录/注册" />
最下面加：
<!-- 模态框 -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog">
<div class="modal-content" style="width:850px;">
<!-- href 内容 -->
</div>
</div>
</div>
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>在线教育</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> --> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 务必在bootstrap.min.js之前引入 -->
<script src="/javascripts/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/javascripts/bootstrap.min.js"></script> <!-- <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" /> -->
<style>
.horul{
float: left;
font-size: 1.5em;
line-height: 2em;
}
.horul li{
display: inline-block;
list-style: none;
height: 25px;
width: 3em;
text-align: center;
}
.menu{
width: 1024px;
background-color: #005f3d;
height: 1.5em;
margin: 0 auto;
font-size: 1.5em;
display: hidden;
text-align: center;
}
.menu span{
float: left;
display: inline-block;
color: #ffffff;
margin-left: 1em;
}
.answer tr td div{
width: 45px;
height: 45px;
background-color: green;
color: #ffffff;
text-align: center;
}
a,a:hover,a:visited{
color: #ffffff;
}
</style>
</head>
<body>
<div style="width:1024px;height:3em;margin:1em auto;">
<span class="glyphicon glyphicon-comment" style="float:left;font-size:2em;"><b>源库</b></span>
<ul class="horul">
<li>问答</li>
<li>文章</li>
<li>笔记</li>
<li>活动</li>
</ul>
<div style="float:right;line-height:2em;">
<input type="text" placeholder="请输入关键词" style="width:240px;height:30px;" />
<span class="glyphicon glyphicon-zoom-in" style="font-size:1.5em;cursor:pointer;" />
<!-- <input type="button" class="btn btn-success" value="登录/注册" /> -->
<input type="button" class="btn btn-success" data-toggle="modal" data-target="#loginModal" href="./users/login" value="登录/注册" />
</div>
</div>
<div class="menu">
<span>home</span>
<span>|</span>
<span><a href="#">javascript</a></span>
<span>php</span>
<span>python</span>
<span>java</span>
<span>mysql</span>
<span>ios</span>
<span>android</span>
<span>node.js</span>
<span>html5</span>
<span>lunux</span>
<span>c++</span>
<span>...</span>
</div>
<div style="width:1024px;margin:1em auto;">
<div style="border:1px solid green;width:720px;float:left;">
<ul class="horul">
<li>最新</li>
<li>最热</li>
<li>未回答</li>
</ul>
<table class="table">
<tbody class="answer">
<tr>
<td>
<div>0<br/>回答</div>
</td>
<td>36<br/>浏览</td>
<td>node.js如何与vue.js两线开发</td>
</tr>
<tr>
<td><div>3<br/>回答</div></td>
<td>12<br/>浏览</td>
<td>node.js如何与vue.js两线开发</td>
</tr>
</tbody>
</table>
</div>
<div style="border:1px solid green;width:300px;float:right;">
<table class="table">
<caption>排行榜</caption>
<tbody>
<tr>
<td>1</td>
<td>Bangalore</td>
</tr>
<tr>
<td>2</td>
<td>Mumbal</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog">
<div class="modal-content" style="width:850px;">
<!-- href 内容 -->
</div>
</div>
</div>
</body>
</html>
2.views下建立login.ejs
<div style="height:330px;background:#ffffff;">
<!-- 登录 -->
<div style="margin:9px 9px;border:1px solid green;width:400px;float:left;">
<form method="post" action="./users/login">
<table class="table">
<tr>
<td colspan="2" align="center">登录</td>
</tr>
<tbody>
<tr>
<td align="right">email:</td>
<td><input type="text" name="email" class="form-control" placeholder="文本输入" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd" class="form-control" placeholder="密码" /></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
<input type="submit" value="登录" class="btn btn-success" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<!-- 注册 -->
<div style="margin:9px 9px;border:1px solid green;width:400px;float:left;">
<form method="post" action="./users/zhuce">
<table class="table">
<tr>
<td colspan="2" align="center">注册</td>
</tr>
<tbody>
<tr>
<td align="right">email:</td>
<td><input type="text" name="email" class="form-control" placeholder="文本输入" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd" class="form-control" placeholder="密码" /></td>
</tr>
<tr>
<td align="right">重复</td>
<td><input type="password" name="repwd" class="form-control" placeholder="密码" /></td>
</tr>
<tr>
<td align="right">昵称</td>
<td><input type="text" name="nicheng" class="form-control" placeholder="昵称" /></td>
</tr>
<td colspan="2" align="center" valign="middle">
<input type="submit" value="注册" class="btn btn-success" />
</td>
</tbody>
</table>
</form>
</div>
</div>
3.添加登录页面
routes/users.js中添加
koa1:
// 登录页路由
router.get('/login', function *(next) {
// 绑定login.ejs文件
yield this.render('login',{});
});
koa2:
// 登录页路由
router.get('/login', async function (ctx, next) {
await ctx.render('login', {});
});
效果图：
.
koajs 项目实战（一）的更多相关文章
- koajs 项目实战（二）
此篇文章,接 koajs 项目实战(一)后写 (六)表单提交和参数接收 表单: <form method="post" action="./users/zhuce& ...
- Asp.Net Core 项目实战之权限管理系统（4） 依赖注入、仓储、服务的多项目分层实现
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- 给缺少Python项目实战经验的人
我们在学习过程中最容易犯的一个错误就是:看的多动手的少,特别是对于一些项目的开发学习就更少了! 没有一个完整的项目开发过程,是不会对整个开发流程以及理论知识有牢固的认知的,对于怎样将所学的理论知识应用 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- Asp.Net Core 项目实战之权限管理系统（0） 无中生有
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- Asp.Net Core 项目实战之权限管理系统（1） 使用AdminLTE搭建前端
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- Asp.Net Core 项目实战之权限管理系统（2） 功能及实体设计
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- Asp.Net Core 项目实战之权限管理系统（3） 通过EntityFramework Core使用PostgreSQL
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- Asp.Net Core 项目实战之权限管理系统（5） 用户登录
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
随机推荐
- Ansible实战之Nginx代理Tomcat主机架构
author:JevonWei 版权声明:原创作品 实验架构:一台nginx主机为后端两台tomcat主机的代理,并使用Ansible主机配置 实验环境 Nginx 172.16.252.82 Tom ...
- 【bzoj2721】[Violet 5]樱花 数论
题目描述 输入 输出 样例输入 2 样例输出 3 题解 数论 设1/x+1/y=1/m,那么xm+ym=xy,所以xy-xm-ym+m^2=m^2,所以(x-m)(y-m)=m^2. 所以解的数量就是 ...
- AGC 26 F Manju Game
$\DeclareMathOperator{\sw}{sw}$ $\DeclareMathOperator{\sb}{sb}$ $\DeclareMathOperator{\dp}{dp}$ 用 $\ ...
- 满汉全席(banquet)
满汉全席(banquet) 题目描述 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做 ...
- filesystem
1 tmpfs 以下来源于维基百科: tmpfs是类Unix系统上暂存档存储空间的常见名称,通常以挂载文件系统方式实现,并将数据存储在易失性存储器而非永久存储设备中.和RAM disk的概念近似,但后 ...
- HTML+CSS之iframe
碎碎:这两天在实践中,用到了 iframe,之前对其不甚了解,了解之中遇到好多奇葩问题,今天记录下这两天遇到的相关的内容. 嵌入的 iframe 页面的边框 嵌入的 iframe 页面的背景 嵌入的 ...
- pat 甲级 1078. Hashing (25)
1078. Hashing (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The task of t ...
- BZOJ 3043: IncDec Sequence
3043: IncDec Sequence Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 578 Solved: 325[Submit][Statu ...
- 8个学习.net的博客链接 （以前收藏过更多的，被百度新版搞没了，恨死了）
原文发布时间为:2012-09-18 -- 来源于本人的百度文章 [由搬家工具导入] Simone Chiaretta’s CodeClimber http://www.haacked.com/ ( ...
- WML标签速查手册 wap标签
原文发布时间为:2010-08-19 -- 来源于本人的百度文章 [由搬家工具导入] WML标签速查手册(转)比较方便便于速查 结构相关标签 语法及属性 <wml> <wml x ...