60.nodejs+koa+mongod 實現簡單的頁面增刪改查

時間 2019-11-16

標籤 60.nodejs+koa+mongod nodejs koa mongod 實現簡單頁面增刪欄目 MongoDB 简体版

原文原文鏈接

*安裝最新版的nodejs(保證7.6以上)。css

*安裝mongodb（建議安裝3.4.x，由於我安裝3.6版本的時候總是會卡在80%左右）html

這是一個mongodb的教程 http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.htmlnode

*下面的操做假設是已經安裝好nodejs，和配置好mongodb,而且可以運行正常mongodb

1.建立項目koa-mongodb，並進入到當前項目目錄npm

2.建立package.jsonjson

npm init

3.安裝koa和koa-router瀏覽器

npm install koa --save

4.先來啓動一個簡單也服務並搭建一個簡單的頁面app

在項目根目錄下建立app.js，並在app.js內編輯以下代碼koa

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

使用node啓動 app.jsasync

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>