学习node（13）

server.js文件

/*
模板引擎

npm更新模块命令：npm  install  模块名字@latest -g

jade 侵入式，缩进分层级
ejs 非侵入式的
*/

const jade = require('jade');
const fs = require('fs');
const express = require('express');

 let str = jade.renderFile('./jade/1.jade',{pretty:true,
 name:'zz',
 class_:['ff','ss'],
 style_:{width:'200px',height:'200px',background:'green','font-size':'20px'},
 content:[{name:'aa',age:19},{name:'bb',age:11},{name:'cc',age:30}]
 });
 //pretty:true  是把生成的代码格式弄的好看一些
 console.log(str);
 let server = express();
 server.use('/',function(req,res){
	 res.send(str)
 })
 server.listen(8045);
 /* fs.writeFile('./build/a.html',str,function(err){
	 if(err){
		 console.log('失败');
	 }else{
		 console.log('成功');
	 }
 }) */
 /*
 script. 代表script所有下一级的东西都是原样输出！！
 |文本输出 代表了原样输出
 script
 	include ../1.js  引入外部的js文件
	
div(style="color:blue;",id="con") 属性
p 文本输出  标签后面+空格+内容 但是不能太长，不能折行
div(style={color:'blue',"font-size":'20px'}) 文本输出    style可以用json
div(class="left top") class可以直接写
div(class=["left","top"]) 也可以用数组代替
p.left   class为left
p#top    id为top

jade能自动识别单双标签
jade可以写自定义标签，且默认双标签

span #{name}  name这个变量在server里设置
-var a = 4;   - 代表是代码，每行都要有
p=a * b   输出 a * b 

注入式攻击:
jade会把标签转译，防止注入式攻击
-let str = '<p>p里面的文本</p><div>div里的文本</div>'
&lt;p&gt;p里面的文本&lt;/p&gt;&lt;div&gt;div里的文本&lt;/div&gt;

div!= str  加上 ！ 号，就不会被转译了
<p>p里面的文本</p><div>div里的文本</div>

-let count = 20;
-if(count > 18)
	p 已经成年
-else
	p 未成年
			
-let number = 1;      //如果后面都是代码的话，可以只有一个 -  ，就可以了     
case number
	when 1
		div case1
	when 2
		div case2
	default
		div case不靠谱
 */

 

jade文件

html
	head
	body
		div
			input
		div(style="color:blue;",id="con")
		div(style={color:'blue',"font-size":'20px'}) 文本输出
		div(class="left top")
		div(class=["left","top"])
		p.left
		p#top
		div&attributes({title:'标题',class:'con1 con2'}) attributes
		p 文本输出
			span 文本输出
		div 文本输出
			p
				|文本输出
		script.
			let con = document.getElementByTagName('div');
			con.style.width = '200px';
			con.style.height = '200px';
			con.style.background = 'blue';
		script
			include ../1.js
		span #{name}
		div(class=class_,style=style_)
		-var a = 4;
		-var b = 5;
		p #{ a + b }
		p=a * b
		-for(let i = 0; i < content.length; i++)
			li 名字：#{content[i].name} , 年龄：#{content[i].age}
		-let str = '<p>p里面的文本</p><div>div里的文本</div>'
		div= str
		div!= str
		-let count = 20;
		-if(count > 18)
			p 已经成年
		-else
			p 未成年
		-let number = 1;
		case number
			when 1
				div case1
			when 2
				div case2
			default
				div case不靠谱