zoukankan      html  css  js  c++  java
  • art-template实例(超详细)

    效果展示

    首先下载模板引擎,在需要下载的地方打开命令行工具,输入

    npm install atr-template --save
    

    下载模板引擎后会出现文件夹 node_modules

    下载完成之后就可以开始代码,需要一个js文件和一个html文件,html用来存储模板

    js代码app.js

    var http = require('http')
    var fs = require('fs')
    var template = require('art-template')
    http
    	.createServer(function(req, res) {
    		var url = req.url
    		if (url === '/') {
    			//读取文件的模板内容,
    			fs.readFile('./index.html', function(err, data) {
    				if (err) {
    					return res.end('404')
    				}
    				//默认读取到的data是二进制数据,模板引擎的render接收的是字符串,需要data转toString
    				var ret = template.render(data.toString(), {
                                            //里面可以更改对应的值
    					name:'fur',
    					age:18,
    					province:'广州',
    					hobbies:[
    						'打代码',
    						'吃零食'
    					]
    				})
    				res.end(ret)
    			})
    		}
    	})
    	.listen(3000, function() {
    		console.log('runing')
    	})
    
    

    html代码index.js

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<p>我叫{{ name }}</p>
    		<p>我{{ age }}岁</p>
    		<p>我来自{{ province }}</p>
                    //这里有个循环输出
    		<p>我喜欢{{ each hobbies }} {{ $value }} {{/each}}</p>
    	</body>
    </html>
    
    

    两个文件都ok就可以打开控制台到当前目录,使用 node app.js
    即可看到运行结果 控制台输出runing即成功,然后打开浏览器输入

    效果展示

  • 相关阅读:
    完成登录与注册页面的前端
    JavaScript 基础,登录验证
    CSS实例:图片导航块
    导航,头部,CSS基础
    web基础,用html元素制作web页面
    web基础
    timestamp与timedelta,管理信息系统概念与基础
    datetime处理日期和时间
    加载静态文件,父模板的继承和扩展
    开始Flask项目
  • 原文地址:https://www.cnblogs.com/furfur-jiang/p/11393107.html
Copyright © 2011-2022 走看看