截图:

  

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

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插件)

express 实践的更多相关文章

  1. express实践(一)

    涉及以下这些内容: 主体. cookie.session 数据 模板引擎 服务器基本结构: const express=require('express'); const static=require ...

  2. nodejs 实践:express 最佳实践 (一)

    express 最佳实践 (一) 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色,, 在 web同构 方面, nodejs 的优势 ...

  3. nodejs 实践:express 最佳实践 (一) 项目结构

    express 最佳实践 (一) 第二篇: express 最佳实践(二):中间件 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色 ...

  4. express 最佳实践(二):中间件

    express 最佳实践(二):中间件 第一篇 express 最佳实践(一):项目结构 express 中最重要的就是中间件了,可以说中间件组成了express,中间件就是 express 的核心. ...

  5. nodejs 实践:express 最佳实践(四) express-session 解析

    nodejs 实践:express 最佳实践(四) express-session 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs ...

  6. vue实践---vue配合express实现请求数据mock

    mock数据是前端比较常见的技术,这里介绍下vue配合express 实现请求数据mock. 第一步: 安装 express :  npm install express -D 第二步: 简历需要mo ...

  7. nodejs 实践:express 最佳实践系列

    nodejs 实践:express 最佳实践系列 nodejs 实践:express 最佳实践(一) 项目结构 nodejs 实践:express 最佳实践(二) 中间件 nodejs 实践:expr ...

  8. 开始nodejs+express的学习+实践(1)

    开始nodejs+express的学习+实践(1) 开始nodejs+express的学习+实践(2) 开始nodejs+express的学习+实践(3) 开始nodejs+express的学习+实践 ...

  9. nodejs 实践:express 最佳实践(二) 中间件

    express 最佳实践(二):中间件 第一篇 express 最佳实践(一):项目结构 express 中最重要的就是中间件了,可以说中间件组成了express,中间件就是 express 的核心. ...

随机推荐

  1. Java的selenium代码随笔(6)

    //获取元素列表public List<WebElement> ListElements(WebElement webElement, By parentBy, By childrenBy ...

  2. Python Scrapy突破反爬虫机制(项目实践)

    对于 BOSS 直聘这种网站,当程序请求网页后,服务器响应内容包含了整个页面的 HTML 源代码,这样就可以使用爬虫来爬取数据.但有些网站做了一些“反爬虫”处理,其网页内容不是静态的,而是使用 Jav ...

  3. Django(六)Session、CSRF、中间件

    大纲 二.session 1.session与cookie对比 2.session基本原理及流程 3.session服务器操作(获取值.设置值.清空值) 4.session通用配置(在配置文件中) 5 ...

  4. npm link & unlink

    npm link & unlink https://dev.to/erinbush/npm-linking-and-unlinking-2h1g

  5. ArrayList如何扩容?

    1.调用ArrayList的参构造方法,此时集合内部是一个空数组 transient Object[] elementData; private static final Object[] DEFAU ...

  6. 2019-04-28 Mybatis generator逆向工程生成的Example代码分析

    今天主要对Mybatis generator生成的DAO层等进行分析,讲解Example类的使用和扩展 1.先在数据库建表 CREATE TABLE `department` ( `fid` ) NO ...

  7. java 基本数据类型初始值(默认值)

    1.int类型定义的数组,初始化默认是0 2.String类型定义的数组,默认值是null 3.char类型定义的数组,默认值是0对应的字符 4.double类型定义的数组,默认值是0.0 5.flo ...

  8. Java 学习(1)----- java 学习的总体感觉

    好久没有更新博客了,是因为最近在集中精力学习java, Java 的基础知识确实是比 js 多太多了. 学习java 断断续续的差不多有一年左右的时间, 这一年来,感觉懂了一点,过一段时间又忘记了,总 ...

  9. java篇 之 类型转化

    类型转换时,如果最初的数值类型是有符号的,那么就执行符号扩展:如果它是char,那么不管将要被转换成什么类型,都执行零扩展 代码执行顺序是从上至下,从右至左 强制转换: Int a =(int)(sh ...

  10. dataframe常用处理

    获取列名:data.columns.values.tolist() 复制列: out['serial_number'] = out['2']这样就是新增了一列,复制了‘2’这一列,然后再del out ...