从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布局 现在想一想 视乎是不需要用它的
)
