数据工厂系列（9）登录和注册接口联调

我很方
165 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

大家好~我是小方，欢迎大家关注笋货测试笔记体完记得俾个like呀

回顾

上篇我们已经完成了前端项目的初始化，今天我们来联调登录接口和注册接口

修改base_url

修改文件.env.development，我们的后端服务都是'http://127.0.0.1:8080/api/xxx' 这个URL就是后端服务的base路径

新增登录和注册api

vue-admin-template里面的api统一都是放在/src/api/目录下，所以这里我们也要分模块新建对应的api

在/src/api/目录下新增user.js，新增如下代码：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function register(data) {
  return request({
    url: '/user/register',
    method: 'post',
    data
  })
}

新增完之后，我们重启服务，尝试一下登录，发现出现了跨域报错！ 这里解决方法有很多种，这里就用最简单的方法进行处理==>后端开启跨域资源共享(CORS)

app/__init__.py末尾加入以下代码

# 前面记得引入CORSMiddleware
from starlette.middleware.cors import CORSMiddleware
fun.add_middleware(
            CORSMiddleware,
            allow_origins=["*"],
            allow_credentials=True,
            allow_methods=["*"],
            allow_headers=["*"],
        )

这里的顺序记得不能搞错的哦，先注册路由，再导入跨域中间件，其中中间件的也要按照顺序来，不然跨域这个中间件不生效 （这里我踩过坑) 设置完后，重启后端服务即可

在前端页面重新请求一下，没有出现跨域错误了，但是报错信息没有展示出来，这里我们改一下src/utils/request.js即可

这里还有请求头的token名称也要修改一下

修改登录页面

我们发现项目的登录页面并不符合需求（需求：可以正常注册和登录），我们要在原来的基础上进行二次开发

修改src/views/login/index.vue，以下代码删除掉

登录表单的校验规则和默认入参改一下

页面的一些文案调整一下，改成中文即可

调整后，页面好看多了

加入注册功能

目前调整完之后，就只有登录入口，我们还需要个注册入口，这里直接用element的Tabs标签页切换登录和注册的表单

把官网的demo拷贝下来改改，在div:login-container下新建一个div，class命名为login-form-wrap，在里面放置标题的div，tabs，登录/注册表单，我们粘贴下来的tabs代码改成这样

接着新建一个注册表单，这里直接复制登录表单的代码即可

这里的提交按钮事件记得换成handleRegister

添加之后，我们看到两个表单都在一起了，这里得用v-show判断一下，如果tabs切换登录就用登录表单，反之注册表单~~（前端的样式这里先不讲了，我写得比较烂，要多看看w3school）~~

加入之后，我们要给handleRegister事件编写逻辑，先将接口封装成一个方法，将表单数据传值进去

在handleRegister函数里调用该方法

如果表单验证通过，就调用该方法，然后如果注册成功(code === 0，request.js帮我们做好了判断)，切换到登录标签页，将刚才注册成功的用户名和密码赋值到登录表单中

我们来测试一下，注册成功后，切换到了登录标签页并自动填充了用户名和密码

其他优化点

  • 左侧菜单栏更改 修改src/router/index.js文件，修改如下：
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '数据报表', icon: 'el-icon-data-analysis', affix: true }
    }]
  },

  {
    path: '/case',
    component: Layout,
    redirect: '/case/index',
    name: 'Case',
    meta: { title: '数据工厂', icon: 'el-icon-office-building' },
    children: [
      {
        path: 'index',
        name: 'Index',
        component: () => import('@/views/table/index'),
        meta: { title: '场景列表', icon: 'el-icon-s-order' }
      },
      {
        path: 'log',
        name: 'Log',
        component: () => import('@/views/tree/index'),
        meta: { title: '运行日志', icon: 'el-icon-reading' }
      }
    ]
  },

  {
    path: '/system',
    component: Layout,
    redirect: '/system/user',
    name: 'System',
    meta: { title: '管理中心', icon: 'el-icon-s-tools' },
    children: [
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/form/index'),
        meta: { title: '用户管理', icon: 'el-icon-user' }
      },
      {
        path: 'project',
        name: 'project',
        component: () => import('@/views/tree/index'),
        meta: { title: '项目管理', icon: 'el-icon-folder' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

最终效果

  • 右上角下拉菜单更改 修改src/layout/components/Navbar.vue将下拉菜单配置成路由跳转的形式

修改后效果

  • 新增退出登录 目前我们是没有联调退出登录接口，点击退出登录是无法退出登录，我们先写个退出登录接口，后期再配合redis进行逻辑处理

后端项目里app/routers/user/user.py新建退出登录路由函数

@router.get("/logout",name="退出登录", description="退出登录", response_model=ResponseDto)
def logout(_: dict= Depends(Auth())):
    try:
        # todo 退出登录删除清空redis token数据
        return ResponseDto(msg="退出成功")
    except Exception as e:
        raise NormalException(str(e))

前端src/api/user.js新增以下代码

export function logout() {
  return request({
    url: '/user/logout',
    method: 'get'
  })
}

修改src/layout/components/Navbar.vue，加入删除标签页数据清空和去除重定向功能

总结

今天进行登录和注册功能的联调，可能讲得不够详细，不需要看前端的小伙伴可以先略过哈~端午节了，大家要回去多看看w3school

avatar
文章
阅读
粉丝