基于FastApi框架测试平台(9)-前端登录

郝同学的测开笔记
213 阅读3分钟

前言

已经完成后端登录注册接口了，现在我们写前端登录页面。由于笔者前端知识薄弱，这里主要采用开源项目，边改边学习。

登录页面

使用Vue.js 和 Element UI 构建的登录页面

<template>
  <div class="login-page">
    <div class="login_box" :style="{'min-height':winHeight+'px'}">
      <div id="particles"></div>
      <div class="login" v-loading="loading">
        <div class="login_name">
          <p>测试平台</p>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="账号密码登录" name="first">
            <el-form :model="loginForm" :rules="rules" ref="userForm" class="loginForm" id="test-login-form">
              <el-form-item prop="name">
                <el-input v-model="loginForm.name" placeholder="填写用户名" id="t-name" size="medium"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="填写密码" id="t-pwd" size="medium"
                          @keyup.enter.native="loginFun"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="login-btn" @click="loginFun">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
​
      </div>
    </div>
  </div>
</template>

由于刚开始接触，详细解释一下各个标签的作用

  • <div class="login-page">：外层的 <div> 标签具有 login-page 类名，用于给整个登录页面设置样式。
  • <div class="login_box" :style="{'min-height':winHeight+'px'}">：这个 <div> 标签位于登录页面的内部，具有 login_box 类名，并通过 :style 绑定了一个计算属性 winHeight，用于设置该 <div> 的最小高度。在 Vue.js 中，通过 :style 绑定动态样式对象可以根据组件的数据实时更新元素的样式。
  • <div id="particles"></div>：这是一个空的 <div>，很可能是用来放置粒子效果动画的容器。粒子效果通常是通过 JavaScript 库（例如 particles.js）来实现的，可以为网页增添一些视觉效果。
  • <div class="login" v-loading="loading">：一个具有 login 类名的 <div>，使用了 Vue.js 的指令 v-loading 来绑定一个布尔值 loading。当 loading 的值为 true 时，该 <div> 将显示加载状态的提示。
  • <div class="login_name">：具有 login_name 类名的 <div>，用于显示登录页的标题。
  • <p>测试平台</p>：一个 <p> 标签，显示了标题文字 "测试平台"。
  • <el-tabs v-model="activeName">：使用 Element UI 的 <el-tabs> 组件创建了一个选项卡切换的容器。通过 v-model 指令绑定了一个名为 activeName 的响应式数据，用于控制当前选中的选项卡。
  • <el-tab-pane label="账号密码登录" name="first">：另一个 <el-tab-pane> 组件，表示第一个选项卡。该选项卡的标签显示为 "账号密码登录"，name 属性的值为 "first"。
  • <el-form :model="loginForm" :rules="rules" ref="userForm" class="loginForm" id="test-login-form">：一个 <el-form> 组件，用于创建一个表单。其中包括了一个 :model 属性和一个 :rules 属性，分别指向一个名为 loginForm 的对象和一个名为 rules 的验证规则对象。通过 ref 属性设置了一个引用名称为 "userForm"，以便在组件中引用该表单实例，可以在组件中使用 $refs 对象来访问该表单组件的实例方法和属性。
  • <el-form-item prop="name">：一个 <el-form-item> 组件，表示表单中的一个表单项。通过 prop 属性设置了该项数据对象中对应的属性名为 "name"。这样可以在表单验证过程中使用该属性名进行校验。
  • <el-input v-model="loginForm.name" placeholder="填写用户名" id="t-name" size="medium"></el-input>：一个 <el-input> 组件，用于输入用户名。通过 v-model 指令将其与 loginForm 对象中的 name 属性进行双向绑定。placeholder 属性用于设置输入框的占位提示文本，id 属性用于给输入框设置一个唯一标识符，size 属性设置输入框的尺寸为 "medium"。
  • <el-form-item prop="password">：另一个 <el-form-item> 组件，表示密码输入框的表单项。通过 prop 属性设置了该项数据对象中对应的属性名为 "password"。
  • <el-input type="password" v-model="loginForm.password" placeholder="填写密码" id="t-pwd" size="medium" @keyup.enter.native="loginFun"></el-input>：一个密码输入框 <el-input> 组件，通过 v-model 指令将其与 loginForm 对象中的 password 属性进行双向绑定。type 属性设置输入框的类型为密码，placeholder 属性用于设置输入框的占位提示文本，id 属性用于给输入框设置一个唯一标识符，size 属性设置输入框的尺寸为 "medium"。@keyup.enter.native="loginFun" 表示在输入框中输入回车键时触发 loginFun 方法。
  • <el-form-item>：一个空的 <el-form-item> 组件，用于放置登录按钮。
  • <el-button type="primary" class="login-btn" @click="loginFun">登录</el-button>：一个 <el-button> 组件，表示登录按钮。通过 type 属性设置按钮类型为主要按钮，class 属性用于自定义按钮的样式，@click 指令绑定了点击事件，当按钮被点击时将触发名为 loginFun 的方法。

涉及知识点

动态样式绑定：在 Vue.js 中，通过 :style 绑定动态样式对象可以根据组件的数据实时更新元素的样式

Vue 组件的双向绑定：通过 v-model 实现的，它能够将数据属性与视图元素进行双向关联，使得数据变化能够自动更新视图，同时也可以通过视图的操作修改数据。

事件监听：

使用 @ 或 v-on 指令绑定事件监听器：

  • @ 是 v-on 的缩写，可以直接在 HTML 模板中使用，例如 @click。
  • 通过 @ 或 v-on 指令，将事件类型和要执行的方法作为参数绑定在 HTML 元素上，当事件被触发时，绑定的方法会被调用。例如 @click="handleClick" 表示当点击事件发生时，调用组件中名为 handleClick 的方法。

常用内置指令

  1. v-bind（简写为 :）：用于动态地绑定数据到 HTML 元素的属性上。例如 :src="imageUrl" 表示将组件中的 imageUrl 数据绑定到 src 属性上。
  2. v-model：用于实现表单元素与组件数据的双向绑定。例如 <input v-model="message" /> 表示将输入框的值与组件中的 message 数据进行双向绑定。
  3. v-for：用于渲染列表数据，将一个数组的元素按照给定的模板进行重复渲染。例如 <li v-for="item in items" :key="item.id">{{ item.name }}</li> 表示将 items 数组中的每个元素渲染为一个 <li> 元素，并显示其 name 属性。
  4. v-if 和 v-show：用于根据条件动态地显示或隐藏元素。v-if 根据条件来完全销毁或重新创建元素，而 v-show 只是通过 CSS 来控制元素的显示与隐藏。例如 <div v-if="isVisible">内容</div> 表示只有当 isVisible 为真时，才会渲染显示该 <div> 元素。
  5. v-on（简写为 @）：用于绑定事件监听器，当特定的事件被触发时执行组件中的方法。例如 @click="handleClick" 表示当点击事件发生时，调用组件中名为 handleClick 的方法。

除了以上列举的指令外，Vue.js 还提供了其他一些指令，如 v-text、v-html、v-cloak 等，具体使用方法可以参考 Vue.js 的官方文档。

登录函数

loginFun() {
        this.$refs.userForm.validate((valid) => {
          if (valid) {
            this.loading = true
            userApi.doLogin({username: this.loginForm.name, password: this.loginForm.password}).then(res => {
              this.$store.commit('SET_TOKEN', res.data.token)
              this.$router.push({
                name: 'index'
              })
              this.loading = false
​
            }, error => {
              this.loading = false
              this.$message.error(error.message)
            })
          } else {
            this.$message.error("请提填写用户名和密码！")
          }
        })
      }
  1. $refs：$refs 是 Vue.js 实例提供的属性，用于访问组件中具有 ref 属性的 DOM 元素或子组件。在这个例子中，this.$refs.userForm 指向名为 userForm 的组件或 DOM 元素。
  2. 表单验证：代码中使用了 this.$refs.userForm.validate((valid) => { ... }) 来对表单进行验证。这里的 validate() 是通过 userForm 组件的引用（$refs.userForm）来调用的。验证的结果会通过回调函数 (valid) => { ... } 返回。
  3. Loading 状态：this.loading 是一个布尔类型的数据，用来控制页面或按钮的加载状态。this.loading = true 表示开始加载，this.loading = false 表示加载结束。在代码中，当点击登录按钮后，加载状态被设置为 true，当登录请求完成后，不论成功或失败，都会将加载状态设置为 false。
  4. API 请求：userApi.doLogin({ username: this.loginForm.name, password: this.loginForm.password }) 是一个登录请求的 API 调用。根据传入的用户名和密码作为参数，此 API 可能会返回登录成功后的令牌（token）。
  5. 状态管理：this.$store.commit('SET_TOKEN', res.data.token) 是通过 Vuex 进行状态管理的代码片段。其中 SET_TOKEN 是一个 mutation 的名称，用于修改 Vuex 的状态。通过执行这个操作，将登录成功后返回的令牌存储到全局的状态中。
  6. 路由跳转：this.$router.push({ name: 'index' }) 是 Vue Router 的 API，用于进行路由跳转。在这里，当登录成功后，会跳转到名为 'index' 的路由页面。
  7. 消息提示：this.$message.error(error.message) 用于显示错误信息，例如登录失败时会显示错误消息。

综上所述，该代码片段是一个登录函数，通过验证表单数据、发送登录请求、管理状态、跳转路由和提示消息等多个环节完成用户登录功能。

启动前端服务

验证登录

当我信心满满的输入用户名和密码，点击登录时，报错了。strict-origin-when-cross-origin

很显然是跨域问题。

打开fastapi官方文档，查找跨域解决办法。

后续

单独写一篇文章来介绍一下跨域问题

avatar
文章
阅读
粉丝