添加登录弹窗

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/SearchInput.vue

@@ -2,7 +2,7 @@
     <div class="search-item">
         <el-popover
                 placement="bottom"
-                width="475"
+                width="275"
                 ref="popover"
                 trigger="focus"
                 :visible-arrow="false"
@@ -45,7 +45,7 @@
         <el-input
                 size="medium"
                 :placeholder="tipsWord"
-                style="width: 500px"
+                style="width: 20vw"
                 clearable
                 v-popover:popover
                 @keyup.enter.native="searchRequest"

src/router/index.js

@@ -17,7 +17,13 @@ const routes = [
     // 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')
   }
+
 ]
 
 const router = new VueRouter({

src/views/HomeView.vue

@@ -5,11 +5,12 @@
                 <div class="header">
                     <div class="logo-all">
                         <img class="logo" src="../assets/logo/logo.png">
-                        <span style="cursor: pointer;margin-left: 10px;font-size: 25px;font-weight: bold;font-family:'楷体';">HelloGithub</span>
+                        <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>
@@ -17,7 +18,7 @@
                             单
                         </el-menu-item>
 
-                        <el-menu-item index="4">文 章</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>
@@ -28,7 +29,7 @@
         <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 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
+                    <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>
@@ -51,7 +52,7 @@
             <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
                 <template >
                     <div>
-                        <el-tabs type="border-card" style="width: 700px">
+                        <el-tabs type="border-card" style="width: 45vw">
                             <el-tab-pane label="最热">
                                 最热
                             </el-tab-pane>
@@ -61,11 +62,11 @@
                         </el-tabs>
                     </div>
                     <div  style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
-                        <el-card class="box-card" style="width: 200px">
+                        <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: 200px">
+                        <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>
@@ -77,16 +78,71 @@
                     </div>
                 </template>
 
+                <!--登录弹框-->
                 <el-dialog
                     title="登录"
                     :visible.sync="loginDialogVisible"
-                    width="30%"
+                    width="25vw"
-                    :before-close="handleClose">
+                    >
-                    <span>这是一段信息</span>
+                    <div>
-                    <span slot="footer" class="dialog-footer">
+
-                    <el-button @click="loginDialogVisible = false">取 消</el-button>
+                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
-                    <el-button type="primary" @click="loginDialogVisible = false">确 定</el-button>
+                            <el-form-item prop="username">
-                    </span>
+                                <!-- 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: 240px"
+                                ></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>
 
 
@@ -99,6 +155,7 @@
 <script>
 import SearchInput from "@/components/SearchInput.vue";
 
+
 export default {
     components: {
         SearchInput,
@@ -107,25 +164,133 @@ export default {
         return {
             activeIndex: '1',
             activeIndex2: '1',
-            loginDialogVisible: false
+            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);
         },
-        handleClose() {
+        // ******登录*****
-            this.$confirm('确认关闭？')
+        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;
+    /*justify-content: space-between;*/
 }
 
 .logo {
@@ -139,16 +304,22 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-evenly;
 }
 
 .el-menu {
     font-weight: bold;
     font-size: 18px;
+    display: flex;
+    justify-content: space-evenly;
 }
 
 .box-card {
-    width: 150px;
+    width: 10vw;
+}
+.menu-item{
+    width: 6vw;
+    /*background-color: #ffca00;*/
 }
 
 </style>

src/views/LoginView.vue

@@ -0,0 +1,227 @@
+<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>
+

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  lintOnSave: false
 })