Vue+SpringBoot项目学习（三）：登陆页面

2024-02-17 19:11:52

本来是做java的，没想到在前端上费的力气这么大，虽然感觉有点偏，但是又觉得前端知识还要有一定的掌握，所以还是要继续学习。做这个我也挺挣扎的，主要是对前端的逻辑代码看不懂，环境又让我玩坏了，又要重新折腾，做一天也没整出来了啥，不知道逻辑代码怎么写，所以这个就先把页面写出来吧，逻辑代码往后站。

安装Element

安装element也比较简单，我们可以直接去查它的官方文档，找到引入它的办法。打开官方文档，左侧边栏找到安装，可以看到有两种方式，一种是npm安装，一种是cdn引入，我这里就是用npm安装。
npm i element-ui -S
在idea中的终端执行这个命令即可，或者在项目目录下cmd命令行中执行也可以。如果提示警告修复，可以按照给出的命令进行修复一下。
安装完之后，需要引入，再次打开官方文档，左侧侧边栏点击快速上手，有几种方式，我这里就完整引入，在main.js中进行操作，添加四行代码：
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
在new Vue中添加render: h => h(App)

构建登陆页面

首先去除掉原始项目中的Vue图标，在asstes文件夹中删除logo.png图片，然后在App.vue中删除代码<img src="./assets/logo.png">，这样图片就删除了。
结构我就学习Evan-Nightly“白卷”的结构，在cpmponents文件夹下新建Login.vue，作为登陆页面，在cpmponents文件夹下新建文件夹home，在home中新建AppIndex.vue，作为首页组件。

Login.vue

接下来开发Login.vue组件，我使用的是Element官方文档->Form表单->自定义校验规则这个表单作为我们登陆的模板，把这段代码复制，然后粘贴到Login页面中，需要注意的是，最好不要直接全部复制，前面的html代码复制到<template>中，后面的js代码对应的复制到<script>中，另外我又学习大佬在<template>下一层放置了一层<div>，目的是可以对整个浏览器可见区域进行操作，如果放在<body>下会报警告。
他这个js代码我看不懂，屡不清关系，就暂时搁置了。
为了能访问这个页面还需要去配置路由，就按照例子中的格式去配置就可以，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

现在应该就可以访问了，访问的时候只需要在地址上加上login就可以了。但是我们还需要去修改一下Login页面，达到我们想要的效果，也需要添加一些css样式。关于这个一定要学会去看官方文档，去看一看它每一项是在做什么，Element前端标签里的各种属性是做什么的
还需要注意的是，Vue中v-bind可以用一个:来简单代表，v-on可以用'@'来简单代替。
Element官网上的那个在线编译还是挺好用的，可以来进行很多的测试。
这里我多记录多记录一下，记录学这么一遍，之后就不在仔细去看了，直接CV了。下面记录的这两个代码不同的地方就在于对输入框的检查，一个是“白卷”的写法，一个是Element的自带的写法。

第一种

<template>
  <div>
    <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login_form">
      <h3>系统登录</h3>

      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="Form.username" autocomplete="off" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="Form.password" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary">登陆</el-button>
        <el-button plain="true" type="primary">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      Form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          // required: true 可以在左上角显示*号，判断是否为必填项,如果设置为false，则不能触发后面的设置
          {required: true,message: '用户名不能为空', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    };
  }
}
</script>

<style scoped>
.login_form{
  /*这两个边框的设置都来自Element官网*/
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 350px;
  margin: 90px auto;
  padding: 30px;
}
</style>

效果图如下：

Vue+SpringBoot项目学习（三）：登陆页面

第二种

<template>
  <div>
    <el-form :model="Form" status-icon :rules="rules" ref="Form" label-width="50px" class="login_form">
      <h3>系统登录</h3>

      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="Form.username" autocomplete="off" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="Form.password" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item >
        <el-button type="primary">登陆</el-button>
        <el-button plain="true" type="primary">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    var checkUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    var checkPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      Form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          // required: true 可以在左上角显示*号，应该是判断为必填项
          { validator: checkUsername, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    };
  }
}
</script>

<style scoped>
.login_form{
  /*这两个边框的设置都来自Element官网*/
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 350px;
  margin: 90px auto;
  padding: 30px;
}
</style>

效果图如下：

Vue+SpringBoot项目学习（三）：登陆页面

这两种方式实现的效果差不多，第一种方式代码量少，但是不能写太多的逻辑，而且左上角会带着星号，第二种可以更加自如的去写逻辑。
:model绑定变量值，:rules绑定规则，status-icon可以用来显示验证是否成功的小图标，label-width="50px"不要太大，否则左边会空出一块。

第二种方法，要检查的el-form-item里面一定要有prop参数，否则后面的验证函数获取不到。ref的值可以用在methods方法中。

我这里先使用官网上的写法。

后面我发现的登陆注册总是不能居中，按钮的居中是居中在输入框的，为了能够正居中，所以删除<el-form-item>,转而使用<div>,

如下：

<div style="width: 100%;">
    <el-button type="primary">登陆</el-button>
    <el-button plain="true" type="primary">注册</el-button>
</div>

AppIndex.vue

这个页面作为我们一会儿登陆成功跳转的页面，里面就先只写一个HelloWorld就行。

如下：

<template>
  <div>
    HelloWorld!
  </div>
</template>

<script>
export default {
  name: 'AppIndex'
}
</script>

<style scoped>

</style>

这一篇就先写到这里，慢慢来。

系列文章在Vue+SpringBoot（图书管理）分类中

学习参考Evan-Nightly的白卷（White Jotter）
具体如下：
学习的作者名：Evan-Nightly
学习的项目名称：白卷（White Jotter）
学习的原文地址：https://gitee.com/Even-zh/White-Jotter#https://blog.csdn.net/Neuf_Soleil/article/details/88925013

https://learner.blog.csdn.net/article/details/88925013

上一篇：装饰器


下一篇：NumPy 基于已有数据创建数组