react---todolist 基本布局

最新推荐文章于 2022-08-31 23:30:40 发布

逆风飞翔的代码单身狗

最新推荐文章于 2022-08-31 23:30:40 发布

阅读量311

点赞数

分类专栏： react 文章标签： react javascript reactjs

本文链接：https://blog.csdn.net/weixin_41530639/article/details/107281716

版权

本文介绍了如何使用React CLI创建一个TodoList应用，包括页面渲染、添加、删除和选中效果。应用分为todoHeader、todoInput和todoList三个模块，数据暂写死以专注于布局。提到了通过json-server或自建后端（mysql+Navicat+node+express）获取数据，并展示了如何在项目中组织API请求，简化后期维护。虽然当前未使用Redux，但预告了后续将讨论如何利用Redux优化项目。

摘要由CSDN通过智能技术生成

react–todolist

最终要实现的页面如图所示：
在这里插入图片描述
上图中我们需要实现的有页面渲染、点击按钮添加、删除、改变每条数据前面的input框的选中效果
1.首先我们用react-cli搭建项目
ps：
需要安装的依赖：

将todolist划分为三个模块：
todoHeader、todoInput 、todoList，将三个模块引入到文件App.js，再将App引入到项目主入口index.js，挂载到页面中去：
在这里插入图片描述

在App.js中定义好数据，其中arr是输入框下面用来展示的数据，暂时写死了
PS：
数据暂时写死是为了先布局好，后续只需要通过请求数据，将state中arr里面的数据进行覆盖就可以了
这里涉及到搭建后台：
1.可以通过json-server这个插件来搭建，这个后续讲解如何使用
2.可以通过mysql+Navicat+node+express搭建数据库
后台这个我就不详细描述了，两种方式我都去尝试了，个人建议使用第二种，熟练掌握sql语句
如果对sql语句比较熟练了，可以用第一种。
src/api/index.js是用来挂载请求的，我将它单独划分出来，定义请求，再将请求导出，挂载到了项目的主入口文件index.js中，将请求挂载到react全局上，后续要使用请求，只需要调用就可以了，减轻了后续维护的工作量。
src/api/index.js：

import axios from 'axios'
// 设置axios请求的域名
axios.defaults.baseURL = 'http://127.0.0.1:8000'

// 获取Todos -->那么这里请求就相当于请求http://127.0.0.1:8000/todos
export const getTodos = ()=>{
   
  return axios.get('/todos')
}

// 添加数据
export const addTodo = (params)=>{
   
  return axios.post(`/todos`,params)
}

将请求挂载到react全局上面：
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import * as Api from './api/index'

React.Component.prototype.$http = Api

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister(