60.nodejs+koa+mongod 实现简单的页面增删改查

*安装最新版的nodejs(保证7.6以上)。

 *安装mongodb(建议安装3.4.x,因为我安装3.6版本的时候老是会卡在80%左右)

 这是一个mongodb的教程 http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html

*下面的操作假设是已经安装好nodejs,和配置好mongodb,并且能够运行正常

1.创建项目koa-mongodb,并进入到当前项目目录

2.创建package.json

npm init

3.安装koa和koa-router

npm install koa --save

4.先来启动一个简单也服务并搭建一个简单的页面

在项目根目录下创建app.js,并在app.js内编辑如下代码

const Koa = require('koa');
const app = new Koa();
const home = ctx => {
  ctx.response.body = 'Hello World';
};
app.use(home);
app.listen(3000);

使用node启动 app.js

node app.js

在浏览器中打开 localhost:3000,成功

加入页面路由 koa-router 以及页面的css文件,并用html文件替代字符串拼接

新增pages目录并且添加home.html

const Koa = require('koa');
const app = new Koa();
const fs = require('fs')
const home = ctx => {
    ctx.response.type = 'html';
    ctx.response.body = fs.createReadStream('./pages/home.html');
};
app.use(home);
app.listen(3000);

重新启动 node app.js 打开localhost:3000 页面就会变成我们替换掉的home.html的内容

加入页面路由 koa-router

npm install koa-route --save

app.js修改如下

const Koa = require('koa');
const route = require('koa-route');
const app = new Koa();
const fs = require('fs')
const home = async (ctx) => {
    ctx.response.type = 'html';
    ctx.response.body = await fs.createReadStream('./pages/home.html');
};
const about = (ctx) => {
    ctx.response.type = 'html';
    ctx.response.body = '<a href="/">To Home Page</a><h1>about</h1>';
};

app
    .use(route.get('/', home))
    .use(route.get('/about', about))
app.listen(3000);

修改一下 home.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body>

    <a href="/about"> To About Page</a>
    <h1>home</h1>
</body>
</html>

重新启动 node app.js 打开http://localhost:3000,点击看看,这就你完成了一个简单的路由

待续...

 

转载于:https://www.cnblogs.com/famLiu/p/8575327.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值