在现代 Web 应用程序中,创建可维护和可扩展的代码是至关重要的。使用 TypeScript 和 React 可以大大简化这个过程。TypeScript 是一种面向对象的编程语言,它是 JavaScript 的超集,提供了类型检查和更好的开发工具。React 是一个用于构建用户界面的 JavaScript 库,它将应用程序分解为组件,使得代码重用和测试变得容易。
在本篇文章中,我们将学习如何使用 TypeScript 和 React 来构建一个 CRUD Web 应用程序。我们将涵盖以下主题:
- 创建 React 应用程序
- 设计应用程序的数据模型
- 构建 CRUD 操作
- 使用 Material UI 创建界面
- 将数据保存到服务器
1. 创建 React 应用程序
首先,我们需要安装 Node.js 和 NPM。然后,使用以下命令在命令行中安装 create-react-app。
--- ------- -- ----------------
创建一个新的应用程序,使用以下命令:
---------------- ------ ---------- ---------- -- ------
安装 Material UI,并添加到项目中:
--- ------- ----------------- --- ------- ------------------
2. 设计应用程序的数据模型
在构建应用程序之前,我们需要设计数据模型,以便更好地组织和管理数据。下面是一个示例数据模型:
--------- ---- - --- ------- ------ ------- ------- ------- ------------ ------- -
我们将使用这个数据模型来管理书籍的数据。
3. 构建 CRUD 操作
现在,我们可以开始构建 CRUD 操作了。在 src 目录下创建一个新的文件夹,命名为 services。在 services 文件夹下创建一个新的文件,命名为 booksService.ts。
在 booksService.ts 文件中,我们将实现以下 CRUD 操作:
- 获取所有的书籍
- 获取单个书籍
- 创建一本新书
- 更新一本书的信息
- 删除一本书
------ ----- ---- -------- ------ - ---- - ---- ----------------- ----- ------- - ------------- ----- ------ - ----- --- --------------- -- - ----- -------- - ----- --------------------------- ------ -------------- -- ----- --- - ----- ---- -------- ------------- -- - ----- -------- - ----- ------------------------------------ ------ -------------- -- ----- ------ - ----- ------ ------ ------------- -- - ----- -------- - ----- ------------------------- ------ ------ -------------- -- ----- ------ - ----- ---- ------- ----- ------ ------------- -- - ----- -------- - ----- ----------------------------------- ------ ------ -------------- -- ----- ------ - ----- ---- -------- ------------- -- - ----- --------------------------------------- -- ------ ------- - ------- ---- ------- ------- ------ --
我们使用了 Axios 库来进行 HTTP 请求。这个服务模块将会导出这些方法,供其他模块使用。
4. 使用 Material UI 创建界面
使用 Material UI,可以快速构建具有优美外观和响应式布局的应用程序界面。首先,我们需要为我们的应用程序创建一个布局,我们可以使用 AppBar 和 Drawer 组件来实现。
------ ----- ---- -------- ------ - ------- ------- -------- ---------- - ---- -------------------- ------ - ---------- - ---- --------------------------- ----- --------- - ------------- -- -- ------ - --------- -- -- ---- ----- ---- -------- - -- -- - ----- ------- - ------------ ------ - -- ------- ----------------- ---------------- --------- ----------- ------------ -------------------------- -- ----- ------------- ---------- --------- ------- -------------------- -------- -- --------- --- -- -- ------ ------- ----
接下来,我们将创建一个 Books 组件,用于显示书籍列表。我们将使用 Material UI 的 Table 和 TablePagination 组件来实现。
------ ------ - -------- - ---- -------- ------ - ------ ---------- ---------- --------------- ---------- --------- ------ ---------------- - ---- -------------------- ------ - ------------- ----------- ----- - ---- --------------------------- ------ - ---- - ---- ----------------- --------- ----- - ------ ------- - ----- --------- - ------------------ ------ -- -------------- --------------- - ------------- ----------------- -- -- -- ----- ------ --------------- - -- ----- -- -- - ----- ------- - ------------ ----- ------ -------- - ------------ ----- ------------- --------------- - ------------- ----- ---------------- - ------- -------- -------- ------- -- - ----------------- -- ----- ----------------------- - ------- ------------------------------------ -- - ------------------------------------------- ----- ----------- -- ------ - --------------- ----------------- ----------------------------------- ------- ----------- ---------- ---------------------------- ----------------------------- ----------- ------------ ----------- ----------------- - ------------ ---- - ----------- - ----------------------- -- - --------- -------------- ----------------------------------- ------------------------------------ ----------- --- ------------ -------- ---------------- --------------- -------------------- ----------- ------------------------- ------------------------------- --------------------------------------------- -- ----------------- -- -- ------ ------- ------
最后,我们将在应用程序中的主页上显示 Books 组件。
------ ------ - --------- --------- - ---- -------- ------ - --------- - ---- -------------------- ------ ----- ---- --------------------- ------ ------------ ---- -------------------------- ------ - ---- - ---- ---------------- ----- ---- -------- - -- -- - ----- ------- --------- - --------------------- ------------ -- - ----- --------- - ----- -- -- - ----- ---- - ----- ---------------------- --------------- -- ------------ -- ---- ------ - -- ------- ----------------- ---------------- --------- ----------- ------------ -------------------------- -- ----- ------------- ---------- --------- ------- -------------------- -------- -- --------- ---------- -------------- ------ ------------- -- ------------ --- -- -- ------ ------- ----
现在,我们的应用程序已经可以显示书籍列表了!
5. 将数据保存到服务器
在本节中,我们将学习如何将书籍数据保存到服务器。我们将使用 JSON Server 作为我们的后端,它是一个为快速原型开发而构建的 RESTful API 服务器库。
首先,我们需要安装 JSON Server:
--- ------- -- -----------
然后,在项目的根目录下创建一个名为 db.json 的文件。在这个文件中,我们将存储我们的书籍数据。
- -------- - - ----- -- -------- ---- ------- -- --- ----- --------- --- -- ---------- -------------- -- ----- ----- - -------- -- --- ---- ------ -- - ----- -- -------- --- ---- - ------------- --------- ------- ----- -------------- -- ----- ----- ------ ---------- -- --- ---- ------- -- - ----- -- -------- ---- ----- -------- --------- --- ----- ------------ -------------- -- ----- ----- --- --------- --- ------ -- --- ------- ---------- - - -
接下来,在 package.json 文件中添加以下脚本:
-------------- ------------ ------- ------- ------ -----
然后,我们可以使用以下命令启动服务器:
--- --- -----------
现在,我们的服务器已经启动了。我们需要更新 booksService.ts,以便将数据保存到服务器上。
------ ----- ---- -------- ------ - ---- - ---- ----------------- ----- ------- - ------------------------------ ----- ------ - ----- --- --------------- -- - ----- -------- - ----- --------------------------- ------ -------------- -- ----- --- - ----- ---- -------- ------------- -- - ----- -------- - ----- ------------------------------------ ------ -------------- -- ----- ------ - ----- ------ ------ ------------- -- - ----- -------- - ----- ------------------------- ------ ------ -------------- -- ----- ------ - ----- ---- ------- ----- ------ ------------- -- - ----- -------- - ----- ----------------------------------- ------ ------ -------------- -- ----- ------ - ----- ---- -------- ------------- -- - ----- --------------------------------------- -- ------ ------- - ------- ---- ------- ------- ------ --
现在,我们的 CRUD 操作将使用 JSON Server 作为后端。
总结
在本篇文章中,我们学习了如何使用 TypeScript 和 React 来构建一个 CRUD Web 应用程序。我们已经涉及到了很多关键点,包括数据模型设计,构建 CRUD 操作,创建界面组件以及使用服务器来存储数据。我们希望本文能够帮助你更好地理解这些技术,并为你的下一个项目提供启示。如果你想查看完整的代码,可以在 GitHub 上找到它:https://github.com/lukezhan/react-typescript-crud-app。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f3e356f6b2d6eab3d1dfe1