koajs mysql_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

在线教育

.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;

}

源库

• 问答
• 文章
• 笔记
• 活动

home

|

javascript

php

python

java

mysql

ios

android

node.js

html5

lunux

c++

...

• 最新
• 最热
• 未回答

0 回答	36 浏览	node.js如何与vue.js两线开发
3 回答	12 浏览	node.js如何与vue.js两线开发

排行榜

1	Bangalore
2	Mumbal
3	Bangalore

效果图：

(五)显示登录注册模态对话框

1.index.ejs添加模态框

最下面加：

index.ejs

在线教育

.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;

}

源库

• 问答
• 文章
• 笔记
• 活动

home

|

javascript

php

python

java

mysql

ios

android

node.js

html5

lunux

c++

...

• 最新
• 最热
• 未回答

0 回答	36 浏览	node.js如何与vue.js两线开发
3 回答	12 浏览	node.js如何与vue.js两线开发

排行榜

1	Bangalore
2	Mumbal
3	Bangalore

2.views下建立login.ejs

登录
email:
密码:

注册
email:
密码:
重复
昵称

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', {});

});

效果图：

.