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插件)
express 实践的更多相关文章
- express实践(一)
涉及以下这些内容: 主体. cookie.session 数据 模板引擎 服务器基本结构: const express=require('express'); const static=require ...
- nodejs 实践:express 最佳实践 (一)
express 最佳实践 (一) 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色,, 在 web同构 方面, nodejs 的优势 ...
- nodejs 实践:express 最佳实践 (一) 项目结构
express 最佳实践 (一) 第二篇: express 最佳实践(二):中间件 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色 ...
- express 最佳实践(二):中间件
express 最佳实践(二):中间件 第一篇 express 最佳实践(一):项目结构 express 中最重要的就是中间件了,可以说中间件组成了express,中间件就是 express 的核心. ...
- nodejs 实践:express 最佳实践(四) express-session 解析
nodejs 实践:express 最佳实践(四) express-session 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs ...
- vue实践---vue配合express实现请求数据mock
mock数据是前端比较常见的技术,这里介绍下vue配合express 实现请求数据mock. 第一步: 安装 express : npm install express -D 第二步: 简历需要mo ...
- nodejs 实践:express 最佳实践系列
nodejs 实践:express 最佳实践系列 nodejs 实践:express 最佳实践(一) 项目结构 nodejs 实践:express 最佳实践(二) 中间件 nodejs 实践:expr ...
- 开始nodejs+express的学习+实践(1)
开始nodejs+express的学习+实践(1) 开始nodejs+express的学习+实践(2) 开始nodejs+express的学习+实践(3) 开始nodejs+express的学习+实践 ...
- nodejs 实践:express 最佳实践(二) 中间件
express 最佳实践(二):中间件 第一篇 express 最佳实践(一):项目结构 express 中最重要的就是中间件了,可以说中间件组成了express,中间件就是 express 的核心. ...
随机推荐
- Web项目中的 /
如果 / 出现在路径的前面: web.xml中:http://loclalhost:8080/项目名称/ 在项目的根路径下面 jsp中: http://localhost:8080/ ...
- 放下VS2010,拥抱VS2019
VS2019 再过几天就要正式发布了,我们还在使用 VS2010 进行软件开发.由于所处行业环境及项目类型,加之之前的代码积累,所以即使不用新的开发环境.新的语言技术也能比较好的完成工作.那究竟要不要 ...
- javascript闭包以及闭包的作用
什么是闭包?———>是一个函数,一个可以访问其他函数内部数据的函数. 栗子一: function foo() { var a = 1; } function fn() { console.log ...
- Python基础:语法基础(3)
本篇主要介绍Python中一些基础语法,其中包括:标识符.关键字.常量.变量.表达式.语句.注释.模块和包等内容. 1. 标识符和关键字 1.1 标识符 标识符是变量.常量.函数.属性.类.模块和包等 ...
- log4j到log4j2升级迁移方案
序:这段时间因为维护的项目存在大量日志打印,严重拖慢整体响应时间,在做性能优化的工作中对这块内容进行了升级换代,由以前的log4j升级为log4j2,以实现日志异步打印.接下来记录一下这个费时半个月的 ...
- [Java]list集合为空或为null的区别
判断的是list这个集合的问题,当前需要判断list内值的问题. 简述判断一个list集合是否为空,我们的惯性思维是判断list是否等于null即可,但是在Java中,list集合为空还是为null, ...
- Vscode生成verilog例化
前言 手动例化又慢又容易出错,孩子老犯错怎么办? 当然是脚本一劳永逸. 流程 (1)在vscode中安装如下插件. (2)在电脑中安装python3以上的环境. 下载地址:https://www.py ...
- v-for 循环element-ui菜单
vue 使用了element-ui的菜单组件, 这个组件的el-menu-item项上,有一个属性index,值是字符串类型, 在使用v-for的index时,它是一个数值型,所以如果直接写index ...
- java-最大连续子数组和(最大字段和)
1.题目要求 给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值.当所给的整数均为负数时定义子段和为0, ...
- [HNOI2012]集合选数(状压DP+构造)
题目要求若出现x,则不能出现2x,3x 所以我们考虑构造一个矩阵 \(1\ 2\ 4 \ 8--\) \(3\ 6\ 12\ 24--\) \(9\ 18\ 36--\) \(--\) 不难发现,对于 ...