术习电报 / electron-vue-template

转到一个项目
切换导航栏
切换导航栏固定状态
张恒
ce6bc8f2 1 个父辈 1ea21908

加入登录验证，配合花裤衩大大最新的远程mock结果

内嵌 并排
正在显示 17 个修改的文件 包含 245 行增加 和 172 行删除
...@@ -52,6 +52,7 @@ let mainConfig = { ...@@ -52,6 +52,7 @@ let mainConfig = {
52 new webpack.NoEmitOnErrorsPlugin() 52 new webpack.NoEmitOnErrorsPlugin()
53 ], 53 ],
54 resolve: { 54 resolve: {
55 +
55 extensions: ['.js', '.json', '.node'] 56 extensions: ['.js', '.json', '.node']
56 }, 57 },
57 target: 'electron-main' 58 target: 'electron-main'
......
1 module.exports = { 1 module.exports = {
2 NODE_ENV: '"production"', 2 NODE_ENV: '"production"',
3 - BASE_API: '""' 3 + BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
4 } 4 }
......
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
31 "dist/electron/**/*" 31 "dist/electron/**/*"
32 ], 32 ],
33 "dmg": { 33 "dmg": {
34 - "contents": [{ 34 + "contents": [
35 + {
35 "x": 410, 36 "x": 410,
36 "y": 150, 37 "y": 150,
37 "type": "link", 38 "type": "link",
...@@ -61,6 +62,7 @@ ...@@ -61,6 +62,7 @@
61 "js-cookie": "^2.2.0", 62 "js-cookie": "^2.2.0",
62 "nedb": "^1.8.0", 63 "nedb": "^1.8.0",
63 "nprogress": "^0.2.0", 64 "nprogress": "^0.2.0",
65 + "sortablejs": "^1.10.0-rc3",
64 "vue": "^2.6.10", 66 "vue": "^2.6.10",
65 "vue-electron": "^1.0.6", 67 "vue-electron": "^1.0.6",
66 "vue-router": "^3.0.7", 68 "vue-router": "^3.0.7",
...@@ -132,4 +134,4 @@ ...@@ -132,4 +134,4 @@
132 "webpack-hot-middleware": "^2.25.0", 134 "webpack-hot-middleware": "^2.25.0",
133 "webpack-merge": "^4.2.1" 135 "webpack-merge": "^4.2.1"
134 } 136 }
135 -}
...\ No newline at end of file ...\ No newline at end of file
137 +}
......
...@@ -5,7 +5,6 @@ import { ...@@ -5,7 +5,6 @@ import {
5 BrowserWindow, 5 BrowserWindow,
6 Menu 6 Menu
7 } from 'electron' 7 } from 'electron'
8 -import '../renderer/store'
9 import menuconfig from './menu' 8 import menuconfig from './menu'
10 9
11 /** 10 /**
......
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 2
3 -export function login (username, password) { 3 +export function login (data) {
4 return request({ 4 return request({
5 url: '/user/login', 5 url: '/user/login',
6 method: 'post', 6 method: 'post',
7 - data: { 7 + data
8 - username,
9 - password
10 - }
11 }) 8 })
12 } 9 }
13 10
......
1 -import db from '../utils/db' 1 +import db from '@/utils/db'
2 2
3 export default { 3 export default {
4 adddata (data) { 4 adddata (data) {
......
1 <template> 1 <template>
2 <div id="wrapper"> 2 <div id="wrapper">
3 - <img id="logo" src="~@/assets/logo.png" alt="electron-vue"> 3 + <img id="logo" src="~@/assets/logo.png" alt="electron-vue" />
4 <main> 4 <main>
5 <div class="left-side"> 5 <div class="left-side">
6 - <span class="title">Welcome to your new project!</span> 6 + <span class="title">欢迎进入本框架</span>
7 <system-information></system-information> 7 <system-information></system-information>
8 <div v-if="textarray.length === 0"> 8 <div v-if="textarray.length === 0">
9 <span>{{text}}</span> 9 <span>{{text}}</span>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 17
18 <div class="right-side"> 18 <div class="right-side">
19 <div class="doc"> 19 <div class="doc">
20 - <div class="title alt">Other Documentation</div> 20 + <div class="title alt">您可以点击的按钮</div>
21 <el-button type="primary" round @click="open()">控制台打印</el-button> 21 <el-button type="primary" round @click="open()">控制台打印</el-button>
22 <el-button type="primary" round @click="setdata">写入数据</el-button> 22 <el-button type="primary" round @click="setdata">写入数据</el-button>
23 <el-button type="primary" round @click="getdata">读取数据</el-button> 23 <el-button type="primary" round @click="getdata">读取数据</el-button>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 30
31 <script> 31 <script>
32 import SystemInformation from "./LandingPage/SystemInformation"; 32 import SystemInformation from "./LandingPage/SystemInformation";
33 -import api from '../tools/dialog' 33 +import api from "../tools/dialog";
34 export default { 34 export default {
35 name: "landing-page", 35 name: "landing-page",
36 components: { SystemInformation }, 36 components: { SystemInformation },
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
45 methods: { 45 methods: {
46 // 获取electron方法 46 // 获取electron方法
47 open() { 47 open() {
48 - console.log(this.$electron); 48 + console.log(this.$store);
49 }, 49 },
50 // 设置数据库的数据 50 // 设置数据库的数据
51 setdata() { 51 setdata() {
...@@ -66,28 +66,28 @@ export default { ...@@ -66,28 +66,28 @@ export default {
66 .catch(err => console.log(err)); 66 .catch(err => console.log(err));
67 }, 67 },
68 // 清空数据库的数据 68 // 清空数据库的数据
69 - deledata(){ 69 + deledata() {
70 // dialog为electron实例，data则是显示需要的参数，fun是需要执行的函数，此选项不是为必选的 70 // dialog为electron实例，data则是显示需要的参数，fun是需要执行的函数，此选项不是为必选的
71 - const dialog = this.$electron.remote.dialog 71 + const dialog = this.$electron.remote.dialog;
72 + const data = {
73 + title: "清除数据",
74 + buttons: ["OK", "Cancel"],
75 + message: "此操作会清空本地数据库中的所有数据，是否继续？"
76 + };
77 + const fun = this.$db.deleall({ name: "yyy" });
78 + api.MessageBox(dialog, data, fun).then(res => {
79 + this.getdata();
80 + this.$message({
81 + showClose: true,
82 + message: "成功删除" + res + "条",
83 + type: "success"
84 + });
85 + });
72 // const data = { 86 // const data = {
73 - // title:'清除数据', 87 + // title:'发生致命错误',
74 - // buttons:['OK', 'Cancel'], 88 + // message:'?'
75 - // message:'此操作会清空本地数据库中的所有数据，是否继续？'
76 // } 89 // }
77 - // const fun = this.$db.deleall({name:'yyy'}) 90 + // api.ErrorMessageBox(dialog,data)
78 - // api.MessageBox(dialog,data,fun).then(res=>{
79 - // this.getdata()
80 - // this.$message({
81 - // showClose: true,
82 - // message: '成功删除'+res+'条',
83 - // type: 'success'
84 - // });
85 - // })
86 - const data = {
87 - title:'发生致命错误',
88 - message:'?'
89 - }
90 - api.ErrorMessageBox(dialog,data)
91 }, 91 },
92 } 92 }
93 }; 93 };
......
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="title">Information</div> 3 + <div class="title">关于系统</div>
4 <div class="items"> 4 <div class="items">
5 <div class="item"> 5 <div class="item">
6 - <div class="name">Path:</div> 6 + <div class="name">当前所在页面:</div>
7 <div class="value">{{ path }}</div> 7 <div class="value">{{ path }}</div>
8 </div> 8 </div>
9 <div class="item"> 9 <div class="item">
10 - <div class="name">Route Name:</div> 10 + <div class="name">当前页面名称:</div>
11 <div class="value">{{ name }}</div> 11 <div class="value">{{ name }}</div>
12 </div> 12 </div>
13 <div class="item"> 13 <div class="item">
14 - <div class="name">Vue.js:</div> 14 + <div class="name">Vue.js版本:</div>
15 <div class="value">{{ vue }}</div> 15 <div class="value">{{ vue }}</div>
16 </div> 16 </div>
17 <div class="item"> 17 <div class="item">
18 - <div class="name">Electron:</div> 18 + <div class="name">Electron版本:</div>
19 <div class="value">{{ electron }}</div> 19 <div class="value">{{ electron }}</div>
20 </div> 20 </div>
21 <div class="item"> 21 <div class="item">
22 - <div class="name">Node:</div> 22 + <div class="name">Node版本:</div>
23 <div class="value">{{ node }}</div> 23 <div class="value">{{ node }}</div>
24 </div> 24 </div>
25 <div class="item"> 25 <div class="item">
26 - <div class="name">Platform:</div> 26 + <div class="name">所运行的系统:</div>
27 <div class="value">{{ platform }}</div> 27 <div class="value">{{ platform }}</div>
28 </div> 28 </div>
29 </div> 29 </div>
...@@ -41,6 +41,9 @@ ...@@ -41,6 +41,9 @@
41 platform: require('os').platform(), 41 platform: require('os').platform(),
42 vue: require('vue/package.json').version 42 vue: require('vue/package.json').version
43 } 43 }
44 + },
45 + mounted(){
46 + console.log(this.$route)
44 } 47 }
45 } 48 }
46 </script> 49 </script>
...@@ -58,7 +61,9 @@ ...@@ -58,7 +61,9 @@
58 61
59 .item { 62 .item {
60 display: flex; 63 display: flex;
64 + align-items: center;
61 margin-bottom: 6px; 65 margin-bottom: 6px;
66 + line-height: 24px;
62 } 67 }
63 68
64 .item .name { 69 .item .name {
......
1 let callbacks = [] 1 let callbacks = []
2 2
3 -function loadedTinymce() { 3 +function loadedTinymce () {
4 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144 4 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
5 // check is successfully downloaded script 5 // check is successfully downloaded script
6 return window.tinymce 6 return window.tinymce
...@@ -8,7 +8,7 @@ function loadedTinymce() { ...@@ -8,7 +8,7 @@ function loadedTinymce() {
8 8
9 const dynamicLoadScript = (src, callback) => { 9 const dynamicLoadScript = (src, callback) => {
10 const existingScript = document.getElementById(src) 10 const existingScript = document.getElementById(src)
11 - const cb = callback || function() {} 11 + const cb = callback || function () {}
12 12
13 if (!existingScript) { 13 if (!existingScript) {
14 const script = document.createElement('script') 14 const script = document.createElement('script')
...@@ -28,8 +28,8 @@ const dynamicLoadScript = (src, callback) => { ...@@ -28,8 +28,8 @@ const dynamicLoadScript = (src, callback) => {
28 } 28 }
29 } 29 }
30 30
31 - function stdOnEnd(script) { 31 + function stdOnEnd (script) {
32 - script.onload = function() { 32 + script.onload = function () {
33 // this.onload = null here is necessary 33 // this.onload = null here is necessary
34 // because even IE9 works not like others 34 // because even IE9 works not like others
35 this.onerror = this.onload = null 35 this.onerror = this.onload = null
...@@ -38,14 +38,14 @@ const dynamicLoadScript = (src, callback) => { ...@@ -38,14 +38,14 @@ const dynamicLoadScript = (src, callback) => {
38 } 38 }
39 callbacks = null 39 callbacks = null
40 } 40 }
41 - script.onerror = function() { 41 + script.onerror = function () {
42 this.onerror = this.onload = null 42 this.onerror = this.onload = null
43 cb(new Error('无法加载 ' + src), script) 43 cb(new Error('无法加载 ' + src), script)
44 } 44 }
45 } 45 }
46 46
47 - function ieOnEnd(script) { 47 + function ieOnEnd (script) {
48 - script.onreadystatechange = function() { 48 + script.onreadystatechange = function () {
49 if (this.readyState !== 'complete' && this.readyState !== 'loaded') return 49 if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
50 this.onreadystatechange = null 50 this.onreadystatechange = null
51 for (const cb of callbacks) { 51 for (const cb of callbacks) {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 </div> 21 </div>
22 </el-image> 22 </el-image>
23 <div class="el-dropdown-link"> 23 <div class="el-dropdown-link">
24 - 这里是用户名 24 + 尊敬的： {{name}}
25 <i class="el-icon-arrow-down el-icon--right"></i> 25 <i class="el-icon-arrow-down el-icon--right"></i>
26 </div> 26 </div>
27 </div> 27 </div>
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
29 <router-link to="/"> 29 <router-link to="/">
30 <el-dropdown-item>返回首页</el-dropdown-item> 30 <el-dropdown-item>返回首页</el-dropdown-item>
31 </router-link> 31 </router-link>
32 - <el-dropdown-item @click.native="change_user"> 32 + <el-dropdown-item @click.native="logout">
33 <span>切换账号</span> 33 <span>切换账号</span>
34 </el-dropdown-item> 34 </el-dropdown-item>
35 - <el-dropdown-item @click.native="LogOut"> 35 + <el-dropdown-item @click.native="logout">
36 <span>退出登录</span> 36 <span>退出登录</span>
37 </el-dropdown-item> 37 </el-dropdown-item>
38 </el-dropdown-menu> 38 </el-dropdown-menu>
...@@ -55,7 +55,7 @@ export default { ...@@ -55,7 +55,7 @@ export default {
55 }, 55 },
56 data: () => ({ 56 data: () => ({
57 time: "", 57 time: "",
58 - userImage:require('@/assets/user.png') 58 + userImage: require("@/assets/user.png")
59 }), 59 }),
60 mounted() { 60 mounted() {
61 this.set_time(); 61 this.set_time();
...@@ -69,25 +69,11 @@ export default { ...@@ -69,25 +69,11 @@ export default {
69 }, 69 },
70 logout() { 70 logout() {
71 this.$store.dispatch("LogOut").then(() => { 71 this.$store.dispatch("LogOut").then(() => {
72 - location.reload(); // 为了重新实例化vue-router对象 避免bug
73 - });
74 - },
75 - change_user() {
76 - this.$store.dispatch("LogOut").then(() => {
77 - this.$message({
78 - message: "退出成功",
79 - type: "success"
80 - });
81 - this.$router.push({ path: "/new/login", query: { to: "server" } });
82 - });
83 - },
84 - LogOut() {
85 - this.$store.dispatch("LogOut").then(() => {
86 this.$message({ 72 this.$message({
87 message: "退出成功", 73 message: "退出成功",
88 type: "success" 74 type: "success"
89 }); 75 });
90 - this.$router.push("/"); 76 + location.reload(); // 为了重新实例化vue-router对象 避免bug
91 }); 77 });
92 }, 78 },
93 set_time() { 79 set_time() {
...@@ -95,7 +81,7 @@ export default { ...@@ -95,7 +81,7 @@ export default {
95 } 81 }
96 }, 82 },
97 computed: { 83 computed: {
98 - ...mapGetters(["user_data", "sidebar"]) 84 + ...mapGetters(["name", "role", "sidebar"])
99 }, 85 },
100 beforeDestroy() { 86 beforeDestroy() {
101 console.log("销毁计时器------------"); 87 console.log("销毁计时器------------");
......
1 - 1 +/* eslint-disable no-tabs */
2 import router from './router' 2 import router from './router'
3 import store from './store' 3 import store from './store'
4 import NProgress from 'nprogress' // Progress 进度条 4 import NProgress from 'nprogress' // Progress 进度条
5 import 'nprogress/nprogress.css'// Progress 进度条样式 5 import 'nprogress/nprogress.css'// Progress 进度条样式
6 -// import { Message } from 'element-ui' 6 +import { Message } from 'element-ui'
7 7
8 -// const whiteList = ['/login'] // 不重定向白名单 8 +const whiteList = ['/login'] // 不重定向白名单
9 router.beforeEach((to, from, next) => { 9 router.beforeEach((to, from, next) => {
10 NProgress.start() 10 NProgress.start()
11 if (store.getters.token) { 11 if (store.getters.token) {
12 if (to.path === '/login') { 12 if (to.path === '/login') {
13 next({ path: '/' }) 13 next({ path: '/' })
14 - NProgress.done() 14 + NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
15 } else { 15 } else {
16 - // if (store.getters.roles.length === 0) { 16 + if (store.getters.roles.length === 0) {
17 - // store.dispatch('GetInfo').then(res => { // 拉取用户信息 17 + store.dispatch('GetInfo').then(res => { // 拉取用户信息
18 - // next() 18 + next()
19 - // }).catch((err) => { 19 + }).catch((err) => {
20 - // store.dispatch('FedLogOut').then(() => { 20 + store.dispatch('FedLogOut').then(() => {
21 - // Message.error(err || '请重新登录') 21 + Message.error(err || 'Verification failed, please login again')
22 - // next({ path: '/' }) 22 + next({ path: '/' })
23 - // }) 23 + })
24 - // }) 24 + })
25 - // } else { 25 + } else {
26 - // next() 26 + next()
27 - // } 27 + }
28 } 28 }
29 } else { 29 } else {
30 - // if (whiteList.indexOf(to.path) !== -1) { 30 + if (whiteList.indexOf(to.path) !== -1) {
31 - // next() 31 + next()
32 - // } else { 32 + } else {
33 - // next('/login') 33 + next('/login')
34 - // NProgress.done() 34 + NProgress.done()
35 - // } 35 + }
36 - next()
37 - NProgress.done()
38 } 36 }
39 }) 37 })
40 38
......
...@@ -32,10 +32,11 @@ export default [ ...@@ -32,10 +32,11 @@ export default [
32 path: '/', 32 path: '/',
33 component: Layout, 33 component: Layout,
34 redirect: '/dashboard', 34 redirect: '/dashboard',
35 - name: 'Dashboard', 35 + name: '主页',
36 hidden: true, 36 hidden: true,
37 children: [{ 37 children: [{
38 path: 'dashboard', 38 path: 'dashboard',
39 + name: '总览',
39 component: () => import('@/components/LandingPage') 40 component: () => import('@/components/LandingPage')
40 }] 41 }]
41 }, 42 },
...@@ -51,5 +52,17 @@ export default [ ...@@ -51,5 +52,17 @@ export default [
51 meta: { title: '表单', icon: 'form' } 52 meta: { title: '表单', icon: 'form' }
52 } 53 }
53 ] 54 ]
55 + },
56 + {
57 + path: '/table',
58 + component: Layout,
59 + children: [
60 + {
61 + path: 'index',
62 + name: '表格',
63 + component: () => import('@/views/table/index'),
64 + meta: { title: '表格', icon: 'table' }
65 + }
66 + ]
54 } 67 }
55 ] 68 ]
......
1 const getters = { 1 const getters = {
2 sidebar: state => state.app.sidebar, 2 sidebar: state => state.app.sidebar,
3 - device: state => state.app.device 3 + device: state => state.app.device,
4 + token: state => state.user.token,
5 + avatar: state => state.user.avatar,
6 + name: state => state.user.name,
7 + roles: state => state.user.roles
4 } 8 }
5 export default getters 9 export default getters
......
1 +/* eslint-disable prefer-promise-reject-errors */
2 +import { login, logout, getInfo } from '@/api/login'
3 +import { getToken, setToken, removeToken } from '@/utils/auth'
4 +
5 +const user = {
6 + state: {
7 + token: getToken(),
8 + name: '',
9 + avatar: '',
10 + roles: []
11 + },
12 +
13 + mutations: {
14 + SET_TOKEN: (state, token) => {
15 + state.token = token
16 + },
17 + SET_NAME: (state, name) => {
18 + state.name = name
19 + },
20 + SET_AVATAR: (state, avatar) => {
21 + state.avatar = avatar
22 + },
23 + SET_ROLES: (state, roles) => {
24 + state.roles = roles
25 + }
26 + },
27 +
28 + actions: {
29 + // 登录
30 + Login ({ commit }, userInfo) {
31 + console.log(userInfo)
32 + const username = userInfo.username.trim()
33 + return new Promise((resolve, reject) => {
34 + const data = {
35 + username: username,
36 + password: userInfo.password
37 + }
38 + login(data).then(response => {
39 + const data = response.data.data
40 + setToken(data.token)
41 + commit('SET_TOKEN', data.token)
42 + resolve()
43 + }).catch(error => {
44 + reject(error)
45 + })
46 + })
47 + },
48 +
49 + // 获取用户信息
50 + GetInfo ({ commit, state }) {
51 + return new Promise((resolve, reject) => {
52 + getInfo(state.token).then(response => {
53 + const data = response.data.data
54 + if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
55 + commit('SET_ROLES', data.roles)
56 + } else {
57 + reject('getInfo: roles must be a non-null array !')
58 + }
59 + commit('SET_NAME', data.name)
60 + commit('SET_AVATAR', data.avatar)
61 + resolve(response)
62 + }).catch(error => {
63 + reject(error)
64 + })
65 + })
66 + },
67 +
68 + // 登出
69 + LogOut ({ commit, state }) {
70 + return new Promise((resolve, reject) => {
71 + logout(state.token).then(() => {
72 + commit('SET_TOKEN', '')
73 + commit('SET_ROLES', [])
74 + removeToken()
75 + resolve()
76 + }).catch(error => {
77 + reject(error)
78 + })
79 + })
80 + },
81 +
82 + // 前端 登出
83 + FedLogOut ({ commit }) {
84 + return new Promise(resolve => {
85 + removeToken()
86 + commit('SET_TOKEN', '')
87 + resolve()
88 + })
89 + }
90 + }
91 +}
92 +
93 +export default user
1 import axios from 'axios' 1 import axios from 'axios'
2 -import { 2 +import { Message } from 'element-ui'
3 - Message
4 -} from 'element-ui'
5 const serves = axios.create({ 3 const serves = axios.create({
6 baseURL: process.env.BASE_API, 4 baseURL: process.env.BASE_API,
7 timeout: 5000 5 timeout: 5000
...@@ -9,8 +7,6 @@ const serves = axios.create({ ...@@ -9,8 +7,6 @@ const serves = axios.create({
9 7
10 // 设置请求发送之前的拦截器 8 // 设置请求发送之前的拦截器
11 serves.interceptors.request.use(config => { 9 serves.interceptors.request.use(config => {
12 - console.log(config)
13 - console.log(process.env)
14 // 设置发送之前数据需要做什么处理 10 // 设置发送之前数据需要做什么处理
15 return config 11 return config
16 }, err => Promise.reject(err)) 12 }, err => Promise.reject(err))
...@@ -18,6 +14,9 @@ serves.interceptors.request.use(config => { ...@@ -18,6 +14,9 @@ serves.interceptors.request.use(config => {
18 // 设置请求接受拦截器 14 // 设置请求接受拦截器
19 serves.interceptors.response.use(res => { 15 serves.interceptors.response.use(res => {
20 // 设置接受数据之后，做什么处理 16 // 设置接受数据之后，做什么处理
17 + if (res.data.code === 50000) {
18 + Message.error(res.data.data)
19 + }
21 return res 20 return res
22 }, err => { 21 }, err => {
23 // 判断请求异常信息中是否含有超时timeout字符串 22 // 判断请求异常信息中是否含有超时timeout字符串
......
1 <template> 1 <template>
2 <div class="login-container"> 2 <div class="login-container">
3 - <el-form 3 + <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
4 - class="login-form" 4 + <h3 class="title">后台管理框架</h3>
5 - autocomplete="on"
6 - :model="loginForm"
7 - :rules="loginRules"
8 - ref="loginForm"
9 - label-position="left"
10 - >
11 - <h3 class="title">vue-element-admin</h3>
12 <el-form-item prop="username"> 5 <el-form-item prop="username">
13 <span class="svg-container svg-container_login"> 6 <span class="svg-container svg-container_login">
14 <svg-icon icon-class="user" /> 7 <svg-icon icon-class="user" />
15 </span> 8 </span>
16 - <el-input 9 + <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
17 - name="username"
18 - type="text"
19 - v-model="loginForm.username"
20 - autocomplete="on"
21 - placeholder="用户名"
22 - />
23 </el-form-item> 10 </el-form-item>
24 <el-form-item prop="password"> 11 <el-form-item prop="password">
25 <span class="svg-container"> 12 <span class="svg-container">
26 <svg-icon icon-class="password"></svg-icon> 13 <svg-icon icon-class="password"></svg-icon>
27 </span> 14 </span>
28 - <el-input 15 + <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
29 - name="password" 16 + placeholder="密码"></el-input>
30 - :type="pwdType" 17 + <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
31 - @keyup.enter.native="handleLogin"
32 - v-model="loginForm.password"
33 - autocomplete="on"
34 - placeholder="密码"
35 - ></el-input>
36 - <span class="show-pwd" @click="showPwd">
37 - <svg-icon icon-class="eye" />
38 - </span>
39 </el-form-item> 18 </el-form-item>
40 <el-form-item> 19 <el-form-item>
41 - <el-button 20 + <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
42 - type="primary" 21 + 登录
43 - style="width:100%;" 22 + </el-button>
44 - :loading="loading"
45 - @click.native.prevent="handleLogin"
46 - >登录</el-button>
47 </el-form-item> 23 </el-form-item>
48 <div class="tips"> 24 <div class="tips">
49 - <span style="margin-right:20px;">username: admin</span> 25 + <span style="margin-right:20px;">用户名: admin</span>
50 - <span>password: admin</span> 26 + <span> 密码：随便什么都行</span>
51 </div> 27 </div>
52 </el-form> 28 </el-form>
53 </div> 29 </div>
54 </template> 30 </template>
55 31
56 <script> 32 <script>
57 -import { isvalidUsername } from "@/utils/validate"; 33 +import { isvalidUsername } from '@/utils/validate'
58 -import { login } from "@/api/login"; 34 +
59 export default { 35 export default {
60 - name: "login", 36 + name: 'login',
61 data() { 37 data() {
62 const validateUsername = (rule, value, callback) => { 38 const validateUsername = (rule, value, callback) => {
63 if (!isvalidUsername(value)) { 39 if (!isvalidUsername(value)) {
64 - callback(new Error("请输入正确的用户名")); 40 + callback(new Error('请输入正确的用户名'))
65 } else { 41 } else {
66 - callback(); 42 + callback()
67 } 43 }
68 - }; 44 + }
69 const validatePass = (rule, value, callback) => { 45 const validatePass = (rule, value, callback) => {
70 if (value.length < 5) { 46 if (value.length < 5) {
71 - callback(new Error("密码不能小于5位")); 47 + callback(new Error('密码不能小于5位'))
72 } else { 48 } else {
73 - callback(); 49 + callback()
74 } 50 }
75 - }; 51 + }
76 return { 52 return {
77 loginForm: { 53 loginForm: {
78 - username: "admin", 54 + username: 'admin',
79 - password: "admin" 55 + password: 'admin'
80 }, 56 },
81 loginRules: { 57 loginRules: {
82 - username: [ 58 + username: [{ required: true, trigger: 'blur', validator: validateUsername }],
83 - { required: true, trigger: "blur", validator: validateUsername } 59 + password: [{ required: true, trigger: 'blur', validator: validatePass }]
84 - ],
85 - password: [{ required: true, trigger: "blur", validator: validatePass }]
86 }, 60 },
87 loading: false, 61 loading: false,
88 - pwdType: "password" 62 + pwdType: 'password'
89 - }; 63 + }
90 }, 64 },
91 methods: { 65 methods: {
92 showPwd() { 66 showPwd() {
93 - if (this.pwdType === "password") { 67 + if (this.pwdType === 'password') {
94 - this.pwdType = ""; 68 + this.pwdType = ''
95 } else { 69 } else {
96 - this.pwdType = "password"; 70 + this.pwdType = 'password'
97 } 71 }
98 }, 72 },
99 handleLogin() { 73 handleLogin() {
100 - this.loading = true; 74 + console.log(11111)
101 this.$refs.loginForm.validate(valid => { 75 this.$refs.loginForm.validate(valid => {
76 + console.log(valid)
102 if (valid) { 77 if (valid) {
103 - // this.$store.dispatch('Login', this.loginForm).then(() => { 78 + this.loading = true
104 - this.loading = false; 79 + this.$store.dispatch('Login', this.loginForm).then(() => {
105 - this.$router.push({ path: "/" }); 80 + this.loading = false
106 - // login(this.loginForm).then(res=>console.log(res)) 81 + this.$router.push({ path: '/' })
107 - // }).catch(() => { 82 + }).catch(() => {
108 - // this.loading = false 83 + this.loading = false
109 - // }) 84 + })
110 } else { 85 } else {
111 - console.log("输入错误"); 86 + console.log('error submit!!')
112 - return false; 87 + return false
113 } 88 }
114 - }); 89 + })
115 } 90 }
116 } 91 }
117 -}; 92 +}
118 </script> 93 </script>
119 94
120 <style rel="stylesheet/scss" lang="scss"> 95 <style rel="stylesheet/scss" lang="scss">
121 -$bg: #2d3a4b; 96 +$bg:#2d3a4b;
122 -$light_gray: #eee; 97 +$light_gray:#eee;
123 98
124 /* reset element-ui css */ 99 /* reset element-ui css */
125 .login-container { 100 .login-container {
126 - left: 0px; 101 + left: 0;
127 .el-input { 102 .el-input {
128 display: inline-block; 103 display: inline-block;
129 height: 47px; 104 height: 47px;
...@@ -149,12 +124,13 @@ $light_gray: #eee; ...@@ -149,12 +124,13 @@ $light_gray: #eee;
149 color: #454545; 124 color: #454545;
150 } 125 }
151 } 126 }
127 +
152 </style> 128 </style>
153 129
154 <style rel="stylesheet/scss" lang="scss" scoped> 130 <style rel="stylesheet/scss" lang="scss" scoped>
155 -$bg: #2d3a4b; 131 +$bg:#2d3a4b;
156 -$dark_gray: #889aa4; 132 +$dark_gray:#889aa4;
157 -$light_gray: #eee; 133 +$light_gray:#eee;
158 .login-container { 134 .login-container {
159 position: fixed; 135 position: fixed;
160 height: 100%; 136 height: 100%;
......