术习电报 / electron-vue-template

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

同步master分支中的授权信息

内嵌 并排
正在显示 16 个修改的文件 包含 313 行增加 和 212 行删除
......@@ -32,7 +32,8 @@
"dist/electron/**/*"
],
"dmg": {
"contents": [{
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
......@@ -135,4 +136,4 @@
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1"
}
}
\ No newline at end of file
}
......
import request from '@/utils/request'
export function login (username, password) {
export function login (data) {
return request({
url: '/user/login',
method: 'post',
data: {
username,
password
}
data
})
}
......
import db from '../utils/db'
import db from '@/utils/db'
export default {
adddata (data) {
......
<template>
<div id="wrapper">
<img id="logo" src="~@/assets/logo.png" alt="electron-vue">
<img id="logo" src="~@/assets/logo.png" alt="electron-vue" />
<main>
<div class="left-side">
<span class="title">Welcome to your new project!</span>
<span class="title">欢迎进入本框架</span>
<system-information></system-information>
<div v-if="textarray.length === 0">
<span>{{text}}</span>
......@@ -17,7 +17,7 @@
<div class="right-side">
<div class="doc">
<div class="title alt">Other Documentation</div>
<div class="title alt">您可以点击的按钮</div>
<el-button type="primary" round @click="open()">控制台打印</el-button>
<el-button type="primary" round @click="setdata">写入数据</el-button>
<el-button type="primary" round @click="getdata">读取数据</el-button>
......@@ -30,7 +30,7 @@
<script>
import SystemInformation from "./LandingPage/SystemInformation";
import api from '../tools/dialog'
import api from "../tools/dialog";
export default {
name: "landing-page",
components: { SystemInformation },
......@@ -45,7 +45,7 @@ export default {
methods: {
// 获取electron方法
open() {
console.log(this.$electron);
console.log(this.$store);
},
// 设置数据库的数据
setdata() {
......@@ -66,28 +66,28 @@ export default {
.catch(err => console.log(err));
},
// 清空数据库的数据
deledata(){
deledata() {
// dialog为electron实例，data则是显示需要的参数，fun是需要执行的函数，此选项不是为必选的
const dialog = this.$electron.remote.dialog
const dialog = this.$electron.remote.dialog;
const data = {
title: "清除数据",
buttons: ["OK", "Cancel"],
message: "此操作会清空本地数据库中的所有数据，是否继续？"
};
const fun = this.$db.deleall({ name: "yyy" });
api.MessageBox(dialog, data, fun).then(res => {
this.getdata();
this.$message({
showClose: true,
message: "成功删除" + res + "条",
type: "success"
});
});
// const data = {
// title:'清除数据',
// buttons:['OK', 'Cancel'],
// message:'此操作会清空本地数据库中的所有数据，是否继续？'
// title:'发生致命错误',
// message:'?'
// }
// const fun = this.$db.deleall({name:'yyy'})
// api.MessageBox(dialog,data,fun).then(res=>{
// this.getdata()
// this.$message({
// showClose: true,
// message: '成功删除'+res+'条',
// type: 'success'
// });
// })
const data = {
title:'发生致命错误',
message:'?'
}
api.ErrorMessageBox(dialog,data)
// api.ErrorMessageBox(dialog,data)
},
}
};
......
<template>
<div>
<div class="title">Information</div>
<div class="title">关于系统</div>
<div class="items">
<div class="item">
<div class="name">Path:</div>
<div class="name">当前所在页面:</div>
<div class="value">{{ path }}</div>
</div>
<div class="item">
<div class="name">Route Name:</div>
<div class="name">当前页面名称:</div>
<div class="value">{{ name }}</div>
</div>
<div class="item">
<div class="name">Vue.js:</div>
<div class="name">Vue.js版本:</div>
<div class="value">{{ vue }}</div>
</div>
<div class="item">
<div class="name">Electron:</div>
<div class="name">Electron版本:</div>
<div class="value">{{ electron }}</div>
</div>
<div class="item">
<div class="name">Node:</div>
<div class="name">Node版本:</div>
<div class="value">{{ node }}</div>
</div>
<div class="item">
<div class="name">Platform:</div>
<div class="name">所运行的系统:</div>
<div class="value">{{ platform }}</div>
</div>
</div>
......@@ -41,6 +41,9 @@
platform: require('os').platform(),
vue: require('vue/package.json').version
}
},
mounted(){
console.log(this.$route)
}
}
</script>
......@@ -58,7 +61,9 @@
.item {
display: flex;
align-items: center;
margin-bottom: 6px;
line-height: 24px;
}
.item .name {
......
let callbacks = []
function loadedTinymce() {
function loadedTinymce () {
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
// check is successfully downloaded script
return window.tinymce
......@@ -8,7 +8,7 @@ function loadedTinymce() {
const dynamicLoadScript = (src, callback) => {
const existingScript = document.getElementById(src)
const cb = callback || function() {}
const cb = callback || function () {}
if (!existingScript) {
const script = document.createElement('script')
......@@ -28,8 +28,8 @@ const dynamicLoadScript = (src, callback) => {
}
}
function stdOnEnd(script) {
script.onload = function() {
function stdOnEnd (script) {
script.onload = function () {
// this.onload = null here is necessary
// because even IE9 works not like others
this.onerror = this.onload = null
......@@ -38,14 +38,14 @@ const dynamicLoadScript = (src, callback) => {
}
callbacks = null
}
script.onerror = function() {
script.onerror = function () {
this.onerror = this.onload = null
cb(new Error('无法加载 ' + src), script)
}
}
function ieOnEnd(script) {
script.onreadystatechange = function() {
function ieOnEnd (script) {
script.onreadystatechange = function () {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
for (const cb of callbacks) {
......
......@@ -15,13 +15,13 @@
<div class="select-right">
<el-dropdown trigger="click">
<div>
<el-image :src="himg" class="avatar">
<el-image :src="userImage" class="avatar">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="el-dropdown-link">
这里是用户名
尊敬的： {{name}}
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
</div>
......@@ -29,10 +29,10 @@
<router-link to="/">
<el-dropdown-item>返回首页</el-dropdown-item>
</router-link>
<el-dropdown-item @click.native="change_user">
<el-dropdown-item @click.native="logout">
<span>切换账号</span>
</el-dropdown-item>
<el-dropdown-item @click.native="LogOut">
<el-dropdown-item @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
......@@ -55,7 +55,7 @@ export default {
},
data: () => ({
time: "",
himg:require('@/assets/user.png')
userImage: require("@/assets/user.png")
}),
mounted() {
this.set_time();
......@@ -69,25 +69,11 @@ export default {
},
logout() {
this.$store.dispatch("LogOut").then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
},
change_user() {
this.$store.dispatch("LogOut").then(() => {
this.$message({
message: "退出成功",
type: "success"
});
this.$router.push({ path: "/new/login", query: { to: "server" } });
});
},
LogOut() {
this.$store.dispatch("LogOut").then(() => {
this.$message({
message: "退出成功",
type: "success"
});
this.$router.push("/");
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
},
set_time() {
......@@ -95,7 +81,7 @@ export default {
}
},
computed: {
...mapGetters(["user_data", "sidebar"])
...mapGetters(["name", "role", "sidebar"])
},
beforeDestroy() {
console.log("销毁计时器------------");
......@@ -161,7 +147,7 @@ export default {
font-size: 6px;
}
.select-right {
/deep/ .el-dropdown-link {
.el-dropdown-link {
color: #333333;
font-weight: 400;
}
......
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<router-link
v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow"
:to="resolvePath(onlyOneChild.path)"
>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{'submenu-title-noDropdown':!isNest}"
<div v-if="item.onlyShowfirst">
<router-link
v-if="OneShowingChild(item.children[0]) && !onlyOneChild.children&&!item.alwaysShow"
:to="resolvePath(onlyOneChild.path)"
>
<svg-icon
v-if="onlyOneChild.meta&&onlyOneChild.meta.icon"
:icon-class="onlyOneChild.meta.icon"
></svg-icon>
<span
v-if="onlyOneChild.meta&&onlyOneChild.meta.title"
slot="title"
>{{onlyOneChild.meta.title}}</span>
</el-menu-item>
</router-link>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{'submenu-title-noDropdown':!isNest}"
>
<svg-icon
v-if="onlyOneChild.meta&&onlyOneChild.meta.icon"
:icon-class="onlyOneChild.meta.icon"
></svg-icon>
<span
v-if="onlyOneChild.meta&&onlyOneChild.meta.title"
slot="title"
>{{onlyOneChild.meta.title}}</span>
</el-menu-item>
</router-link>
</div>
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<div v-else>
<router-link
v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow"
:to="resolvePath(onlyOneChild.path)"
>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{'submenu-title-noDropdown':!isNest}"
>
<svg-icon
v-if="onlyOneChild.meta&&onlyOneChild.meta.icon"
:icon-class="onlyOneChild.meta.icon"
></svg-icon>
<span
v-if="onlyOneChild.meta&&onlyOneChild.meta.title"
slot="title"
>{{onlyOneChild.meta.title}}</span>
</el-menu-item>
</router-link>
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item
:is-nest="true"
class="nest-menu"
v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
></sidebar-item>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item
:is-nest="true"
class="nest-menu"
v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
></sidebar-item>
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</div>
</div>
</template>
......@@ -88,6 +112,10 @@ export default {
},
resolvePath(...paths) {
return path.resolve(this.basePath, ...paths);
},
OneShowingChild(children) {
this.onlyOneChild = children;
return true;
}
}
};
......
/* eslint-disable no-tabs */
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
// import { Message } from 'element-ui'
import { Message } from 'element-ui'
// const whiteList = ['/login'] // 不重定向白名单
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start()
if (store.getters.token) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
} else {
// if (store.getters.roles.length === 0) {
// store.dispatch('GetInfo').then(res => { // 拉取用户信息
// next()
// }).catch((err) => {
// store.dispatch('FedLogOut').then(() => {
// Message.error(err || '请重新登录')
// next({ path: '/' })
// })
// })
// } else {
// next()
// }
if (store.getters.roles.length === 0) {
store.dispatch('GetInfo').then(res => { // 拉取用户信息
next()
}).catch((err) => {
store.dispatch('FedLogOut').then(() => {
Message.error(err || 'Verification failed, please login again')
next({ path: '/' })
})
})
} else {
next()
}
}
} else {
// if (whiteList.indexOf(to.path) !== -1) {
// next()
// } else {
// next('/login')
// NProgress.done()
// }
next()
NProgress.done()
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
NProgress.done()
}
}
})
......
......@@ -18,6 +18,7 @@ const Notfound = () => import('@/views/404')
* hidden: true 如果在模板中使用该选项,则不会在侧栏显示该路由(例如：Dashboard),如果是在第一个子路由中使用,侧栏则只显示第一个子路由的名字和图标(例如: Form)
* alwaysShow: true 如果设置为true它则会始终显示根菜单,无视自路由长度,没有设置的话,就会折叠起来(不清楚为什么没有作用,可能是我写错位置了?)
* redirect: noredirect 若设置为noredirect则顶部面包屑不能够为其重定向.
* onlyShowfirst: false 若该设置为true时，将会无视其有多少个孩子路由，只会显示第一个子路由并将其设置为根菜单
* name:'router-name' 路由名称,此项为必须填写项
* meta : {
title: 'title' 这里的名字决定了面包屑和侧栏的名字
......@@ -31,10 +32,11 @@ export default [
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
name: '主页',
hidden: true,
children: [{
path: 'dashboard',
name: '总览',
component: () => import('@/components/LandingPage')
}]
},
......@@ -50,5 +52,17 @@ export default [
meta: { title: '表单', icon: 'form' }
}
]
},
{
path: '/table',
component: Layout,
children: [
{
path: 'index',
name: '表格',
component: () => import('@/views/table/index'),
meta: { title: '表格', icon: 'table' }
}
]
}
]
......
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
roles: state => state.user.roles
}
export default getters
......
/* eslint-disable prefer-promise-reject-errors */
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
const user = {
state: {
token: getToken(),
name: '',
avatar: '',
roles: []
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
},
actions: {
// 登录
Login ({ commit }, userInfo) {
console.log(userInfo)
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
const data = {
username: username,
password: userInfo.password
}
login(data).then(response => {
const data = response.data.data
setToken(data.token)
commit('SET_TOKEN', data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetInfo ({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const data = response.data.data
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
resolve(response)
}).catch(error => {
reject(error)
})
})
},
// 登出
LogOut ({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 前端 登出
FedLogOut ({ commit }) {
return new Promise(resolve => {
removeToken()
commit('SET_TOKEN', '')
resolve()
})
}
}
}
export default user
......@@ -16,7 +16,7 @@ export default {
message: data.message
}, index => {
if (index === 0) {
const tempfun = async () => {
let tempfun = async () => {
try {
resolve(await fun)
} catch (error) {
......
import axios from 'axios'
import {
Message
} from 'element-ui'
import { Message } from 'element-ui'
const serves = axios.create({
baseURL: process.env.BASE_API,
timeout: 5000
......@@ -9,8 +7,6 @@ const serves = axios.create({
// 设置请求发送之前的拦截器
serves.interceptors.request.use(config => {
console.log(config)
console.log(process.env)
// 设置发送之前数据需要做什么处理
return config
}, err => Promise.reject(err))
......@@ -18,6 +14,9 @@ serves.interceptors.request.use(config => {
// 设置请求接受拦截器
serves.interceptors.response.use(res => {
// 设置接受数据之后，做什么处理
if (res.data.code === 50000) {
Message.error(res.data.data)
}
return res
}, err => {
// 判断请求异常信息中是否含有超时timeout字符串
......
<template>
<div class="login-container">
<el-form
class="login-form"
autocomplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left"
>
<h3 class="title">vue-element-admin</h3>
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">后台管理框架</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input
name="username"
type="text"
v-model="loginForm.username"
autocomplete="on"
placeholder="用户名"
/>
<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">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input
name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autocomplete="on"
placeholder="密码"
></el-input>
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item>
<el-form-item>
<el-button
type="primary"
style="width:100%;"
:loading="loading"
@click.native.prevent="handleLogin"
>登录</el-button>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<div class="tips">
<span style="margin-right:20px;">username: admin</span>
<span>password: admin</span>
<span style="margin-right:20px;">用户名: admin</span>
<span> 密码：随便什么都行</span>
</div>
</el-form>
</div>
</template>
<script>
import { isvalidUsername } from "@/utils/validate";
import { login } from "@/api/login";
import { isvalidUsername } from '@/utils/validate'
export default {
name: "login",
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error("请输入正确的用户名"));
callback(new Error('请输入正确的用户名'))
} else {
callback();
callback()
}
};
}
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error("密码不能小于5位"));
callback(new Error('密码不能小于5位'))
} else {
callback();
callback()
}
};
}
return {
loginForm: {
username: "admin",
password: "admin"
username: 'admin',
password: 'admin'
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [{ required: true, trigger: "blur", validator: validatePass }]
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePass }]
},
loading: false,
pwdType: "password"
};
pwdType: 'password'
}
},
methods: {
showPwd() {
if (this.pwdType === "password") {
this.pwdType = "";
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = "password";
this.pwdType = 'password'
}
},
handleLogin() {
this.loading = true;
console.log(11111)
this.$refs.loginForm.validate(valid => {
console.log(valid)
if (valid) {
// this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false;
this.$router.push({ path: "/" });
// login(this.loginForm).then(res=>console.log(res))
// }).catch(() => {
// this.loading = false
// })
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log("输入错误");
return false;
console.log('error submit!!')
return false
}
});
})
}
}
};
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
left: 0px;
left: 0;
.el-input {
display: inline-block;
height: 47px;
......@@ -149,12 +124,13 @@ $light_gray: #eee;
color: #454545;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
......