目录

Vue.js简介

登录界面实现 

    npm安装

Element

Axois

安装成功判断

ES6的模块导入

代码实现

登录效果展示

登录界面代码

template部分

 scpript部分

style部分 

---

Vue.js简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。   详情点击：Vue.js介绍

文章的内容是基于Vue.2x版本的框架实现的，有需要可以点击此处进行学习：学习Vue2.x​​​​​​

登录界面实现 

npm安装

Element

        为了更加快速便捷的实现页面，我们可以使用一个工具来搭建我们的界面，Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

打开Elenent，点击组件，然后在右侧点击安装，将命令复制。

         右击“vue.config.js” 点击在集成终端打开，确保是在文件的根目录打开终端，然后将命令粘贴在命令窗口，回车进行安装。

Axois

        随着网络技术的不断发展，Web 技术日新月异。在早期的互联网时代，用户访问网页时，一次向服务器请求一个完整的页面，于是，当从一个页面跳转到另一个页面时，浏览器窗口就会出现一段时间的“白屏”，影响用户体验。另外，即使页面中只有一小部分内容发生改变，也需要将整个页面一起更新，效率很低。后来，业内逐渐产生了 AJAX 技术，实现了页面的局部刷新，使 Web 应用的用户体验得到了大幅提升。随着Vue.js 等框架的出现，SPA(单页应用)逐渐普及，AJAX 更成为 Web 项目中不可缺少的重要组成部分。

        Axios 是一个专门用来处理 AJAX 相关工作的库。将Axios 和 Vue,js 结合后，即可方便地在 Web项目中使用AJAX技术。

与“element-ui”的安装一样 将以下的命令复制粘贴自终端，回车进行安装。

        npm install(或简写为 i) axios 

安装成功判断

        安装成功后，我们可以在这个文件中可以看到他们的版本号。

ES6的模块导入

        模块导入才能使用Element中的组件，以及使用axios。

菜单点击快速上手，找到引入引入Element，复制两条语句。

 打开“main.js”文件，粘贴上去。

axios的模块引入则是要在你需要制作的页码中通过引入 。

代码实现

在view文件夹中新建添加文件并在route文件夹中的index.js添加一条路由

登录效果展示

 

在Element 寻找自己需要的代码进行复制粘贴修改

登录界面代码

template部分

<template>
  <div class="login">
    <div class="box">
      <h1>mall-admin</h1>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="ruleForm.name"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            class="login-btn"
            type="primary"
            @click="submitForm('ruleForm')"
            @keydown.enter="submitForm('ruleForm')" 
            >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

 scpript部分

<script>
//引入
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {     
      ruleForm: {
        name: "",
        password: "",
      },
      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) => {
              console.log(res);
              localStorage.setItem("userinfo", JSON.stringify(res.data.user));
              if (res.data.code == 200) {
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                this.$router.push("/home");
              }
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err.response.data.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

style部分

<style scoped>
/* 加了scoped 样式只影响当前页面 */
.login {
  color: red;
  display: flex;
  justify-content: center;
}
.box {
  width: 350px;
  box-shadow: #ccc 0px 0px 8px;
  padding: 50px;
  margin-top: 150px;
}
h1 {
  text-align: center;
}
.login-btn {
  width: 350px;
}
</style>