前言:使用nodejs實(shí)現(xiàn)登錄、注冊、商品發(fā)布、商品列表展示Demo,通過這個demo熟悉nodejs使用,mongoDB的一些簡單操作。
一、環(huán)境準(zhǔn)備
1.nodejs安裝
到官網(wǎng)下載安裝包,或者在nvm上下載,我本地的node版本為v6.9.2
2.mongoDB安裝
a.第一種方法是直接下載壓縮包解壓
? ?第二種方法使用在終端brew install mongodb
b.啟動mongoDB:
進(jìn)入到安裝mongo的目錄下的mongo/bin路徑下
sudo mongod

看到這個界面即mongo啟動成功。
c.可以下載mongoDB圖形管理工具,查看和管理數(shù)據(jù)庫,我用的是Robomongo。
二、開始寫代碼啦
環(huán)境準(zhǔn)備好后,可以開始寫nodejs邏輯以及頁面了,你需要有的基礎(chǔ)是:
1.html+css+javascript前端基礎(chǔ)
2.npm簡單操作
3.學(xué)習(xí)node API以及express,推薦阮一峰nodejs教程,里邊講得簡單明了,阮老師的教程一直都很贊
4.項目目錄結(jié)構(gòu)
├── productNode? ? ? ?項目根目錄
│?? ├── database? ? ? ?啟動監(jiān)聽數(shù)據(jù)庫操作目錄
│?? ├── public? ? ? ? ? ? 靜態(tài)資源文件放置目錄
│?? ├── node_modules? ? ?npm安裝包存放目錄
│? ├── routes? ? ? ? ? ? 路由及接口目錄
│?? ├── app.js? ? ? ? ? ? ? 項目初始化及啟動服務(wù)文件
│? ├── package.json? ? package.json文件
5. app.js 項目初始化及啟動服務(wù)文件
var express=require('express');
var app=express();
var hbs=require('hbs');
var bodyParser=require('body-parser');
var cookieParser=require('cookie-parser');
var multipart=require('connect-multiparty');//上傳圖片中間件
var router=require('./routes/route');
require('./database/db');
app.set('view engine','html');
app.engine('.html',hbs.__express);//指定模板為html
/*中間件*/
app.use(bodyParser({uploadDir:'./public/upload'}));//body消息體解析
app.use(cookieParser());
app.use(multipart());
app.use(express.static('./public'))//靜態(tài)資源
app.use(router);//路由
app.listen(8080);
a.我這里用到的是express框架,使用了hbs模板引擎,指定模板文件為html格式的,是我們比較熟悉的格式,使用jade也可以。
app.set('view engine','html');
app.engine('.html',hbs.__express);
這兩句設(shè)置使用的模板引擎。
b.
var bodyParser=require('body-parser');
app.use(bodyParser({uploadDir:'./public/upload'}));//body消息體解析
使用中間件的方式,引用你需要的模塊,可在npm中安裝即可,例如npm install body-parser。引用這個就能在接口請求中獲取客戶端發(fā)送過來的body消息體,還指定了文件上傳路徑為./public/upload。cookie-parser設(shè)置管理cookie的中間件,multipart文件上傳的中間件,設(shè)置這個可以獲取到客戶端上傳過來的file信息。
c.app.listen(8000)啟動服務(wù),為8000端口
6.連接數(shù)據(jù)庫 /database/db.js
var mongoose=require('mongoose');
var url='mongodb://localhost:27017/product';
var db=mongoose.connect(url);
db.connection.on('open',function() {
console.log('數(shù)據(jù)庫連接成功');
});
db.connection.on('error',function() {
console.log('數(shù)據(jù)庫連接失敗');
})
安裝mongoose是nodejs中操作mongoDB數(shù)據(jù)庫的框架,mongoose.connect('mongodb://localhost:27017/product')連接數(shù)據(jù)庫,默認(rèn)的端口號為27017,數(shù)據(jù)庫名稱為product,并監(jiān)聽open事件,和error事件,連接成功或連接失敗都會進(jìn)到相應(yīng)的時間回調(diào)中。
/database/produc.js指定集合product的數(shù)據(jù)結(jié)構(gòu),創(chuàng)建模型
var mongoose=require('mongoose');
var Schema=mongoose.Schema;
var productSchema=newSchema({
? ? ? name:String,? //商品名稱
? ? ? description:String, //商品描述
? ? ? ?price:Number, //商品價格
? ? ? ?user:String,? ?//發(fā)布人
? ? ? createTime:Number,? //商品創(chuàng)建時間
? ? ? image:String? //商品圖片路徑
});
var product=mongoose.model('product',productSchema);
module.exports=product;
7. public靜態(tài)資源文件夾
public用于存放靜態(tài)資源文件,我們在app.js初始化文件中已經(jīng)指定了靜態(tài)資源存放的文件夾為public,里邊的資源在服務(wù)啟動后即可通過相應(yīng)的路徑訪問到
--images
--upload
--styles
--js
以上文件夾分別用于存放圖片資源,上傳的圖片存放位置,css樣式,頁面邏輯的js文件。
8.views中用于存放html頁面文件
9.routes/route.js? 路由及接口
var express=require('express');
var router=express.Router();
express框架中的Router方法。
路由
router.get('/',function(req,res) {
? ? res.render('index',{
? ? ? ? ?title:'首頁'
? ?})
});
請求匹配到/,進(jìn)入到改回調(diào)中,response.render渲染index模板,我們在初始化中已經(jīng)指定了模板為html格式的文件,這里就可以不用寫html后綴了。用這樣的方法匹配路徑,渲染模板。
接口
//登錄
var user=require('../database/user');? ?//user集合的數(shù)據(jù)格式模型
router.post('/api/login',function(req,res) {
var name=req.body.name;
var password=req.body.password;
var query={
? ?name:name,
? ? password:password
}
var hash=hashPW(name,password);
user.find(query,function(err,docs) {
if(err) {
? ? ? ? console.log('find user error');
}else{
? ? ?if(docs.length==0) {
? ? ? ? ?res.send({
? ? ? ? ? ? ?status:500,
? ? ? ? ? ? message:'用戶名或密碼錯誤'
? ? ? ? });
? ? ? }else{
? ? ? ? ? ? res.cookie("account", {account:name,hash:hash}, {maxAge:86400000});
? ? ? ? ? ? res.send({
? ? ? ? ? ? ? ?status:200,
? ? ? ? ? ? ? ?message:'login success'
? ? ? ? ?});
}
}
});
});
匹配到客戶單發(fā)送post請求/api/login后進(jìn)行相應(yīng)的處理,根據(jù)用戶的輸入賬號密碼查詢數(shù)據(jù)庫,如果沒有查詢到結(jié)果,res.send發(fā)送數(shù)據(jù)給客戶端,沒有查詢到,賬號或密碼錯誤,如果數(shù)據(jù)庫中查詢到該用戶了,返回狀態(tài)碼200,登錄成功。登錄成功并進(jìn)行cookie設(shè)置,用于保持登錄狀態(tài)。
三、上代碼
demo里還有上傳圖片的代碼,大家也可以參考下。喜歡的麻煩給個star哦!^_^