当前位置：首页 > news >正文

从0开始搭建一个react项目第一二三天

news 2025/8/9 5:59:30

从0开始搭建一个react项目

今天接到一个任务让我把原来用ext.js写的前端换成react写的，我好慌的，因为我就是一个小白，之前只做过简单的二次开发功能。唉，我只是一个领着微薄薪水的小实习生，为什么要有这个任务，硬着头皮写吧。

最近在跟鱼皮做用户中心的项目，没有做完，我水平实在是不咋地，跟着视频做项目挺费劲的，现在卡壳在登录功能，模版里前端传入后端的数据，跟自己写的后端接口要求的字段名称不一样，不能简单的改前端传入后端的数据，要重构，因为好的文件里都用到了这个数据，一个一个的改麻烦还容易出错。我的项目不知道咋回事，还不能重构，这个错卡了我好几天。今天决定改后端的字段，不能再卡下去了。

开始做

//创建项目 在终端中输入
npm i @ant-design/pro-cli -g  //全局安装Ant Design Pro
pro create project_name  //创建一个新的 Ant Design Pro 项目
npm i   //按照package.json 下载依赖

在这里踩的坑

pro create project_name 需要用git从远程拉去我用的电脑没有安装git 所以报错了安装了git 再次运行pro create project_name 成功了
运行pro create project_name 可能会因为缺少 .git 报fatal: not a git repository (or any of the parent directories): .git的错忽略即可。
忘记运行 npm i 了
报TS1149: File name ‘C:/my/store-web/node_modules/antd/es/index.d.ts’ differs from already included file name ‘c:/my/store-web/node_modules/antd/es/index.d.ts’ only in casing的错原因是但在 Windows 系统中，默认情况下文件路径是不区分大小写的。然而，TypeScript 编译器在解析文件时可能会因为某些配置或工具链（如某些 IDE 或构建工具）而表现出对大小写敏感的行为。解决办法
在tsconfig.json里不开启ts文件系统大小写敏感在tsconfig.json里加入
“compilerOptions”: {
“forceConsistentCasingInFileNames”: false,
},

后来决定不用ant design pro了对于我来说还是有些难度的改成ant design

搭建项目

npx create-react-app antd-demo
cd antd-demo
npm i
npm run start

路由遇到了大坑不会写就先没有单独把路由写在一个文件里以后再改吧

暂时这样实现吧

 <BrowserRouter><Routes><Route path="/" element={<Login />} /><Route path="/bar" element={<PlanUpdateLog />} /><Route path="/text" element={<Text />} /></Routes></BrowserRouter>

登录页

原来的页面是用ext写的用react写后 axios调用接口时报 “Required String parameter ‘username’ is not present” 的错报错原因：后端服务可能期望参数以特定的方式编码或传递。在Ext.js中，params选项通常会将参数添加到URL的查询字符串中或以application/x-www-form-urlencoded的形式发送。在axios中，默认情况下，当你传递一个对象作为POST请求的数据时，它会被序列化为JSON格式。解决办法：以application/x-www-form-urlencoded格式发送数据：

import qs from 'qs';  const onFinish = (values) => {  const { username, password } = values;  const url = "http://localhost:8080/store-ak/api/login/checkLogin";  axios.post(url, qs.stringify({ username: username, password: password }), {  headers: {  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  }  })  .then(response => {  // 处理响应数据  console.log("response", response);  })  .catch(error => {  // 处理错误  console.error("Error fetching data:", error);  });  
};