首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >测试平台开发(二) 高逼格登录页面

测试平台开发(二) 高逼格登录页面

作者头像
dongfanger
发布2020-11-04 09:51:09
1.1K0
发布2020-11-04 09:51:09
举报
文章被收录于专栏:dongfangerdongfanger

怎么样?哎哟,不错哦。本文就带大家一起用 Vue + Element-UI 把这个不错的登录页面开发出来。

项目结构分析

在使用 Vue-CLI 创建 2.x 的脚手架项目后,会生成如下目录文件:

针对这个目录文件我写了一个脑图进行说明:

(文字稍微有点多,赶时间的同学看红色部分就可以了

红色最多的是 src 文件夹,写的代码大部分都是放在这个文件夹下面。

重要提示,一下就刷到这里,只看文字不看图的同学,还是把图多看几秒哦,看不清楚,可以放大看,哈哈哈。

程序执行流程

按照我自己对 Vue 的理解,画了一张几个主要文件之间程序调用执行的流程图:

(水平有限,有错误请指正)

图中简单描绘了 index.html、main.js、App.vue、store\index.js、router\index.js、views\login\index.vue 这几个文件之间的调用逻辑。暂时没有用到 components,因为登录界面不涉及到功能组件,只是个页面,代码放在 views 文件夹下即可。

哈哈我又来提醒了,只看文字不看图的同学,多看几眼,看不清楚,请放大!

源码

本文接下来会对这些文件逐个进行代码解析,为了不让文章变得冗长,只贴部分代码,完整代码请到 GitHub 获取:

https://github.com/dongfanger/sprint-frontend

如果想把这个项目复原出来,只看我写的文章是不够的,git clone顺手点个 star,学习效果更好哦。

index.html

index.html 是项目中唯一的 html 文件

因为 Vue 实现的是单页面应用。单页面应用,简单理解就是只有一个页面,其他页面都是通过组件的形式挂载到这个页面上的,这样页面切换就会更快速,如桌面应用一般丝滑顺畅。

其他页面的挂载点其实就是一个 div,其他页面都在放在这个 div 里面的:

    <div id="app"></div>

views\login\index.vue

本项目是基于 Element-UI 的,需要使用 npm 安装一下

npm i element-ui -S

.vue 文件是 Vue 框架的代码文件,分为3个部分

<template>
    html 模板
</template>

<script>
	javascript 脚本
</script>

<style lang="scss" scoped>
	css 样式
</style>

为了文章简洁,本文不展示 css 样式的代码。

template html 模板代码如下,实现了用户名、密码、登录等输入框和按钮:

<template>
  <div class="loginbody" :style="`background-image: url(${appInfo.backgroundImageUrl})`">
    <div class="login-box">
      <div class="login-title">
        <img class="login-logo" :src="appInfo.loginLogoUrl" alt="logo" />
        <p>{{ appInfo.title }}</p>
      </div>

      <div class="login-info">
        <el-form ref="form" class="form-box" :model="form" :rules="formRules">
          <el-form-item :label="'用户名'" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" @keyup.enter.native="login" ref="username-input">
            </el-input>
          </el-form-item>
          <el-form-item :label="'密码'" prop="password">
            <el-input
                    v-model="form.password"
                    placeholder="请输入密码"
                    type="password"
                    show-password
                    @keyup.enter.native="login"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <el-checkbox
                      v-model="form.rememberMe"
                      :value="true"
                      :label="'记住密码'"
                      name="type"
                      class="remember-checkbox"
              ></el-checkbox>
              <span class="self-right forgetPwd" @click="forgetPwd">忘记密码?</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" class="login-btn" :loading="isLoging">
              {{ "登录" }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

其中页面背景图、logo 图、页面标题是通过 Vuex 来存取的。

Vuex 是 Vue 的状态管理工具。Vue 组件之间数据传递一般是通过 export 和 import 的方式,但是对于全局数据,这种方式很难管理和维护。Vuex 作为中间媒介,帮助组件之间更好的传递数据。

javascript 脚本代码如下,给 template 模板填充数据,定义元素行为:

<script>
  import { mapGetters } from "vuex";
  export default {
    data() {
      return {
        form: {
          username: "",
          password: "",
          rememberMe: true
        },
        formRules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" },
            {
              trigger: "blur",
            },
          ],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        },
        isLoging: false,
      };
    },
    created() {
    },
    mounted() {
      let autofocusElement = this.$refs["username-input"];
      if (autofocusElement) {
        autofocusElement.focus();
      }
    },
    methods: {
      login() {
      },
      forgetPwd() {
        this.$alert("请联系管理员!", "提示", {
          confirmButtonText: "确定",
          callback: action => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      },
    },
    computed: {
      ...mapGetters(["appInfo"]),
    },
  };
</script>

其中最后几行的 appInfo 就是定义的全局变量,使用 Vuex 来传递数据。

store\index.js

appInfo 的实现代码放在 store\index.js 文件中:

import Vue from 'vue'
import Vuex from 'vuex'

const navBarLogoUrl = require("@/assets/image/logo.png");
const loginLogoUrl = require("@/assets/image/logo@2x.png");
const backgroundImageUrl = require("@/assets/image/login-bg.png");
const favicon = require("@/assets/image/favicon.png");

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    appInfo: null,
  },
  getters: {
    appInfo: state => {
      if (state.appInfo) {
        return state.appInfo;
      }
      let localAppInfo = localStorage.getItem("AppInfo");
      if (localAppInfo) {
        return JSON.parse(localAppInfo);
      }
      return {
        dsp: "这是公众号“测试老树”开发的测试平台。",
        navBarLogoUrl,
        loginLogoUrl,
        backgroundImageUrl,
        faviconUrl: favicon,
        title: "测试平台",
      };
    },
  },
  mutations: {
    commitAppInfo(state, appInfo) {
      state.appInfo = appInfo;
    },
  },
  actions: {
    setAppInfo({ commit }, appInfo) {
      let info = {
        dsp: appInfo.dsp,
        title: appInfo.title || "测试平台",
        navBarLogoUrl: appInfo.navBarLogoUrl || navBarLogoUrl,
        loginLogoUrl: appInfo.loginLogoUrl || loginLogoUrl,
        backgroundImageUrl: appInfo.backgroundImageUrl || backgroundImageUrl,
        faviconUrl: appInfo.faviconUrl || favicon,
      };

      commit("commitAppInfo", info);
      localStorage.setItem("AppInfo", JSON.stringify(info));
      let { faviconUrl, title } = info;

      let iconElement = document.querySelector("#t-icon");
      iconElement.href = faviconUrl;

      document.title = title;
    },
  },
  modules: {},
});

App.vue

App.vue 是根组件,适合做一些初始化工作。

从“程序执行流程”小节的逻辑图中可以看到,数据存储的操作就是在 App.vue 调用的,代码如下:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import { mapActions } from "vuex";
  export default {
    name: "App",
    data() {
      return {};
    },
    created() {
    },
    methods: {
      ...mapActions(["setAppInfo"]),
    },
  };
</script>

methods 调用了 setAppInfo 方法,给 appInfo 赋值。

router\index.js

到这里,登录页面的代码就已经撸完了。是吗?是的!

但是还无法访问,因为还没有給它配置路由,浏览器还不知道怎么才能跳转到这个登录页面。

路由就是访问路径,让浏览器知道输入一个 url 该把哪个页面展示给你看。在以前,页面跳转路由都是放到后端来做的,前端请求后端,后端把渲染好的 html 返回给前端。现在时代不同了,前端直接控制了路由,前后端传递的数据变少了,访问体验也更佳。比如以前地址栏 URL 跳转可能会白屏,现在不会了。

路由配置代码是放在 router\index.js 文件中的,默认 / 展示 Home 页面,访问 /login 展示 login 页面:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import login from "../views/login"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requireAuth: true,
    },
  },
  {
    path: "/login",
    meta: {
      title: "测试平台登录",
    },
    name: "login",
    component: login,
  },
]

const router = new VueRouter({
  routes
})

但是首页不能直接就给别人看呀,得先登录!所以需要编写一个拦截器,必须登录后,才可以访问首页,否则跳转到登录页面:

router.beforeEach((to, from, next) => {
  if (to.matched.some(auth => auth.meta.requireAuth)) {
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      next({
        path: "/login",
      });
    }
  } else {
    next();
  }
});

main.js

main.js 是程序执行入口,以上所有代码都需要在 main.js 中声明一下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Element from "element-ui"
import "./assets/style/global.scss";

Vue.config.productionTip = false

Vue.use(Element)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js

vue.config.js 是 Vue 项目配置文件。比如 index.html 中,页面 title 是通过 <title><%= htmlWebpackPlugin.options.title %></title> 来定义的,可以在配置文件中添加自定义,为 “sprint”:

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  publicPath: process.env.NODE_ENV === "development" ? "./" : "/frontend/",
  chainWebpack: config => {
    config.plugin("html").tap(args => {
      args[0].title = "sprint";
      return args;
    });
  },
};

简要回顾

本文首先展示了登录页面的效果,接着介绍了 Vue-CLI 初始化之后的项目结构,并对程序执行逻辑进行了分析,梳理出来了主要几个文件的调用流程,最后分别对各文件的代码进行了分析。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-11-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目结构分析
  • 程序执行流程
  • 源码
  • index.html
  • views\login\index.vue
  • store\index.js
  • App.vue
  • router\index.js
  • main.js
  • vue.config.js
  • 简要回顾
相关产品与服务
数据保险箱
数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档