截图:

  

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

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. Web项目中的 /

    如果 /  出现在路径的前面: web.xml中:http://loclalhost:8080/项目名称/      在项目的根路径下面 jsp中: http://localhost:8080/    ...

  2. 放下VS2010,拥抱VS2019

    VS2019 再过几天就要正式发布了,我们还在使用 VS2010 进行软件开发.由于所处行业环境及项目类型,加之之前的代码积累,所以即使不用新的开发环境.新的语言技术也能比较好的完成工作.那究竟要不要 ...

  3. javascript闭包以及闭包的作用

    什么是闭包?———>是一个函数,一个可以访问其他函数内部数据的函数. 栗子一: function foo() { var a = 1; } function fn() { console.log ...

  4. Python基础:语法基础(3)

    本篇主要介绍Python中一些基础语法,其中包括:标识符.关键字.常量.变量.表达式.语句.注释.模块和包等内容. 1. 标识符和关键字 1.1 标识符 标识符是变量.常量.函数.属性.类.模块和包等 ...

  5. log4j到log4j2升级迁移方案

    序:这段时间因为维护的项目存在大量日志打印,严重拖慢整体响应时间,在做性能优化的工作中对这块内容进行了升级换代,由以前的log4j升级为log4j2,以实现日志异步打印.接下来记录一下这个费时半个月的 ...

  6. [Java]list集合为空或为null的区别

    判断的是list这个集合的问题,当前需要判断list内值的问题. 简述判断一个list集合是否为空,我们的惯性思维是判断list是否等于null即可,但是在Java中,list集合为空还是为null, ...

  7. Vscode生成verilog例化

    前言 手动例化又慢又容易出错,孩子老犯错怎么办? 当然是脚本一劳永逸. 流程 (1)在vscode中安装如下插件. (2)在电脑中安装python3以上的环境. 下载地址:https://www.py ...

  8. v-for 循环element-ui菜单

    vue 使用了element-ui的菜单组件, 这个组件的el-menu-item项上,有一个属性index,值是字符串类型, 在使用v-for的index时,它是一个数值型,所以如果直接写index ...

  9. java-最大连续子数组和(最大字段和)

    1.题目要求   给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值.当所给的整数均为负数时定义子段和为0, ...

  10. [HNOI2012]集合选数(状压DP+构造)

    题目要求若出现x,则不能出现2x,3x 所以我们考虑构造一个矩阵 \(1\ 2\ 4 \ 8--\) \(3\ 6\ 12\ 24--\) \(9\ 18\ 36--\) \(--\) 不难发现,对于 ...