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

admin2024-05-15  0

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!