標籤:style http io ar color os 使用 sp for
想寫部落格很長時間了,因為一直身患懶癌,所以一直拖到了現在。markdown的文法也是剛剛學,實驗一下效果
好了不說了,直接上乾貨了。
------------------------------------------------------------------------------------------------
1.準備工作
Nodejs、express和mongodb的安裝(這裡安裝的都是最新版的)
### 安裝: ###
Nodejs的安裝沒什麼說的。不過安裝完之後測試是否成功用過原來版本的同學可能會有一些問題。
原來的版本是:$ node -v 新版不在支援$,直接在命令列中:node -v
安裝最新版的express之後,需要在安裝:express-generator //express命令工具,很多初學者都會遇到這個問題(當然我也是)
mongodb的安裝下面會講解到。
用express建立一個項目的架構。
這個我建立一個名字叫chihou的網站,用的模板引擎是ejs。
>express -e chihuo
-e表示ejs模板引擎,不寫 -e 預設的建立jade模板引擎
然後在輸入:
cd chihuo //進入到你建立的項目目錄
npm install //讀取根目錄中的package.json檔案然後安裝項目所依賴的包
然後通過cmd命令列 cd 到 chihuo 的目錄下
>node app
這樣就啟動項目了。
提示1:如果不能啟動項目:看看app.js檔案中沒有監聽連接埠。如果沒有,
在 module.exports = app; 語句之前添加app.listen(3000);
提示2:Ctrl + c 終止運行
然後我們可以在瀏覽器地址欄裡敲入 http://127.0.0.1:3000/ 或者 http://localhost:3000
這就是你的第一個express建立的node app。
到這裡你就完成了項目的重要的一步。
之後的講解 我們從目錄開始
--node_modules 項目中依賴的包
--public 公用資源放的目錄
--routes 學名 路由,裡面放著一些路由檔案
--views 放著就是分頁檔了
--app.js 項目的入口檔案。當然你也可以改成其他的名字。
2.現在基本的結果已經有了,之後就是建立資料庫了 mongodb的安裝
這裡只介紹window的安裝
在官網上下載zip,這個我裝在D盤的mongodb目錄下
1.在D盤中建立mongodb檔案夾然後把下載的包解壓後把其中的bin檔案夾拷貝到建立的mongodb檔案夾中,
2.然後在mongodb檔案夾中建立一個data檔案夾,再在data檔案夾中建立db檔案夾
3.開啟CMD命令列
>d:
>cd mongodb\bin
>mongod -dbpath D:\mongodb\data\db
4.在開啟一個CMD命令列:
>d:
>cd mongodb\bin
>mongo
5.這樣就可以用了。
接著就設計我們的資料庫了
在剛才的開啟的mongodb資料庫中輸入:
>use chihuo \\建立一個叫chihuo的資料庫
>db.createCollection("users") \\建立一個集合
>db.users.insert({"name":"admin","password":"111"}) \\給users集合添加一個文檔。
>db.users.find() \\查詢你添加的文檔
再接著就是在項目中串連剛才建立的資料庫了
在項目根目錄下建立一個的檔案夾database,然後在建立一個
db.js
var mongoose = require(‘mongoose‘); var db = mongoose.connect(‘mongodb://localhost/chihuo‘);//;串連資料庫 var Schema = mongoose.Schema; // 建立模型 var userScheMa = new Schema({5 name: String,6 password: String7 }); // 定義了一個新的模型,但是此模式還未和users集合有關聯 exports.user = db.model(‘users‘, userScheMa); // 與users集合關聯
3.接著在views檔案夾建立視圖檔案了
我們上面用express建立的項目視圖檔案是ejs尾碼名,我們一般習慣使用html尾碼名。
那麼我們怎麼讓他識別html的視圖檔案呢?
在app.js檔案中 找到
>app.set(‘view engine‘, ‘ejs‘);
把它替換成:
>app.set( ‘view engine‘, ‘html‘ );
再用app.engine()方法註冊模板引擎的尾碼名。代碼:
>app.engine(‘.html‘,require(‘ejs‘).__express);//裡面的底線是兩個
然後我們建立一個login.html(登陸頁面),index.html(原來有,改一下尾碼名就行),ucenter(登陸之後的頁面);
index.html--<!DOCTYPE html><html> <head><title><%= title %></title><link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body><h1>Hello World</h1><p>Welcome to <%= title %></p><p><a href="login">登陸</a></p> </body></html>
login.html--<!DOCTYPE html><html> <head><title><%= title %></title><link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body><h1>Hello World</h1><form action="ucenter" method="post"><p>name:<input type="text" name="name" id="name" /></p><p>password:<input type="text" name="password" id="password" /></p><p><input type="submit" value="submit" /></p></form> </body></html>
ucenter.html--<!DOCTYPE html><html> <head><title><%= title %></title><link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body><p>登陸成功</p> </body></html>
4.最後就是路由的控制了,在routes檔案中的index.js
var express = require(‘express‘); var router = express.Router(); var user = require(‘../database/db‘).user; /* GET home page. */ router.get(‘/‘, function(req, res) { res.render(‘index‘, { title: ‘index‘ }); }); /*login*/ router.get(‘/login‘, function(req, res) { res.render(‘login‘, { title: ‘login‘ }); }); /*ucenter*/ router.post(‘/ucenter‘, function(req, res) { var query = {name: req.body.name, password: req.body.password}; (function(){ user.count(query, function(err, doc){ if(doc == 1){ console.log(query.name + ": 登陸成功 " + new Date()); res.render(‘ucenter‘, { user:doc }); }else{ console.log(query.name + ": 登陸失敗 " + new Date()); res.redirect(‘/‘); } }); })(query); });31 32 module.exports = router;
目前就講解這麼多,之後的部落格我會講解最新版本的session問題還有前台頁面中應用到bootstrap等等,不斷的把項目完善。
github地址:https://github.com/songtanjichuan/chihuo_0.0.1.git
mongoose參考地址:http://www.hubwiz.com/course/543b2e7788dba02718b5a4bd
如果覺得還不錯,求推薦。轉載的話,請加原文連結。
node.js + mongodb