Nodejs in Visual Studio Code 05.Swig+Bootstrap
1. 开始
准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise
准备好AdminLTE后台管理模版:https://www.almsaeedstudio.com/
2. Express特性
2.1 静态文件与动态网页(Asp.Net??)
静态文件:Express示例站点包含public目录,public目录中所有内容如js、css、img、html将作为静态文件直接返回给客户端。
App.js
app.use(express.static(path.join(__dirname, 'public')));
动态网页:其中views和routes目录组成的内容用户发布动态网页和RestAPI。(就像是aspx和aspx.cs分开存储了一样)
App.js
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', swig.renderFile); app.use('/', routes);
app.use('/users', users);
express.nodejs == asp.net , express.nodejs几乎能做到asp.net的一切。(但貌似如何做单点登录我还不会)
2.2 内存缓存
所有ViewEngine都有内存缓存,以便于下次访问提高效率,使用Swig模版构建动态网页,搭建小中型网站时不用太担心效率问题。
3.Swig特性
3.1Template化开发网页
创建一个模版
<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
<li{% if loop.first %} class="first"{% endif %}>
{{ author }}
</li>
{% endfor %}
</ul>
渲染模版
var swig = require('swig');
swig.renderFile('/path/to/template.html', {
pagename: 'awesome people',
authors: ['Paul', 'Jim', 'Jane']
});
最终结果
<h1>Awesome People</h1>
<ul>
<li class="first">Paul</li>
<li>Jim</li>
<li>Jane</li>
</ul>
3.2模版继承
使用extentds标签,继承母模版的结构,并可以用block xxx等标签,对母板的内容进行重载(很像C#的override)
{% extends 'layout.tpl' %} {% block title %}{{ title }}{% endblock %} {% block content %}
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
{% endblock %}
4.与Bootstrap框架集成
Express+Swig完全就是个小写的Asp.Net。以前开发Asp.Net业务网站时常使用iframe,到Swig模版中完全可以使用模版继承来避免使用iframe,我仿佛看到了这个站点将会比iframe少了一半的js、css加载需求。
可以将上图的AdminLTE,顶部栏与菜单栏代码写到layout.tpl中维护,内容栏写到index.tpl进行维护,这样负责框架的来维护layout.tpl仅关心用户登录、通知、菜单加载,而不比关心内容,负责编写业务内容的也不必关心整体的框架。
Index仅编写业务代码
{% extends 'layout.tpl' %} {% block title %}02.Swig&Bootstrap{%endblock%} {% block body %}class="hold-transition skin-blue sidebar-collapse sidebar-mini"{%endblock%} {% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
用户管理
<small>查找用户进行修改</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
<li>管理工具</li>
<li class="active">用户管理</li>
</ol>
</section> <!-- Main content -->
<section class="content"> <!-- Your Page Content Here -->
<div class="row">
<div class="col-xs-12">
<div class="box box-info">
<div id="toolbar_account"></div>
<div class="box-body">
<p>用户管理 在这里填写内容</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
{% endblock %} {% block script %}
<!-- AdminLTE App -->
<script src="plugins/AdminLTE-2.3.0-dist/js/app.min.js"></script>
{% endblock %}
下面是最终效果,将会通过{% extends 'layout.tpl' %} 继承整个母板框架的内容
下载源代码:https://github.com/Mengkzhaoyun/nodepractise
源代码路径:02.Swig&Bootstrap
5.使用Grunt发布前端代码
Grunt是一款Nodejs前端自动化工具,参考http://www.gruntjs.net/。
由于项目上的大部分业务使用IIS作为Web服务器,需要将所有写好的前端代码发布成html部署,使用Grunt,可以很轻松的做到这一切。
首先在CMD中安装Grunt-Cli命令工具
$ npm install grunt-cli -g
然后打开项目的package.json增加Grunt和Grunt-swig-template模块。
{
"name": "swigbootstrap",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"swig": "*",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"grunt-swig-templates": "*",
"grunt": "*"
}
}
新增一个配置文件Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
//将views/*.tpl编译输出为htmls/*.html
swig: {
default_options: {
options: {
templatePath: 'views/',
data: {
title: 'Swig Express Samples By MengkZhaoyun'
}
},
expand: true,
cwd: 'views/',
src: ['*.tpl'],
dest: 'htmls/',
ext: '.html'
}
}
}) // 加载包含 "swig" 任务的插件。
grunt.loadNpmTasks('grunt-swig-templates'); // 默认被执行的任务列表。
grunt.registerTask('default', ['swig']); };
打开CMD运行Grunt命令
$ cd 02.Swig&Bootstrap
$ grunt
命令执行后多出htmls目录,下面是已编译的html
Nodejs in Visual Studio Code 05.Swig+Bootstrap的更多相关文章
- crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap
1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...
- Nodejs in Visual Studio Code 04.Swig模版
1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...
- Nodejs in Visual Studio Code 11.前端工程优化
1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...
- Nodejs in Visual Studio Code 14.IISNode与IIS7.x
1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...
- Nodejs in Visual Studio Code 10.IISNode
1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...
- crossplaform---Nodejs in Visual Studio Code 04.Swig模版
1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...
- Nodejs in Visual Studio Code 01.简单介绍Nodejs
1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...
- Nodejs in Visual Studio Code 07.学习Oracle
1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...
- Nodejs in Visual Studio Code 06.新建Module
1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...
随机推荐
- 【AIX】采用vi语法编辑命令行
AIX中不能像centos那样移动方向键上.下来查询历史键入的命令行记录 可以通过一条命令采用vim的语法编辑命令行,查询历史记录. # set -o vi 在命令行输入上述命令后就可以: ESC+k ...
- 第一篇:Power BI数据可视化概述
前言 "可视化之工具,可爱者甚蕃.统计学家独爱R,自Python来,世人盛爱matplotlib.余独爱Power BI之出微软而不染(免费),濯Office而不妖(够精简).......& ...
- 设置listview的header不能点击
View headView = inflater.inflate(R.layout.search_top, null); mListView.addHeaderView(headView ,null, ...
- Getting Started with the NDK
The Native Development Kit (NDK) is a set of tools that allow you to leverage C and C++ code in your ...
- shell 求总分
求总分并且输出: 文件a.txt 学号 姓名 性别 年龄 张三 男 赵四 男 李丽 女 文件b.txt 学号 语文 数学 英语 方法1: #!/bin/sh paste a.txt b.txt ccc ...
- Bernese安装及使用
一.安装: 伯尔尼软件的安装很简单,但是在64位下,可能perl解释器安装不成功,我找了一个,并且可用,下载地址: 链接:http://pan.baidu.com/s/1hr8fgEC 密码:fj8b ...
- C#解leetcode 18. 4Sum
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- PHP 网页爬虫
只能爬一个页面 <?php function get_urls($url){ $url_array=array(); $the_first_content=file_get_contents($ ...
- [转] iOS TableViewCell 动态调整高度
原文: http://blog.csdn.net/crayondeng/article/details/8899577 最近遇到了一个cell高度变化的问题,在找解决办法的时候,参考了这篇文章,觉得不 ...
- 防止sql注入 参数化解决方案
StringBuilder strSql=new StringBuilder(); strSql.Append("insert into T_SysLog("); strSql.A ...