cp -r step-3 step-4
cd step-4
webpack --watch #然后新开窗口写代码，这个不要关

我们需要一台服务器吗？

上个任务中，我们的数据存在 localStorage 中，这样有很多弊端：

如果用户清空缓存，那么 todoList 就没了……
如果用户换一台电脑，那么 todoList 也看不见了……

所以，我们是不是应该买一台服务器来存所有用户的数据？

可以，但是服务器是要钱的，我们现在还没必要花这个钱。

No Backend（无后台）

没有服务器能不能存数据呢？答案是「不能，但是又能」。

说「不能」是因为无论如何，我们都需要一个地方存数据。说「能」是因为我们不用自己买服务器。

今天我们使用 LeanCloud 的免费服务来存储我们的所有数据。

创建 LeanCloud 账户

你需要去 https://leancloud.cn 创建一个账户。

创建成功后，你需要验证你的邮箱，否则无法创建应用。

创建 resumer 应用

如下图操作：

创建成功后就放在那里，因为接下来我们要按照 LeanCloud 的「JavaScript SDK 文档」来开发登录、注册功能。

登录和注册

首先还是用 HTML 把界面做出来。

页面分区

目前我们的页面的结构是

div#app > div.newTask + ol.todos

我们要改成

div#app 
  section#signInAndSignUp
  section#todo
     div.newTask + ol.todos

用一个 section#todo 将原有内容包起来，然后新建一个 section#signInAndSignUp（注意大小写）

最终结果是：

  <div id="app">
      <section id="signInAndSignUp">
        <div>
          <label><input type="radio" name="type" value="signUp">注册</label>
          <label><input type="radio" name="type" value="login">登入</label>
        </div>
        <div class="signUp">
          <form>
            <div class="formRow">
              用户名<input type="text">
            </div>
            <div class="formRow">
              密码<input type="password">
            </div>
            <div class="formActions">
              <input type="submit" value="注册">
            </div>
          </form>
        </div>
        <div class="login">
          <form>
            <div class="formRow">
              用户名<input type="text">
            </div>
            <div class="formRow">
              密码<input type="password">
            </div>
            <div class="formActions">
              <input type="submit" value="登入">
            </div>
          </form>
        </div>
      </section>

      <section id="todo">
        <div class="newTask">
          <input type="text" v-model="newTodo" @keypress.enter="addTodo">
        </div>
        <ol class="todos">
          <li v-for="todo in todoList">
            <input type="checkbox" v-model="todo.done"> {{ todo.title }}

            <span v-if="todo.done">已完成</span>
            <span v-else>未完成</span>

            <button @click="removeTodo(todo)">X</button>
          </li>
        </ol>
      </section>
    </div>

预览图：

Tab 切换

我们希望

用户点击「〇注册」这个 radio button 的时候显示注册表单
用户点击「〇登入」这个 radio button 的时候显示登入表单
默认显示注册表单

所以我们需要加一个变量，叫做 actionType，它有两个取值：'signUp' 和 'login'，都是字符串。

app.js

...
el: '#app',
  data: {
    actionType: 'signUp',
...

然后将 actionType 与 radio button 绑定（使用 v-model）：

<section id="signInAndSignUp">
        <div>
          <label><input type="radio" name="type" v-model="actionType" value="signUp">注册</label>
          <label><input type="radio" name="type" v-model="actionType" value="login">登入</label>
        </div>
...

最后让两个表单根据 actionType 来显示和隐藏（注意单引号，为什么要加单引号呢？想想）：

        <div class="signUp" v-if="actionType=='signUp'">
          <form>
            <div class="formRow">
              用户名<input type="text">
            </div>
            <div class="formRow">
              密码<input type="password">
            </div>
            <div class="formActions">
              <input type="submit" value="注册">
            </div>
          </form>
        </div>
        <div class="login" v-if="actionType=='login'">
          <form>
            <div class="formRow">
              用户名<input type="text">
            </div>
            <div class="formRow">
              密码<input type="password">
            </div>
            <div class="formActions">
              <input type="submit" value="登入">
            </div>
          </form>
        </div>

这样一来，用户点击 radio button 时就会改变 actionType 的值，actionType 的值一变，两个表单就会一个隐藏，一个显示。

注册

要实现注册功能，首先我们要用数据来表达表单里的每个字段。

  data: {
    actionType: 'signUp',
    formData: {
      username: '',
      password: ''
    },

然后将 input 与数据绑定起来，另外还要绑定 form 的 submit 事件：

      <div class="signUp" v-if="actionType === 'signUp'">
        <form @submit.prevent=signUp> <!--👈-->
          <div class="formRow">
            用户名<input type="text" v-model="formData.username"> <!--👈-->
          </div>
          <div class="formRow">
            密码<input type="password" v-model="formData.password"> <!--👈-->
          </div>
          <div class="formActions">
            <input type="submit" value="注册">
          </div>
        </form>
      </div>

接下来我们来完善 signUp 的逻辑。在写代码之前，我们需要阅读 leanCloud 的文档：

安装 LeanCloud SDK https://leancloud.cn/docs/sdk_setup-js.html
```
npm install leancloud-storage --save
```

初始化 https://leancloud.cn/docs/sdk_setup-js.html#初始化 app.js

import Vue from 'vue'
import AV from 'leancloud-storage'

var APP_ID = '8axnRtGoxCJhEzsvNPEAHnol-gzGzoHsz';
var APP_KEY = '0YH4XkYflb4CUPfA743TGj8G';
AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

var app = new Vue({  ...

验证 LeanCloud SDK 安装成功 https://leancloud.cn/docs/sdk_setup-js.html#验证

...
AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

var app = new Vue({ ...

刷新 page.html 后看到如果可以用 AV 对象了，然后把上面的验证代码删掉。

接下来我们看 LeanCloud 关于注册的文档，如果你看不懂，可以使用我们的「copy-run-modify」套路。按照文档的例子，我们写出这样的代码：

  methods: {
    addTodo: function(){
      ...
    },
    removeTodo: function(todo){
      ...
    },
    signUp: function () {
      let user = new AV.User();
      user.setUsername(this.formData.username);
      user.setPassword(this.formData.password);
      user.signUp().then(function (loginedUser) {
        console.log(loginedUser);
      }, function (error) {
      });
    }
  }

刷新页面，我们选择注册，然后用户名填入「123123」，密码填入「123123」，先别急着提交，打开开发者工具，切到 Network，然后提交：

你会看到发了两个请求到 LeanCloud 的服务器，这两个请求就是向 LeanCloud 的服务器存入用户名和密码。然后再切到 console，你会看到打印出的 loginedUser：

这里我们只关注它的三个属性：attributes, createdAt, id。

其中 attributes 就是我们传给数据库的 username（我们不是还传了一个 password 吗？服务器是不会把 password 传给前端的）

createdAt 是这个数据创建的时间，id 是用户的 id，也是我们区别用户的唯一凭据。

好了，到此为止，我们的注册功能已经做好了。是不是很简单。目前的代码快照在这里：https://github.com/jirengu-inc/jrg-project-5/blob/a2690c8efe55262e7850ca3e807fa4852198ffd5/step-4/app.js

去数据库看看这个用户

你到 LeanCloud 的控制面板点击「存储」，然后点击「_User」就能看到这个用户的数据了：

      <div class="login" v-if="actionType === 'login'"> 
        <form @submit.prevent="login"> <!--👈-->
          <div class="formRow">
            用户名<input type="text" v-model="formData.username"> <!--👈-->
          </div>
          <div class="formRow">
            密码<input type="password" v-model="formData.password"> <!--👈-->
          </div>
          <div class="formActions">
            <input type="submit" value="登入">
          </div>
        </form>
      </div>

然后看一下 LeanCloud 文档，这次大家自己找文档，找不到就用 Google 搜，你会找到的。看懂文档你就可以添加 login 这个方法了：

    signUp: function () {
      let user = new AV.User();
      user.setUsername(this.formData.username);
      user.setPassword(this.formData.password);
      user.signUp().then(function (loginedUser) {
        console.log(loginedUser);
      }, function (error) {
      });
    },
    login: function () {
      AV.User.logIn(this.formData.username, this.formData.password).then(function (loginedUser) {
        console.log(loginedUser);
      }, function (error) {
      });
    }

接下来刷新 page.html，选中「登入」，输入用户名「123123」，密码「123123」。观察 network 和 console，会得到跟注册类似的结果。

好了，登录功能就完成了。

登录前后

我们希望

登录之前，不显示 section#todo，显示 section#signInAndSignUp
登录之后，显示 section#todo，不显示 section#signInAndSignUp

那么我们如何判断用户是否已登录。

LeanCloud 文档说 AV.User.current() 可以获取当前登录的用户。那么我们这么做：

app.js

data: {
    ...
    todoList: [],
    currentUser: null,  // 👈
  },

app.js

    signUp: function () {
      let user = new AV.User();
      user.setUsername(this.formData.username);
      user.setPassword(this.formData.password);
      user.signUp().then((loginedUser) => { // 👈，将 function 改成箭头函数，方便使用 this
        this.currentUser = this.getCurrentUser() // 👈
      }, (error) => {
        alert('注册失败') // 👈
      });
    },
    login: function () {
      AV.User.logIn(this.formData.username, this.formData.password).then((loginedUser) => { // 👈
        this.currentUser = this.getCurrentUser() // 👈
      }, function (error) {
        alert('登录失败') // 👈
      });
    },
    getCurrentUser: function () { // 👈
      let {id, createdAt, attributes: {username}} = AV.User.current()
      // 上面这句话看不懂就得看 MDN 文档了
      // 我的《ES 6 新特性列表》里面有链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
      return {id, username, createdAt} // 看文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#ECMAScript_6%E6%96%B0%E6%A0%87%E8%AE%B0
    }

page.html

    <section id="signInAndSignUp" v-if="!currentUser">
    ...
    <section id="todo" v-if="currentUser">

然后刷新 page.html ，登录之后，登录表单就不见啦。

其他功能

后面的功能我写教程写不动了，大家看我的 commit

添加登出功能如果用户已经登入，就直接展示 todo

致饥人谷学员

搞定上面的教程，满足以下功能：

可注册
可登入
可登出

挑战

在界面上显示当前用户的 username
将 TodoList 存到 User 名下，而不是存到 localStorage。（这是下个任务里我们要做的事情）

预览地址：https://jirengu-inc.github.io/jrg-project-5/step-4/page.html 代码：看本仓库的 step-4 目录

jirengu-inc / jrg-project-5

No Backend! #4

我们需要一台服务器吗？

No Backend（无后台）

创建 LeanCloud 账户

创建 resumer 应用

登录和注册

页面分区

Tab 切换

注册

去数据库看看这个用户

登入

登录前后

其他功能

致饥人谷学员

挑战