前言
大家好 我是歌谣 最近开始在做关于前端扫盲的一些只是处理 花了一周左右录制了了 一个hook写法的关于todoList的视频 主要用于基础知识的一个使用和处理
目录
# 前端巅峰人才交流群私信我
# 第一节 创建项目 todolist项目
技术选型 React(Hook)+TS+axios+ant design+json server
npx create-react-app HookTodoList --template typescript
hook 16.8之后写法
Ts 限制数据类型
axios 请求
ant design pc组件库
json server模拟数据
# 第二节 创建项目
前端交流群可以私信我
微信公众号是前端小歌谣
想要源码的话也乐意关注我
评论区给邮箱发源码
npx create-react-app todolist --template typescript
package.json 配置文件
# 第三节 项目目录和页面修改
清除多余样式 修改输出为hello world
# 第四节 增加ant design库
npm install antd
渲染一个table
# 第五节 Json server模拟数据请求
Json server模拟数据请求
npm install -g json-server
json-server --watch db.json --port 5000
# 第六节 封装axios请求
npm install axios
# 第七节 请求接口调用
# 第八节 问题解决和列表渲染
# 第九节 简单定义ts数据类型
# 第十节 增加一个新增页面(样式绘制)
# 第十一节 增加一个新增页面(样式绘制)优化
# 第十二节 解决问题并完善新增页面
# 第十三节 状态修改
# 第十四节 任务删除
# 第十五节 课程的回顾
详情页 选项卡方式 增删改查Json server模拟数据格式
{
"hookList": [
{
"taskName": "写诗",
"status": "1",
"id": 5
},
{
"taskName": "写诗",
"status": "0",
"id": 6
},
{
"taskName": "作曲",
"status": "0",
"id": 7
},
{
"taskName": "唱歌",
"status": "0",
"id": 8
},
{
"taskName": "跳舞",
"status": "0",
"id": 9
}
],list列表
import { Button, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { getHookList } from '../service/codeing';
import TodoAdd from './TodoAdd';
import axios from 'axios';
interface DataType {
id:number,
taskName:string,
status:boolean
}
interface IHookList{
id:number,
taskName:string,
status:boolean
}
const TodoList: React.FC = () => {
const columns: ColumnsType<DataType> = [
{
title: 'id',
dataIndex: 'id',
key: 'id',
render: text => <a>{text}</a>,
},
{
title: '任务名称',
dataIndex: 'taskName',
key: 'taskName',
},
{
title: '任务状态',
dataIndex: 'status',
key: 'status',
render: text => <a>{text==true?"已完成":"未完成"}</a>,
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<a onClick={()=>handleStatus(record,"0")}>修改为未完成</a>
<a onClick={()=>handleStatus(record,"1")}>修改为已完成</a>
<a onClick={()=>handleDelete(record)}>删除</a>
</Space>
),
},
];
const handleDelete=(record:any)=>{
axios.delete(`http://localhost:5000/hookList/${record.id}`, {
}).then(res => {
initMenuList()
})
}
const handleStatus=(record:any,data:any)=>{
axios.patch(`http://localhost:5000/hookList/${record.id}`, {
status:data
}).then(res => {
console.log(res)
initMenuList()
})
}
const [visable,setVisable]=useState<boolean>(false)
const handleClick=()=>{
setVisable(true)
}
useEffect(() => {
initMenuList();
}, []);
const [data,setData]=useState<Array<IHookList>>()
const initMenuList = async () => {
// 想加入前端交流群可以私信我
const response = await getHookList({ });
setData(response.data)
};
const onCancle=()=>{
setVisable(false)
}
const onConfirm=()=>{
initMenuList()
setVisable(false)
}
return (
<>
<Button type='primary' onClick={handleClick}>新增任务</Button>
<Table columns={columns} dataSource={data} />
<TodoAdd visable={visable} onConfirm={onConfirm} onCancle={onCancle}></TodoAdd>
</>)
}
export default TodoList;ListAdd页面
import { Space, Table, Tag, Form, Input, Modal } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { getHookList } from '../service/codeing';
import axios from 'axios';
import { useForm } from 'antd/es/form/Form';
interface DataType {
id: number,
taskName: string,
status: boolean
}
interface IHookList {
id: number,
taskName: string,
status: boolean
}
const columns: ColumnsType<DataType> = [
{
title: 'id',
dataIndex: 'id',
key: 'id',
render: text => <a>{text}</a>,
},
{
title: '任务名称',
dataIndex: 'taskName',
key: 'taskName',
},
{
title: '任务状态',
dataIndex: 'status',
key: 'status',
render: text => <a>{text == true ? "已完成" : "未完成"}</a>,
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<a>状态修改</a>
</Space>
),
},
];
const TodoAdd: React.FC<any> = (props: any) => {
const { visable } = props
const [form] = useForm()
useEffect(() => {
initMenuList();
}, []);
const [data, setData] = useState<Array<IHookList>>()
const initMenuList = async () => {
// 想加入前端交流群可以私信我
const response = await getHookList({});
setData(response.data)
};
const handleOK = () => {
axios.post(`http://localhost:5000/hookList`, {
taskName: form.getFieldValue("name"),
status:"0"
}).then(res => {
props.onConfirm();
})
}
const handleCancle = () => {
props.onCancle()
}
return (
<Modal title="新增任务" open={visable} onOk={handleOK} onCancel={handleCancle}>
<Form form={form}>
<Form.Item label="任务名称" name="name">
<Input placeholder='请输入任务名称'></Input>
</Form.Item>
</Form>
</Modal>
)
}
export default TodoAdd;axios封装部分
import axios from "axios";
const instance=axios.create({
baseURL:"http://127.0.0.1:5000",
timeout:60000
})
export function get(url,data={}){
return new Promise((resolve,reject)=>{
instance.get(url,{
params:data
}).then((response)=>{
resolve(response)
}).catch((err)=>{
reject(err)
})
})
}
export function post(url,data={}){
return new Promise((resolve,reject)=>{
instance.post(url,data).then(
(response)=>{
resolve(response.data)
},
(err)=>{
reject(err)
}
)
})
}结果展示
源码和视频地址
视频地址
https://space.bilibili.com/474556051/channel/collectiondetail?sid=960841源码地址
https://gitee.com/geyaoisgeyao/hook-todolist.git