学习react

2024-07-15 21:58| 来源: 网络整理| 查看: 265

自学react，作为一个只有后端python方面知识的人，看过一点点前端教程基础，学习react还是不轻松的。

记过两天的学习，自制一个简单的登录，注册界面，组件的划分用的还不是熟悉。

登录界面：http://localhost:3000/login

注册界面：http://localhost:3000/register

首页的界面：http://localhost:3000/homepage

一共三个界面，前端是用react画的，后端是用django做的登录注册。

django部分的登录注册代码，用的是restframework的模式：

class UserViewset(ModelViewSet): ''' 用户类，用于登录注册 ''' serializer_class = UserSerializer queryset = User.objects.all() @action(methods=['POST'], url_path='login', detail=False) def login(self, request): ''' 登录 :param request: 用于传参数，必要参数 username：用户名 password：密码 :return: ''' username = request.data.get('username') pwd = request.data.get('password') res = { 'code': 0, 'msg': '', 'data': {} } if not all([username, pwd]): res['msg'] = '参数异常。' return Response(res) print(request.data) try: user = User.objects.get(username=username, password=pwd) except: res['msg'] = '用户名或者密码错误，请重新登陆。' return Response(res) if user.is_active != 1: res['msg'] = '用户不可用，请重新登陆。' return Response(res) login(request, user) request.session['login'] = True request.session['FS_YWPT'] = True request.session.set_expiry(0) res['msg'] = '登陆成功' res['code'] = 1 res['data'] = {'username': username} return Response(res) @action(methods=['POST'], url_path='register', detail=False) def register(self, request): ''' 注册 :param request: 用于传参数，必要参数 email：邮箱 password：密码 username：用户名 residence：地区 website：暂时没啥用 :return: ''' email = request.data.get('email') password = request.data.get('password') username = request.data.get('username') residence = request.data.get('residence') website = request.data.get('website') res = { 'code': 0, 'msg': '', 'data': {} } if not all([email, password, username, residence, website]): res['msg'] = '参数异常。' return Response(res) print([email, password, username, residence, website]) if User.objects.filter(username=username): res['msg'] = '用户已存在。' return Response(res) User.objects.create(password=password, is_superuser=0, username=username, email=email) res['code'] = 1 res['data'] = [email, password, username, residence, website] return Response(res)

react部分：

登录界面，用的是ant中的表单组件。

注册界面，用的是ant中的表单组件。

首页，用的是ant中的布局。

还有一些js代码的编写。

详细代码，git地址：https://github.com/SmallRedHXB/loginAndReact.git

【本文地址】

公司简介

联系我们