前台页面框架完成

src/api/home/index.js

@@ -0,0 +1,5 @@
+import http from '@/utils/http';
+
+export function homeData(params){
+    return http.get('/api/list', params)
+}

src/components/Header.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="header">
+        <div class="logo-all">
+            <img class="logo" src="../assets/logo/logo.png">
+            <span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
+        </div>
+
+        <el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
+                 active-text-color="#42b983"
+                 style="width: 30vw;"
+                 router>
+            <el-menu-item class="menu-item" index="/home">首 页</el-menu-item>
+            <el-menu-item class="menu-item" index="/monthly">月 刊</el-menu-item>
+            <el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
+            </el-menu-item>
+            <el-menu-item class="menu-item" index="/paper">文 章</el-menu-item>
+        </el-menu>
+        <SearchInput></SearchInput>
+        <el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
+    </div>
+</template>
+
+<script>
+import SearchInput from "@/components/SearchInput.vue";
+
+export default {
+    name: "HeaderComponent",
+    components: {SearchInput},
+    data() {
+        return {}
+    }
+}
+</script>
+
+<style scoped>
+.logo-all {
+    height: 60px;
+    width: 12vw;
+    display: flex;
+    align-items: center;
+}
+.logo {
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+}
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.el-menu {
+    font-weight: bold;
+    font-size: 18px;
+    display: flex;
+    justify-content: space-evenly;
+}
+.menu-item {
+    width: 6vw;
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,245 @@
+<template>
+    <el-container>
+        <el-aside width="23%" style="display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
+            <template>
+                <el-card class="box-card" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+                    <div slot="header" class="clearfix">
+                        <span><i class="el-icon-menu"></i> 热门标签</span>
+                    </div>
+                    <div class="bottom clearfix">
+                        <div v-for="o in 4" :key="o" class="text item">
+                            <el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
+                        </div>
+                        <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
+                        <div>
+                            <i class="el-icon-setting"></i>
+                            <el-button type="text" class="button">管理标签</el-button>
+                        </div>
+                    </div>
+                </el-card>
+            </template>
+        </el-aside>
+        <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
+            <template>
+                <div>
+                    <el-tabs type="border-card" style="width: 45vw">
+                        <el-tab-pane label="最热">
+                            最热
+                        </el-tab-pane>
+                        <el-tab-pane label="最新">
+                            最新
+                        </el-tab-pane>
+                    </el-tabs>
+                </div>
+                <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
+                    <el-card class="box-card" style="width: 13vw">
+                        <el-button type="info" plain @click="loginDialogVisible = true">登 录</el-button>
+                    </el-card>
+
+                    <el-card class="box-card" style="margin-top: 20px;width: 13vw">
+                        <div slot="header" class="clearfix">
+                            <span>卡片名称</span>
+                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+                        </div>
+                        <div v-for="o in 4" :key="o" class="text item">
+                            {{ '列表内容 ' + o }}
+                        </div>
+                    </el-card>
+                </div>
+            </template>
+            <!--登录弹框-->
+            <el-dialog
+                    title="登录"
+                    :visible.sync="loginDialogVisible"
+                    width="25vw">
+                <div>
+                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
+                        <el-form-item prop="username">
+                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
+                            <el-input
+                                    prefix-icon="el-icon-user"
+                                    v-model="ruleForm.username"
+                                    placeholder="用户名"
+                                    auto-complete="off"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="password">
+                            <!-- type：密码显示* -->
+                            <el-input
+                                    prefix-icon="el-icon-unlock"
+                                    :type="passwordVisible"
+                                    v-model="ruleForm.password"
+                                    placeholder="密码"
+                                    auto-complete="new-password"
+                            >
+                                <i slot="suffix" :class="icon" @click="showPass"></i>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="code">
+                            <el-input
+                                    prefix-icon="el-icon-mobile-phone"
+                                    type="text"
+                                    placeholder="点击图片更换验证码"
+                                    v-model="ruleForm.code"
+                                    class="vertify_code"
+                                    auto-complete="false"
+                                    style="width: 15vw"
+                            ></el-input>
+                            <!-- <span class="code">验证码</span> -->
+                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
+                        </el-form-item>
+                        <div style="display: flex;flex-direction: row;justify-content: space-between">
+                            <el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
+                            <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
+                        </div>
+
+                        <div class="login-btn">
+                            <el-button type="primary" @click="submitForm('ruleForm')"
+                            >登录
+                            </el-button
+                            >
+                            <el-button @click="resetForm('ruleForm')">重置</el-button>
+                        </div>
+                    </el-form>
+                </div>
+            </el-dialog>
+
+            <!--注册弹框-->
+            <el-dialog
+                    title="注册"
+                    :visible.sync="registerDialogVisible"
+                    width="25vw">
+                注册
+            </el-dialog>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+export default {
+    name: "HomeComponent",
+    data() {
+        return {
+            loginDialogVisible: false,
+            registerDialogVisible: false,
+            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date(),
+            checked: false,
+            passwordVisible: "password",
+            icon: "el-icon-view",
+            ruleForm: {
+                username: "",
+                password: "",
+                code: "",
+            },
+            rules: {
+                username: [
+                    // required：规则，trigger：失去焦点触发
+                    {required: true, message: "请输入用户名", trigger: "blur"},
+                ],
+                password: [{required: true, message: "请输入密码", trigger: "blur"}],
+                code: [{required: true, message: "请输入验证码", trigger: "blur"}],
+            },
+
+        };
+    },
+    mounted() {
+        this.account(); //获取cookie的方法
+    },
+    methods: {
+
+        // ******登录*****
+        account() {
+            console.log(this.getCookie("username"));
+            this.ruleForm.username = this.getCookie("username");
+            this.ruleForm.password = this.getCookie("password");
+        },
+        setCookie(c_name, c_pwd, exdate) {
+            //账号，密码 ，过期的天数
+            exdate = new Date();
+            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
+            document.cookie =
+                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
+            document.cookie =
+                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
+        },
+        getCookie(name) {
+            var arr = document.cookie.split(";");
+            for (var i = 0; i < arr.length; i++) {
+                var arr2 = arr[i].split("=");
+                if (arr2[0].trim() == name) {
+                    return arr2[1];
+                }
+            }
+        },
+        clearCookie() {
+            this.setCookie("", "", -1); //清除cookie
+        },
+
+        // 方法
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //取参数
+                    let params = new URLSearchParams();
+                    params.append("name", this.ruleForm.username);
+                    params.append("password", this.ruleForm.password);
+                    params.append("code", this.ruleForm.code);
+                    if (this.checked == true) {
+                        //存入cookie
+                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
+                    } else {
+                        this.clearCookie();
+                    }
+
+                    //调用方法提交
+                    // getLoginStatus(params).then((res) => {
+                    //     if (res.code == 1) {
+                    //         localStorage.setItem("userName", this.ruleForm.username);
+                    //         this.$router.push("/Info");
+                    //         this.notify("登录成功", "success");
+                    //     }
+                    //     if (res.code == 0) {
+                    //         this.notify("验证码错误", "error");
+                    //     }
+                    //     if (res.code == 2) {
+                    //         this.notify("用户名或密码错误", "error");
+                    //     }
+                    // });
+                } else {
+                    return false;
+                }
+            });
+        },
+        //点击图片更换验证码
+        resetImg() {
+            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
+        },
+        //重置
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        showPass() {
+            if (this.passwordVisible === "text") {
+                this.passwordVisible = "password";
+                //更换图标
+                this.icon = "el-icon-view";
+            } else {
+                this.passwordVisible = "text";
+                this.icon = "el-icon-lock";
+            }
+        },
+        // ******登录方法结束*****
+
+        // ----------注册------------
+        registerFun() {
+            this.loginDialogVisible = false;
+            this.registerDialogVisible = true;
+        }
+        //----------注册结束----------
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Monthly.vue

@@ -0,0 +1,15 @@
+<template>
+<div>
+    月刊
+</div>
+</template>
+
+<script>
+export default {
+    name: "MonthlyComponent"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Paper.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      文章
+  </div>
+</template>
+
+<script>
+export default {
+    name: "PaperComponent"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Ranking.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      榜单
+  </div>
+</template>
+
+<script>
+export default {
+    name: "RankingComponent"
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -9,6 +9,6 @@ Vue.config.productionTip = false
 
 Vue.use(Element);
 new Vue({
-  router,
-  render: h => h(App)
+    router,
+    render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -1,33 +1,51 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import index from '../views/index.vue'
+import home from "@/components/Home.vue";
+import monthly from "@/components/Monthly.vue";
+import ranking from "@/components/Ranking.vue";
+import paper from "@/components/Paper.vue";
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    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/AboutView.vue')
-  },
-  {
-    path: '/login',
-    name: 'login',
-    component: ()=>import('../views/LoginView.vue')
-  }
+    {
+        path: '/',
+        redirect: '/index'
+    },
+    {
+        path: '/index',
+        redirect: '/home',
+        name: 'index',
+        component: index,
+        children: [
+            {
+                path: '/Home',
+                name: 'Home',
+                component: home
+            },
+            {
+                path: '/monthly',
+                name: 'monthly',
+                component: monthly
+            },
+            {
+                path: '/ranking',
+                name: 'ranking',
+                component: ranking
+            },
+            {
+                path: '/paper',
+                name: 'paper',
+                component: paper
+            },
+        ]
+    }
 
 ]
 
 const router = new VueRouter({
-  routes
+    routes
 })
 
 export default router

src/utils/http.js

@@ -0,0 +1,21 @@
+import request from './request';
+
+// eslint-disable-next-line no-unused-vars
+const http = {
+    get(url, params) {
+        const config = {
+            method: 'GET',
+            url: url,
+            params: params ? params : {},
+        }
+        return request(config);
+    },
+    post(url, data) {
+        const config = {
+            method: 'POST',
+            url: url,
+            data: data ? data : {},
+        }
+        return request(config);
+    }
+}

src/utils/request.js

@@ -0,0 +1,35 @@
+import axios from 'axios' // 使用前要先安装依赖：npm install axios
+
+// 创建axios实例
+const service = axios.create({
+    // 这里可以放一下公用属性等。
+    baseUrl: 'http://localhost:8082/helloGithub_war_exploded/', // 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
+    withCredentials: false, // 跨域请求时是否需要访问凭证
+    timeout: 3 * 1000, // 请求超时时间
+})
+
+// 请求拦截器
+service.interceptors.request.use(config => {
+    // 给管理后台的接口设置header头，添加Authorzation属性
+    let token = sessionStorage.getItem('token')
+    config.headers['Authorization'] = token//给header头添加token值
+
+    return config
+}, error => {
+    // 出现异常
+    return Promise.reject(error);
+})
+
+service.interceptors.response.use(response => {
+    // 后台正常响应的状态，如果是200， 说明后台处理没有问题
+    /*  if (response.status == 200) {
+         return response.data;
+     } */
+    // return response.data 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
+    return response
+}, error => {
+    return Promise.reject(error);
+})
+
+
+export default service;

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,325 +0,0 @@
-<template>
-    <el-container>
-        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
-            <template>
-                <div class="header">
-                    <div class="logo-all">
-                        <img class="logo" src="../assets/logo/logo.png">
-                        <span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
-                    </div>
-
-                    <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal"
-                             active-text-color="#42b983"
-                             style="width: 30vw;"
-                             @select="handleSelect">
-                        <el-menu-item class="menu-item" index="1">首 页</el-menu-item>
-                        <el-menu-item class="menu-item" index="2">月 刊</el-menu-item>
-                        <el-menu-item class="menu-item" index="3"><i class="el-icon-trophy" style="color: #ffca00"></i>榜
-                            单
-                        </el-menu-item>
-
-                        <el-menu-item class="menu-item" index="4">文 章</el-menu-item>
-                    </el-menu>
-                    <SearchInput></SearchInput>
-                    <el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
-                </div>
-            </template>
-
-        </el-header>
-        <el-container>
-            <el-aside width="23%" style="display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
-                <template>
-                    <el-card class="box-card" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
-                        <div slot="header" class="clearfix">
-                            <span><i class="el-icon-menu"></i> 热门标签</span>
-                        </div>
-                        <div class="bottom clearfix">
-                            <div v-for="o in 4" :key="o" class="text item">
-                                <el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
-                            </div>
-                            <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
-                            <div>
-                                <i class="el-icon-setting"></i>
-                                <el-button type="text" class="button">管理标签</el-button>
-                            </div>
-
-                        </div>
-
-                    </el-card>
-                </template>
-
-            </el-aside>
-            <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
-                <template >
-                    <div>
-                        <el-tabs type="border-card" style="width: 45vw">
-                            <el-tab-pane label="最热">
-                                最热
-                            </el-tab-pane>
-                            <el-tab-pane label="最新">
-                                最新
-                            </el-tab-pane>
-                        </el-tabs>
-                    </div>
-                    <div  style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
-                        <el-card class="box-card" style="width: 13vw">
-                            <el-button type="info" plain @click="loginDialogVisible = true">登 录</el-button>
-                        </el-card>
-
-                        <el-card class="box-card" style="margin-top: 20px;width: 13vw">
-                            <div slot="header" class="clearfix">
-                                <span>卡片名称</span>
-                                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
-                            </div>
-                            <div v-for="o in 4" :key="o" class="text item">
-                                {{'列表内容 ' + o }}
-                            </div>
-                        </el-card>
-                    </div>
-                </template>
-
-                <!--登录弹框-->
-                <el-dialog
-                    title="登录"
-                    :visible.sync="loginDialogVisible"
-                    width="25vw"
-                    >
-                    <div>
-
-                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
-                            <el-form-item prop="username">
-                                <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
-                                <el-input
-                                    prefix-icon="el-icon-user"
-                                    v-model="ruleForm.username"
-                                    placeholder="用户名"
-                                    auto-complete="off"
-                                ></el-input>
-                            </el-form-item>
-                            <el-form-item prop="password">
-                                <!-- type：密码显示* -->
-                                <el-input
-                                    prefix-icon="el-icon-unlock"
-                                    :type="passwordVisible"
-                                    v-model="ruleForm.password"
-                                    placeholder="密码"
-                                    auto-complete="new-password"
-                                >
-                                    <i slot="suffix" :class="icon" @click="showPass"></i>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item prop="code">
-                                <el-input
-                                    prefix-icon="el-icon-mobile-phone"
-                                    type="text"
-                                    placeholder="点击图片更换验证码"
-                                    v-model="ruleForm.code"
-                                    class="vertify_code"
-                                    auto-complete="false"
-                                    style="width: 15.8vw"
-                                ></el-input>
-                                <!-- <span class="code">验证码</span> -->
-                                <img :src="imageUrl" @click="resetImg" class="vertify_img" />
-                            </el-form-item>
-                            <div style="display: flex;flex-direction: row;justify-content: space-between">
-                                <el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
-                                <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
-                            </div>
-
-                            <div class="login-btn">
-                                <el-button type="primary" @click="submitForm('ruleForm')"
-                                >登录</el-button
-                                >
-                                <el-button @click="resetForm('ruleForm')">重置</el-button>
-                            </div>
-                        </el-form>
-
-                    </div>
-                </el-dialog>
-
-                <el-dialog
-                    title="注册"
-                    :visible.sync="registerDialogVisible"
-                    width="25vw"
-                >
-
-                </el-dialog>
-
-
-
-            </el-main>
-        </el-container>
-    </el-container>
-</template>
-
-<script>
-import SearchInput from "@/components/SearchInput.vue";
-
-
-export default {
-    components: {
-        SearchInput,
-    },
-    data() {
-        return {
-            activeIndex: '1',
-            activeIndex2: '1',
-            loginDialogVisible: false,
-            registerDialogVisible:false,
-            imageUrl:"http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date(),
-            checked: false,
-            passwordVisible: "password",
-            icon: "el-icon-view",
-            ruleForm: {
-                username: "",
-                password: "",
-                code: "",
-            },
-            rules: {
-                username: [
-                    // required：规则，trigger：失去焦点触发
-                    { required: true, message: "请输入用户名", trigger: "blur" },
-                ],
-                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-                code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-            },
-
-        };
-    },
-    mounted() {
-        this.account(); //获取cookie的方法
-    },
-    methods: {
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        // ******登录*****
-        account() {
-            console.log(this.getCookie("username"));
-            this.ruleForm.username = this.getCookie("username");
-            this.ruleForm.password = this.getCookie("password");
-        },
-        setCookie(c_name, c_pwd, exdate) {
-            //账号，密码 ，过期的天数
-            exdate = new Date();
-            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
-            document.cookie =
-                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
-            document.cookie =
-                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
-        },
-        getCookie(name) {
-            var arr = document.cookie.split(";");
-            for (var i = 0; i < arr.length; i++) {
-                var arr2 = arr[i].split("=");
-                if (arr2[0].trim() == name) {
-                    return arr2[1];
-                }
-            }
-        },
-        clearCookie() {
-            this.setCookie("", "", -1); //清除cookie
-        },
-
-        // 方法
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    //取参数
-                    let params = new URLSearchParams();
-                    params.append("name", this.ruleForm.username);
-                    params.append("password", this.ruleForm.password);
-                    params.append("code", this.ruleForm.code);
-                    if (this.checked == true) {
-                        //存入cookie
-                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-                    } else {
-                        this.clearCookie();
-                    }
-
-                    //调用方法提交
-                    // getLoginStatus(params).then((res) => {
-                    //     if (res.code == 1) {
-                    //         localStorage.setItem("userName", this.ruleForm.username);
-                    //         this.$router.push("/Info");
-                    //         this.notify("登录成功", "success");
-                    //     }
-                    //     if (res.code == 0) {
-                    //         this.notify("验证码错误", "error");
-                    //     }
-                    //     if (res.code == 2) {
-                    //         this.notify("用户名或密码错误", "error");
-                    //     }
-                    // });
-                } else {
-                    return false;
-                }
-            });
-        },
-        //点击图片更换验证码
-        resetImg() {
-            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
-        },
-        //重置
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
-        },
-        showPass() {
-            if (this.passwordVisible === "text") {
-                this.passwordVisible = "password";
-                //更换图标
-                this.icon = "el-icon-view";
-            } else {
-                this.passwordVisible = "text";
-                this.icon = "el-icon-lock";
-            }
-        },
-        // ******登录方法结束*****
-        // ******注册***********
-        registerFun(){
-            this.loginDialogVisible=false;
-            this.registerDialogVisible=true;
-        }
-    }
-}
-</script>
-<style>
-.logo-all {
-    /*background-color: #13ce66;*/
-    height: 60px;
-    width: 12vw;
-    display: flex;
-    align-items: center;
-    /*justify-content: space-between;*/
-}
-
-.logo {
-    width: 30px;
-    height: 30px;
-    border-radius: 50px;
-}
-
-.header {
-    /*background-color: #eefdf7;*/
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-}
-
-.el-menu {
-    font-weight: bold;
-    font-size: 18px;
-    display: flex;
-    justify-content: space-evenly;
-}
-
-.box-card {
-    width: 10vw;
-}
-.menu-item{
-    width: 6vw;
-    /*background-color: #ffca00;*/
-}
-
-</style>

src/views/LoginView.vue

@@ -1,227 +0,0 @@
-<template>
-    <div class="login-wrap">
-        <div class="ms-title">'音酷'-后台管理系统</div>
-        <div class="ms-login">
-            <!-- ruleForm：数据表单；rules：提示；ref：使用这个form的名字 -->
-            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
-                <el-form-item prop="username">
-                    <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
-                    <el-input
-                            prefix-icon="el-icon-user"
-                            v-model="ruleForm.username"
-                            placeholder="用户名"
-                            auto-complete="off"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item prop="password">
-                    <!-- type：密码显示* -->
-                    <!-- <el-input prefix-icon="el-icon-unlock" type="password" v-model="ruleForm.password" placeholder="密码" auto-complete="false"></el-input> -->
-                    <el-input
-                            prefix-icon="el-icon-unlock"
-                            :type="passwordVisible"
-                            v-model="ruleForm.password"
-                            placeholder="密码"
-                            auto-complete="new-password"
-                    >
-                        <i slot="suffix" :class="icon" @click="showPass"></i>
-                    </el-input>
-                </el-form-item>
-                <el-form-item prop="code">
-                    <el-input
-                            prefix-icon="el-icon-mobile-phone"
-                            type="text"
-                            placeholder="点击图片更换验证码"
-                            v-model="ruleForm.code"
-                            class="vertify_code"
-                            auto-complete="false"
-                    ></el-input>
-                    <!-- <span class="code">验证码</span> -->
-                    <img :src="imgUrl" @click="resetImg" class="vertify_img" />
-                </el-form-item>
-                <el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
-                <div class="login-btn">
-                    <el-button type="primary" @click="submitForm('ruleForm')"
-                    >登录</el-button
-                    >
-                    <el-button @click="resetForm('ruleForm')">重置</el-button>
-                </div>
-            </el-form>
-        </div>
-    </div>
-</template>
-
-<script>
-
-export default {
-    data: function () {
-        return {
-            checked: false,
-            passwordVisible: "password",
-            icon: "el-icon-view",
-            imgUrl: "http://localhost:8888/verifyCode?time=" + new Date(),
-            ruleForm: {
-                username: "",
-                password: "",
-                code: "",
-            },
-            rules: {
-                username: [
-                    // required：规则，trigger：失去焦点触发
-                    { required: true, message: "请输入用户名", trigger: "blur" },
-                ],
-                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-                code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-            },
-        };
-    },
-    mounted() {
-        this.account(); //获取cookie的方法
-    },
-    methods: {
-        account() {
-            console.log(this.getCookie("username"));
-            this.ruleForm.username = this.getCookie("username");
-            this.ruleForm.password = this.getCookie("password");
-        },
-        setCookie(c_name, c_pwd, exdate) {
-            //账号，密码 ，过期的天数
-            exdate = new Date();
-            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
-            document.cookie =
-                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
-            document.cookie =
-                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
-        },
-        getCookie(name) {
-            var arr = document.cookie.split(";");
-            for (var i = 0; i < arr.length; i++) {
-                var arr2 = arr[i].split("=");
-                if (arr2[0].trim() == name) {
-                    return arr2[1];
-                }
-            }
-        },
-        clearCookie() {
-            this.setCookie("", "", -1); //清除cookie
-        },
-
-        // 方法
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    //取参数
-                    let params = new URLSearchParams();
-                    params.append("name", this.ruleForm.username);
-                    params.append("password", this.ruleForm.password);
-                    params.append("code", this.ruleForm.code);
-                    if (this.checked == true) {
-                        //存入cookie
-                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-                    } else {
-                        this.clearCookie();
-                    }
-
-                    //调用方法提交
-                    // getLoginStatus(params).then((res) => {
-                    //     if (res.code == 1) {
-                    //         localStorage.setItem("userName", this.ruleForm.username);
-                    //         this.$router.push("/Info");
-                    //         this.notify("登录成功", "success");
-                    //     }
-                    //     if (res.code == 0) {
-                    //         this.notify("验证码错误", "error");
-                    //     }
-                    //     if (res.code == 2) {
-                    //         this.notify("用户名或密码错误", "error");
-                    //     }
-                    // });
-                } else {
-                    return false;
-                }
-            });
-        },
-        //点击图片更换验证码
-        resetImg() {
-            this.imgUrl = "http://localhost:8888/verifyCode?time=" + new Date();
-        },
-        //重置
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
-        },
-        showPass() {
-            if (this.passwordVisible === "text") {
-                this.passwordVisible = "password";
-                //更换图标
-                this.icon = "el-icon-view";
-            } else {
-                this.passwordVisible = "text";
-                this.icon = "el-icon-lock";
-            }
-        },
-    },
-};
-</script>
-
-<style scoped>
-.login-wrap {
-    position: relative;
-    /*background: url("../assets/img/background1.jpg");*/
-    background-attachment: fixed;
-    background-position: center;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}
-.ms-title {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    margin-top: -230px;
-    text-align: center;
-    font-size: 30px;
-    font-weight: 600;
-    color: #fff;
-}
-.ms-login {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 300px;
-    height: 260px;
-    margin-left: -190px;
-    margin-top: -150px;
-    padding: 40px;
-    border-radius: 5px;
-    /* 调整透明度 */
-    opacity: 0.9;
-    filter: alpha(opacity=90);
-    background: #fff;
-}
-.login-btn {
-    text-align: center;
-}
-.login-btn button {
-    /* width: 100%; */
-    height: 36px;
-}
-
-.form {
-    position: relative;
-}
-
-.remeberMe {
-    text-align: left;
-    margin: 0 0 15px 0;
-}
-
-.vertify_code {
-    width: 180px;
-}
-.vertify_img {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 110px;
-}
-</style>
-

src/views/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-container>
+        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
+            <HeaderComponent></HeaderComponent>
+        </el-header>
+        <el-container>
+            <el-main>
+                <keep-alive>
+                    <router-view></router-view>
+                </keep-alive>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+import HeaderComponent from "@/components/Header.vue";
+
+export default {
+    components: {
+        HeaderComponent,
+    }
+}
+</script>
+<style>
+
+</style>