Authored by xuqi

new app partial for base demo

/**
* 组件demo页controller
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/6/30
*/
'use strict';
const index = (req, res) => {
res.render('index', {
module: 'partial',
page: 'index',
title: 'Yoho!buy有货',
content: {
checkbox: [
{
place: 'hello world' // just for placehodler
},
{
checked: true
}
],
radio: [
{
place: 'hello world' // just for placehodler
},
{
checked: true
}
]
}
});
};
module.exports = {
index // 组件demo页
};
... ...
/**
* sub app partial
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/06/30
*/
var express = require('express'),
path = require('path'),
hbs = require('express-handlebars');
var app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
Object.assign(app.locals, parent.locals);
});
app.set('views', path.join(__dirname, 'views/action'));
app.engine('.hbs', hbs({
extname: '.hbs',
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: ['./views/partial', `${doraemon}/partial`],
helpers: 'helpers'
}));
// router
app.use(require('./router'));
module.exports = app;
... ...
/**
* router of sub app partial
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/06/30
*/
'use strict';
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const partial = require(cRoot);
// Your controller here
router.get('/', partial.index); // 组件demo页
module.exports = router;
... ...
<style>
p {
padding: 10px 0;
}
.btn {
margin-bottom: 10px;
}
.demo-page {
padding: 10px;
}
</style>
<div class="demo-page blk-page">
{{# content}}
<p>1.复选按钮</p>
{{#each checkbox}}
{{> checkbox}}
<br><br>
{{/each}}
<p>2.单选按钮</p>
{{#each radio}}
{{> radio}}
<br><br>
{{/each}}
<p>3. 按钮</p>
<span class="btn">普通按钮</span>
<span class="btn disable">不可点按钮</span>
<span class="btn red">红色按钮</span>
<span class="btn white">白色按钮</span>
<p>4. 提示文字或者某些链接文字颜色</p>
<span class="blue">提示文字</span>
<a class="blue">Link text</a>
<p>5. input</p>
<input class="input" type="text">
<p class="bold">6.文字加粗</p>
<p>7. 浮动和clearfix</p>
<div class="clearfix" style="width: 300px;border: 1px solid #000;">
<p class="left">左浮动</p>
<p class="right">右浮动</p>
</div>
<p>8. 显示和隐藏</p>
<div style="border: 1px solid #000;">
<p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
<p><span class="block">我是block</span></p>
<p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block,我原本是inline元素,现在可以设置高度了</span></p>
<p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
</div>
{{/ content}}
</div>
\ No newline at end of file
... ...
... ... @@ -11,7 +11,7 @@ const isTest = process.env.NODE_ENV === 'test';
module.exports = {
port: 6003,
siteUrl: 'http://www.yohoblkcom',
siteUrl: 'http://www.yohoblk.com',
domains: {
api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
service: 'http://devservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
... ...
... ... @@ -7,6 +7,7 @@
module.exports = app => {
// 公共服务
app.use('/partial', require('./apps/partial')); // 组件demo
// 业务模块
};
... ...