Mojito框架入门指南：使用YQL数据源构建Flickr图片展示组件-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01068/article/details/148988431

Mojito框架入门指南：使用YQL数据源构建Flickr图片展示组件

前言

本文将深入讲解如何在Mojito框架中创建一个展示Flickr图片的组件，重点介绍YQL数据源的使用方法。Mojito是一个基于Node.js的全栈MVC框架，允许开发者编写可在服务端和客户端同时运行的代码。

环境准备

在开始之前，请确保已经完成以下准备工作：

已安装Node.js运行环境
已安装Mojito框架
了解基本的JavaScript和YUI模块系统

创建基础应用

首先我们需要创建一个基础的Mojito应用作为开发起点：

mojito create app simple basic-yql

这个命令会创建一个名为basic_yql的基础应用目录结构。进入该目录后，我们将继续创建Flickr图片展示组件。

创建Flickr组件

在应用目录中执行以下命令创建组件：

mojito create mojit simple Flickr

这会生成一个名为Flickr的组件，包含控制器、模型和视图等基本文件。

模型层开发

模型层负责数据获取和处理，我们将使用YQL查询Flickr API获取图片数据。

YQL简介

YQL(Yahoo Query Language)是一种类似SQL的查询语言，可以统一访问多种网络API和数据源。通过YQL查询Flickr数据，我们无需直接处理复杂的API调用细节。

模型实现

修改mojits/Flickr/models/model.server.js文件：

YUI.add('FlickrModel', function(Y, NAME) {
    Y.mojito.models[NAME] = {
        init: function(config) {
            this.config = config;
        },
        getFlickrImages: function(queryString, callback) {
            // 构建YQL查询语句
            var q = 'select * from flickr.photos.search where text="%' + queryString + '%"';
            
            // 执行YQL查询
            Y.YQL(q, function(rawYqlData) {
                // 处理原始数据
                var rawPhotos = rawYqlData.query.results.photo,
                    photos = [];
                
                // 转换数据格式
                for(var i = 0; i < rawPhotos.length; i++) {
                    var photo = {
                        title: rawPhotos[i].title || "[" + queryString + "]",
                        url: buildFlickrUrlFromRecord(rawPhotos[i])
                    };
                    photos.push(photo);
                }
                
                // 回调返回处理后的数据
                callback(photos);
            });
        }
    };
    
    // 辅助函数：构建Flickr图片URL
    function buildFlickrUrlFromRecord(record) {
        return 'http://farm' + record.farm 
            + '.static.flickr.com/' + record.server 
            + '/' + record.id + '_' + record.secret + '.jpg';
    }
}, '0.0.1', {requires: ['yql']});

关键点说明：

使用Y.YQL方法执行查询
查询结果需要适当处理转换
通过回调函数返回数据（非阻塞式）
添加yql模块依赖

控制器开发

控制器负责协调模型和视图，修改mojits/Flickr/controller.server.js：

YUI.add('Flickr', function(Y, NAME) {
    Y.mojito.controllers[NAME] = {
        init: function(config) {
            this.config = config;
        },
        index: function(ac) {
            // 调用模型获取数据
            ac.models.get('ModelFlickr').getFlickrImages('mojito', function(images) {
                // 通过Action Context返回数据
                ac.done({images: images});
            });
        }
    };
}, '0.0.1', {requires: [
    'mojito-models-addon',
    'ModelFlickr'
]});

Action Context详解

Action Context(ac)是Mojito框架提供的核心API，特点包括：

提供统一的服务端/客户端编程接口
包含模型访问、数据返回等核心方法
支持通过Addons扩展功能

视图模板开发

使用Mustache模板引擎渲染数据，修改views/index.mu.html：

<div id="{{mojit_guid}}">
    <h2>Flickr图片展示</h2>
    <ul class="flickr-images">
        {{#images}}
            <li class="image-item">
                <img src="{{url}}" alt="{{title}}" />
                <p>{{title}}</p>
            </li>
        {{/images}}
    </ul>
</div>

应用配置

注册组件

在application.json中配置可用的组件：

[{
    "settings": ["master"],
    "specs": {
        "flickr": {
            "type": "Flickr"
        }
    }
}]

路由配置

创建routes.json定义URL路由：

[{
    "settings": ["master"],
    "routes": [
        {
            "path": "/flickr",
            "call": "flickr.index"
        },
        {
            "path": "/photos",
            "call": "flickr.index"
        }
    ]
}]

路由配置说明：