首先，使用 `vite` 创建一个新项目:
```
npm init vite-app my-
todo-list
```
安装 `axios` 和 `mockjs`:
```
npm i axios mockjs -S
```
在 `src` 文件夹下创建一个 `api.js` 文件，用来封装与后端（即 `mockjs`）进行数据交互的函数:
```javascript
import axios from 'axios'
export default {
fetch
TodoList() {
return axios.get('/api/
todolist')
},
add
TodoItem(item) {
return axios.post('/api/
todolist', item)
},
delete
TodoItem(id) {
return axios.delete(`/api/
todolist/${id}`)
},
update
TodoItem(item) {
return axios.put(`/api/
todolist/${item.id}`, item)
}
}
```
然后，在 `src` 文件夹下创建一个 `mock.js` 文件，用来模拟后端数据处理逻辑：
```javascript
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` 文件，用来展示
待办事项列表：
```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.fetch
TodoList()
},
methods: {
fetch
TodoList() {
api.fetch
TodoList().then(res => {
this.
todoList = res.data
})
},
addItem() {
if (!this.newItemText) {
return
}
const newItem = {
text: this.newItemText,
done: false
}
api.add
TodoItem(newItem).then(res => {
this.
todoList.push(res.data)
this.newItemText = ''
})
},
deleteItem(item) {
api.delete
TodoItem(item.id).then(() => {
this.
todoList.splice(this.
todoList.indexOf(item), 1)
})
},
updateItem(item) {
api.update
TodoItem(item).then(() => {
// do nothing
})
}
}
}
</script>
```
在 `App.vue` 文件中引入 `
TodoList` 组件，在模板中添加：
```vue
<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` 所在的地址：
```javascript
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
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
