登录页面功能完善

package.json

@@ -10,7 +10,10 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "element-ui": "^2.15.5",
+    "element-ui": "^2.9.2",
+    "jquery": "^3.6.0",
+    "js-cookie": "3.0.0",
+    "jsencrypt": "^3.0.0-rc.1",
     "json-server": "^0.16.3",
     "mockjs": "^1.1.0",
     "moment": "^2.29.1",

src/assets/icon/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 2766225 */
+  src: url('iconfont.woff2?t=1629798949041') format('woff2'),
+       url('iconfont.woff?t=1629798949041') format('woff'),
+       url('iconfont.ttf?t=1629798949041') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-solid-home:before {
+  content: "\e641";
+}
+
+.icon-dingwei:before {
+  content: "\e692";
+}
+
+.icon-wenjian:before {
+  content: "\e60c";
+}
+
+.icon-diannao:before {
+  content: "\e602";
+}
+
+.icon-IOTtubiao_huabanfuben:before {
+  content: "\e61a";
+}
+
+.icon-xiajiantou:before {
+  content: "\e60a";
+}
+
+.icon-bianpo:before {
+  content: "\e794";
+}
+
+.icon-yezi:before {
+  content: "\e7d8";
+}
+
+.icon-kuaizhuanggengduo:before {
+  content: "\e6b4";
+}
+
+.icon-wenjianjia:before {
+  content: "\e813";
+}
+
+.icon-car-fill:before {
+  content: "\eb91";
+}
+

src/assets/icon/iconfont.json

+{
+  "id": "2766225",
+  "name": "鑫海",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1221894",
+      "name": "房子 实心",
+      "font_class": "solid-home",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "1507976",
+      "name": "定位",
+      "font_class": "dingwei",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "1972966",
+      "name": "文件",
+      "font_class": "wenjian",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "6027490",
+      "name": "电脑",
+      "font_class": "diannao",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "9572488",
+      "name": "门",
+      "font_class": "IOTtubiao_huabanfuben",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "13474459",
+      "name": "下箭头",
+      "font_class": "xiajiantou",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "15196692",
+      "name": "边坡",
+      "font_class": "bianpo",
+      "unicode": "e794",
+      "unicode_decimal": 59284
+    },
+    {
+      "icon_id": "15905225",
+      "name": "叶子",
+      "font_class": "yezi",
+      "unicode": "e7d8",
+      "unicode_decimal": 59352
+    },
+    {
+      "icon_id": "16516751",
+      "name": "块状更多",
+      "font_class": "kuaizhuanggengduo",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "17710966",
+      "name": "文件夹",
+      "font_class": "wenjianjia",
+      "unicode": "e813",
+      "unicode_decimal": 59411
+    },
+    {
+      "icon_id": "19691553",
+      "name": "车",
+      "font_class": "car-fill",
+      "unicode": "eb91",
+      "unicode_decimal": 60305
+    }
+  ]
+}

src/axios/api.js

 //-----------------登录--------------------
-export const login = 'xxx/login'; //登录
\ No newline at end of file
+export const login = 'auth/login'; //登录
+export const code = 'auth/code'; 
\ No newline at end of file

src/axios/whiteList.js

+//不在此定义的url,isMock默认为true
+export default [
+    {
+        key: 'login',
+        isMock: false
+    }
+];

src/common/httpBean.js

@@ -2,6 +2,8 @@ import axios from '../axios/axiosConfig';
 import { config as appConfig } from '../config.js';
 import * as api from '../axios/api.js';
 import qs from 'qs';
+import whiteList from '../axios/whiteList';
+
 
 if (!appConfig.BASE_URL) {
     appConfig.BASE_URL = appConfig.REAL_URL;

src/config.js

 // 项目配置相关
 const config = {
-    BASE_URL: 'http://localhost:30003/hlkj/', //mokc地址
-    REAL_URL: 'http://localhost:30003/hlkj/', //mokc地址
+    // BASE_URL: 'http://localhost:8013/', //mock地址
+    // REAL_URL: 'http://localhost:8013/', //mock地址
+    BASE_URL: 'http://192.168.0.108:8013/', //mock地址
+    REAL_URL: 'http://192.168.0.108:8013/', //mock地址
     TOKEN_KEY: 'token',
     USER_KEY: 'userInfo',
     URL_KEY: 'urlInfo'

src/main.js

@@ -2,6 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import '../plugins/jquery-2.1.1.min.js';
+import $ from 'jquery'
+import './assets/icon/iconfont.css'
+Vue.prototype.$ = $;
+
+
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 

src/store/index.js

@@ -6,7 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     projectName:"鑫海数字矿山后台管理系统",
-
+    platformName:"鑫海数字矿山后台管理平台",
   },
   mutations: {
   },

src/utils/rsaEncrypt.js

+import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
+  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
+
+const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
+  'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
+  'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
+  '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
+  'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
+  'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
+  '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
+  'tTbklZkD2A=='
+
+// 加密
+export function encrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey) // 设置公钥
+  return encryptor.encrypt(txt) // 对需要加密的数据进行加密
+}
+
+// 解密
+export function decrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPrivateKey(privateKey)
+  return encryptor.decrypt(txt)
+}

src/views/homepage.vue

 <template>
-    <div>主页</div>
+  <div class="viewBody">
+    <div class="topMenuBar">
+      <span>{{ $store.state.platformName }}</span>
+      <div class="userInformationBar">
+        <div>
+          <span>用户权限</span>
+          <span class="iconfont icon-xiajiantou" style="font-size:18px;"></span>
+        </div>
+        <div>
+          <span>131313132</span>
+          <i class="el-icon-caret-bottom"></i>
+        </div>
+      </div>
+    </div>
+    <div class="mainBody">
+      <div class="leftMenuBar">
+        <el-row class="tac">
+          <el-col :span="12">
+            <el-menu
+              class="el-menu-vertical-demo"
+              @open="handleOpen"
+              @close="handleClose"
+              background-color="rgb(9, 26, 69)"
+              text-color="#fff"
+              active-text-color="#ffd04b"
+              :unique-opened="true"
+            >
+
+              <el-menu-item index="1">
+                    <i class="el-icon-menu"></i>
+                    <span slot="title">导航一</span>
+              </el-menu-item>
+              <el-submenu index="2">
+                    <template slot="title">
+                        <i class="el-icon-location"></i>
+                        <span>导航二</span>
+                    </template>
+                    <el-menu-item index="2-1">选项1</el-menu-item>
+                    <el-menu-item index="2-2">选项2</el-menu-item>
+              </el-submenu>
+
+            </el-menu>
+          </el-col>
+        </el-row>
+      </div>
+
+      <router-view></router-view>
+
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-
-}
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleId(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
 </script>
 
 <style>
-
+* {
+  margin: 0;
+  padding: 0;
+}
+.topMenuBar {
+  width: 100%;
+  height: 70px;
+  background: -webkit-linear-gradient(rgb(14, 35, 94), rgb(9, 26, 69));
+  padding: 0px 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.topMenuBar > span {
+  background-image: -webkit-linear-gradient(
+    bottom,
+    rgb(182, 205, 249),
+    rgb(255, 255, 255)
+  );
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 3px;
+  line-height: 70px;
+  font-size: 31px;
+  font-weight: 600;
+}
+.userInformationBar {
+  color: rgb(151, 227, 244);
+  display: flex;
+}
+.userInformationBar i {
+  width: 21px;
+  height: 21px;
+}
+.mainBody{
+    height: 100vh;
+    overflow: hidden;
+}
+.leftMenuBar>.tac>.el-col>ul{
+    width: 240px;
+    height: 100vh;
+}
 </style>
\ No newline at end of file

src/views/login.vue

@@ -7,11 +7,11 @@
       <div class="loginInoputs">
         <div class="userInpBody">
           <div class="userIcon"><img src="../imgs/yonghuming.png"></div>
-          <input type="text" id="userInp" placeholder="输入你的用户名" v-model="userName">
+          <input type="text" id="userInp" placeholder="输入你的用户名" v-model="loginForm.username">
         </div>
         <div class="passWordInpBody">
           <div class="passWordIcon"><img src="../imgs/mima.png"></div>
-          <input type="password" id="passWordInp" placeholder="输入你的密码" v-model="password">
+          <input type="password" id="passWordInp" placeholder="输入你的密码" v-model="loginForm.password">
         </div>
         <button class="loginBtn" @click="LoginInitiation">安全登录</button>
       </div>
@@ -20,23 +20,75 @@
 </template>
 <script>
 import { httpGet } from "@/common/httpBean.js"
-import login from "@/axios/api.js"
+import {login,code} from "@/axios/api.js"
+import {encrypt} from "@/utils/rsaEncrypt.js"
+import Cookies from 'js-cookie'
+
+
 export default {
   data() {
     return {
-      userName:"",
-      password:"",
+       loginForm: {
+        username: '',
+        password: '',
+        uuid: ''
+      },
     }
   },
+  created(){
+     // 获取验证码
+    this.getCode()
+    // 获取用户名密码等Cookie
+    //this.getCookie()
+  },
   methods:{
+     getCode() {
+       httpGet(code).then(res=> {
+          //console.log(res.uuid);
+          this.uuid = res.uuid;
+       });
+    },
+    getCookie() {
+      const username = Cookies.get('username')
+      let password = Cookies.get('password')
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? '' : password
+      password = password === undefined ? this.loginForm.password : password
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password,
+      }
+    },
     LoginInitiation(){
-      if(this.userName == "" || this.password == ""){
+      if(this.loginForm.userName == "" || this.loginForm.password == ""){
           alert("请输入正确的用户名或密码!")
       }else{
-        // httpGet(login,{name:123,id:123}).then( res => {
-        //   console.log(res);
-        //   //localStorage.getItem()
-        // })
+        httpGet(login).then( res => {
+          console.log(res);
+          this.$refs.loginForm.validate(valid => {
+            const user = {
+              username: this.loginForm.username,
+              password: this.loginForm.password,
+              uuid: this.loginForm.uuid
+            }
+            if (user.password !== this.cookiePass) {
+              user.password = encrypt(user.password)
+            }
+            if (valid) {
+              this.loading = true
+              if (user.rememberMe) {
+                Cookies.set('username', user.username, { expires: Config.passCookieExpires })
+                Cookies.set('password', user.password, { expires: Config.passCookieExpires })
+              } else {
+                Cookies.remove('username')
+                Cookies.remove('password')
+              }
+            } else {
+              console.log('error submit!!')
+              return false
+            }
+          })
+        })
         this.$router.push({path: 'homepage',query:{ index:this.userName}});
       }
     }

vue.config.js

 const path = require("path");
+const webpack = require('webpack')
 
 function resolve(dir) {
     return path.join(__dirname,dir);
@@ -112,5 +113,14 @@ module.exports = {
     pwa: {},
 
     // 可以用来传递任何第三方插件选项
-    pluginOptions: {}
+    pluginOptions: {},
+    configureWebpack:{
+        plugins:[
+            new webpack.ProvidePlugin({
+                $:"jquery", 
+                jQuery:"jquery", 
+                "windows.jQuery":"jquery"
+            })
+        ]
+    }
 }
\ No newline at end of file