【从0到1完成一个项目（七）】用户中心（下）

最新推荐文章于 2024-07-02 15:42:45 发布

Kplusone

最新推荐文章于 2024-07-02 15:42:45 发布

阅读量454

点赞数

分类专栏：实战项目文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_44063572/article/details/127140639

版权

实战项目专栏收录该内容

7 篇文章 3 订阅

订阅专栏

书接上回，这篇记录前端开发过程。作为后端程序员，主要理解前后端发送请求，接收数据，和前后如何联调，一些前端的细节现阶段不用太深入。

前端

修整Ant Design Pro项目

按照自己的需求删除一些代码和改掉官方标志

首先打开前端项目，不带假数据启动
在这里插入图片描述
启动成功，点击网址查看一下

网页显示如下：默认访问的是/user/login请求

修改底部版权信息

在这里插入图片描述

改成：

import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-layout';

const Footer: React.FC = () => {
  const defaultMessage = 'Kplusone出品';
  const currentYear = new Date().getFullYear();
  return (
    <DefaultFooter
      copyright={`${currentYear} ${defaultMessage}`}
      links={[
        {
          key: 'github',
          title: <GithubOutlined />,
          href: 'https://github.com/Kplusone666',
          blankTarget: true,
        },
      ]}
    />
  );
};

export default Footer;

修改logo

定义一个全局的常量，在src包下新建constants包
在这里插入图片描述
在contants新建index.ts

在这里插入图片描述
复制一个logo的图像链接，在index.ts写入以下代码：

export const SYSTEM_LOGO = "https://636f-codenav-8grj8px727565176-1256524210.tcb.qcloud.la/img/logo.png";

在页面包下找到index.tsx文件，将“/logo.svg”修改为{SYSTEM_LOGO},根据提示导入或使用快捷键
在这里插入图片描述

修改标题和副标题

到这就基本修改完了。

删除多余代码

删掉其他登录方法
在这里插入图片描述
删除手机号登录

删掉自动提示错误的用户和密码（删掉选中部分，不知道选中部分什么意思）

将提示改成请输入账号：

按ctrl+f，全局替换快捷键，将用户名改为账号。

改成“请输入密码”：

验证码、手机号登录的代码删掉（这个项目没有这个需求）

在这里插入图片描述
改成“忘记密码请联系Kplusone”

对接（请求）后台的接口

找到handleSubmit，按住CTRL，点击进去。

在这里插入图片描述
找到LoginParams，点击进去。

这里要修改一下参数，因为要和后端命名相同
这里应是使用重构快捷键而不是全局替换。重构是shift+f6
点击username，按shift+f6重构为userAccount，同理，password重构为userPassword。

在这里插入图片描述
回到handleSubmit

在这里插入图片描述
点击Login,进入方法本体

修改request的请求地址，去Ant Design Pro的官方文档，搜索请求

当时在做这个前端如何确定发送请求时是向那个域名（ip+端口）时走了很多弯路，原因在于对于ant design pro 这个项目如何封装请求不了解，因为之前没有学过这个ant desin组件库，况且里面这个项目还是用了react、Umi框架，追踪源码更是云里雾里，找官方文档也不好找，所以得出一个结论：在学一个项目或框架之前，要对它使用的技术栈的层级关系很了解才能知道怎么去发现问题解决问题，就是要有一个全局观念。这个解决问题的思路去看回放，每次看都能学到很多不一样的东西。虽然最为后端程序员对于前端的知识的不要求学很多，但是碰到问题如何解决的思路是值得学习。还有很多在全局观念上（架构设计、编程约定、编程规范）都是相通的，所以有时间可以可以好好看看回放体会一下。而且这种编程规范一旦学会了，其实哉学其他的新知识就是很快了，因为底层逻辑都是一样的。

这里request是ant design pro这个项目自己封装的请求，但是也是基于UMIJS框架再次封装（有点像二次开发，就是利用了Umijs框架的特性）

因为我们使用的是V5版本，所以我们要去app.ts里面配置一个全局的请求，app.ts文件里面定义了很多项目初始化需要向后端请求或者项目初始就需要的数据（比如用户数据），所以在前端项目启动后，会先读取这个文件来进行初始化。

在这里插入图片描述
全局请求定义了后端部署的服务器的ip和端口。然后我们修改登录接口的路径为/user/login,测试一下：

现在有一个问题：跨域错误。为什么会跨域？因为我们前端项目是部署在本地的8000端口，但是后端是本地的8080端口，只要端口不一致就是跨域。
解决方法：①代理
②后端配置为支持跨域，但是后端支持跨域不安全，不推荐。
这里讲一下两种不同的代理：
正向代理：替客户端向服务器发送请求，可以解决跨域问题。
举例：原本请求：http://localhost:8000/api/user/login
代理到请求：http://localhost:8080/api/user/login
反向代理：替服务器统一接受请求。
两种代理的区别参考
怎么搞代理？
Nginx服务器，Node.js（具体他们怎么做，以后可以出个博客，这里挖一个坑）盲猜是一个在后端搞，一个在前端搞。
在这里插入图片描述
我们这使用ant design pro项目本身就提供的代理功能（原理：我们在自己电脑上开发时前端是部署在8000端口，要想访问真实的后端服务端提供的用户接口，他会把前端8000端口代理到服务端的8080，当我们将前端部署到云服务器上时，代理功能就将云服务器的ip代理的服务的云服务器的IP，具体这个代理底层怎么实现的就是这个框架的源码了，咱们就当作是一个黑盒，框架做了封装。）前面修改请求地址的操作我们是用来Umijs的特性，其实也可以直接用代理来实现一样的功能，下面在实现用代理解决跨域的过程中就对此进行了优化。可以这么理解：使用UmiJs的特性是会带来跨域问题，因为相当于我们在代码里强制进行端口的改变（本来访问的一直是8000端口，后来我们加了前缀改成了8080）。但是ant design pro项目本来就提供好了代理功能，可以让我们很方便的请求8080的服务器，让我们不用强制改端口，一开始为什么没用这个功能是因为视频里是不让用，其实yupi的锅，相当于饶了很大一个圈，最后绕回来是因为碰到了跨域问题，才想起来用代理。

使用ant design pro项目的代理功能给后端发送请求（这样就没有跨域问题）

这里记录一下在使用代理功能时踩到的坑，程序员日常就是这样，没有BUG是不可能的，正确的心态是在解决bug的过程中锻炼自己，这个过程中会对很多技术有更深的理解，所以，不要害怕出bug,要乐于解决bug。扯了一点心态上的建设。
最开始是这么做的：
在这里插入图片描述

然后：
在这里插入图片描述

给后台所有接口加上/api

上面这种操作是不行的，原因可能是先代理了，再使用了prefix。（猜的，其实还有一种可能就是这种写法也可以，是因为随便试了一种账号密码后端判定为登入失败，返回用户信息为null，在前端看不到任何变化，所以我们这里再去测试的时候要在后端的登录接口上打断点，看看请求是否为空）
改：去掉prefix，在请求路径上加入/api
在这里插入图片描述