山东大学项目实训Web实验室（WebLab）（四 上）登录注册界面

前言

项目仓库
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

任务目标

设计并且编写主界面
主界面内容：

• 代码登录界面
• 代码注册界面
• 修改导航条
• 新增登录后界面

代码

App.vue

<!--按照路由进行画面跳转-->
<template>
  <div>
    <router-view/>
  </div>
</template>

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import codingViewVue from '../views/coding-view.vue';
import registerViewVue from '../views/register-view.vue';
import loginhomeVue from '../views/loginhome.vue';
import loginViewVue from '../views/login-view.vue';
import forgetpasswViewVue from '../views/forgetpassw-view.vue';
import updatepasswViewVue from '../views/updatepassw-view.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: codingViewVue,
      meta:{
        isLogin:false,
      }
    },
    {
      path: "/register",
      name: "register-view",
      component: registerViewVue,
      meta:{
        isLogin:false,
      }
    },
    {
      path: "/login",
      name: "login-view",
      component: loginViewVue,
      meta:{
        isLogin:false,
      }
    },
    {
      path: "/logout",
      name: "coding-view",
      component: codingViewVue,
      meta:{
        isLogin:false,
      }
    },
    {
      path: "/forget_password",
      name: "forgetpassw-view",
      component: forgetpasswViewVue,
      meta:{
        isLogin:false,
      }
    },
    {
      path: "/update_password",
      name: "update_password",
      component: updatepasswViewVue,
      meta:{
        isLogin:true,
      }
    },
    {
      path: "/login_home",
      name: "login_home",
      component: loginhomeVue,
      meta:{
        isLogin:true,
      }
    },
  ],
});

export default router;

layout/topmenu.vue

<!--topbar-->
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1" disabled>WebLab</el-menu-item>
    <el-menu-item index="2" @click="goto_codingview()">Coding Center</el-menu-item>
    <el-sub-menu index="3">
      <template #title>待补充</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4">
        <template #title>item four</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">待补充</el-menu-item>

    <el-button
      size="large"
      style="position: absolute;right:10px;top:5px;"
      round
      @click="goto_login()"
    >登录/注册</el-button>
  </el-menu>

  <div class="h-6"></div>
</template>

<script  lang="ts" >
import { ref, defineComponent } from 'vue'
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const activeIndex = ref('2');
    const activeIndex2 = ref('2');

    const handleSelect = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    };
    function goto_login() {
      router.push({ path: '/login' });
    };
    function goto_codingview() {
      router.push({ path: '/' });
    };
    return {
      activeIndex,
      activeIndex2,
      handleSelect,
      goto_login,
      goto_codingview
    }
  }
});

</script>

layout/topmenu-login.vue

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1" disabled>WebLab</el-menu-item>
    <el-menu-item index="2" @click="goto_loginhome">Coding Center</el-menu-item>
    <el-sub-menu index="3">
      <template #title>待补充</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4">
        <template #title>item four</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">待补充</el-menu-item>
    <el-sub-menu index="5" style="position: absolute;right:15px;">
      <template #title>
        <div class="block">
          <el-avatar :size="45" :icon="UserFilled" />
        </div>
      </template>
      <el-menu-item index="5-1" @click="goto_update_password()">item one</el-menu-item>
      <el-menu-item index="5-2">item two</el-menu-item>
      <el-menu-item index="5-3" @click="goto_codingview">登出</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <div class="h-6"></div>
</template>

<script  lang="ts" >
import { UserFilled } from '@element-plus/icons-vue'
import { ref, defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import { useLoginStore } from '@/stores/store';
export default defineComponent({

  setup() {
    const store=useLoginStore();
    const router = useRouter();
    const activeIndex = ref('2');
    const activeIndex2 = ref('2');
    const handleSelect = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    function goto_codingview() {
      ElMessageBox.confirm(
        '是否确认退出?',
        '退出提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
        }
      )
        .then(() => {
          //点击确认
          store.userLogout();
          router.push({ path: '/' });
        })
        .catch(() => {
          //点击取消
          router.push({ path: '/login_home' });
        })
    }
    function goto_update_password() {
      router.push({ path: '/update_password' });
    }
    function goto_loginhome(){
      router.push({path:'/login_home'});
    }
    return {
      activeIndex,
      activeIndex2,
      handleSelect,
      goto_codingview,
      goto_update_password,
      goto_loginhome,
      UserFilled,
    }
  },

});

</script>
<style>
</style>

views/loginhome.vue

<!--login-coding-page-->
<template>
  <el-header>
    <topmenulogin></topmenulogin>
  </el-header>

  <el-main>
    <code-editor-vue></code-editor-vue>

    <div class="grid-content"></div>

    <el-divider content-position="center"><btns></btns></el-divider>

    <div class="grid-content"></div>

    <ResultsDisplay></ResultsDisplay>
  </el-main>
</template>

<script lang="ts">
import { RouterLink, RouterView } from "vue-router";
import CodeEditorVue from "../components/CodeEditor.vue";
import  ResultsDisplay from "../components/ResultsDisplay.vue"
import btns from  "../layout/btns.vue"
import topmenulogin from "../layout/topmenu-login.vue";
export default {
  name: "coding-view",
  components: {
    topmenulogin,
    btns,
    ResultsDisplay,
    CodeEditorVue,
  },
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

</style>