express 实践

截图：

　　

这个项目的数据是根据之前瓜子网爬虫爬的北京区数据

express + mongodb + pug(jade) + flex.css:

项目地址： https://github.com/uustoboy/guazi-pug

项目截图：

目录说明:

|---app.js ----------------------node启动文件
|---gulpfile.js------------------gulp自动化重启
|---models-----------------------mongodb的models
|---node_modules-----------------node依赖
|---package.json-----------------包描述文件及开发者信息
|---public-----------------------静态文件（css/js/img）
|-----c--------------------------css目录
|-----j--------------------------js目录
|---routers----------------------路由
|---schemas----------------------mongodb的schemas
|---views------------------------视图模板

package.json:

{
  "name": "guazi-pug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.16.0",
    "express": "^4.14.1",
    "gulp": "^3.9.1",
    "gulp-nodemon": "^2.2.1",
    "mongoose": "^4.8.1",
    "pug": "^2.0.0-beta11"
  }
}

node app.js 启动文件

1.加载express 用到的模块

2.设置静态文件的托管、模板的引擎

3.在把路由文件加载到启动页

4.连接已经运行的mongodb

项目启动

 "use strict";

 var express = require('express');  //引入express;
 var mongoose = require('mongoose');  //引入mongoose;
 var app = express();

 //加载body-parser，用来处理post提交过来的数据
 var bodyParser = require('body-parser');

 //bodyparser设置
 app.use( bodyParser.urlencoded({extended: true}) );

 //设置静态文件托管
 app.use( '/public', express.static( __dirname + '/public') );

 //设置模板文件存放的目录，第一个参数必须是views，第二个参数是目录
 app.set('views', './views');

 //设置模板引擎
 app.set('view engine', 'pug');

 //加载路由;
 app.use('/', require('./routers/api'));
 app.use('/', require('./routers/car-routers'));

 //监听http请求
 mongoose.connect('mongodb://localhost/car', function(err) {
     if (err) {
         console.log('数据库连接失败');
     } else {
         console.log('数据库连接成功');
         app.listen(3000);
     }
 });

schemas/car-schemas.js 定义这个集合的数据类型:

 "use strict";
 var mongoose = require('mongoose');

 //分类的表结构
 module.exports = new mongoose.Schema({
     info:String,                  //车；
     money:String,                 //价钱;
     phone:String,                 //电话号码;
     time:String,                  //上牌时间;
     mileage:String,               //公里数;
     gearbox:String,               //变速箱;
     emission:String,              //排放标准;
     location:String,              //上牌地;
     imgs:Array                    //图片;
 });

models/car-models.js 集合和数据库连接起来同时可以操作:

 "use strict";
 var mongoose = require('mongoose');
 var carSchema = require('../schemas/car-schemas.js');

 module.exports = mongoose.model('sell_carinfos', carSchema);

routers/car-routers.js 请求路径的路由匹配:

1.router.get('/') 匹配index页面

2.router.get('/:id') 匹配详情页是有详情id

3.router.get('*') 匹配的是404错误页

 "use strict";
 var express = require('express');
 var router = express.Router();

 var carUser = require('../models/car-models');
 var data;

 //匹配 汽车详情
 router.get('/:id', function(req, res, next) {

     var _id = req.params.id || ''; 

     //根据id查找数据;
     carUser.findOne({ _id : _id},function( err,contents ){

        if( err ){

                next();

        }else{

                res.render('./info',{
                 carinfo : contents
             });

        }

     });

 });

 //主页面;
 router.get('/', function(req, res, next) {

     var limit = 8;//查几条;
     var skip = 0; //从第几条开始;
     //查表
     carUser.find({}).limit(limit).skip(skip).then(function( contents ){
         res.render('./index',{
             carlists : contents
         });
     });

 });

 //
 router.get('*', function(req, res){
     res.render('./404')
 });

 module.exports = router;

routers/api.js  处理像$.ajax请求 单独的路由:

"use strict";
var express = require('express');
var router = express.Router();
var carModels = require('../models/car-models.js');

//统一返回格式
var responseData = {};

//翻页;
router.post('/pages', function(req, res, next) {

    var pages = req.body.pages || 0; //页码;

    var limit = 8;  //取几条数据;
    var skip = limit * pages; //从第几条开始;
    var totalPages = 0;       //总页数;
    carModels.find({}).count({},function(err,count){
        if(err){
            console.log('出错了');
        }

        totalPages = Math.floor( count / limit );

    });

    carModels.find({}).limit(limit).skip(skip).then(function(data) {

        if( pages < totalPages ){
            responseData.code = 1;
            responseData.message = data;

            return res.json(responseData);
        }else{
            responseData.code = 2;
            return res.json(responseData);
        }

    });

});

module.exports = router;

views/layout.pug 公共头文件 提出共同的css和js:

 doctype html
 html
 head
     meta(charset="UTF-8")
     meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0")
     title 瓜子二手车
     link(rel="stylesheet" type="text/css" href="/public/c/flex.css")
     link(rel="stylesheet" type="text/css" href="/public/c/index.css")
     link(rel="stylesheet" type="text/css" href="/public/c/dropload.css")
     script(src="/public/j/zepto.min.js" type="text/javascript")
 body
     block content

views/index.pug 列表页 继承layaout 同时处理传过json绑定在页面上:

extends layout

block content
        ul.car-ul
            each car in carlists
                li
                    a(href=car._id flex)
                        div(class="car-img" flex-box="1")
                            img(src=car.imgs[0])
                        div(class="car-infolist" flex-box="9")
                            div(class="car-infolist" flex-box="9")
                                    div.car-name.
                                        #{car.info}
                                    div.car-km
                                        span.
                                            #{car.time}年/#{car.mileage}万公里
                                    div.car-price
                                        strong.
                                            #{car.money}万

        script(src="/public/j/dropload.min.js" type="text/javascript")
        script(src="/public/j/index.js" type="text/javascript")

views/info.pug 继承layaout 详情页：

 extends layout

 block content
         div.product-head
             img(class="product-headImg"  src=carinfo.imgs[0])
             div
                 h1.product-title #{carinfo.info}
         div.sevser-about
             ul(class="mod-sev" flex)
                 li(flex="main:center cross:center" flex-box="1")
                     div
                         p.about-own.
                             车主报价
                         p.about-prize.
                             #{carinfo.money}万
                 li(flex="main:center cross:center" flex-box="1")
                     div
                         p.about-own.
                             贷款首期款
                         p.about-prize.
                             ¥#{ Math.floor(parseFloat( carinfo.money.substring(1,carinfo.money.length) ) * 0.3) }万
                 li(flex="main:center cross:center" flex-box="1")
                     div
                         p.about-own.
                             服务费
                         p.about-prize.
                             #{ Math.floor(parseFloat( carinfo.money.substring(1,carinfo.money.length) ) * 0.03 *10000) }元
         div.column
             div.column-head.
                 基本信息
             ul(flex class="column-carul")
                 li(flex-box="5")
                     span.info-title.
                         表显里程：
                     span #{carinfo.mileage}万公里
                 li(flex-box="5")
                     span.info-title.
                         上牌时间：
                     span #{carinfo.time}
                 li(flex-box="5")
                     span.info-title.
                         牌照归属：
                     span #{carinfo.location}
                 li(flex-box="5")
                     span.info-title.
                         排放标准：
                     span #{carinfo.emission}
                 li(flex-box="5")
                     span.info-title.
                         变速箱：
                     span #{carinfo.gearbox}
                 li(flex-box="5")
                     span.info-title.
                         看车地址：
                     span #{carinfo.location}
         div.product-img
             each imgs in carinfo.imgs
                 img(src=imgs)

gulp node app.js的自动重启

 'use strict';

 var gulp = require('gulp');
 var nodemon = require('gulp-nodemon');

 gulp.task('start', function () {
   nodemon({
     script: 'app.js'
   , ext: 'js html'
   , env: { 'NODE_ENV': 'development' }
   })
 })

 //执行的默认事件;
 gulp.task('default',function(){
    gulp.run('start');
 });

后记：

麻雀虽小五脏俱全~

参考资料：

express   :   http://www.expressjs.com.cn/

pug         :   https://pugjs.org/api/getting-started.html

mongodb :   http://www.runoob.com/mongodb/mongodb-tutorial.html

mongoose:   http://www.nodeclass.com/api/mongoose.html

------------------------------------------------------------------------------------------------------------------

scott       :   http://www.imooc.com/learn/259 (jade模板讲解)

scott       :   http://www.imooc.com/learn/75 ||  http://www.imooc.com/learn/197 (express建站)

狼族小狈   :   https://github.com/lzxb/flex.css (flex.css)

西门         :   https://github.com/ximan/dropload (滑动下拉加载JS插件)