山东大学项目实训Web实验室（WebLab）（六）上载界面

前言

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

任务目标

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

• 代码上载界面
• 导航条

代码

App.vue

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

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from "../views/HomeView.vue";


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      // 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("../views/coding-view.vue"),
      // children: [
      //   {
      //     path: '../layout/btn',
      //     name: 'btns',
      //     component: btns => import("../views/coding-view.vue"),
      //   },
      //   {
      //     path: 'questionDescription',
      //     name: 'questionDescription',
      //     component: questionDescription
      //   },]
    },
    {
      path: "/register",
      name: "register-view",
      // 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("../views/register-view.vue"),
    },
    {
      path: "/login",
      name: "login-view",
      // 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("../views/login-view.vue")
    },
    {
    path: "/logout",
    name: "coding-view",
    // 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("../views/coding-view.vue"),
    },
    {
      path: "/forget_password",
      name: "forgetpassw-view",
      // 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("../views/forgetpassw-view.vue"),
    },
    {
      path: "/update_password",
      name: "update_password",
      // 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("../views/updatepassw-view.vue"),
    },
    {
      path: "/login_home",
      name: "login_home",
      // 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("../views/loginhome.vue"),
    },
    {
      path: "/upload",
      name: "upload",
      // 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("../views/upload-view.vue"),
    },
    {
      path: "/upload_login",
      name: "upload_login",
      // 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("../views/upload-login-view.vue"),
    },
  ],
});

export default router;

views/upload-view.vue

<template>
  <el-header>
    <topmenu></topmenu>
  </el-header>

  <el-main>
    <div class="login-wrap">
      <el-form :model="form" class="login-container">
        <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form>
    </div>
  </el-main>
</template>

<script lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import topmenu from "@/layout/topmenu.vue"

export default {
  name: "upload-view",
  components: {
    topmenu,
    UploadFilled,
  },
};

</script>

<style>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

</style>

views/upload-login-view.vue

<template>
  <el-header>
    <topmenu></topmenu>
  </el-header>

  <el-main>
    <div class="login-wrap">
      <el-form :model="form" class="login-container">
        <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form>
    </div>
  </el-main>
</template>

<script lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import topmenu from "@/layout/topmenu-login.vue"

export default {
  name: "upload-view",
  components: {
    topmenu,
    UploadFilled,
  },
};

</script>

<style>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

</style>