Node.js框架学习
express.js
express.js是什么
Express基于Node.js平台，快速、开放、极简的web开发框架
其他框架：koa...
安装
$ npm install express --save
设置静态服务器
var express = require('express');
var app = express();
// 默认路径
app.use(express.static('./public/'));
app.listen(3000, function () {
console.log("listen 3000");
});
设置特殊路径相应
app.get('/help',function (req,res) {
res.send('你请求我干啥！');
});
设置模板引擎
设置模板
app.set('views', './views');//views, 放模板文件的目录
app.set('view engine', 'ejs');//view engine, 模板引擎
安装模板引擎
$ npm install ejs --save
使用
app.js添加
app.get('/help',function (req,res) {
res.render('aboutme',{title:'我是模板'});
});
views中创建一个.ejs文件，名称与上文render中第一个参数相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title%></title>
</head>
<body>
<h1>内容标题为<%=title%></h1>
</body>
</html>
注意，ejs里面写正常html文件，<%=%>里面是赋值语句
运行，输入地址,即可显示效果
http://localhost:3000/help
遍历数组
app.js书写
app.get('/help',function (req,res) {
var data = {
title:'我是模板',
name:'张增强',
age:'22',
lists:['足球',
'篮球',
'橄榄球',
'棒球',
'羽毛球']
}
res.render('aboutme',data);
});
ejs中
<ul>
<%for(var i=0; i<lists.length; i++){%>
<li><%=lists[i]%></li>
<%}%>
</ul>
table表格搭建
table:[
{name:'张三',age:'22',fav:'足球,游戏'},
{name:'王五',age:'23',fav:'篮球,音乐,舞蹈'},
{name:'赵四',age:'30',fav:'舞蹈,电影'},
{name:'赵铁柱',age:'26',fav:'唱歌,智障'}
]
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<table.length;i++){ %>
<tr>
<td>
<%=table[i]['name']%>
</td>
<td>
<%=table[i]['age']%>
</td>
<td>
<%=table[i]['fav']%>
</td>
</tr>
<% } %>
</tbody>
</table>
效果图
之后可以结合bootstrap进行操作
实时天气预报
添加request模块
$ npm install request --save
接入网站，获取数据
var key = 'cb77d4e4750e4d6fb56c91091e401bc4';
var city = 'tianjin';
var weatherUrl = 'https://free-api.heweather.com/v5/now?key=cb77d4e4750e4d6fb56c91091e401bc4&city='+city;
var request = require('request');
app.get('/weather',function (req,res) {
request(weatherUrl, function (error, response, body) {
if (!error && response.statusCode == 200) {
// 解析json字符串
var weather = JSON.parse(body);
console.log(weather);
res.render('WeatherDemo', weather);
}
});
});
设置ejs文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=HeWeather5[0].basic.city%>今日天气</title>
</head>
<body>
<h2>城市-<%=HeWeather5[0].basic.city%></h2>
天气:<%=HeWeather5[0].now.cond.txt%>
<br>
当前温度:<%=HeWeather5[0].now.tmp%>摄氏度
</body>
</html>
效果图
网友评论