笔记之 Django & React 构建 TodoList

English Version:  https://today2tmr.com/en/2017/08/04/notes-for-todo-list-project-with-django-and-react

我有一个任务需要构建前后端分离的todolist。然而之前我甚至没有接触过向React和Django一样的web开发框架,所以有很多方法放在我面前难以抉择…
我将记录下构建TodoList的一些过程。

方法的选择

  • 直接用github上的模板。(链接在文章最后) 但是像todo-list一样的单个app比较简单我不想构建一个很大的工程。当然这些模板对我来说是极好的学习资源,日后可以慢慢阅读源码来加以学习。
  • 将前后端完全分离,用socket.io,superagent或是jquery里的ajax来交换服务端和客户端之间的数据。我在客户端访问服务端提供的API来获取数据,并用jquery来发送请求返回服务端以修改数据。
  • 仅用Django对单个简单app已经足够了。当然对于大型网站的开发人员来说会有些混乱。在采用第二个方法之前我已经仅用Django搭建了一个TodoList网站,虽然同样运用了Django Rest Framework,但我感觉它并没有对自身起到什么关键作用…
  • 仅用React。如果是一个暂时性的app,无需保存数据到数据库,那么可以将数据存储在Redux提供的Store中。并且可以通过API获取数据并动态渲染到页面上。

源代码

以下的笔记我将会集中于第一个版本(运用到React的版本)
尽管第二个版本看起来更好看…

Todo List结构

Django部分

  • 模型定义
    • Task Model: 一旦被改变,我们需要执行 makemigrations 和 migrate.
      • user = models.ForeignKey(settings.AUTH_USER_MODEL, default=1, blank=True)
        • 这个版本目前并不支持多用户操作,所以我将user一直设为默认用户。
      • title = models.CharField(max_length=120)
      • created_at = models.DateField(default=timezone.now,blank=True)
      • deadline = models.DateField(default=timezone.now)
      • priority = models.IntegerField(default=0)
      • text = models.TextField()
      • done = models.BooleanField(default=False, blank=True)
  • API支持
    • TaskSerializer(serializers.ModelSerializer): 我直接设置为 fields = '__all__'.
    • TaskViewSet(viewsets.ModelViewSet)
  • Database配置
    • PostgreSQL: 它比sqlite更适合大型的项目。

       
  • 跨域访问的权限设置

React部分

  • Components/Containers
    • Task List
    • Task Detail
    • App, 由上面两个组合而成
  • Actions: 监测用户行为以改变components的内容。
    • 在 /actions/index.js 里添加更多行为。
    • editTask/deleteTask/addTask/selectTask/doneTask/sortByPriority/sortByDeadline
  • Reducers: 被用户行为所控制从而决定发送给store的数据内容。
    • /reducers/reducer-active-task.js: 通过判断行为类型改变task-detail里的显示内容。
    • /reducers/reducer-tasks.js: 当有改变发生时重载任务列表。
  • HTTP Requests: 我在reducers里面写里一些发送请求的函数。
    • import $ from 'jquery';
    • $.ajax...
    • 设置dataTypeapplication/jsonp
    • 为了将返回数据保存在某个变量里,我们可能需要async:false

学习资源

  • 全部都是英文版的资源。如果你偏好中文,我推荐runnoob.com。并且这个文档大多数都有中文版本,可以在百度搜到。当然,这些资源确实质量很高并且帮到我很多。

模板和例子

主要的框架或库

第三方工具

Youtube视频

Leave a Reply

Your email address will not be published.