vue3+vite结合mockjs实现ToduList

首先，使用 `vite` 创建一个新项目:

npm init vite-app my-todo-list

安装 `axios` 和 `mockjs`:

npm i axios mockjs -S

在 `src` 文件夹下创建一个 `api.js` 文件，用来封装与后端（即 `mockjs`）进行数据交互的函数:

import axios from 'axios'

export default {
  fetchTodoList() {
    return axios.get('/api/todolist')
  },
  addTodoItem(item) {
    return axios.post('/api/todolist', item)
  },
  deleteTodoItem(id) {
    return axios.delete(`/api/todolist/${id}`)
  },
  updateTodoItem(item) {
    return axios.put(`/api/todolist/${item.id}`, item)
  }
}

然后，在 `src` 文件夹下创建一个 `mock.js` 文件，用来模拟后端数据处理逻辑：

import Mock from 'mockjs'

const todoList = []

for (let i = 1; i <= 10; i++) {
  todoList.push({
    id: i,
    text: `Todo item ${i}`,
    done: false,
  })
}

Mock.mock('/api/todolist', 'get', () => {
  return {
    code: 200,
    data: todoList
  }
})

Mock.mock('/api/todolist', 'post', ({ body }) => {
  body = JSON.parse(body)
  const newItem = {
    id: todoList.length + 1,
    text: body.text,
    done: false
  }
  todoList.push(newItem)
  return {
    code: 200,
    data: newItem
  }
})

Mock.mock(/\/api\/todolist\/[1-9]/, 'delete', (options) => {
  const id = options.url.split('/')[3]
  for (let i = 0; i < todoList.length; i++) {
    if (todoList[i].id == id) {
      todoList.splice(i, 1)
      break
    }
  }
  return {
    code: 200,
    data: id
  }
})

Mock.mock(/\/api\/todolist\/[1-9]/, 'put', (options) => {
  const id = options.url.split('/')[3]
  const body = JSON.parse(options.body)
  for (let i = 0; i < todoList.length; i++) {
    if (todoList[i].id == id) {
      todoList[i].text = body.text
      todoList[i].done = body.done
      break
    }
  }
  return {
    code: 200,
    data: body
  }
})

现在，我们已经模拟完了后端数据处理的逻辑，接下来是前端的代码。在 `src` 文件夹下，创建 `components` 文件夹，并在其中创建一个 `TodoList.vue` 文件，用来展示待办事项列表：

<template>
  <div>
    <h3>My Todo List</h3>
    <ul>
      <li v-for="item in todoList" :key="item.id">
        <input type="checkbox" v-model="item.done" @change="updateItem(item)">
        <span :style="{'text-decoration': item.done ? 'line-through' : 'none'}">{{ item.text }}</span>
        <button @click="deleteItem(item)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText">
      <button>Add</button>
    </form>
  </div>
</template>

<script>
import api from '../api.js'

export default {
  data() {
    return {
      todoList: [],
      newItemText: ''
    }
  },
  mounted() {
    this.fetchTodoList()
  },
  methods: {
    fetchTodoList() {
      api.fetchTodoList().then(res => {
        this.todoList = res.data
      })
    },
    addItem() {
      if (!this.newItemText) {
        return
      }
      const newItem = {
        text: this.newItemText,
        done: false
      }
      api.addTodoItem(newItem).then(res => {
        this.todoList.push(res.data)
        this.newItemText = ''
      })
    },
    deleteItem(item) {
      api.deleteTodoItem(item.id).then(() => {
        this.todoList.splice(this.todoList.indexOf(item), 1)
      })
    },
    updateItem(item) {
      api.updateTodoItem(item).then(() => {
        // do nothing
      })
    }
  }
}
</script>

在 `App.vue` 文件中引入 `TodoList` 组件，在模板中添加：

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

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

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

最后，在根目录下的 `vite.config.js` 文件中添加一个代理，将 `/api` 路径代理到 `mock.js` 所在的地址：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

现在，启动项目，就可以看到我们的 TodoList 页面了：

npm run dev

项目 Github 地址：https://github.com/quietbison/vue3-vite-mock-todolist