修改请求方式

.history/src/api/login/user_20210729162857.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/user/login`,
+            method: 'GET',
+            params: params
+        })
+    },
+}

.history/src/api/login/user_20211208173508.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/user/login`,
+            method: 'post',
+            data: params
+        })
+    },
+}

.history/src/api/login/user_20211208173838.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/user/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208173857.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/user/login`,
+            method: 'post',
+            data: params
+        })
+    },
+}

.history/src/api/login/user_20211208174022.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data: params
+        })
+    },
+}

.history/src/api/login/user_20211208174029.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208174726.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data: params
+        })
+    },
+}

.history/src/api/login/user_20211208175022.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208175033.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208175412.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data: data
+        })
+    },
+}

.history/src/api/login/user_20211208175420.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208175623.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    async function login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208175627.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208180035.js

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

.history/src/api/login/user_20211208180059.js

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

.history/src/api/login/user_20211208180110.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_20211208180122.js

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

.history/src/api/login/user_20211208180221.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_20211208180313.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+
+export async function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208180348.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}
+
+export default {
+
+    // 站点总数数据请求
+    login_api(data) {
+        return request({
+            url: `/login`,
+            method: 'post',
+            data
+        })
+    },
+}

.history/src/api/login/user_20211208180522.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
+}
+
+// export default {
+
+//     // 站点总数数据请求
+//     login_api(data) {
+//         return request({
+//             url: `/login`,
+//             method: 'post',
+//             data
+//         })
+//     },
+// }

.history/src/api/login/user_20211208180923.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_20211208174447.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208174749.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208174755.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208174807.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208174812.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208174949.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175056.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175230.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175307.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175452.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175510.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175654.js

@@ -0,0 +1,111 @@
+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()
+            // 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_20211208175750.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_20211208175758.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_20211208175840.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_20211208180037.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_20211208180833.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_20211208180844.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/views/login_20210803095432.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 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({
+        name: "admin",
+        password: 123456,
+      });
+      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_20211208170849.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="6"
+            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 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: 6,
+            message: "密码长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api({
+        name: "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_20211208170904.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="6"
+            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 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: 6,
+            message: "密码长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+    this.loginFree();
+  },
+
+  methods: {
+    loginFree() {
+      this.login_api({
+        name: "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_20211208172238.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="6"
+            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 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({
+        name: "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_20211208172317.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 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({
+        name: "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_20211208173528.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 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({
+        name: "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_20211208173534.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 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_20211208175329.vue

@@ -0,0 +1,288 @@
+<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 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() {
+      var user = {
+        username: "admin",
+        password: "admin123",
+      };
+      this.login_api(user);
+      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_20211208175348.vue

@@ -0,0 +1,288 @@
+<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 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() {
+      var user = {
+        username: "admin",
+        password: "admin123",
+      };
+      this.login_api(user);
+      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_20211208175357.vue

@@ -0,0 +1,288 @@
+<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 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() {
+      var user = {
+        username: "admin",
+        password: "admin123",
+      };
+      this.login_api(user);
+      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_20211208175430.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 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_20211208180211.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 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() {
+      await 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_20211208180226.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 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_20211208180749.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/api/login/user.js

@@ -1,13 +1,10 @@
 import request from '@/utils/request'
 
-export default {
 
-    // 站点总数数据请求
-    login_api(params) {
-        return request({
-            url: `/user/login`,
-            method: 'GET',
-            params: params
-        })
-    },
+export function login_api(data) {
+    return request({
+        url: '/login',
+        method: 'POST',
+        data,
+    })
 }

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/x-www-form-urlencoded;charset=UTF-8'
+            'Content-Type': 'application/json;charset=UTF-8'
         },
     })
     // request interceptor
@@ -22,7 +22,13 @@ service.interceptors.request.use(
 
         config.data = qs.stringify(config.data);
         config.headers.token = getToken()
-            // do something before request is sent
+
+        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
@@ -31,15 +37,15 @@ service.interceptors.request.use(
         //     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] + "&";
+            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;
             }
-            config.url += ext_str + obj_val;
-        }
-        // return config;
+            // return config;
 
         return config
     },

src/views/login.vue

@@ -26,7 +26,7 @@
             v-model="loginForm.password"
             type="password"
             placeholder="请输入密码"
-            maxlength="6"
+            maxlength="9"
             auto-complete="new-password"
             clearable
             autocomplete="off"
@@ -44,7 +44,7 @@
   </div>
 </template>
 <script>
-import api from "../api/login/user.js";
+import * as api from "../api/login/user.js";
 import { ElMessage } from "element-plus";
 export default {
   data() {
@@ -73,8 +73,8 @@ export default {
           { required: true, message: "请输密码", trigger: "blur" },
           {
             min: 3,
-            max: 6,
-            message: "密码长度在 3 到 6 个字符",
+            max: 9,
+            message: "密码长度在 3 到 9 个字符",
             trigger: "blur",
           },
         ],
@@ -91,8 +91,8 @@ export default {
   methods: {
     loginFree() {
       this.login_api({
-        name: "admin",
-        password: 123456,
+        username: "admin",
+        password: "admin123",
       });
       sessionStorage.setItem("userInfo", "admin");
     },