登錄界面PoP.vue

<template>
  <div id="mydiv">
    <!-- 提醒欄 -->
    <br>
    <br>
    <br>
    <div class="imgDiv">
      <img
        src="../assets/tblogo.png"
        alt=""
        class="logo"
      >
    </div>
    <!-- 操作區(qū)域 -->
    <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: {
    // 登錄顯示模態(tài)框 調(diào)用 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("登錄成功！");
              //跳轉(zhuǎn)到首頁
              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;
}

/* 你需要登錄才能繼續(xù)仿問的布局樣式 */
.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;
}
/* 操作區(qū)域的樣式*/
.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%;
}
/* 彈出框內(nèi)容樣式 */
.mint-msgbox-content {
  min-height: 50px;
  font-size: 18px;
}
/* 彈出內(nèi)容居中 */
.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
})
//路由守衛(wèi)
router.beforeEach((to, from, next)=>{
  //路由中設置的needLogin字段就在to當中 
  if(window.sessionStorage.data){
   console.log(window.sessionStorage);
   // console.log(to.path) //每次跳轉(zhuǎn)的路徑
   if(to.path === '/'){
    //登錄狀態(tài)下 訪問login.vue頁面 會跳到index.vue
    next({path: '/home'});
   }else{
    next();
   }
  }else{
   // 如果沒有session ,訪問任何頁面。都會進入到 登錄頁
   if (to.path === '/') { // 如果是登錄頁面的話，直接next() -->解決注銷后的循環(huán)執(zhí)行bug
    next();
   } else { // 否則 跳轉(zhuǎn)到登錄頁面
    next({ path: '/' });
   }
  }
})
export default router

創(chuàng)建返回用戶信息的json服務eserver.js

var mongoose = require('mongoose');
// 連接數(shù)據(jù)庫
mongoose.connect('mongodb://localhost:10086/mydb', { useNewUrlParser: true, useUnifiedTopology: true });
// 綁定連接成功觸發(fā)的一次性事件
mongoose.connection.once('open', () => {
    console.log('connceted to database.')
});
// 設置該數(shù)據(jù)庫field類型
var sc = mongoose.Schema({
    id:String,usertitle:String,
    username:String,password:String,
    token:String
})
// 獲得tests集合的模型
//兩個參數(shù)Test為對應集合去掉s后首字母大寫
//var test = mongoose.model("Test", sc);
//三個參數(shù)指定該模型為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轉(zhuǎn)為/
                }
            }
        }
    },
}

注意

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

等于
訪問

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

配置了跨域規(guī)則后

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