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 的核心. ...
随机推荐
- Java的selenium代码随笔(6)
//获取元素列表public List<WebElement> ListElements(WebElement webElement, By parentBy, By childrenBy ...
- Python Scrapy突破反爬虫机制(项目实践)
对于 BOSS 直聘这种网站,当程序请求网页后,服务器响应内容包含了整个页面的 HTML 源代码,这样就可以使用爬虫来爬取数据.但有些网站做了一些“反爬虫”处理,其网页内容不是静态的,而是使用 Jav ...
- Django(六)Session、CSRF、中间件
大纲 二.session 1.session与cookie对比 2.session基本原理及流程 3.session服务器操作(获取值.设置值.清空值) 4.session通用配置(在配置文件中) 5 ...
- npm link & unlink
npm link & unlink https://dev.to/erinbush/npm-linking-and-unlinking-2h1g
- ArrayList如何扩容?
1.调用ArrayList的参构造方法,此时集合内部是一个空数组 transient Object[] elementData; private static final Object[] DEFAU ...
- 2019-04-28 Mybatis generator逆向工程生成的Example代码分析
今天主要对Mybatis generator生成的DAO层等进行分析,讲解Example类的使用和扩展 1.先在数据库建表 CREATE TABLE `department` ( `fid` ) NO ...
- java 基本数据类型初始值(默认值)
1.int类型定义的数组,初始化默认是0 2.String类型定义的数组,默认值是null 3.char类型定义的数组,默认值是0对应的字符 4.double类型定义的数组,默认值是0.0 5.flo ...
- Java 学习(1)----- java 学习的总体感觉
好久没有更新博客了,是因为最近在集中精力学习java, Java 的基础知识确实是比 js 多太多了. 学习java 断断续续的差不多有一年左右的时间, 这一年来,感觉懂了一点,过一段时间又忘记了,总 ...
- java篇 之 类型转化
类型转换时,如果最初的数值类型是有符号的,那么就执行符号扩展:如果它是char,那么不管将要被转换成什么类型,都执行零扩展 代码执行顺序是从上至下,从右至左 强制转换: Int a =(int)(sh ...
- dataframe常用处理
获取列名:data.columns.values.tolist() 复制列: out['serial_number'] = out['2']这样就是新增了一列,复制了‘2’这一列,然后再del out ...