Mysql+Nodejs+Koa2+Vue+Quasar零起点教

【Mysql+Nodejs+Koa2+Vue+Quasar零起点教程11：应用界面开发】中涉及的index.vue文件源代码

<template>

<div class="dcenter">

  <q-card class="my-card bg-grey-1" style="width:350px">

    <q-card-section style="background:rgba(190, 190, 190, 0.8);">

      <div class="row items-center no-wrap">

        <div class="col">

          <div class="row no-wrap items-center">

            <q-img style="width: 40px; height: 45px" src="~assets/logistics_logo.png" />&nbsp;&nbsp;

            <div>

              <div class="text-h6">请登录</div>

              <div class="text-subtitle2">学生管理信息系统</div>

            </div>

          </div>

        </div>

        <div class="col-auto">

          <q-btn color="grey-7" round flat icon="more_vert">

            <q-menu cover auto-close>

              <q-list>

                <q-item clickable>

                  <q-item-section>跳转到...</q-item-section>

                </q-item>

                <q-item clickable>

                  <q-item-section>跳转到...</q-item-section>

                </q-item>

              </q-list>

            </q-menu>

          </q-btn>

        </div>

      </div>

    </q-card-section>

    <q-card-section>

      <q-input bottom-slots v-model="username" label="登录用户名" :dense="isdense" @focus="selectalltext(1)" @keyup.enter="move_to(2)" ref="in_1">

        <template v-slot:prepend>

          <q-icon name="account_circle" />

        </template>

        <template v-slot:append>

          <q-icon v-if="username !== ''" name="cancel" @click="username = ''" class="cursor-pointer" />

        </template>

      </q-input>

      <q-input bottom-slots v-model="userpwd" label="登录密码" :dense="isdense" @focus="selectalltext(2)" @keyup.enter="move_to(3)" ref="in_2">

        <template v-slot:prepend>

          <q-icon name="vpn_key" />

        </template>

        <template v-slot:append>

          <q-icon v-if="userpwd !== ''" name="cancel" @click="userpwd = ''" class="cursor-pointer" />

        </template>

      </q-input>

      <div class="row justify-around" style="width:100%;">

        <div>

          <q-btn color="primary" label="登录" icon="send" @click="loginsubmit" ref="in_3" />

        </div>

        <div>

          <q-btn color="negative" label="清除" icon="clear" @click="clearall" />

        </div>

      </div>

    </q-card-section>

    <q-separator />

    <q-card-actions style="background:rgba(190, 190, 190, 0.8);">

      <div class="row justify-center" style="width:100%;">

        <p class="mysublabel">©2002-2021 nankaistar.com <br>苏ICP备10029922号-2</p>

      </div>

    </q-card-actions>

  </q-card>

  <q-dialog v-model="error_win">

    <q-card>

      <q-card-section>

        <div class="text-h6">登录失败</div>

      </q-card-section>

      <q-card-section class="q-pt-none" style="color:red;">

        错误原因：{{loginresult}}

      </q-card-section>

      <q-card-actions align="right">

        <q-btn flat label="关闭" color="primary" v-close-popup />

      </q-card-actions>

    </q-card>

  </q-dialog>

</div>

</template>

<script>

import {

  logincheck

} from "../service/interface1";

import {

  SessionStorage

} from "quasar";

export default {

  data() {

    return {

      username: 'eddy',

      userpwd: '123456',

      isdense: false,

      error_win: false,

      loginresult: ''

    }

  },

  methods: {

    selectalltext(tindex) {

      //得到焦点自动选中

      if (tindex == 1) {

        this.$refs.in_1.select();

      };

      if (tindex == 2) {

        this.$refs.in_2.select();

      };

    },

    move_to(tindex) {

      if (tindex == 2) {

        this.$refs.in_2.focus();

      };

      if (tindex == 3) {

        this.$refs.in_3.click();

      };

    },

    async loginsubmit() {

      SessionStorage.set("userinfo", "");

      let user_fullname = "";

      let query = {

        username: this.username,

        userpwd: this.userpwd

      };

      if (this.username.length == 0) {

        this.loginresult = "未提供登录用户名";

        this.error_win = true;

        return;

      };

      if (this.userpwd.length == 0) {

        this.loginresult = "未提供登录密码";

        this.error_win = true;

        return;

      };

      let dataRes = await logincheck(query);

      this.loginresult = "网络错误";

      if (dataRes.data.data[0][0]) {

        if (dataRes.data.data[0][0].errcode == 0) {

          this.loginresult = "";

          user_fullname = dataRes.data.data[0][0].user_fullname;

          if (user_fullname.length == 0) {

            user_fullname = "未提供姓名";

          };

        } else {

          this.loginresult = dataRes.data.data[0][0].errmsg;

        };

      };

      if (this.loginresult.length > 0) {

        this.error_win = true;

      } else {

        SessionStorage.set("userinfo", user_fullname);

        this.$router.push({

          name: 'student'

        });

      };

    },

    clearall() {

      this.username = "";

      this.userpwd = "";

      this.$refs.in_1.focus();

    },

  },

  computed: {},

  mounted() {},

};

</script>

<style scoped>

.mysublabel {

  font-size: 12px;

  width: 100%;

  color: rgb(54, 54, 54);

  text-align: center;

}

.dcenter {

  width: 350px;

  height: 400px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

</style>