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

从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);  });  
};

• 样式 仿照美团登录页 用了ant design的layout布局 现在想一想 视乎是不需要用它的

总结下来 这三天过得很失败 效率太低了