# g5demo

**Repository Path**: ak64th/g5demo

## Basic Information

- **Project Name**: g5demo
- **Description**: gamux5.0 demo
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2014-11-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#运行方法

    pip3 install -r requirements.txt
    python3 application.py
    
ubuntu的pip3在python3-pip这个包。

然后访问localhost:4000

#网站设计思路

先明确网站必须实现的功能。因为要给盒子提供接口，所以必须提供Restful接口，不能只输出页面。

接下来思路有两种，一种是做一个输出页面的网站，然后添加restful接口。还有一种是网站只提供操作数据的接口，页面交互全在网页上完成，然后再针对SEO生成
一些简单的静态页面，

第一种：

flask中新增一个页面是这样：

    @app.route('/games/')
    def show_game_list():
        # 从数据库里读取游戏数据
        games = db.games.find()        
        render_template('game_list.html',games)
        
这段代码的作用是：把/games/这个url绑定到show_game_list这个函数上，而这个函数会从数据库中读取数据，再读取game_list.html这个模板页面，用游戏
数据渲染输出。
        
game_list.html的内容：

    {% extends "layout.html" %}
    {% block content %}
      <h1>游戏列表</h1>
      {% if games %}
        <ul>
        {% for game in games %}
          <li>{{ game.title | e }}</li>
        {% endfor %}
        </ul>
      {% else %}
        目前数据库中没有没有游戏。
      {% endif %}
    {% endblock %}
    
flask默认用的是jinja2模板，和django的模板系统很接近。

如果要在页面之外单独写rest接口，代码容易冗余，也容易变复杂。我找了一个template_or_json的装饰器，把代码改成了这样：

    @app.route('/games/')
    @template_or_json('game_list.html')
    def show_game_list():
        games = db.games.find() 
        return {'games': games}
        
注意现在返回的是一个字典。template_or_json的作用是，判断当前请求是否是ajax请求，如果是，就把函数返回值转换成json输出，如果不是，就把返回值输出
到模板页面上。这样几乎不用写额外的代码就给站点添加了rest接口。代价是我们不能再使用框架提供的一些直接在模板上起作用的功能。


第二种实现：

用js监听点击链接的事件，触发事件后用ajax获取数据在浏览器端输出，大多数情况下都比第一种方式响应更快。
  
    $("a").click( function(event) {
      // 取消链接原本的功能
      event.preventDefault();
      // 利用jquery的when方法同步读取多个数据源
      $.when(                      
        // 读取json数据
        $.getJSON('/games/', function( data ){
          globalStore.data = data
        }),                      
        // 得到模板文件内容
        $.get("/static/templates/game_list.ms", function(template) {
          globalStore.template = template;
        }) 
      //必要的数据读取完毕之后                        
      ).then(function() {      
        // 渲染模板
        var rendered = Mustache.render(globalStore.template, globalStore.data);
        // 输出
        $('#main').html(rendered);      
      });
    });

这样比较繁琐，如果要加上数据缓存就更加麻烦，所以找了个叫sammy.js的框架。框架的理念很简单，设置路由，绑定事件：

    // 创建一个Sammy.app对象，监听#main元素内所有链接
    app = Sammy('#main', function() {
      // 调用Mustache插件
      this.use('Mustache', 'ms');
      // 如果有对/games/:id的get请求，就触发事件。:id是通配符，在事件内用context.params.id访问
      this.get('/games/:id', function(context) {
        // 读取json
        context.load('/games/' + this.params.id, {json: true})
          .then(function(data) {
            // 渲染页面后输出。默认输出到#main内
            context.partial('/static/templates/game.ms',data);
        });
      });
      
      this.get('/', function(context) {
        context.app.swap('');
        context.load('/games/', {json: true})
          .then(function(data) {
            games = data.games
            context.games = games
            context.partial('/static/templates/game_list.ms');
        });
      });
    });      
    
    // 运行app
    app.run();