IMWeb训练营作业1-todoList

[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>