Django 中的 Vue，第一部分

AWS 安全直播！

注意：本教程已有几年历史，使用的 Django 和 Vue 版本均已过时。我目前没有足够的时间进行更新，但如果您愿意承担大部分工作，我非常乐意合作。就目前而言，这些文章应该能够帮助您理解相关概念，但代码与当前的 Vue 或 Django 官方文档不符。

我做到了！这既令人害怕，又充满挑战，但也令人兴奋，我成功了。我用 Django 开发服务器端 Web 应用已经有一段时间了，但我一直远远地观望着那些炫酷的前端、JavaScript 驱动的单页应用，心里想着总有一天我会学习一些教程。所以上周，我心想：“管他呢，我要动手做点什么！” 这可不是我以往的学习方式，这也是我第一次从零开始，直接跳进“深水区”去学习。我觉得效果出奇的好，所以我想分享一下这个教程——主要是为了帮助我把学到的新知识巩固成更稳定的东西。那么，废话不多说，以下就是我的教程：如何用 Vue 构建一个基于 Django REST 后端的应用。第一部分，我们将搭建 Vue 框架。第二部分是最难的部分，我们将搭建数据模型。最后，第三部分将介绍 Django 后端。本教程假设读者已具备 JavaScript 语法的基本知识，但我会尽量解释一些相关的底层原理。让我们开始吧。

1. OverVue

Vue.js是众多前端框架之一，它致力于提供更实时、更流畅的用户体验，其 DOM 元素实时更新，后台采用异步服务器更新，无需频繁刷新整个页面。我个人认为，Vue.js 巧妙地融合了 React、Angular、Elm 等框架的优点。当然，这只是我仅仅一周前端框架使用经验后的看法。

2. 准备工作

我们将使用 Webpack 来处理模块打包等操作。由于 Webpack 对我来说仍然像玄学一样神秘，所以我只会解释到足以完成任务的程度。首先我们需要这个vue-cli工具。它能帮我们轻松配置 Webpack 等，从而大大简化我们的工作。不过，你仍然需要 Node 和 NPM。

对于那些更习惯于 Python 和 Django 的人来说，NPM 有点像 pip，只不过 pip 拥有 Django 标准 manage.py 的一些功能。

$ npm install -g vue-cli
...
$ vue init NdagiStanley/vue-django todoapp
...

正如命令所示，我们将使用 GitHub 上的一个 Vue 项目模板。你可以在这里查看。按照提示回答所有问题。完成后，你应该会看到一个新的项目文件夹。我们稍后会详细介绍文件夹里的内容，所以不用担心。

$ cd todoapp
$ npm install

现在，你也可以开始创建你的 Git 仓库了。这部分就交给你了。接下来是一些重要的事项。`app.js`main.js文件是你的应用实际实例化的地方。Vue 应用由组件构成，这些组件组合在一起是为了简化复杂的操作。我们今天不会做复杂的操作，所以不用担心。我们只需要一个待办事项列表，你可以添加和清空它。这里需要两个步骤。主组件已经创建好了，可以在 `app.js` 中找到src/App.vue。我们稍后会修改它。首先，在 `app.js` 目录下创建一个名为 `app.js` 的目录components（如果该目录不存在）src。如果该目录已经存在，里面可能有一个 ` Hello.vueapp.js` 文件。你可以删除它。

3. 组成部分

我们的应用将包含三个主要组件：1）待办事项列表（TodoList），用于显示每个待办事项；2）待办事项（Todo），作为显示的基本单元；3）用户输入框（UserInput），包含输入框和清除按钮。需要这么复杂吗？不需要。但这将有助于展示 Vue 的一些功能。让我们创建第一个应用。创建src/components/Todo.vue……

// src/components/Todo.vue

<template>
  <p>
    {{ todo.text }}
  </p>
</template>

<script>
export default {
  props: ['todo']
}
</script>

就是这样。Vue 组件主要有两种实现方式：一种是使用单个文件，另一种是使用单组件模块。我们这里使用的是模块。每个组件都包含一个模板，用于定义组件的 HTML 结构；一个 script 标签，用于编写组件的核心代码；以及一个可选的 style 标签，用于添加组件的自定义样式。这些组件以层级结构排列（稍后会展示），父组件可以通过 props 的形式将数据传递给子组件，你需要声明 props 才能让子组件使用它们。

这让我很沮丧。我希望我父母能表扬我。开玩笑啦。我父母很棒。

你可以在上面 script 标签中看到这些属性（也就是 props）。别太纠结于这些export default细节。Webpack 就是这样处理模块和导入的。当 Todo.vue 模块被导入时，它导出的对象就会被传递（本质上是组件的“灵魂”）。随着我们继续深入，这一点应该会更加清晰。接下来我们来看一下 TodoList 组件，这样你就能明白属性props是如何传递的。

// src/components/TodoList.vue

<template>
  <div id="todolist">
    <ul>
      <li v-for="todo in todos">
        <todo v-bind:todo="todo" v-bind:id="todo.id">
        </todo>
      </li>
    </ul>
  </div>
</template>

<script>
import Todo from './Todo.vue'

export default {
  components: {
    Todo
  },
  data: function () {
    return {
      todos: [
        { text: 'Learn Vue' },
        { text: 'Do hard things' }
      ]
    }
  }
}
</script>

这里有几个需要注意的地方。你可以看到元素v-for中使用的选项li。它告诉 Vue 遍历 todos 变量中的每个项目，并据此创建一个 li 元素。你可以看到我们创建了第一个自定义元素：todo。v-bind这允许我们将数据作为 prop 传递给子组件。当你创建一个项目列表时，Vue 会要求你为每个项目提供一个 id，以便它能够保持列表的清晰并快速进行更改。你可以看到该组件通过script包含components键值声明了 Todo 作为其子组件。最后，data键值提供了 todos 变量的初始化。一旦我们进入数据模型，我们就可以使用实际数据来初始化它，而不是硬编码值。

我们还看到代码中出现了更多“模块”语法import Todo from './Todo.vue。这样写，变量 Todo 就被赋值为从 Todo.vue 文件导出的对象。这类似于 Python 的导入，但控制性更强一些——当然，你也可以通过显式设置变量来实现类似的效果__all__……不过我有点跑题了。

这是用户输入组件。

// src/components/UserInput.vue

<template>
  <div id="user-inputs">
    <input v-model="newTodoText" v-on:keyup.enter="createTodo">
    <button v-on:click="clearTodos">
      Clear
    </button>
  </div>
</template>

<script>
export default {
  data: function () {
    return { newTodoText: '' }
  },
  methods: {
    createTodo () {
      console.log(this.newTodoText, 'created!')
    },
    clearTodos () {
      console.log('Todos cleared!')
    }
  }
}
</script>

这里有什么新内容？您可以看到我们的第一个事件处理程序！输入框会响应一个事件，该事件会执行预期的操作。您可以在标签的 `method` 部分keyup.enter看到声明的方法。请注意，我们再次在 `method` 部分定义了一个变量，但这次我们使用了`@Binding`，它是双向绑定的语法糖。每当您更改输入框中的文本时，`@Binding`都会更新；每当您以编程方式更改输入框中的文本时，输入框中的文本也会随之更改。createTodoscriptdatav-modelnewTodoTextnewTodoText

快完成了。继续修改现有的App.vue。

// src/App.vue

<template>
  <div id="app">
    <user-input></user-input>
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import UserInput from './components/UserInput.vue'

export default {
  components: {
    UserInput,
    TodoList
  }
}
</script>

这里没什么新东西。不过有一点需要注意：你看script标签里的模块和对象都是驼峰命名法（CamelCase）吗？模板的自定义元素却是首字母大写（Kabob Case）吗？Vue 会自动处理这种转换，因为 HTML 不区分大小写。

4. 看看

到了，见证奇迹的时刻！

$ npm run dev # This will run the webpack build and development server

快去localhost:8080看看你的杰作吧！你会看到以下这件软件设计杰作：

可能出现的错误：如果你看到错误信息COULD NOT GET /，请检查你的终端。你可能惹恼了 ESLint 的守护神。我第一次遇到的时候大概有 70 亿个样式错误。修复这些错误并刷新页面。如果你看到任何关于 npm 失败的警告，可能是你忘记安装 node_modules 了。运行命令npm install并重试。

一旦程序运行正常，打开浏览器的开发者工具，输入内容并按回车键。你应该会看到它按照createTodo函数指令记录日志。点击清除按钮。你应该会看到第二条相应的日志。教程的第一部分到此结束。下次我们将设置数据存储（类似于 Flux/Redux——我们将使用 Vue 的版本：Vuex）。

需要说明的是，这是我第一次真正使用 ES6 类型的前端语法，也是我第一次使用 Vue、Webpack、ESLint，以及第一次真正使用 npm 脚本和 node_modules。如果您发现我有任何做错的地方，请告诉我（请委婉一些哦 😠）。

原文发布于我的博客。封面图片来源：Stanley Ndagi