p17 017渲染与删除任务列表

017渲染与删除任务列表

1 修改index.vue

在目录todos\src\components下

<template>
  <div>
    <div class="box-card">
      <el-card shadow="always">
        <el-input v-model="adddata.title" placeholder="请输入内容">
          <el-button slot="append" @click="addtodo">添加任务</el-button>
        </el-input>
      </el-card>
    </div>

    <el-card class="box-card">
      <div v-for="(todo, key) in todos" :key="key" class="text item">
        <template v-if="todo.done == false">
          <div class="lists">
            <el-checkbox v-model="todo.done" @change="todoDone(key)">
              {{ todo.title }}
            </el-checkbox>
            <div>
              <i class="el-icon-notebook-2" @click="showTodo(todos[key])"></i>
              <i class="el-icon-delete" @click="deleteTodo(key)"></i>
            </div>
          </div>
          <el-divider></el-divider>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "helloworld",
  data() {
    return {
      adddata: {
        title: "",
      },
      todos: [],
    };
  },
  methods: {
    async addtodo() {
      var addtododata = this.adddata;
      var back = await this.$cloudbase.callFunction({
        name: "addtodo",
        data: addtododata,
      });
      console.log(back)
      this.getdata()
    },
    async getdata() {
      var back = await this.$cloudbase.callFunction({
        name: "gettodo",
      });
      this.todos = back.result.data;
      console.log(this.todos)
    },
    async deleteTodo(key) {
      var todoinfo=this.todos[key];
      var back = await this.$cloudbase.callFunction({
        name: "deltodo",
        data:{_id:todoinfo._id}
      });
      /* this.todos = back.result.data; */
      console.log(back)
      this.getdata()

    },
    async gettodo() {
      var back = await this.$cloudbase.callFunction({
        name: "gettodo",
      });
      console.log(back);
    },
  },
  mounted() {
    var auth = this.$cloudbase.auth();
    auth.anonymousAuthProvider().signIn();
    this.getdata();
  },
};
</script>


<style>
.dsb {
  color: #606266;
}
.text {
  font-size: 14px;
}
.box-card {
  margin: 0 auto;
  width: 580px;
  margin-bottom: 20px;
}
.lists {
  display: flex;
  justify-content: space-between;
}
</style>

2 修改todos\cloudbaserc.json

{
  "version": "2.0",
  "envId": "lagou-1gox9hn0f8a023c3",
  "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  "functionRoot": "cloudfunctions",
  "framework": {
    "name": "vue",
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/vue",
          "envVariables": {
            "VUE_APP_ENV_ID": "{{env.ENV_ID}}"
          }
        }
      },
      "server": {
        "use": "@cloudbase/framework-plugin-function",
        "inputs": {
          "functionRootPath": "cloudfunctions",
          "functions": [
            {
              "name": "gettodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            },
            {
              "name": "deltodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            },
            {
              "name": "addtodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            }
          ]
        }
      },
      "auth": {
        "use": "@cloudbase/framework-plugin-auth",
        "inputs": {
          "configs": [
            {
              "platform": "NONLOGIN",
              "status": "ENABLE"
            }
          ]
        }
      }
    }
  },
  "functions": [],
  "region": "ap-shanghai"
}

3 copy相关文件

copy todos\cloudfunctions\gettodo中的clouddb.js和package.json到todos\cloudfunctions\deltodo中

4 安装依赖

在目录todos\cloudfunctions\deltodo下
npm i

5 修改deltodo中的index.js

在目录todos\cloudfunctions\deltodo

const cloud = require('./clouddb')

async function deltodo(event) {
  var req=event;
  if(req._id==undefined){
    return;
}

const backdata=await cloud.collection('todo').doc(req._id).remove()
return backdata
}

exports.main = async (event, context) => {
  return deltodo(event);
};
   

6 部署

tcb
或
tcb fn code update deltodo