从0开始创建自己的todoList项目(前后端分离)

1.写在前面

本文章用来记录自己通过创建自己的一个简单的todoList(代办事项)项目学习前后端语言以及开发过程,作为前端新手加后端小白,希望能够通过完成本项目学习一些前后端语言的基础,熟悉前后端框架与交互过程。todoList,是一个比较适合新手锻炼的项目,包含了最基本的增删改查功能,简单的页面搭建与路由逻辑,当然在实现的过程中肯定没有想象得简单。 作为新手很多东西是自己没有做过的与自己没有学过的,需要不断地翻阅官方文档,以及借助互联网网友的强大力量。

Let's beging

2.技术栈选择

react + springBoot

1.项目的搭建

一个项目最基础,当然是先搭建出项目结构了,相当与打好项目的地基,拥有一个好的项目框架,在进行项目开发的时候才能事半功倍哦!现在来搭建项目的框架吧!

1.1 前端部分的项目搭建

首先看看在前端部分我们需要使用什么吧!毫无疑问的,我们需要使用到组件,路由,网络通讯等功能,做为一个vue开发者,为什么选择使用react来作为项目的前端呢?当然是希望通过这个项目能够多掌握一门前端语言框架了!

作为最基础也是最重要的一步,就是启动一个自己react项目了!

//安装react脚手架 npm install create-react-app

//创建一个react项目 create-react-app myTodoList

//跳转到项目 cd myTodoList

//启动项目 npm start

接下来就会打开这个界面

当当!项目创建成功哦!当然这只是第一步呢!

1.2 前端项目结构的搭建

通过上面的代码,我们成功的启动了我们的react项目,接下来让我们开始搭建我们的项目结构吧!让我们先来看看我们的文件夹里有些什么文件呢

node_modules文件夹

很显然是我们应用的包文件夹,大部分时候我们都不会去修改和查看这些包的源文件,暂时跳过

public文件夹

这是开发应用时浏览器读取的文件夹,让我们看看吧。(放置在public里的静态文件在打包时不会被webpack处理哦)

这里有一个index.html文件,这个文件就是浏览器读取的页面文件了,我们可以在这里设置我们的网页标题,还有网页图标哦。

src文件夹

这是我们开发时最常用到的文件夹了,我们的组件、样式、事件、路由都会在这个文件夹下编写,是我们花费时间最多的地方,因为它是我们 React 应用源码存放的目录

package.json文件

包含了 Node.js/npm 为了建立该应用程序所管理着的文件信息。这个文件不是 React 应用独有的,当我们使用Vue创建项目时也有这个文件夹哦,在这个文件里,我们可以看到一些调试时使用的命令。

还有我们安装的组件以及版本

OK!现在我们浏览了一遍我们所创建的项目,接下来我们来看看要在如何编写我们的页面和组件吧。

应用组件库

为了提高我们的开发效率,在实际的开发过程中,我们会用到很多的第三方组件库,例如知名的elementUI,选择一个合适的组件库,会使我们减少页面开发的时间(毕竟你不会想自己写轮播组件吧,不会吧),在公司的项目中,接触到了ant design vue组件库,而这套组件库原本是支持react而非vue的,所以我选择使用这个组件库来作为我的ui框架,现在我们来安装它吧。

安装ant design

首先呢,我们需要把它安装到我们的项目里。打开我们的终端(注意终端路径是我们项目的路径哦) 然后输入

npm install antd --save

然后你就会在package.json文件里找到你安装的组件了

使用ant design组件

ant design拥有很多组件,这里就不一一介绍了,做为一个合格的程序员的第一步,就是学会阅读文档,在文档里有很多示例和使用方法,这里就希望大家阅读文档哦。

Ant Design - 一套企业级 UI 设计语言和 React 组件库 (antgroup.com)

(...持续更新中)

相关推荐
Mintopia41 分钟前
⚡当 Next.js 遇上实时通信:Socket.io 与 Pusher 双雄传
前端·后端·全栈
Mintopia1 天前
🧙‍♂️ Next.js 权限区分之术:凡人 vs 管理员
前端·后端·全栈
Mintopia2 天前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
我是一只懒羊羊4 天前
从零搭建 Node.js企业级 Web 服务器:自定义服务&数据请求
前端·node.js·全栈
Mintopia4 天前
Next.js 与 Serverless 架构思维:无状态的优雅与冷启动的温柔
前端·后端·全栈
Mintopia5 天前
单体 vs 微服务:当 Next.js 长成“巨石阵”以后 🪨➡️🧩
前端·后端·全栈
hui函数6 天前
python全栈(基础篇)——day03:后端内容(字符串格式化+简单数据类型转换+进制的转换+运算符+实战演示+每日一题)
开发语言·后端·python·全栈
Mintopia6 天前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
hui函数7 天前
python全栈(基础篇)——day04:后端内容(字符编码+list与tuple+条件判断+实战演示+每日一题)
开发语言·数据结构·python·全栈
r0ad14 天前
AI+独立开发者如何抓住机会?
全栈