用户登录测试基本完成

2023-06-29 23:26:05 +08:00
parent b3bdb8afba
commit efb698a282
9 changed files with 200 additions and 114 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "hellogithub-vue",
      "version": "0.1.0",
      "dependencies": {
+        "axios": "^1.4.0",
        "core-js": "^3.8.3",
        "element-ui": "^2.15.13",
        "vue": "^2.6.14",
@@ -3582,6 +3583,11 @@
        "babel-runtime": "6.x"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3614,6 +3620,16 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -4374,6 +4390,17 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "dev": true
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -5114,6 +5141,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@@ -6343,7 +6378,6 @@
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
      "engines": {
        "node": ">=4.0"
      },
@@ -6353,6 +6387,19 @@
        }
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -8048,7 +8095,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -8057,7 +8103,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -10043,6 +10088,11 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -15386,6 +15436,11 @@
        "babel-runtime": "6.x"
      }
    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
    "at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -15406,6 +15461,16 @@
        "postcss-value-parser": "^4.2.0"
      }
    },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -16035,6 +16100,14 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "dev": true
    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
    "commander": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -16608,6 +16681,11 @@
        "object-keys": "^1.1.1"
      }
    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
    "delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@@ -17606,8 +17684,17 @@
    "follow-redirects": {
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
    },
    "forwarded": {
      "version": "0.2.0",
@@ -18967,14 +19054,12 @@
    "mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
    },
    "mime-types": {
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "requires": {
        "mime-db": "1.52.0"
      }
@@ -20464,6 +20549,11 @@
        }
      }
    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
--- a/src/api/home/index.js
+++ b/src/api/home/index.js
@@ -1,5 +0,0 @@
-import http from '@/utils/http';
-
-export function homeData(params){
-    return http.get('/api/list', params)
-}
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -33,7 +33,7 @@
                </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-button type="info" plain @click="openLogin()">登 录</el-button>
                    </el-card>

                    <el-card class="box-card" style="margin-top: 20px;width: 13vw">
@@ -75,7 +75,7 @@
                                <i slot="suffix" :class="icon" @click="showPass"></i>
                            </el-input>
                        </el-form-item>
-                        <el-form-item prop="code">
+                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                            <el-input
                                    prefix-icon="el-icon-mobile-phone"
                                    type="text"
@@ -83,13 +83,16 @@
                                    v-model="ruleForm.code"
                                    class="vertify_code"
                                    auto-complete="false"
-                                    style="width: 15vw"
+                                    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-form-item prop="remember">
+                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
+                            </el-form-item>
+
                            <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
                        </div>

@@ -116,20 +119,23 @@
 </template>

 <script>
+import axios from 'axios'
+import Vue from "vue";
 export default {
    name: "HomeComponent",
    data() {
        return {
            loginDialogVisible: false,
            registerDialogVisible: false,
-            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date(),
+            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
            checked: false,
            passwordVisible: "password",
            icon: "el-icon-view",
            ruleForm: {
-                username: "",
-                password: "",
-                code: "",
+                username: null,
+                password: null,
+                code: null,
+                remember:null
            },
            rules: {
                username: [
@@ -146,10 +152,15 @@ export default {
        this.account(); //获取cookie的方法
    },
    methods: {
-
+        openLogin(){
+            this.loginDialogVisible=true;
+        },
+        closeLogin(){
+            this.loginDialogVisible=false;
+        },
        // ******登录*****
        account() {
-            console.log(this.getCookie("username"));
+            // console.log(this.getCookie("username"));
            this.ruleForm.username = this.getCookie("username");
            this.ruleForm.password = this.getCookie("password");
        },
@@ -172,7 +183,7 @@ export default {
            }
        },
        clearCookie() {
-            this.setCookie("", "", -1); //清除cookie
+            this.setCookie("", "",-1); //清除cookie
        },

        // 方法
@@ -180,34 +191,56 @@ export default {
            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);
+                    // let params = new URLSearchParams();
+                    // params.append("username", this.ruleForm.username);
+                    // params.append("password", this.ruleForm.password);
+                    // params.append("code", this.ruleForm.code);
+                    // params.append("remember",this.ruleForm.remember)
                    if (this.checked == true) {
                        //存入cookie
-                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
+                        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");
-                    //     }
-                    // });
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
+                        // URL 中的查询参数
+                        params: {
+                            username: this.ruleForm.username,
+                            password: this.ruleForm.password,
+                            code: this.ruleForm.code,
+                            remember: this.ruleForm.remember,
+
+                        }
+                    }).then(function (res){
+                        // Vue.prototype.$message({
+                        //     message: '成功！',
+                        //     type: 'success'
+                        // });
+                        if(res.data.code===200){
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', { style: 'color: teal'}, res.data.msg),
+                                type: 'success'
+                            });
+                        }else{
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg
+                            });
+                        }
+                        console.log(res);
+                    });
                } else {
+                    this.closeLogin();
                    return false;
                }
+                this.closeLogin();
+
            });
        },
        //点击图片更换验证码
--- a/src/main.js
+++ b/src/main.js
@@ -3,12 +3,14 @@ import App from './App.vue'
 import router from './router'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import axios from "axios";
+axios.defaults.withCredentials=true;

 Vue.config.productionTip = false

 Vue.use(Element);
 new Vue({
    router,
+    axios,
    render: h => h(App)
 }).$mount('#app')
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -1,21 +0,0 @@
-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);
-    }
-}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,35 +0,0 @@
-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;
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,22 +1,23 @@
 <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-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>
-    </el-container>
 </template>

 <script>
 import HeaderComponent from "@/components/Header.vue";

 export default {
+    name:"HomeView",
    components: {
        HeaderComponent,
    }
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,25 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-  lintOnSave: false
-})
+require('@vue/cli-service')
+// module.exports = defineConfig({
+//   transpileDependencies: true,
+//   lintOnSave: false
+// })
+module.exports = {
+  // 关闭语法检查
+  lintOnSave:false,
+  devServer: {
+    host: 'localhost', // 本地域名/ip地址
+    port: '8080', // 端口号
+    proxy: {
+      '/api': {
+        //后端接口的baseurl
+        target: 'http://localhost/helloGithub_war_exploded/',
+        //是否允许跨域
+        changeOrigin: true,
+        pathRewrite: {
+          //这里的作用是使用去掉api
+          '^/api': ''
+        }
+      }
+    }
+  }
+}