change login by username

src/api/login.js

 import fetch from 'utils/fetch';
 
-export function loginByEmail(email, password) {
+export function loginByUsername(username, password) {
   const data = {
-    email,
+    username,
     password
   };
   return fetch({
-    url: '/login/loginbyemail',
+    url: '/login/login',
     method: 'post',
     data
   });

src/mock/index.js

-import Mock from 'mockjs';
-import loginAPI from './login';
-import articleAPI from './article';
-import article_tableAPI from './article_table';
-import remoteSearchAPI from './remoteSearch';
-
+import Mock from 'mockjs'
+import loginAPI from './login'
+import articleAPI from './article'
+import article_tableAPI from './article_table'
+import remoteSearchAPI from './remoteSearch'
 
 // 登录相关
-Mock.mock(/\/login\/loginbyemail/, 'post', loginAPI.loginByEmail);
-Mock.mock(/\/login\/logout/, 'post', loginAPI.logout);
+Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
+Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
 Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
 
-// // 文章相关
-Mock.mock(/\/article\/list/, 'get', articleAPI.getList);
-Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle);
-
-// // table example相关
-Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList);
-Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv);
+// 文章相关
+Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
+Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
 
-// // 搜索相关
-Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser);
+// table example相关
+Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
+Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
 
+// 搜索相关
+Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
 
-export default Mock;
+export default Mock

src/mock/login.js

@@ -25,9 +25,9 @@ const userMap = {
 }
 
 export default {
-  loginByEmail: config => {
-    const { email } = JSON.parse(config.body);
-    return userMap[email.split('@')[0]];
+  loginByUsername: config => {
+    const { username } = JSON.parse(config.body);
+    return userMap[username];
   },
   getInfo: config => {
     const { token } = param2Obj(config.url);

src/store/modules/user.js

-import { loginByEmail, logout, getInfo } from 'api/login';
+import { loginByUsername, logout, getInfo } from 'api/login';
 import { getToken, setToken, removeToken } from 'utils/auth';
 
 const user = {
@@ -50,11 +50,11 @@ const user = {
   },
 
   actions: {
-    // 邮箱登录
-    LoginByEmail({ commit }, userInfo) {
-      const email = userInfo.email.trim();
+    // 用户名登录
+    LoginByUsername({ commit }, userInfo) {
+      const username = userInfo.username.trim();
       return new Promise((resolve, reject) => {
-        loginByEmail(email, userInfo.password).then(response => {
+        loginByUsername(username, userInfo.password).then(response => {
           const data = response.data;
           setToken(response.data.token);
           commit('SET_TOKEN', data.token);

src/utils/validate.js

@@ -3,9 +3,9 @@
  */
 
 /* 是否是公司邮箱*/
-export function isWscnEmail(str) {
-  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
-  return reg.test(str.trim());
+export function isvalidUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0;
 }
 
 /* 合法uri*/

src/views/dashboard/index.vue

@@ -21,7 +21,6 @@
       ...mapGetters([
         'name',
         'avatar',
-        'email',
         'introduction',
         'roles'
       ])

src/views/login/index.vue

 <template>
   <div class="login-container">
-    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
-      class="card-box login-form">
+    <el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
       <h3 class="title">系统登录</h3>
-      <el-form-item prop="email">
-        <span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
-        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
+
+      <el-form-item prop="username">
+        <span class="svg-container svg-container_login">
+          <icon-svg icon-class="yonghuming" />
+        </span>
+        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
       </el-form-item>
+
       <el-form-item prop="password">
-        <span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
-        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-          placeholder="密码"></el-input>
+        <span class="svg-container">
+          <icon-svg icon-class="mima" />
+        </span>
+        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+          placeholder="密码" />
+        <span class='show-pwd' @click='showPwd'><icon-svg icon-class="yanjing" /></span>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
-          登录
-        </el-button>
-      </el-form-item>
-      <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
-      <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
+
+      <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
+
+      <div class='tips'>账号:admin 密码随便填</div>
+      <div class='tips'>账号:editor  密码随便填</div>
     </el-form>
 
     <el-dialog title="第三方验证" :visible.sync="showDialog">
       邮箱登录成功,请选择第三方验证
-      <social-sign></social-sign>
+      <social-sign />
     </el-dialog>
 
   </div>
 </template>
 
 <script>
-  import { isWscnEmail } from 'utils/validate';
-  import socialSign from './socialsignin';
+  import { isvalidUsername } from 'utils/validate'
+  import socialSign from './socialsignin'
 
   export default {
     components: { socialSign },
     name: 'login',
     data() {
-      const validateEmail = (rule, value, callback) => {
-        if (!isWscnEmail(value)) {
-          callback(new Error('请输入正确的合法邮箱'));
+      const validateUsername = (rule, value, callback) => {
+        if (!isvalidUsername(value)) {
+          callback(new Error('请输入正确的用户名'))
         } else {
-          callback();
+          callback()
+        }
       }
-      };
-      const validatePass = (rule, value, callback) => {
+      const validatePassword = (rule, value, callback) => {
         if (value.length < 6) {
-          callback(new Error('密码不能小于6位'));
+          callback(new Error('密码不能小于6位'))
         } else {
-          callback();
+          callback()
+        }
       }
-      };
       return {
         loginForm: {
-          email: 'admin@wallstreetcn.com',
-          password: ''
+          username: 'admin',
+          password: '1111111'
         },
         loginRules: {
-          email: [
-                { required: true, trigger: 'blur', validator: validateEmail }
-          ],
-          password: [
-                { required: true, trigger: 'blur', validator: validatePass }
-          ]
+          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+          password: [{ required: true, trigger: 'blur', validator: validatePassword }]
         },
+        pwdType: 'password',
         loading: false,
         showDialog: false
       }
     },
     methods: {
+      showPwd() {
+        if (this.pwdType === 'password') {
+          this.pwdType = ''
+        } else {
+          this.pwdType = 'password'
+        }
+      },
       handleLogin() {
         this.$refs.loginForm.validate(valid => {
           if (valid) {
-            this.loading = true;
-            this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
-              this.loading = false;
-              this.$router.push({ path: '/' });
-                // this.showDialog = true;
+            this.loading = true
+            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
+              this.loading = false
+              this.$router.push({ path: '/' })
+                // this.showDialog = true
             }).catch(() => {
-              this.loading = false;
-            });
+              this.loading = false
+            })
           } else {
-            console.log('error submit!!');
-            return false;
+            console.log('error submit!!')
+            return false
           }
-        });
+        })
       },
       afterQRScan() {
-          // const hash = window.location.hash.slice(1);
-          // const hashObj = getQueryObject(hash);
-          // const originUrl = window.location.origin;
-          // history.replaceState({}, '', originUrl);
+          // const hash = window.location.hash.slice(1)
+          // const hashObj = getQueryObject(hash)
+          // const originUrl = window.location.origin
+          // history.replaceState({}, '', originUrl)
           // const codeMap = {
           //   wechat: 'code',
           //   tencent: 'code'
-          // };
-          // const codeName = hashObj[codeMap[this.auth_type]];
+          // }
+          // const codeName = hashObj[codeMap[this.auth_type]]
           // if (!codeName) {
-          //   alert('第三方登录失败');
+          //   alert('第三方登录失败')
           // } else {
           //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-          //     this.$router.push({ path: '/' });
-          //   });
+          //     this.$router.push({ path: '/' })
+          //   })
           // }
       }
     },
     created() {
-        // window.addEventListener('hashchange', this.afterQRScan);
+        // window.addEventListener('hashchange', this.afterQRScan)
     },
     destroyed() {
-        // window.removeEventListener('hashchange', this.afterQRScan);
+        // window.removeEventListener('hashchange', this.afterQRScan)
     }
   }
 </script>
@@ -119,7 +127,7 @@
   .tips {
     font-size: 14px;
     color: #fff;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
   }
 
   .login-container {
@@ -147,6 +155,12 @@
     .svg-container {
       padding: 6px 5px 6px 15px;
       color: #889aa4;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
+      &_login{
+        font-size:20px;
+      }
     }
     .title {
       font-size: 26px;
@@ -170,8 +184,13 @@
       border-radius: 5px;
       color: #454545;
     }
-    .forget-pwd {
-      color: #fff;
+    .show-pwd{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: #889aa4;
+    cursor: pointer;
     }
   }
 </style>