-

.history/src/api/login/user_20211209113758.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(promise) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data: promise,
+    })
+}

.history/src/api/login/user_20211209113817.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}

.history/src/api/login/user_20211209114124.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(promise) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data: JSON.stringify(promise),
+    })
+}

.history/src/api/login/user_20211209114152.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(promise) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}

.history/src/api/login/user_20211209114211.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}

.history/src/api/login/user_20211209114225.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data: data,
+    })
+}

.history/src/api/login/user_20211209114317.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+
+export function login_api(username, password) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data: {
+            username: username,
+            password: password
+        },
+    })
+}

.history/src/api/login/user_20211209114407.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}

.history/src/utils/request_20211209112916.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/utils/request_20211209113336.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/utils/request_20211209113831.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/utils/request_20211209114028.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/json'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/utils/request_20211209114033.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/json;'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/utils/request_20211209114431.js

@@ -0,0 +1,117 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+// import store from '@/store'
+import { getToken } from '@/utils/auth'
+import qs from 'qs'
+
+// create an axios instance
+
+let baseURL = window.PLATFROM_CONFIG.baseUrl
+const service = axios.create({
+        baseURL: baseURL,
+        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+        withCredentials: true, // send cookies when cross-domain requests
+        timeout: 5000, // request timeout
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+    })
+    // request interceptor
+service.interceptors.request.use(
+    config => {
+
+        config.data = qs.stringify(config.data);
+        config.headers.token = getToken()
+
+        if (
+            config.data &&
+            config.headers['Content-Type'] ===
+            'application/x-www-form-urlencoded;charset=UTF-8'
+        )
+        // do something before request is sent
+
+        // if (store.getters.token) {
+        //     // let each request carry token
+        //     // ['X-Token'] is a custom headers key
+        //     // please modify it according to the actual situation
+        //     config.headers['X-Token'] = getToken()
+        // }
+
+            if (config.method == 'get') {
+                let ext_str = config.url.indexOf('?') == -1 ? '?' : '&';
+                let obj_val = '';
+                for (let k in config.data) {
+                    obj_val += k + "=" + config.data[k] + "&";
+                }
+                config.url += ext_str + obj_val;
+            }
+            // return config;
+
+        return config
+    },
+    error => {
+        // do something with request error
+        console.log(error) // for debug
+        return Promise.reject(error)
+    }
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    response => {
+        const res = response.data
+
+        // console.log(res)
+
+
+        return res
+
+        // if the custom code is not 20000, it is judged as an error.
+        // if (res.code !== 200) {
+        //     Message({
+        //         message: res.message || 'Error',
+        //         type: 'error',
+        //         duration: 5 * 1000
+        //     })
+
+        //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+        //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        //         // to re-login
+        //         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //             confirmButtonText: 'Re-Login',
+        //             cancelButtonText: 'Cancel',
+        //             type: 'warning'
+        //         }).then(() => {
+        //             store.dispatch('user/resetToken').then(() => {
+        //                 location.reload()
+        //             })
+        //         })
+        //     }
+        //     return Promise.reject(new Error(res.message || 'Error'))
+        // } else {
+        //     return res
+        // }
+    },
+    error => {
+        // console.log('err' + error.response.data.msg) // for debug
+        ElMessage({
+            message: error.response.config.url === '/user/login?' ? error.response.data.msg : error.message,
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    }
+
+)
+
+export default service

.history/src/views/login_20211209113354.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="loginBox">
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+      <p class="loginTitle">用户登录</p>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            max="6"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            maxlength="9"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from "../api/login/user.js";
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api({data:{
+        username: "admin",
+        password: "admin123",
+      }});
+      sessionStorage.setItem("userInfo", "admin");
+    },
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.loginData = requset.data;
+          console.log(this.loginData);
+          this.$router.push({ path: "/home" });
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.bigTit {
+  position: absolute;
+  top: -90px;
+  left: 7px;
+  text-align: center;
+  width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+
+  //   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      // height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      // line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

.history/src/views/login_20211209113425.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="loginBox">
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+      <p class="loginTitle">用户登录</p>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            max="6"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            maxlength="9"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from "../api/login/user.js";
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api({
+        username: "admin",
+        password: "admin123",
+      });
+      sessionStorage.setItem("userInfo", "admin");
+    },
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.loginData = requset.data;
+          console.log(this.loginData);
+          this.$router.push({ path: "/home" });
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.bigTit {
+  position: absolute;
+  top: -90px;
+  left: 7px;
+  text-align: center;
+  width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+
+  //   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      // height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      // line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

.history/src/views/login_20211209114330.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="loginBox">
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+      <p class="loginTitle">用户登录</p>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            max="6"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            maxlength="9"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from "../api/login/user.js";
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api("admin", "admin123" );
+      sessionStorage.setItem("userInfo", "admin");
+    },
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.loginData = requset.data;
+          console.log(this.loginData);
+          this.$router.push({ path: "/home" });
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.bigTit {
+  position: absolute;
+  top: -90px;
+  left: 7px;
+  text-align: center;
+  width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+
+  //   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      // height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      // line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

.history/src/views/login_20211209114342.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="loginBox">
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+      <p class="loginTitle">用户登录</p>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            max="6"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            maxlength="9"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from "../api/login/user.js";
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api("admin", "admin123");
+      sessionStorage.setItem("userInfo", "admin");
+    },
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.loginData = requset.data;
+          console.log(this.loginData);
+          this.$router.push({ path: "/home" });
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.bigTit {
+  position: absolute;
+  top: -90px;
+  left: 7px;
+  text-align: center;
+  width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+
+  //   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      // height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      // line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

.history/src/views/login_20211209114417.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="loginBox">
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+      <p class="loginTitle">用户登录</p>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            max="6"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            maxlength="9"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from "../api/login/user.js";
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api({
+        username: "admin",
+        password: "admin123",
+      });
+      sessionStorage.setItem("userInfo", "admin");
+    },
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.loginData = requset.data;
+          console.log(this.loginData);
+          this.$router.push({ path: "/home" });
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+  },
+};
+</script>
+
+<style lang="scss">
+.bigTit {
+  position: absolute;
+  top: -90px;
+  left: 7px;
+  text-align: center;
+  width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+
+  //   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      // height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      // line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/utils/request.js

@@ -13,7 +13,7 @@ const service = axios.create({
         withCredentials: true, // send cookies when cross-domain requests
         timeout: 5000, // request timeout
         headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
         },
     })
     // request interceptor