Node.js学习express框架

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中第一个参数相同

    
        
        
    
    
        
内容标题为<%=title%>
    

注意，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中

    <%for(var i=0; i
    
<%=lists[i]%>
    <%}%>

table表格搭建

table:[
    {name:'张三',age:'22',fav:'足球,游戏'},
    {name:'王五',age:'23',fav:'篮球,音乐,舞蹈'},
    {name:'赵四',age:'30',fav:'舞蹈,电影'},
    {name:'赵铁柱',age:'26',fav:'唱歌,智障'}
]

            <% for(var i=0; i
                
            <% } %>
    

    

        

            
姓名
            
年龄
            
爱好
        
    
    

                    

                        <%=table[i]['name']%>
                    
                    

                        <%=table[i]['age']%>
                    
                    

                        <%=table[i]['fav']%>
                    
                

效果图

之后可以结合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文件

    
        
        
    
    
        
城市-<%=HeWeather5[0].basic.city%>
        天气:<%=HeWeather5[0].now.cond.txt%>
        

        当前温度:<%=HeWeather5[0].now.tmp%>摄氏度
    

效果图