vue.js实现登录页面

一、登录界面路由配置

1.在view目录下创建LoginView.vue组件，如图所示：

二、第二步

2.在router的index.js文件中配置路由，如图所示：

第一步先引入

1.在index.js建立Login页面

2.在建立好的LoginView.vue 组件中引入axios

在引入之前要在package.json里面安装好插件，点开vue.coding右键点在集成终端打开然后输入那npm i axios

配置好之后点开package.json就能看到这些代码

之后可以开始在LoginView.vue中写入

export default {

    name: "LoginView",

    data() {

        return {

                }

            }

      }

这里写入代码，例如

tip:注意：1.是export，不是exports。

        2.是routes，是没有r的，不是routers!!

        3.路由名称可以自定义，组件名称看引入时给了什么名字

三、开始设计登录的页面

这些代码的标签样式可以去element挑选直接复制粘贴修改一下就差不多了

<template>

  <div class="login">

    <div class="box">

      <h1>mall-admin</h1>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

        <el-form-item prop="name">

          <el-input placeholder="请输入用户名" v-model="ruleForm.name" prefix-icon="el-icon-user-solid"></el-input>

        </el-form-item>

        <el-form-item prop="password">

          <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>

        </el-form-item>

        <el-form-item>

          <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>

        </el-form-item>

      </el-form>

    </div>

  </div>

</template>

四、效果图如下

五、登录页的代码如下

<template>

  <div class="login">

    <div class="box">

      <h1>mall-admin</h1>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

        <el-form-item prop="name">

          <el-input placeholder="请输入用户名" v-model="ruleForm.name" prefix-icon="el-icon-user-solid"></el-input>

        </el-form-item>

        <el-form-item prop="password">

          <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>

        </el-form-item>

        <el-form-item>

          <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>

        </el-form-item>

      </el-form>

    </div>

  </div>

</template>

<script>

import axios from 'axios';

export default {

  name: "LoginView",

  data() {

    return {

      ruleForm: {

        name: "",

        pasword: "",

      },

      rules: {

        name: [

          { required: true, message: "请输入用户名", trigger: "blur" },

        ],

        password: [

          { required: true, message: "请输入密码", trigger: "blur" },

        ],

      },

    };

  },

  methods: {

    submitForm(formName) {

      //表单校验

      this.$refs[formName].validate((valid) => {

        if (valid) {

          axios.post("http://106.52.94.26:3001/user/login", {

            //传什么参数

            username: this.ruleForm.name,

            password: this.ruleForm.password

          })

            //成功回调参数

            .then(res => {

              //判断是否成功，并跳转到首页

              if (res.data.msg == "登录成功") {

                this.$message({

                  showClose: false,

                  message: "登录成功",

                  type: 'success'

                })

                this.$router.push("/")

              }

            })

            .catch(err => {

              if (err.response.data.msg == "用户不存在") {

                this.$message({

                  showClose: true,

                  message: err.response.data.msg,

                  type: 'error'

                });

              } else {

                this.$message({

                  showClose: true,

                  message: err.response.data.msg,

                  type: 'error'

                });

              }

            });

 

        } else {

          alert('error submit!!');

          return false;

        }

      });

    },

  },

};

</script>

<style scoped>

.login {

  display: flex;

  justify-content: center;

}

.box {

  margin-top: 100px;

  box-shadow: #ccc 0px 0px 8px;

  width: 400px;

  padding: 50px;

}

.box h1 {

  text-align: center;

  color: #409EFF;

}

.login-btn {

  width: 100%;

}

</style>