標籤:style blog http io ar color os 使用 sp
剛瞭解nodejs,發現nodejs配置起來不複雜,但也有很多需要注意的地方,今天就記錄一下,以後也可拿出來看看.
要完成這個簡單的樣本,從零開始,走三步就行了.
一.搭建開發環境
二.建立項目(express)
三.編碼
我是屬於技術類的人,廢話無多.
一.搭建開發環境
1. nodejs
1.1 安裝
到官方網站下載最新版本 http://www.nodejs.org/, 下載之後,安裝,一路 next
1.2 配置 path
把上面安裝的目錄配置到環境變數中,方便以後用命令列的方式使用node.exe.
比如我的 node.exe 在 "H:\Program Files\nodejs\node.exe", 在環境變數最開始加上 "H:\Program Files\nodejs\;"
2. mongodb
2.1 安裝
http://www.mongodb.org/downloads 下載, 建議下載 zip 版,開發的時候,不需要安裝,直接解壓就可以用了.
2.2 使用命令列方式啟動 mongodb,
>mongod 127.0.0.1:27017 --dbpath D:\mongodb\dbone //D:\mongodb\dbone mongodb和dbone檔案夾要自己先建立好, 另外, --dbpath 參數值中間不能有空格
二.建立項目(express)
1 安裝全域外掛程式
>nmp install -g express //自動下載 express 外掛程式
>nmp install -g express-generator //express 在命令列中的工具
2. 添加項目
>express -e myproject
>cd myproject
>npm install //讓npm根據 package.json 自動下載依賴包
>npm install mongo && npm install express-mongo //下載 mongodb 支援包
三.編碼
1.修改模版規則
app.js 中
app.set(‘view engine‘, ‘ejs‘);
修改成:
app.engine(‘html‘, require(‘ejs‘).__express);app.set(‘view engine‘, ‘html‘);
把 /views/ 中的檔案尾碼改成 *.html
2..添加頁面(又稱視圖)
index.html 點擊"登入" 跳轉到 login.html, 登入功之後,跳轉到 welcome.html, 在 welcome.html 點擊登出之後跳轉到 login.html
/views/login.html
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body> <h1><%= title %></h1> <form method="post"> 使用者名稱:<input type="text" name="userid" id="userid"/><br/> 密 碼:<input type="password" name="password" id="password"/><br/> <input type="submit" value="登入"/> <input type="reset" value="重設"/> </form> </body></html>
/views/welcome.html
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body> <h1><%= title %></h1> <p>歡迎光臨: <%= userid %></p> <h1><a href="/logout">登出</a></h1> </body></html>
修改 /views/index.html
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <h1><a href="/login">登入</a></h1> </body></html>
3.添加 model
添加 /routes/models.js
var mongo = require(‘mongoose‘);var Schema = mongo.Schema;var UserSchema = new Schema({ userid: String, name: String, password: String});exports.User = mongo.model(‘User‘, UserSchema);
4.修改路由
修改 /routes/index.js
var express = require(‘express‘);var router = express.Router();var mongo = require(‘mongoose‘); //var models = require(‘./models‘); //引入 model var User = models.User;mongo.connect(‘mongodb://192.168.199.9:8888/logindb‘); //串連資料庫/* GET home page. */router.get(‘/‘, function(req, res) { res.render(‘index‘, { title: ‘Express‘ });});router.get(‘/login‘, function(req, res) { //轉到登入頁面 res.render(‘login‘, { title: ‘登入‘ });});router.post(‘/login‘, function(req, res) { //處理登入請求 var query_doc = { userid: req.body.userid, password: req.body.password }; User.count(query_doc, function(err, doc){ if(doc == 1){//驗證成功,轉到 歡迎頁面 res.redirect(‘/welcome?userid=‘ + query_doc.userid); }else{ res.redirect(‘/login‘); } }); });router.get(‘/logout‘, function(req, res) {//登出,轉到登入頁面 res.redirect(‘/login‘);});router.get(‘/welcome‘, function(req, res) {//歡迎頁面 var userid = req.query.userid; res.render(‘welcome‘, { title: ‘‘, userid: userid});});module.exports = router;
5.運行
5.1.啟動 app.js
>node app
5.2 用瀏覽器訪問 http://localhost:3000/
提示:
1.項目如果要支援中文,檔案的編碼要使用 utf-8,否則有亂碼
2.如果修改了源檔案,想馬上看到效果,建議安裝外掛程式 supervisor
>npm install -g supervisor //npm 自動下載外掛程式
>supervisor app //安裝外掛程式後啟動網站的方式(原來是 node app)
3.如果配置不成功,個人可以提供遠程協助.
3.1 TeamView: [email protected]
3.2 QQ : [email protected]
驗證訊息: nodejs+mongodb
原始碼下載
Nodejs&express+mongodb完成簡單使用者登入(即Nodejs入門)