项目实战：使用React框架搭建一个B/S架构能够记录＂任务事务＂完成与否的任务栏

本文链接：https://blog.youkuaiyun.com/u012335228/article/details/99107990

本文介绍了一个使用React框架搭建的B/S架构任务管理应用，通过集成local storage实现数据持久化，并介绍了项目的初始化、UI组件使用、代码结构、数据库存储改进以及部署过程，涉及的技术包括Ant Design的React组件库、npm安装与管理、前端与后端API交互等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react项目的初始化安装请参考：https://blog.youkuaiyun.com/u012335228/article/details/98884858
下面实验在浏览器将数据永久化
１．安装local storage js模块：
在这里插入图片描述
２．安装UI可视化模块，此处我们使用蚂蚁金服的开源项目antd react组件

３．安装（忽略警告信息，如果此处安装不上报error，可采用删除安装目录下的node_modules文件夹，重新执行npm install命令）

体验一下local storage

let store = require('store')

store.set('user','yzx')
console.log(store.get('user'))

store.remove('user')
console.log(store.get('user'))//undefined
console.log(store.get('user','default'))

store.set('user',{name:'tom',age:30})
console.log(store.get('user').name)

console.log('==================================')
store.set('city',{name:'shenzhen'})
store.each(function (value,key) {
    console.log(key,value)
})

console.log('==================================')
store.clearAll();
store.each(function (value,key) {
    console.log(key,value)
})

运行结果：

yzx
undefined
default
tom
==================================
user { name: 'tom', age: 30 }
city { name: 'shenzhen' }
==================================

４．项目完整代码：
react目录解构：
在这里插入图片描述
index.html内容（此处不在src目录，而在项目目录下）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React项目</title>
</head>
<body>
<h1>React项目 测试程序</h1>
<hr>
<div id="root"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>

src目录中index.js

import React from 'react';
import ReactDom from 'react-dom'
import Create from './Create'
import TodoService from './service'

class Root extends React.Component {
  constructor (props){
    super(props)
    this.service = new TodoService()
  }
  
  handlerCreate(event){
    console.log('root handlercreate')
    console.log('this=',this)
    console.log('event=',event.target,event.target.value)
    this.service.create(event.target.value)
  }

  render(){
    return (
    <div>
      <Create onCreate={this.handlerCreate.bind(this)} />
    </div>
    )
  }
}

ReactDom.render(<Root name='yzx' />,document.getElementById('root'))

src目录中service.js内容：

import store from 'store'

export default class TodoService{
    static NAMESPACE = 'todo::'//prefix +str = key
    todos = []
    create(title){ //title 内容
        console.log('service create')
        const todo = {
            key:TodoService.NAMESPACE + (new Date()).valueOf(),
            title:title,
            completed:false
        }
        this.todos.push(todo) //title key completed
        store.set(todo.key,todo)
        return todo
    }
}

src目录中Create.js内容：

import React from 'react'
import 'antd/lib/input/style'
import 'antd/lib/card/style'
import {Input,Card} from 'antd'

export default props => (
      <Card title="请输入待办事宜" extra={<a href="#">More</a>} style={
  
  { width: 300 }}>
        <Input placeholder='请输入' onPressEnter={props.onCreate} style={
  
  {width:150}}/>
      </Card>
      )

查看浏览器变化：
在这里插入图片描述