express的响应接口、组件、模版修改

写一个响应接口

下面写个接口。首先在'/ajax'下获取,然后res.json返回json格式的

app.get('/ajax', function (req, res) {
    res.json({'aa': 11})
})

然后在渲染页面用ajax发送一个请求用get访问这个接口

$('#btn').click(function () {
    $.ajax({
        url: 'http://11111111:3000/ajax',
        type: 'get',
        dataType: 'json',
        data: {
            name: '马朝阳',
            age: '27'
        },
        success: function (data) {
            console.log(data)
        },
        err: function (err) {
            console.log('错误')
        }
    })
})

写一个组件

这里写一个中间件,创建一个json,其中res.locals,--》变量只提供给本次请求响应的周期内视图渲染里使用。partials作为储存所有组件信息的对象

app.use(function (req, res, next) {
    if(!res.locals.partials) res.locals.partials = {}
    res.locals.partials.weather = getWeatherData()
    next()
})
app.get('/', function (req, res) {
    res.render('home')
})
function getWeatherData() {
    return {
        locations: [
            {
                name: 'Portland',
                forecastUrl: 'http://www.wunderground.com/US/OR/Portland.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/cloudy.gif',
                weather: 'Overcast',
                temp: '54.1 F (12.3 C)'
            },
            {
                name: 'Bend',
                forecastUrl: 'http://www.wunderground.com/US/OR/Bend.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',
                weather: 'Partly Cloudy',
                temp: '55.0 F (12.8 C)'
            },
            {
                name: 'Manzanita',
                forecastUrl: 'http://www.wunderground.com/US/OR/Manzanita.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/rain.gif',
                weather: 'Light Rain',
                temp: '55.0 F (12.8 C)'
            }
        ]
    }
}

在views/partials里面创建weather组件,这里我们将返回过来的weather数据通过handlebars语法渲染出来

<\div class="weatherWidget">
    {{#each partials.weather.locations}}
        <\div class="location">
            <\h3>{{name}}<\a href="{{forecastUrl}}" data-ke-src="{{forecastUrl}}">
                <\img src="{{iconUrl}}" data-ke-src="{{iconUrl}}" alt="{{weather}}">
                {{weather}},{{temp}}
            <\/a>
        <\/div>
    {{/each}}
<\/div>

修改模版

如果不需要渲染模版,layout:null就可以了。

app.get('/about', function (req, res) {
    res.render('about', {layout: 'about'})  // 切换不同模版,为null就不需要使用模版
})

随机浏览