登录界面PoP.vue

<template>
  <div id="mydiv">
    <!-- 提醒栏 -->
    <br>
    <br>
    <br>
    <div class="imgDiv">
      <img
        src="../assets/tblogo.png"
        alt=""
        class="logo"
      >
    </div>
    <!-- 操作区域 -->
    <div class="operateDiv">
      <!-- 账号 -->
      <mt-field
        :placeholder="accountPlaceholder"
        v-model="uname"
        class="myinput"
      ></mt-field>
      <!-- 密码 -->
      <mt-field
        v-show="isUserAccount"
        placeholder="密码"
        type="password"
        v-model="upass"
        class="myinput"
        @keyup.enter.native="login"
      ></mt-field>
      <!-- 短信验证码 -->
      <mt-field
        v-show="!isUserAccount"
        placeholder="校验码"
        v-model="getCode"
        class="myinput"
      >
        <span class="getCode">获取短信验证码</span>
      </mt-field>
      <!-- 免费注册块 -->
      <div class="registerDiv">
        <span>免费注册</span>
        <span v-show="forgetPassShowroNot">忘记密码</span>
      </div>
      <!-- 登录和切换登录方式块 -->
      <div>
        <mt-button
          size="large"
          class="mybutton"
          @click.native="login"
        >登录</mt-button>
        <mt-button
          size="large"
          type="primary"
          class="mybutton"
          @click.native="changeLoginMethod"
        >{{defaultAccountText}}</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-badge",
  data() {
    return {
      // 默认的用户名
      uname: "",
      // 默认的用户密码
      upass: "",
      // 是否显示忘记密码
      forgetPassShowroNot: true,
      // 默认的用户名默认值
      accountPlaceholder: "账号",
      // 是否是用户账户登录，默认是 true
      isUserAccount: true,
      // 默认短信验证码的值
      getCode: "",
      // 切换登录方式按钮默认显示的文本
      defaultAccountText: "短信验证码登录",
      userlist: []
    };
  },
  methods: {
    // 登录显示模态框 调用 mint-ui 的 messagebox
    login() {
      this.$axios
        .get("/api/")
        .then(getres => {
          console.log(getres.data);

          this.userlist = getres.data;
          console.log(this.userlist.data);

          console.log("hello");
          const self = this;
          var res = this.userlist,
            len = res.length,
            userNameArr = [],
            passWordArr = [],
            ses = window.sessionStorage;
          // 拿到所有的username
          for (var i = 0; i < len; i++) {
            userNameArr.push(res[i].username);
            passWordArr.push(res[i].password);
          }
          console.log(userNameArr, passWordArr);
          if (userNameArr.indexOf(this.uname) === -1) {
            alert("账号不存在！");
          } else {
            var index = userNameArr.indexOf(this.uname);
            if (passWordArr[index] === this.upass) {
              // 把token放在sessionStorage中
              ses.setItem("data", res[index].token);
              this.$parent.$data.userTitle = res[index].usertitle;
              //验证成功进入首页
              console.log(this.$parent);

              alert("登录成功！");
              //跳转到首页
              this.$router.push("/home");
              // console.log(this.$router);
            } else {
              alert("密码错误！");
            }
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 切换登录方式
    changeLoginMethod() {
      if (this.isUserAccount) {
        this.defaultAccountText = "账户密码登录";
        this.accountPlaceholder = "请输入手机号码";
        this.forgetPassShowroNot = false;
      } else {
        this.defaultAccountText = "短信验证码登录";
        this.accountPlaceholder = "账号";
        this.forgetPassShowroNot = true;
      }
      this.isUserAccount = !this.isUserAccount;
    }
  }
};
</script>

<style lang="css">
.page-badge-container {
  padding: 0 10px;
}

/* 你需要登录才能继续仿问的布局样式 */
.tipslogin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  background: rgb(238, 238, 238);
  padding-left: 20px;
  padding-right: 20px;
}
/* 半闭样式 */
.closeSpan {
  color: rgb(153, 153, 153);
}
/* 图片 logo 根样式 */
.imgDiv {
  display: flex;
  justify-content: center;
}
/* 图片样式 */
.logo {
  width: 80px;
  height: 80px;
}
/* 上面的线隐藏 */
.mint-cell-wrapper {
  background-image: linear-gradient(180deg, #fff, #fff 0%, transparent 0%);
}
/* 输入框底边框样式 */
.mint-cell-wrapper {
  border: 1px solid #495949;
}

/* 修改按钮按钮下的默认颜色 */
.mint-button::after {
  background-color: transparent;
}
/* 操作区域的样式*/
.operateDiv {
  padding-left: 20px;
  padding-right: 20px;
}
/* 输入框边距 */
.myinput {
  margin-top: 30px;
}
/* 获取短信验证码字体颜色 */
.getCode {
  color: #ff5000;
  font-size: 17px;
  border-left: 1px solid #b5b5b5;
  padding-left: 7px;
}
/* 免费注册根样式 */
.registerDiv {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 免费注册字体样式*/
.registerDiv span {
  color: #555;
}
/* 登录短信验证按钮边距 */
.mybutton {
  margin-top: 20px;
}
/* 修改默认 butoon 的样式 达到和淘宝登录一样 */
.mint-button--default {
  background: linear-gradient(to right, #2dbcfe, 5%, #1e2822);
  border-radius: 25px;
  color: #fff !important;
  height: 48px;
}
/* 同上 */
.mint-button--primary {
  border-radius: 25px;
  height: 48px;
  background: linear-gradient(to right, #2dbcfe, 5%, #6e7b55);
  border: 1px solid #ff5000;
  color: #ff5000;
}
/* 修改默认弹框的样式，达到基本和淘宝的效果一样 */
.mint-msgbox {
  border-radius: 8px;
  width: 70%;
}
/* 弹出框内容样式 */
.mint-msgbox-content {
  min-height: 50px;
  font-size: 18px;
}
/* 弹出内容居中 */
.mint-msgbox-message {
  line-height: 50px;
}
/* 弹出框确定按钮样式 */
.mint-msgbox-btns {
  height: 60px;
}
/* 弹出框确定按钮字体 */
.mint-msgbox-confirm {
  color: #f40;
}
</style>

路由index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import login from '../components/PoP.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta:{
      needLogin: true
     }
  },
  {
    path: '/',
    name: 'c',
    component: login,
    meta:{
      needLogin: false
     }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})
//路由守卫
router.beforeEach((to, from, next)=>{
  //路由中设置的needLogin字段就在to当中 
  if(window.sessionStorage.data){
   console.log(window.sessionStorage);
   // console.log(to.path) //每次跳转的路径
   if(to.path === '/'){
    //登录状态下 访问login.vue页面 会跳到index.vue
    next({path: '/home'});
   }else{
    next();
   }
  }else{
   // 如果没有session ,访问任何页面。都会进入到 登录页
   if (to.path === '/') { // 如果是登录页面的话，直接next() -->解决注销后的循环执行bug
    next();
   } else { // 否则 跳转到登录页面
    next({ path: '/' });
   }
  }
})
export default router

创建返回用户信息的json服务eserver.js

var mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost:10086/mydb', { useNewUrlParser: true, useUnifiedTopology: true });
// 绑定连接成功触发的一次性事件
mongoose.connection.once('open', () => {
    console.log('connceted to database.')
});
// 设置该数据库field类型
var sc = mongoose.Schema({
    id:String,usertitle:String,
    username:String,password:String,
    token:String
})
// 获得tests集合的模型
//两个参数Test为对应集合去掉s后首字母大写
//var test = mongoose.model("Test", sc);
//三个参数指定该模型为test集合
var test = mongoose.model("login", sc, "login");
// tests集合对象查询
test.find({}, function (err, doc) {
    if (err) {
        console.log(err + "");

    } else {
        console.log(doc + "");
        var express = require('express');
        var app = express();
        // 设置public下的资源可以直接访问
        // get方式访问/路径，返回'Hello World!'
        app.get('/', function (req, res) {
            res.send(doc);
        });
        app.post("/post/", (req, res) => {
            res.send("postman")
        })
        app.listen(3000, function () {
            console.log('Example app listening on port 3000!');
        });

    }
})

解决vue跨域问题
在项目根目录与src同级新建vue.config.js文件

module.exports = {
    // webpack-dev-server 相关配置
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/
                }
            }
        }
    },
}

注意

this.$axios.get("/api/abc")

等于
访问

this.$axios.get("http:localhost:8080/api/abc")

配置了跨域规则后

this.$axios.get("http://localhost:3000/abc")