Vue+ElementUI+express+axios+Mongodb 实现简单的登录验证

一.   开发工具：Webstrom，电脑需要安装有node，vue-cli，mongo数据库

二.   在本地创建一个文件夹，使用Vue-CLI初始化项目，命名为vuelogin，初始化完成后，分别输入命令cd vuelogin，npm run dev，查看是否正常运行(一般都可以)

    2.1  用Webstrom打开vuelogin， 在项目下面的Terminal，输入以下安装命令

npm install element-ui --save
npm install axios --save

  2.2   src > main.js 代码：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入axios
import axios from  'axios'
// 挂载到vue的原型上
Vue.prototype.axios = axios;

Vue.config.productionTip = false;

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

  2.3   src > components 文件夹下新建 login.vue，代码如下：

<template>
  <div class="login">
    <!-- 登录表单 -->
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
      <h1><i class="el-icon-switch-button" style="margin-right: 10px;margin-left: 30px"></i>VueX登录表单</h1>

      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保留this
          let _this = this;
          // 收集用户名和密码，发送给后端
          this.axios.post("/api/checklogin", {
              username: _this.loginForm.username,
              password: _this.loginForm.password
          }).then(res => {
            // console.log("接收后端响应登录请求的数据: ", res.data);
            if (res.data) {
              this.$message({
                message: '恭喜你，登录成功!',
                type: 'success'
              });
            } else {
              this.$message.error('用户名或密码错误!');
            }
          }).catch(error => {
            console.log(error);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html, body {
    margin: 0;
    padding: 0;
  }
  html, body, #app, .login {
    height: 100%;
  }
  .login {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .el-form {
    width: 400px;
    height: 250px;
    padding: 10px 40px 30px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  h1 {
    text-align: center;
  }
</style>

    2.4   src > router 文件夹下 index.js 代码

import Vue from 'vue'
import Router from 'vue-router'

//引入组件
import login from '@/components/login'

//注册路由
Vue.use(Router);

//导出路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    }
  ]
})

    2.5   App.vue 代码

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

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

<style>

</style>

    2.6   跨域，使用代理。config > index.js, 找到 proxyTable，修改为以下代码。至此，前台基本实现。

proxyTable: {
      '/api': {
        target: 'http://localhost:888/',  //目标接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/api': ''   //重写接口
        }
      }
    }

三、在本地打开mongo数据库服务，找到其中一个数据库并创建一个拥有 {_id: Number, username: String, password: String, realname: String} 四个字段的表。命名为login。并在其中插入两条数据，我这里插入的是以下两条数据

{ "_id" : 1, "username" : "admin", "password" : "admin123", "realname" : "jhy" }
{ "_id" : 2, "username" : "jhyNo1", "password" : "jhy2021gogogo", "realname" : "JHY" }

四、使用Webstrom上的express项目模板创建一个express项目

    4.1   打开express项目后，在Terminal 安装mongoose包

npm install mongoose --save

    4.2   在app.js 中添加监听端口

// 监听端口
app.listen(888, ()=> {
  console.log("服务器启动成功");
});

    4.3   routes 下创建 mongo.js，来连接数据库，代码如下：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/jhy');    //jhy替换为你的数据库名

mongoose.connection.once('open', function () {
    console.log("数据库已连接");
});


let schema = new mongoose.Schema({
    _id: Number,
    username: String,
    password: String,
    realname: String
}, {versionKey: false});

let IModel = mongoose.model('login', schema);    //login为表名   

module.exports = {mongoose, IModel};

    4.4   routes > index.js 中编写后端接口，代码如下

var express = require('express');
var router = express.Router();
var connection = require('./mongo');

//接收请求
router.post('/checklogin', (req, res) => {
  //接收用户名和密码
  let {account, password} = req.body;
  // console.log(username, password);
  //去数据库查找是否存在该账号密码的用户
  connection.IModel.findOne({"account": account, "password": password}, (err, data)=> {
    if (!err){
      res.send(data);
    } else {
      throw err;
    }
  });
});

module.exports = router;

   五、测试查看效果，要保证前后端服务器，mongo服务都开启

    5.1   成功效果

        5.1.1   用户名 admin，密码 admin123，然后点击登录

          5.1.2   登录成功

    5.2   失败效果

         5.2.1   用户名 admin，密码 admin456，然后点击登录

         5.2.2   登录失败