啊胡

V1

2022/09/16阅读:11主题:自定义主题1

04 接口测试平台 前端登录页面编写

别人写的平台再垃圾,也是用来淘汰你的。

代码更新地址:https://github.com/ahu965/api-automator.git

Python环境没有的,请自行安装,本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的,请自行安装,本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

上节已经创建了一个默认的vue3项目,今天通过完成一个登录页面的简单样式来介绍前端页面的编写流程。

目录结构介绍

使用WebStorm打开项目目录,可以看到已经默认有了项目框架,这里针对后面用到比较多的目录和文件进行介绍:

  • public 主要用来存放比较大的资源,比如说大图片等
  • src 是编写代码的主要目录
  • src/assets 同样是存放资源的地方,一般用来存放一些娇小的资源,比如css文件等
  • src/components 存放组件的地方,一般为了代码的复用,会将公共代码抽取出来作为组件,然后就可以在不同的页面进行引用了
  • src/router 配置路由地址的文件
  • src/stores 状态管理文件
  • src/views 存放页面的地方
  • src/App.vue 入口页面,所有的组件都是通过路由挂载到App.vue上
  • src/main.js 全局配置的地方,也是一个入口文件
  • package.json 依赖管理文件,还有些项目配置

登录页面编写

views目录中创建LoginView.vue文件,创建完成后可以看到代码编写主要分为3个区域:

  • template 用来编写html代码,各类标签
  • scritpt 用来编写js代码,setup是vue3的语法糖,可以简化很多模版代码
  • style 用来编写css文件,scoped用来表示这个style块内的样式是全局的还是局部的,后面用到了给大家看具体的例子。

编写登录页面主要就是在这3个区域完成。为了能够访问到新建的登录页面,还需要设置路由到这个页面,打开src/router/index.js文件,配置路径/login路由到LoginView

引入Ant Design

如果要自己一个个组件写是非常耗时的,而且如果没有一定的审美,页面效果可能也不好,所以需要引入一些第三方写好的UI组件。

Ant Design Vue官网 https://www.antdv.com/components/overview

打开官网,点击「Components」就可以看到第三方提供的组件了。

接下来,我们就将Ant Desgin引入到我们的项目中。 首先,在项目目录下打开终端,使用命令npm install ant-design-vue --save安装依赖。--save参数是将依赖信息同时保存到package.json文件中,方便其他人按照package.json文件安装项目所需要的依赖,跟后端项目的requirements.txt文件功能类似。

依赖安装后,打开main.js将组件加载到项目中,为了后续使用这里选择全量加载。

加载到项目中之后,就可以在页面上使用组件啦。在LoginView.vue文件编写下面的代码:

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >

    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: '请输入用户名!' }]"
    >

      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >

      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive } from "vue";

const formState = reactive({
  username"",
  password"",
});
</script>

再次启动项目,在浏览器上输入网址http://localhost:5173/login就可以看到登录页面啦。

登录页面样式美化

为什么登录页,左侧会多一块VUE默认的内容呢,这里就需要看下App.vue,即入口文件是怎么加载其他页面的。可以看到App.vue首先是有个

标签,然后才是用来挂载页面的 标签。登录页上左侧的内容其实就是
标签的内容。

为保证页面内容和样式的干净,可以现将下列内容初始化:

  • 将App.vue中除了 之外的标签全部去掉

  • 在App.vue的style模块添加高度,用来撑满整个屏幕,方便其他页面的样式调整。

<style>
#app{
  height100%;
}
</style>
  • 将src/main.js中的import "./assets/main.css";默认样式引用去掉

这里使用了sass编写样式代码,因此还需要使用命令npm install node-sass sass-loader --save-dev安装sass模块。 安装成功后在使用的style模块,新增lang="scss"就可以使用sass语法了。

调整后的代码如下:

<template>
  <div class="login-container">
    <a-form
      class="login-form"
      :model="formState"
      name="basic"
      autocomplete="off"
    >

      <div class="login-wrapper">
        <a-form-item>
          <h3 class="title">接口测试平台</h3>
        </a-form-item>
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入用户名!' }]"
        >

          <a-input
            placeholder="请输入用户名"
            v-model:value="formState.username"
          />

        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >

          <a-input-password
            placeholder="请输入密码"
            v-model:value="formState.password"
          />

        </a-form-item>

        <a-form-item>
          <a-button type="primary" class="btn-login">登录</a-button>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const formState = reactive({
  username"",
  password"",
});
</script>

<style lang="scss">
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;

  .login-form {
    width: 520px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;

    .login-wrapper {
      padding: 25px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }

    .title {
      color: #eee;
      text-align: center;
      font-size: 32px;
    }

    #basic_username {
      height: 45px;
    }

    .ant-input-password {
      height: 45px;
    }

    .btn-login {
      width: 100%;
      height: 45px;
      font-size: 18px;
    }
  }
}
</style>

页面效果如下,大家可根据自己的喜好更改颜色或者背景图:

分类:

后端

标签:

后端

作者介绍

啊胡
V1