[IMWeb 训练营作业]1-todoList

• 源码

• 预览地址

• 效果图

核心代码

• 后端使用leancloud存储数据

  • 使用 leancloud提供的api注册用户,实现登入登出功能

        signUp: function() {        let user = new AV.User();        user.setUsername(this.formData.username);        user.setPassword(this.formData.password);        user.signUp().then((loginedUser) => {            this.currentUser = this.getCurrentUser();        }, (error) => {            alert("注册失败");            console.log(error);        });    },    login: function() {        AV.User.logIn(this.formData.username, this.formData.password).then((loginedUser) => {            this.currentUser = this.getCurrentUser();            this.fetchTodos();        }, (error) => {            alert('登录失败');            console.log(error);        });    },    logout: function() {        AV.User.logOut();        this.currentUser = null;        window.location.reload();    }

  • 数据有有增删改查时把leancloud提供的api封装成方法,实时更新数据

    fetchTodos: function() {        if (this.currentUser) {            var query = new AV.Query('AllTodos');            query.find()                .then((todos) => {                    let avAllTodos = todos[0];                    let id = avAllTodos.id;                    this.todoList = JSON.parse(avAllTodos.attributes.content);                    this.todoList.id = id;                }, function(error) {                    console.error(error);                });        }    },    updateTodos: function() {        let dataString = JSON.stringify(this.todoList);        let avTodos = AV.Object.createWithoutData('AllTodos', this.todoList.id);        avTodos.set('content', dataString);        avTodos.save().then(() => {            console.log('更新成功');        });    },    saveTodos: function() {        let dataString = JSON.stringify(this.todoList);        var AVTodos = AV.Object.extend('AllTodos');        var avTodos = new AVTodos();        var acl = new AV.ACL();        acl.setReadAccess(AV.User.current(), true); // 只有这个 user 能读        acl.setWriteAccess(AV.User.current(), true); // 只有这个 user 能写        avTodos.set('content', dataString);        avTodos.setACL(acl); // 设置访问控制        avTodos.save().then((todo) => {            this.todoList.id = todo.id; // 一定要记得把 id 挂到 this.todoList 上，否则下次就不会调用 updateTodos 了            console.log('保存成功');        }, function(error) {            alert('保存失败');        });    },    saveOrUpdateTodos: function() {        if (this.todoList.id) {            this.updateTodos();        } else {            this.saveTodos();        }    },    addTodo: function() {        if (!/\S/g.test(this.newTodo)) {            return alert('输入不能为空');        }        this.todoList.push({            title: this.newTodo,            createdAt: utils.formatDate(new Date()),            done: false        });        this.newTodo = '';        this.saveOrUpdateTodos();    },    removeTodo: function(todo) {        let index = this.todoList.indexOf(todo);        this.todoList.splice(index, 1);        this.saveOrUpdateTodos();    },

• 前端使用vue

  • 登录注册时根据不同actionType选择显示注册还是登录
    

     <section id="signInAndSignUp" v-if="!currentUser">        <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>        <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>        <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>    </section>

  • 数据有变更时调用上面封装好的方法
    

    <section id="todo" v-if="currentUser">   <p>Hello, {{formData.username}}</p>     <p><button @click="logout"> 登出 </button></p>        <div class="layout">            <i class="iconfont icon-todo_list"></i>            <p>A TodoList Web APP</p>        </div>        <div class="newTask layout">            <input type="text" placeholder=" 请输入代办事项 " v-model="newTodo" @keypress.enter="addTodo">        </div>        <ul class="todos layout">            <li v-cloak v-for="todo in todoList">                <input type="checkbox" v-model="todo.done" @change="saveOrUpdateTodos">                <span class="done" v-if="todo.done"> 已完成 </span>                <span class="notDone" v-else> 未完成 </span>                <span> 创建时间:{{todo.createdAt}}</span>                <i class="iconfont icon-close" @click="removeTodo(todo)"></i>                <p>{{todo.title}}</p>            </li>        </ul>    </section></div>