【信贷后台管理之登录（一）】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录结构

一、项目搭建

找到存放项目的文件夹。打开终端，vue create debtproject,自定义安装

二、登录页面

路由组件都放在views文件夹，登录组件LoginView.vue
登录组件里用两个div容器，登录表单用element-ui，密码要求不小于6位数，登录成功后跳转至/home页面。
【想要实现运行成功后，页面主动跳出，可在package.json里添加–open,如下】

【想要运行成功后的地址不带#号，路由器工作模式选择history模式，在router/index.js】

需要下载element-ui,在该项目控制台下npm install element-ui -S
【遇到certificate has expired证书过期问题】

【解决方法】
npm cache clean --force
npm config set strict-ssl false
npm install
然后再次安装element-ui即可

1.引入Element-ui

在main.js完整引入,记得use

2.LoginView.vue组件

<template>
  <div class="login-box">
    <div class="login-input-box">
      <h1>信贷后台管理系统</h1>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script >
export default {
  data(){
    // 密码校验，长度不小于8位且不大于20位字符，必须包含大写字母，小写字母，数字和特殊符号
    // var ISPWD =/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/;
    // // 密码校验
    // const validatePass = (rule, value, callback) =>{
    //   if (!ISPWD.test(this.registerForm.password)) {
    //     callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
    //   } else {
    //     callback();
    //   }
    // }

    // const validatePass = (rule,value,callback){
    //   if(this.ruleForm.pass === '') {
    //     callback(new Error('请输入密码'))
    //   }else if(this.ruleForm.pass.length < 6){
    //     callback(new Error('密码长度不能小于6'))
    //   }else{
    //     callback();
    //   }
    // },
    return{
      ruleForm: {
        username:'',
        pass:'',
      },
      rules:{
        username: [
          {required:true,trigger:'blur',message:'请输入用户名'}
        ],
        pass:[
          {required:true,trigger:'blur',validator:this.validatePass},
        ],
      },
    };
  },

  methods:{
    // 校验规则
    validatePass(rule,value,callback){
      if (value === ""){
        callback(new Error("请输入密码"));
      }else if (value.length < 6){
        callback(new Error("密码不能小于6位数"));
      }else{
        callback();
      }

    },
    submitForm(){
      // 验证规则
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.login(this.ruleForm);
        }else{
          return false;
        }
      });
    },
    login(){
      this.$router.replace("/home");
    }
  }
}

</script>

<style lagn="scss" scoped>
.login-box{
  display: flex;   /* div可成为flex容器*/
  justify-content: center;  /*上面贴着父元素，居于中间*/
  align-items: center;  /* 左侧贴着父元素，把项目位置调整到中间 */
  height: 100vh; /* 元素撑开和屏幕一致*/
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
}
.login-input-box{
  width: 650px;
  height: 320px;
  background-color: #fff;
  text-align: center;
  padding: 40px 40px 12px 12px;
}
.el-button{
  width: 600px;
}
.el-input{
  width: 600px;
  margin-bottom: 16px;
}
::v-deep .el-input_inner{
  background: #e5e5e5;
}
</style>

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

涉及样式学习参考：https://blog.csdn.net/Zoey_J/article/details/89445844
涉及el-form学习参考：
https://blog.csdn.net/m0_46123285/article/details/136709541
https://blog.csdn.net/xuanyuanjiaqi/article/details/132314536
路由跳转学习参考：https://blog.csdn.net/weixin_44038287/article/details/126136566
登录功能优化参考：https://blog.csdn.net/ccyolo/article/details/126967074

3.router文件的index.js引入组件

gitee仓库地址

https://gitee.com/sunmyi/debt-project.git