组件拆分

src/components/Header.js ```jsx import React, { Component } from ‘react’

class Header extends Component { render() { return (

todos

) } }

export default Header


- src/components/Main.js
```jsx
import React, { Component } from 'react'
class Main extends Component {
  render() {
    return (
      <section className="main">
        <input className="toggle-all" type="checkbox" />
        <ul className="todo-list">
          <li className="completed">
            <div className="view">
              <input className="toggle" type="checkbox"/>
              <label>品味JavaScript</label>
              <button className="destroy"></button>
            </div>
            <input className="edit" />
          </li>
          <li>
            <div className="view">
              <input className="toggle" type="checkbox" />
              <label>买一个宠物</label>
              <button className="destroy"></button>
            </div>
            <input className="edit" />
          </li>
        </ul>
      </section>
    )
  }
}
export default Main

src/components/Footer.js ```jsx import React, { Component } from “react”;

class Footer extends Component { render() { return (

); } }

export default Footer;


- src/App.js
```jsx
import React, { Component } from 'react'
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'
class App extends Component {
  render() {
    return (
      <div className="todoapp">
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }
}
export default App

src/index.js ```jsx import React from ‘react’; import ReactDOM from ‘react-dom’; import App from ‘./App’ import ‘./index.css’

ReactDOM.render( , document.getElementById(‘root’) );


<a name="FAp1B"></a>
## 任务列表展示
- src/store/actions/todo.actions.js
```javascript
/** 
 * 01 发送请求获取数据 load_todo
 * 02 当异步操作完成之后还需要触发新的指令 load_todo_success
 */
import { createAction } from 'redux-actions'
export const load_todo = createAction('load_todo')
export const load_todo_success = createAction('load_todo_success')

src/store/reducers/todo.reducer.js ```javascript /**
- 接收指令后对数据进行相应处理 */ import { handleActions as createReducer } from ‘redux-actions’ import {load_todo_success } from ‘../actions/todo.actions’

const initialState = { todos: [] }

export default createReducer({ [load_todo_success]: (state, action) => ({ todos: action.payload }) }, initialState)


- src/store/reducers/root.reducer.js
```javascript
import { combineReducers } from 'redux'
import todoReducer from './todo.reducer'
export default combineReducers({
  todoReducer: todoReducer
})

src/store/saga/todo.sags.js ```javascript /**
- 01 完成异步操作
- 02 重新发送新的指令 */ import axios from ‘axios’ import { takeEvery, put } from ‘redux-saga/effects’ import { load_todo_success, load_todo } from ‘../actions/todo.actions’

// 实现 load_todo_data 获取数据同时传递新指令 function * load_todo_data() { let todoData = yield axios.get(‘http://localhost:3005/api/todos').then(res => res.data) console.log(todoData) yield put(load_todo_success(todoData)) }

export default function * todoSaga() { yield takeEvery(load_todo, load_todo_data) }


- src/store/index.js
```javascript
/**
 * 当前模块完成 store 的创建  + 中间件注册
 */
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers/root.reducer'
import createSagaMiddleware from 'redux-saga'
import todoSaga from './saga/todo.saga'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware))
sagaMiddleware.run(todoSaga)
export default store

src/index.js ```jsx

import store from ‘./store’ import {Provider} from ‘react-redux’

ReactDOM.render( , document.getElementById(‘root’) );


- src/components/Main.js
```jsx
import React, { Component } from 'react'
import {connect} from 'react-redux'
import { bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'
class Main extends Component {
  componentDidMount() {
    // 调用具体的指令函数，触发数据获取操作 
    this.props.load_todo()
  }
  render() {
    console.log(this.props)
    return (
      <section className="main">
        <input className="toggle-all" type="checkbox" />
        <ul className="todo-list">
          {
            this.props.todos.map(item => (
              <li key={item.id}>
                <div className="view">
                  <input className="toggle" type="checkbox" />
                  <label>{item.taskName}</label>
                  <button className="destroy"></button>
                </div>
                <input className="edit" />
              </li>
            ))
          }
        </ul>
      </section>
    )
  }
}
// 获取 store 当中数据
const mapStateToProps = (state) => ({
  todos: state.todoReducer.todos
})
// 处理 dispatch
const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(todoActions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Main)

实现添加任务

src/store/actions/todo.actions.js

// 新增 todo 列表项的相关指令
export const add_todo = createAction('add_todo')
export const add_todo_success = createAction('add_todo_success')

src/store/reducers/todo.reducer.js ```javascript

import { add_todo_success } from ‘../actions/todo.actions’

export default createReducer({

[add_todo_success]: (state, action) => ({ todos: [ …state.todos, action.payload ] }) }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { add_todo_success, add_todo } from '../actions/todo.actions'
// 实现 add_todo_data 方法
function * add_todo_data (action) {
  // 完成异步操作
  let taskInfo = yield axios.post('http://localhost:3005/api/todos', {taskName: action.payload}).then(res => res.data)
  //  重新发送指令
  yield put(add_todo_success(taskInfo.task))
  }
export default function * todoSaga() {
  yield takeEvery(add_todo, add_todo_data)
}

src/components/Header.js ```jsx import React, { Component } from ‘react’ import {connect} from ‘react-redux’ import {bindActionCreators} from ‘redux’ import * as todoActions from ‘../store/actions/todo.actions’

class Header extends Component {

addTodo = (ev) => { if(ev.keyCode === 13) { // 获取当前输入框里的内容 let taskName = ev.target.value if(taskName.trim().length === 0){ alert(‘请输入任务内容’) return }

  // 触发新增任务的指令
  this.props.add_todo(taskName)
  // 清空文本框
  ev.target.value = ''
}

} render() { return (

Todos

) } }

// 组件与store const mapStateToProps = (state) => ({ todos: state.todoReducer.todos })

// 组件与dispatch const mapDispatchToProps = (dispatch) => ({ …bindActionCreators(todoActions, dispatch) })

export default connect(mapStateToProps, mapDispatchToProps)(Header)


<a name="EeMMW"></a>
## 删除任务
- src/store/actions/todo.actions.js
```javascript
// 删除指令
export const remove_todo = createAction('remove_todo')
export const remove_todo_success = createAction('remove_todo_success')

src/store/reducers/todo.reducer.js ```javascript

import { remove_todo_success } from ‘../actions/todo.actions’

export default createReducer({

[remove_todo_success]: (state, action) => { // 需要获取被删除项的 id let id = action.payload

let index = state.todos.findIndex(todo => todo.id === id)
let todos = JSON.parse(JSON.stringify(state.todos))
todos.splice(index, 1)
return { todos }

} }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { remove_todo_success, remove_todo } from '../actions/todo.actions'
// 实现 remove_todo_data
function * remove_todo_data(action) {
  // 将 id 利用相应的接口传递给后端执行具体的删除操作
  let res = yield axios.delete('http://localhost:3005/api/todos', {
    params: {
      id: action.payload
    }
  }).then(res => res.data)
  // 重新发送指令
  yield put(remove_todo_success(res.tasks.id))
}
export default function * todoSaga() {
  yield takeEvery(remove_todo, remove_todo_data)
}

src/components/Main.js ```jsx

class Main extends Component {

removeTask(id){ if(window.confirm(‘确定删除当前任务’)){ // 触发删除操作 this.props.remove_todo(id) } }

render() { console.log(this.props) return (

{item.taskName}

) } }


<a name="o9Mc0"></a>
## 修改任务状态
- src/store/actions/todo.actions.js
```javascript
// 修改任务状态
export const modify_todo = createAction('modify_todo')
export const modify_todo_success = createAction('modify_todo_success')

src/store/reducers/todo.reducer.js ```javascript import { modify_todo_success } from ‘../actions/todo.actions’

export default createReducer({

[modify_todo_success]: (state, action) => { let params = action.payload

let index = state.todos.findIndex(todo => todo.id === params.id)
let todos = JSON.parse(JSON.stringify(state.todos))
todos[index].isCompleted = params.isCompleted
return { todos }

} }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { modify_todo_success, modify_todo } from '../actions/todo.actions'
// 实现 modify_todo
function * modify_todo_data(action) {
  let params = action.payload
  yield axios.put('http://localhost:3005/api/todos/isCompleted', params).then(res => res.data)
  yield put(modify_todo_success(params))
}
export default function * todoSaga() {
  yield takeEvery(modify_todo, modify_todo_data)
}

src/components/Main.js ```jsx

class Main extends Component {

render() { console.log(this.props) return (

{this.props.modify_todo({id: item.id, isCompleted: ev.target.checked})}}/> {item.taskName}

) } }


<a name="dRCoL"></a>
## 计算未完成功能
- src/components/Footer.js
```jsx
import React, { Component } from "react";
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as todoActions from '../store/actions/todo.actions'
class Footer extends Component {
  render() {
    // 此时我们就可以过虑出未选中的任务，然后统计它们的数据，做为具体的值使用
    let taskLen = this.props.todos.filter(todo => !todo.isCompleted).length
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{taskLen}</strong> item left
        </span>
        <ul className="filters">
          <li>
            <span>All</span>
          </li>
          <li>
            <span>Active</span>
          </li>
          <li>
            <span>Completed</span>
          </li>
        </ul>
        <button className="clear-completed">Clear completed</button>
      </footer>
    );
  }
}
// 获取 store 当中数据
const mapStateToProps = (state) => ({
  todos: state.todoReducer.todos
})
//  处理 dispatch 函数
const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(todoActions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Footer)

任务筛选功能

src/store/actions/todo.actions.js

// 任务筛选
export const modify_todo_filter = createAction('modify_todo_filter')

src/store/reducers/todo.reducer.js ```javascript /**
- 接收指令后对数据进行相应处理 */ import { handleActions as createReducer } from ‘redux-actions’ import {load_todo_success, add_todo_success, remove_todo_success, modify_todo_success, modify_todo_filter } from ‘../actions/todo.actions’

const initialState = { todos: [], filter: ‘all’ }

export default createReducer({ [load_todo_success]: (state, action) => ({ …state, todos: action.payload }),

[add_todo_success]: (state, action) => ({ …state, todos: [ …state.todos, action.payload ] }),

[remove_todo_success]: (state, action) => { // 需要获取被删除项的 id let id = action.payload

let index = state.todos.findIndex(todo => todo.id === id)
let todos = JSON.parse(JSON.stringify(state.todos))
todos.splice(index, 1)
return { ...state, todos }

[modify_todo_success]: (state, action) => { let params = action.payload let index = state.todos.findIndex(todo => todo.id === params.id) let todos = JSON.parse(JSON.stringify(state.todos)) todos[index].isCompleted = params.isCompleted return {…state, todos } },

[modify_todo_filter]: (state, action) => { return { …state, filter: action.payload } } }, initialState)


- src/components/Footer.js
```jsx
<ul className="filters">
          <li>
            <span onClick={() => {this.props.modify_todo_filter('all')}}>All</span>
          </li>
          <li>
            <span onClick={() => {this.props.modify_todo_filter('active')}}>Active</span>
          </li>
          <li>
            <span onClick={() => {this.props.modify_todo_filter('completed')}}>Completed</span>
          </li>
        </ul>

src/components/Main.js ```jsx // 依据 filter 筛选出需要展示的数据 function filterTodos(todos, filter) { switch(filter) { case ‘all’:
```
return todos
```
case ‘active’:
```
return todos.filter(todo => !todo.isCompleted)
```
case ‘completed’:
```
return todos.filter(todo => todo.isCompleted)
```
} }

// 获取 store 当中数据 const mapStateToProps = (state) => ({ todos: filterTodos(state.todoReducer.todos, state.todoReducer.filter) })


<a name="uu8lf"></a>
## 删除已完成任务
- src/store/actions/todo.actions.js
```javascript
// 删除已完成任务
export const clear_todo_completed = createAction('clear_todo_completed')
export const clear_todo_completed_success = createAction('clear_todo_completed_success')

src/store/reducers/todo.reducer.js ```javascript

import { clear_todo_completed_success } from ‘../actions/todo.actions’

export default createReducer({

[clear_todo_completed_success]: (state, action) => { let todos = JSON.parse(JSON.stringify(state.todos)) todos = todos.filter(todo => !todo.isCompleted) return { …state, todos } } }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { clear_todo_completed_success, clear_todo_completed } from '../actions/todo.actions'
// 实现 clear_todo_data
function * clear_todo_data() {
  // 发送删除请求
  yield axios.delete('http://localhost:3005/api/todos/clearCompleted')
  yield put(clear_todo_completed_success())
}
export default function * todoSaga() {
  yield takeEvery(clear_todo_completed, clear_todo_data)
}

src/components/Footer.js ```jsx

class Footer extends Component {

clear_todo = () => { if(window.confirm(‘是否删除已完成任务’)) { this.props.clear_todo_completed() } } render() {

return (
  <footer className="footer">
    <button className="clear-completed" onClick={this.clear_todo}>Clear completed</button>
  </footer>
);

} }


<a name="oXNnL"></a>
## 修改任务名称(一)
- src/store/actions/todo.actions.js
```javascript
// 任务名称修改
export const modify_todo_edit = createAction('modify_todo_edit')
export const modify_todo_edit_success = createAction('modify_todo_edit_success')

src/store/reducers/todo.reducer.js ```javascript import { modify_todo_edit_success } from ‘../actions/todo.actions’

export default createReducer({

[modify_todo_edit_success]: (state, action) => { // 利用 id 找到需要被操作的任务项，设置 isEditing 显示具体的样式 let todos = JSON.parse(JSON.stringify(state.todos)) let index = state.todos.findIndex(todo => todo.id === action.payload.id) todos[index].isEditing = action.payload.isEditing return { …state, todos } } }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { modify_todo_edit_success, modify_todo_edit } from '../actions/todo.actions'
// 实现 modify_todo_edit_data
function * modify_todo_edit_data (action) {
  yield axios.put('http://localhost:3005/api/todos/isEditing', action.payload)
  yield put(modify_todo_edit_success(action.payload))
}
export default function * todoSaga() {
  yield takeEvery(modify_todo_edit, modify_todo_edit_data)
}

src/components/Main.js

this.props.todos.map(item => {
            let classes = []
            if (item.isCompleted) classes.push('completed')
            if (item.isEditing) classes.push('editing')
            return (
            <li key={item.id} className={classes.join(' ')}>
              <div className="view">
                <input
                className="toggle"
                type="checkbox"
                defaultChecked={item.isCompleted}
                onChange={(ev) => {this.props.modify_todo({id: item.id, isCompleted: ev.target.checked})}} />
                <label
                onDoubleClick = {() => {this.props.modify_todo_edit({id: item.id, isEditing: true})}}
                >{item.taskName}</label>
                <button className="destroy" onClick={() => {this.removeTask(item.id)}}></button>
              </div>
              <input defaultValue={item.taskName} className="edit" />
            </li>
          )})

修改任务名称(二)

src/store/actions/todo.actions.js

// 任务名称修改确认
export const modify_todo_name = createAction('modify_todo_name')
export const modify_todo_name_success = createAction('modify_todo_name_success')

src/store/reducers/todo.reducer.js ```javascript import { modify_todo_name_success } from ‘../actions/todo.actions’

export default createReducer({

[modify_todo_name_success]: (state, action) => { let todos = JSON.parse(JSON.stringify(state.todos)) let index = state.todos.findIndex(todo => todo.id === action.payload.id) todos[index].taskName = action.payload.taskName return { …state, todos } } }, initialState)


- src/store/saga/todo.saga.js
```javascript
import { modify_todo_name_success, modify_todo_name } from '../actions/todo.actions'
// 实现 modify_todo_name_data 
function * modify_todo_name_data(action) {
  yield axios.put('http://localhost:3005/api/todos', action.payload)
  yield put(modify_todo_name_success(action.payload))
}
export default function * todoSaga() {
  yield takeEvery(modify_todo_name, modify_todo_name_data)
}

src/components/Main.js ```jsx class Main extends Component {

modify_name(id, ev) { // 切换状态 this.props.modify_todo_edit({id: id, isEditing: false}) // 修改数据 this.props.modify_todo_name({id: id, taskName: ev.target.value}) }

render() { return (

{this.props.modify_todo({id: item.id, isCompleted: ev.target.checked})}} />
{this.props.modify_todo_edit({id: item.id, isEditing: true})}}
```
              >{item.taskName}</label>
              <button className="destroy" onClick={() => {this.removeTask(item.id)}}></button>
            </div>
            <input defaultValue={item.taskName} className="edit"
            onBlur={(ev) => {this.modify_name(item.id, ev)}} />
          </li>
        )})
      }
    </ul>
  </section>
)
```
} }
```
<a name="ouNHV"></a>
## 代码优化
- src/axios.config.js
```javascript
import axios from 'axios'
// 配置请求的基础地址
axios.defaults.baseURL = 'http://localhost:3005'
// 处理响应拦截器 将需要的数据直接返回给客户端
axios.interceptors.response.use(res => res.data)
```
- src/index.js
```
import './axios.config'
```
- src/store/saga/todo.saga.js ```javascript // 实现 load_todo_data 获取数据同时传递新指令 function * load_todo_data() { let todoData = yield axios.get(‘/api/todos’) yield put(load_todo_success(todoData)) }
// 实现 add_todo_data 方法 function * add_todo_data (action) { // 完成异步操作 let taskInfo = yield axios.post(‘/api/todos’, {taskName: action.payload}) // 重新发送指令 yield put(add_todo_success(taskInfo.task)) }

// 实现 remove_todo_data function * remove_todo_data(action) { // 将 id 利用相应的接口传递给后端执行具体的删除操作 let res = yield axios.delete(‘/api/todos’, { params: { id: action.payload } })

// 重新发送指令 yield put(remove_todo_success(res.tasks.id)) }

// 实现 modify_todo function * modify_todo_data(action) { let params = action.payload

yield axios.put(‘/api/todos/isCompleted’, params) yield put(modify_todo_success(params)) }

// 实现 clear_todo_data function * clear_todo_data() { // 发送删除请求 yield axios.delete(‘/api/todos/clearCompleted’) yield put(clear_todo_completed_success()) }

// 实现 modify_todo_edit_data function * modify_todo_edit_data (action) { yield axios.put(‘/api/todos/isEditing’, action.payload) yield put(modify_todo_edit_success(action.payload)) }

// 实现 modify_todo_name_data function * modify_todo_name_data(action) { yield axios.put(‘/api/todos’, action.payload) yield put(modify_todo_name_success(action.payload)) }
```
<a name="vXYpE"></a>
## immutable使用
- 安装插件 `npm install immutable`
- src/store/reducers/todo.reducer.js
```javascript
/** 
 * 接收指令后对数据进行相应处理
 */
import { handleActions as createReducer } from 'redux-actions'
import {load_todo_success, add_todo_success, remove_todo_success, modify_todo_success, modify_todo_filter, clear_todo_completed_success, modify_todo_edit_success, modify_todo_name_success } from '../actions/todo.actions'
import {fromJS, mergeDeep, removeIn, setIn, getIn, updateIn} from 'immutable'
const initialState = fromJS({
  todos: [],
  filter: 'all'
})
// 展示任务列表
const load_todo_action = (state, action) => {
  // 第一个参数 表示当前要操作的数据
  // 第二个参数 表示当前操作的是数据的哪个属性
  // 第三个参数 表示新值
  return setIn(state, ['todos'], action.payload)
}
// 添加任务
const add_todo_action = (state, action) => {
  // mergeDeep 合并数据
  // 第一个参数，是要合并的属性的属性及被合并的值
  return mergeDeep(state, {todos: [action.payload]})
}
// 删除任务
const remove_todo_action = (state, action) => {
  let index = getIn(state, ['todos']).findIndex(todo => todo.id === action.payload)
  return removeIn(state, ['todos', index])
}
// 切换任务状态
const modify_todo_action = (state, action) => {
  let index = getIn(state, ['todos']).findIndex(todo => todo.id === action.payload.id)
  // 第二个参数是要更新的属性
  // 第三个参数是要更新的目标值
  return updateIn(state, ['todos', index], () => action.payload)
}
// 过滤不同状态任务
const filter_todo_action = (state, action) => {
 return setIn(state, ['filter'], action.payload)
}
// 清除已完成任务
const clear_completed_action = (state, action) => {
  let todos = getIn(state, ['todos']).filter(todo => !todo.isCompleted)
    return setIn(state, ['todos'], todos)
}
// 编辑任务
const edit_todo_action = (state, action) => {
   let index = getIn(state, ['todos']).findIndex(todo => todo.id === action.payload.id)
   // 第二个参数是要更新的属性
   // 第三个参数是要更新的目标值
   return updateIn(state, ['todos', index], () => action.payload)
}
// 修改任务名称
const rename_todo_action = (state, action) => {
  let index = getIn(state, ['todos']).findIndex(todo => todo.id === action.payload.id)
   // 第二个参数是要更新的属性
   // 第三个参数是要更新的目标值
   return updateIn(state, ['todos', index], () => action.payload)
}
export default createReducer({
  // 展示任务
  [load_todo_success]: load_todo_action,
  // 新增任务
  [add_todo_success]: add_todo_action,
  // 删除任务
  [remove_todo_success]: remove_todo_action,
  //切换任务状态
  [modify_todo_success]: modify_todo_action,
  //  筛选不同状态任务
  [modify_todo_filter]: filter_todo_action,
  // 清除已完成任务
  [clear_todo_completed_success]: clear_completed_action,
  //编辑任务
  [modify_todo_edit_success]: edit_todo_action,
  //重命名任务
  [modify_todo_name_success]: rename_todo_action
}, initialState)
```
- src/store/saga/todo.saga.js
```
// 实现 modify_todo
function * modify_todo_data(action) {
let params = action.payload
let {task} = yield axios.put('/api/todos/isCompleted', params)
yield put(modify_todo_success(task))
}
```
- src/components/Herder.js 、src/components/Footer.js ```jsx import { getIn } from ‘immutable’
// 组件与store const mapStateToProps = (state) => ({ todos: getIn(state.todoReducer, [‘todos’]) })
```
- src/components/Main.js
```jsx
import { getIn } from 'immutable'
// 获取 store 当中数据
const mapStateToProps = (state) => ({
  todos: filterTodos(getIn(state.todoReducer, ['todos']), getIn(state.todoReducer, ['filter']))
})
```
todo-sercer 服务器
- package.json
```
"dependencies": {
  "body-parser": "^1.19.0",
  "cors": "^2.8.5",
  "express": "^4.17.1"
}
```
- app.js ```javascript const express = require(‘express’); const bodyParser = require(‘body-parser’); const cors = require(‘cors’); const app = express();
app.use(cors()); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json());

let taskList = [{ id: 1, taskName: ‘吃饭’, isCompleted: false, isEditing: false }, { id: 2, taskName: ‘睡觉’, isCompleted: false, isEditing: false }, { id: 3, taskName: ‘打豆豆’, isCompleted: false, isEditing: false }];

// 获取任务列表 app.get(‘/api/todos’, (req, res) => { res.send(taskList); });

// 添加任务 app.post(‘/api/todos’, (req, res) => { const ids = taskList.map(task => task.id); if (ids.length == 0) { req.body.id = 0; }else { const maxId = Math.max.apply(null, ids); req.body.id = maxId + 1; } req.body.isCompleted = false; req.body.isEditing = false; taskList.push(req.body); res.send({msg: ‘任务添加成功’, task: req.body}); }); // 删除任务 app.delete(‘/api/todos’, (req, res) => { const id = req.query.id; const index = taskList.findIndex(task => task.id == id); const clone = JSON.parse(JSON.stringify(taskList[index])); taskList.splice(index, 1); res.send({msg: ‘任务删除成功’, tasks: clone}); }); // 修改任务名称 app.put(‘/api/todos’, (req, res) => { const { id, taskName } = req.body; const index = taskList.findIndex(task => task.id == id); if (index == -1 || taskName == undefined) { res.status(400).send({msg: ‘参数传递有误’}); return; } taskList[index].taskName = taskName; res.send({msg: ‘任务名称修改成功’, task: taskList[index]}); }); // 更改任务的完成状态(单个) app.put(‘/api/todos/isCompleted’, (req, res) => { const {id, isCompleted} = req.body; const index = taskList.findIndex(task => task.id == id); taskList[index].isCompleted = isCompleted; res.send({msg: ‘任务是否完成状态修改成功’, task: taskList[index]}); }); // 批量更改任务是否完成状态 app.put(‘/api/todos/allCompleted’, (req, res) => { const { status } = req.body; const newTaskList = taskList.map(task => { task.isCompleted = status; return task; }); taskList = newTaskList; res.send(taskList); }); // 更改任务的编辑状态 app.put(‘/api/todos/isEditing’, (req, res) => { const {id, isEditing} = req.body; const index = taskList.findIndex(task => task.id == id); taskList[index].isEditing = isEditing; res.send({msg: ‘任务的编辑状态修改成功’, task: taskList[index]}); }); // 清除已完成任务 app.delete(‘/api/todos/clearCompleted’, (req, res) => { taskList = taskList.filter(todo => !todo.isCompleted) res.send({msg: ‘已完成任务清除完成’}) });

app.listen(3005, () => console.log(‘服务器启动成功’)); ```
- 启动服务器 node app.js

front-baise

todolist 案例

组件拆分

todos

实现添加任务

Todos

任务筛选功能

修改任务名称(二)

todo-sercer 服务器