在Python的web框架中中编写日志列表的教程

MVVM模式不但可用于Form表单,在复杂的管理页面中也能大显身手。例如,分页显示Blog的功能,我们先把后端代码写出来:

在apis.py中定义一个Page类用于存储分页信息:

class Page(object):
  def __init__(self,item_count,page_index=1,page_size=10):
    self.item_count = item_count
    self.page_size = page_size
    self.page_count = item_count // page_size + (1 if item_count % page_size > 0 else 0)
    if (item_count == 0) or (page_index < 1) or (page_index > self.page_count):
      self.offset = 0
      self.limit = 0
      self.page_index = 1
    else:
      self.page_index = page_index
      self.offset = self.page_size * (page_index - 1)
      self.limit = self.page_size
    self.has_next = self.page_index < self.page_count
    self.has_previous = self.page_index > 1

在urls.py中实现API:

def _get_blogs_by_page():
  total = Blog.count_all()
  page = Page(total,_get_page_index())
  blogs = Blog.find_by('order by created_at desc limit ?,?',page.offset,page.limit)
  return blogs,page

@api
@get('/api/blogs')
def api_get_blogs():
  blogs,page = _get_blogs_by_page()
  return dict(blogs=blogs,page=page)

返回模板页面:

@view('manage_blog_list.html')
@get('/manage/blogs')
def manage_blogs():
  return dict(page_index=_get_page_index(),user=ctx.request.user)

模板页面首先通过API:GET /api/blogs?page=?拿到Model:

{
  "page": {
    "has_next": true,"page_index": 1,"page_count": 2,"has_previous": false,"item_count": 12
  },"blogs": [...]
}

然后,通过Vue初始化MVVM:

<script>
function initVM(data) {
  $('#div-blogs').show();
  var vm = new Vue({
    el: '#div-blogs',data: {
      blogs: data.blogs,page: data.page
    },methods: {
      previous: function () {
        gotoPage(this.page.page_index - 1);
      },next: function () {
        gotoPage(this.page.page_index + 1);
      },edit_blog: function (blog) {
        location.assign('/manage/blogs/edit/' + blog.id);
      }
    }
  });
}

$(function() {
  getApi('/api/blogs?page={{ page_index }}',function (err,results) {
    if (err) {
      return showError(err);
    }
    $('#div-loading').hide();
    initVM(results);
  });
});
</script>

View的容器是#div-blogs,包含一个table,我们用v-repeat可以把Model的数组blogs直接变成多行的<tr>:

<div id="div-blogs" class="uk-width-1-1" style="display:none">
  <table class="uk-table uk-table-hover">
    <thead>
      <tr>
        <th class="uk-width-5-10">标题 / 摘要</th>
        <th class="uk-width-2-10">作者</th>
        <th class="uk-width-2-10">创建时间</th>
        <th class="uk-width-1-10">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-repeat="blog: blogs" >
        <td>
          <a target="_blank" v-attr="href: '/blog/'+blog.id" v-text="blog.name"></a>
        </td>
        <td>
          <a target="_blank" v-attr="href: '/user/'+blog.user_id" v-text="blog.user_name"></a>
        </td>
        <td>
          <span v-text="blog.created_at.toDateTime()"></span>
        </td>
        <td>
          <a href="#0" v-on="click: edit_blog(blog)"><i class="uk-icon-edit"></i>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="uk-width-1-1 uk-text-center">
    <ul class="uk-pagination">
      <li v-if="! page.has_previous" class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
      <li v-if="page.has_previous"><a v-on="click: previous()" href="#0"><i class="uk-icon-angle-double-left"></i></a></li>
      <li class="uk-active"><span v-text="page.page_index"></span></li>
      <li v-if="! page.has_next" class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>
      <li v-if="page.has_next"><a v-on="click: next()" href="#0"><i class="uk-icon-angle-double-right"></i></a></li>
    </ul>
  </div>
</div>

往Model的blogs数组中增加一个Blog元素,table就神奇地增加了一行;把blogs数组的某个元素删除,table就神奇地减少了一行。所有复杂的Model-View的映射逻辑全部由MVVM框架完成,我们只需要在HTML中写上v-repeat指令,就什么都不用管了。

可以把v-repeat="blog: blogs"看成循环代码,所以,可以在一个<tr>内部引用循环变量blog。v-text和v-attr指令分别用于生成文本和DOM节点属性。

完整的Blog列表页如下:

2015430104720938.png (497×539)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


本文从多个角度分析了vi编辑器保存退出命令。我们介绍了保存和退出vi编辑器的命令,以及如何撤销更改、移动光标、查找和替换文本等实用命令。希望这些技巧能帮助你更好地使用vi编辑器。
Python中的回车和换行是计算机中文本处理中的两个重要概念,它们在代码编写中扮演着非常重要的角色。本文从多个角度分析了Python中的回车和换行,包括回车和换行的概念、使用方法、使用场景和注意事项。通过本文的介绍,读者可以更好地理解和掌握Python中的回车和换行,从而编写出更加高效和规范的Python代码。
SQL Server启动不了错误1067是一种比较常见的故障,主要原因是数据库服务启动失败、权限不足和数据库文件损坏等。要解决这个问题,我们需要检查服务日志、重启服务器、检查文件权限和恢复数据库文件等。在日常的数据库运维工作中,我们应该时刻关注数据库的运行状况,及时发现并解决问题,以确保数据库的正常运行。
信息模块是一种可重复使用的、可编程的、可扩展的、可维护的、可测试的、可重构的软件组件。信息模块的端接需要从接口设计、数据格式、消息传递、函数调用等方面进行考虑。信息模块的端接需要满足高内聚、低耦合的原则,以保证系统的可扩展性和可维护性。
本文从电脑配置、PyCharm版本、Java版本、配置文件以及程序冲突等多个角度分析了Win10启动不了PyCharm的可能原因,并提供了解决方法。
本文主要从多个角度分析了安装SQL Server 2012时可能出现的错误,并提供了解决方法。
Pycharm是一款非常优秀的Python集成开发环境,它可以让Python开发者更加高效地进行代码编写、调试和测试。在Pycharm中设置解释器非常简单,我们可以通过创建新项目、修改项目解释器、设置全局解释器等多种方式进行设置。
Python中有多种方法可以将字符串转换为整数,包括使用int()函数、try-except语句、正则表达式、map()函数、ord()函数和reduce()函数。在实际应用中,应根据具体情况选择最合适的方法。
本文介绍了导入CSV文件的多种方法,包括使用Excel、Python和R等工具。同时,还介绍了导入CSV文件时需要注意的一些细节和问题。CSV文件是数据处理和分析中不可或缺的一部分,希望本文能够对读者有所帮助。
mongodb是一种新型的数据库,它采用了面向文档的数据模型,具有灵活性、高性能和高可用性等优势。但是,mongodb也存在数据结构混乱、安全性和学习成本高等问题。
当Python运行不了时,我们应该从代码、Python环境、操作系统和硬件设备等多个角度来排查问题,并采取相应的解决措施。
Python列表是一种常见的数据类型,排序是列表操作中的一个重要部分。本文介绍了Python列表降序排序的方法,包括使用sort()函数、sorted()函数以及自定义函数进行排序。使用sort()函数可以简单方便地实现降序排序,但会改变原始列表的顺序;使用sorted()函数可以保留原始列表的顺序,但需要创建一个新的列表;使用自定义函数可以灵活地控制排序的方式,但需要编写额外的代码。
本文介绍了如何使用Python输入一段英文并统计其中的单词个数,从去除标点符号、忽略单词大小写、排除常用词汇等多个角度进行了分析。此外,还介绍了使用NLTK库进行单词统计的方法。
虚拟环境可以帮助我们在同一台机器上运行不同版本的Python、安装不同的Python包,并且不会相互影响。创建虚拟环境的命令是python3 -m venv myenv,进入虚拟环境的命令是source myenv/bin/activate,退出虚拟环境的命令是deactivate。在虚拟环境中可以使用pip安装包,也可以使用Python运行程序。
本文从XHR对象、fetch API和jQuery三个方面分析了JS获取响应状态的方法及其应用。以上三种方法都可以轻松地发送HTTP请求,并处理响应数据。
桌面的命令包括常见的操作命令、系统命令、批处理命令以及第三方应用程序提供的命令。我们可以通过鼠标右键点击桌面、创建快捷方式、创建批处理文件等方式来运用这些命令,从而更好地管理计算机,提高工作效率。
本文分析了应用程序闪退的多个原因,包括应用程序本身存在问题、手机或平板电脑系统问题、硬件问题、网络问题和其他原因。同时,本文提供了解决闪退问题的多种方式,包括更新或卸载重新下载应用程序、升级系统或进行修复、清理手机缓存、清理不必要的文件或者是更换电池等方式来解决、确保网络信号的稳定性、注意用户隐私和安全问题。
本文介绍了使用Python下载图片的多种方法,包括使用Python标准库urllib.request、第三方库requests、多线程和异步IO。这些方法在不同情况下都有它们的优缺点。使用这些方法,我们可以轻松地将网络上的图片下载到本地,方便我们在离线状态下查看或处理这些图片。
MySQL数据文件是指存储MySQL数据库中数据的文件,存储位置的选择对数据库的性能、可靠性和安全性都有着重要的影响。本文从存储位置的选择、存储设备的选择、存储空间的管理和存储位置的安全性等多个角度对MySQL数据文件的存储位置进行分析,最后得出需要根据实际情况综合考虑多个因素,选择合适的存储位置和存储设备,并进行有效的存储空间管理和安全措施的结论。
AS400是一种主机操作系统,每个库都包含多个表。查询库表总数是一项基本任务。可以使用命令行、系统管理界面以及数据库管理工具来查询库表总数。查询库表总数可以帮助用户更好地管理和优化数据,包括规划数据存储、优化查询性能以及管理空间资源。