xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加vuex，修复login+token

Browse Source
This commit is contained in:
橙子
2021-10-16 21:28:28 +08:00
parent 4c4722fd3e
commit b77b91912b
9 changed files with 282 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Yi.Framework/Yi.Framework.ApiMicroservice/Controllers/AccountController.cs
View File

@@ -39,8 +39,8 @@ namespace Yi.Framework.ApiMicroservice.Controllers
if( user_data!=null) if( user_data!=null)
{ {
var toke = MakeJwt.app(user_data); var token = MakeJwt.app(user_data);
return Result.Success().SetData(new { user = new { _user.id, _user.username, _user.introduction, _user.icon, _user.nick }, toke }); return Result.Success().SetData(new { user = new { _user.id, _user.username, _user.introduction, _user.icon, _user.nick }, token });
} }
return Result.Error(); return Result.Error();
} }

BIN
Yi.Framework/Yi.Framework.ApiMicroservice/YIDB.db
View File

Binary file not shown.

71
Yi.Vue/src/layouts/default/AppBar.vue
View File

@@ -10,17 +10,11 @@
height="70" height="70"
flat flat
> >
<v-app-bar-nav-icon <v-app-bar-nav-icon class="hidden-md-and-up" @click="$store.state.home.drawer = !$store.state.home.drawer;" />
class="hidden-md-and-up"
@click="drawer = !drawer"
/>
<default-drawer-toggle class="hidden-sm-and-down" /> <default-drawer-toggle class="hidden-sm-and-down" />
<v-toolbar-title <v-toolbar-title class="font-weight-light text-h5" v-text="name" />
class="font-weight-light text-h5"
v-text="name"
/>
<v-spacer /> <v-spacer />
@@ -35,45 +29,50 @@
</template> </template>
<script> <script>
// Utilities // Utilities
// import { get, sync } from 'vuex-pathify' // import { get, sync } from 'vuex-pathify'
export default { export default {
data:()=>({
drawer:true, data: () => ({
name:"系统" name: "系统",
}), }),
name: 'DefaultBar', name: "DefaultBar",
components: { components: {
DefaultAccount: () => import( DefaultAccount: () =>
import(
/* webpackChunkName: "default-account" */ /* webpackChunkName: "default-account" */
'./widgets/Account' "./widgets/Account"
), ),
DefaultDrawerToggle: () => import( DefaultDrawerToggle: () =>
import(
/* webpackChunkName: "default-drawer-toggle" */ /* webpackChunkName: "default-drawer-toggle" */
'./widgets/DrawerToggle' "./widgets/DrawerToggle"
), ),
DefaultGoHome: () => import( DefaultGoHome: () =>
import(
/* webpackChunkName: "default-go-home" */ /* webpackChunkName: "default-go-home" */
'./widgets/GoHome' "./widgets/GoHome"
), ),
DefaultNotifications: () => import( DefaultNotifications: () =>
import(
/* webpackChunkName: "default-notifications" */ /* webpackChunkName: "default-notifications" */
'./widgets/Notifications' "./widgets/Notifications"
), ),
DefaultSearch: () => import( DefaultSearch: () =>
import(
/* webpackChunkName: "default-search" */ /* webpackChunkName: "default-search" */
'./widgets/Search' "./widgets/Search"
), ),
}, },
// computed: { // computed: {
// ...sync('app', [ // ...sync('app', [
// 'drawer', // 'drawer',
// 'mini', // 'mini',
// ]), // ]),
// name: get('route/name'), // name: get('route/name'),
// }, // },
} };
</script> </script>

177
Yi.Vue/src/layouts/default/Drawer.vue
View File

@@ -1,24 +1,17 @@
<template> <template>
<v-navigation-drawer <v-navigation-drawer
id="default-drawer" id="default-drawer"
v-model="drawer" v-model="$store.state.home.drawer"
:dark="dark" :dark="dark"
:right="$vuetify.rtl" :right="$vuetify.rtl"
:src="drawerImage ? image : ''" :src="$store.state.home.drawerImage ? image : ''"
:mini-variant.sync="mini" :mini-variant.sync="$store.state.home.mini"
mini-variant-width="80" mini-variant-width="80"
app app
width="260" width="260"
> >
<template <template v-if="$store.state.home.drawerImage" #img="props">
v-if="drawerImage" <v-img :key="image" :gradient="gradient" v-bind="props" />
#img="props"
>
<v-img
:key="image"
:gradient="gradient"
v-bind="props"
/>
</template> </template>
<div class="px-2"> <div class="px-2">
@@ -41,15 +34,8 @@
Documentation Documentation
</app-btn> </app-btn>
<app-btn <app-btn block class="text-none" color="secondary" @click="logout">
block <v-icon left> mdi-package-up </v-icon>
class="text-none"
color="secondary"
href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-pro"
>
<v-icon left>
mdi-package-up
</v-icon>
退出 退出
</app-btn> </app-btn>
@@ -61,102 +47,109 @@
</template> </template>
<script> <script>
// Utilities // Utilities
// import { get, sync } from 'vuex-pathify' // import { get, sync } from 'vuex-pathify'
export default { export default {
methods: {
logout() {
this.$store.dispatch("Logout").then((resp) => {
this.$router.push({ path: "/login" });
});
},
},
data: () => ({
image:
"https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
data:()=>({ dark: null,
image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
mini: false,
drawer: null,
drawerImage: true,
gradient:
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
dark:null, items: [
items: [
{ {
title: "首页", title: "首页",
icon: "mdi-view-dashboard", icon: "mdi-view-dashboard",
to: "/" to: "/",
}, },
{ {
title: "用户角色管理", title: "用户角色管理",
icon: "mdi-account", icon: "mdi-account",
to: "", to: "",
children:[{ children: [
title:"用户管理", {
icon:"mdi-account", title: "用户管理",
to:"/admuser/", icon: "mdi-account",
children:[] to: "/admuser/",
}, children: [],
{ },
title:"角色管理", {
icon:"mdi-account", title: "角色管理",
to:"/admrole/", icon: "mdi-account",
children:[] to: "/admrole/",
} children: [],
] },
],
}, },
{ {
title: "菜单接口管理", title: "菜单接口管理",
icon: "mdi-clipboard-outline", icon: "mdi-clipboard-outline",
to: "", to: "",
children:[{ children: [
title:"菜单管理", {
icon:"mdi-account", title: "菜单管理",
to:"/admMenu/", icon: "mdi-account",
children:[] to: "/admMenu/",
}, children: [],
{ },
title:"接口管理", {
icon:"mdi-account", title: "接口管理",
to:"/admMould/", icon: "mdi-account",
children:[] to: "/admMould/",
}, children: [],
{ },
title:"角色菜单分配管理", {
icon:"mdi-account", title: "角色菜单分配管理",
to:"/admRoleMenu/", icon: "mdi-account",
children:[] to: "/admRoleMenu/",
}, children: [],
] },
],
}, },
], ],
}), }),
name: 'DefaultDrawer', name: "DefaultDrawer",
components: { components: {
DefaultDrawerHeader: () => import( DefaultDrawerHeader: () =>
import(
/* webpackChunkName: "default-drawer-header" */ /* webpackChunkName: "default-drawer-header" */
'./widgets/DrawerHeader' "./widgets/DrawerHeader"
), ),
DefaultList: () => import( DefaultList: () =>
import(
/* webpackChunkName: "default-list" */ /* webpackChunkName: "default-list" */
'./List' "./List"
), ),
}, },
// computed: { // computed: {
// ...get('user', [ // ...get('user', [
// 'dark', // 'dark',
// 'gradient', // 'gradient',
// 'image', // 'image',
// ]), // ]),
// ...get('app', [ // ...get('app', [
// 'items', // 'items',
// 'version', // 'version',
// ]), // ]),
// ...sync('app', [ // ...sync('app', [
// 'drawer', // 'drawer',
// 'drawerImage', // 'drawerImage',
// 'mini', // 'mini',
// ]), // ]),
// }, // },
} };
</script> </script>
<style lang="sass"> <style lang="sass">

198
Yi.Vue/src/layouts/default/Settings.vue
View File

@@ -8,11 +8,15 @@
flat flat
link link
min-width="100" min-width="100"
style="position: fixed; top: 115px; right: -35px; border-radius: 8px; z-index: 1;" style="
position: fixed;
top: 115px;
right: -35px;
border-radius: 8px;
z-index: 1;
"
> >
<v-icon large> <v-icon large> mdi-cog </v-icon>
mdi-cog
</v-icon>
</v-card> </v-card>
<v-menu <v-menu
@@ -27,22 +31,12 @@
origin="top right" origin="top right"
transition="scale-transition" transition="scale-transition"
> >
<v-card <v-card class="text-center mb-0" width="300">
class="text-center mb-0"
width="300"
>
<v-card-text> <v-card-text>
<strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong> <strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
<v-item-group <v-item-group v-model="color" mandatory>
v-model="color" <v-item v-for="color in colors" :key="color" :value="color">
mandatory
>
<v-item
v-for="color in colors"
:key="color"
:value="color"
>
<template v-slot="{ active, toggle }"> <template v-slot="{ active, toggle }">
<v-avatar <v-avatar
:class="active && 'v-settings__item--active'" :class="active && 'v-settings__item--active'"
@@ -59,10 +53,7 @@
<strong class="mb-3 d-inline-block">SIDEBAR BACKGROUND</strong> <strong class="mb-3 d-inline-block">SIDEBAR BACKGROUND</strong>
<v-item-group <v-item-group v-model="gradient" mandatory>
v-model="gradient"
mandatory
>
<v-item <v-item
v-for="(scrim, index) in gradients" v-for="(scrim, index) in gradients"
:key="scrim" :key="scrim"
@@ -83,13 +74,8 @@
<v-divider class="my-4 secondary" /> <v-divider class="my-4 secondary" />
<v-row <v-row align="center" no-gutters>
align="center" <v-col cols="auto"> Dark Mode </v-col>
no-gutters
>
<v-col cols="auto">
Dark Mode
</v-col>
<v-spacer /> <v-spacer />
@@ -105,19 +91,14 @@
<v-divider class="my-4 secondary" /> <v-divider class="my-4 secondary" />
<v-row <v-row align="center" no-gutters>
align="center" <v-col cols="auto"> Sidebar Mini </v-col>
no-gutters
>
<v-col cols="auto">
Sidebar Mini
</v-col>
<v-spacer /> <v-spacer />
<v-col cols="auto"> <v-col cols="auto">
<v-switch <v-switch
v-model="mini" v-model="$store.state.home.mini"
class="ma-0 pa-0" class="ma-0 pa-0"
color="secondary" color="secondary"
hide-details hide-details
@@ -127,13 +108,8 @@
<v-divider class="my-4 secondary" /> <v-divider class="my-4 secondary" />
<v-row <v-row align="center" no-gutters>
align="center" <v-col cols="auto"> Sidebar Image </v-col>
no-gutters
>
<v-col cols="auto">
Sidebar Image
</v-col>
<v-spacer /> <v-spacer />
@@ -151,10 +127,7 @@
<strong class="mb-3 d-inline-block">IMAGES</strong> <strong class="mb-3 d-inline-block">IMAGES</strong>
<v-card <v-card :disabled="!drawerImage" flat>
:disabled="!drawerImage"
flat
>
<v-item-group <v-item-group
v-model="image" v-model="image"
class="d-flex justify-space-between mb-3" class="d-flex justify-space-between mb-3"
@@ -171,11 +144,7 @@
class="d-inline-block v-settings__item" class="d-inline-block v-settings__item"
@click="toggle" @click="toggle"
> >
<v-img <v-img :src="img" height="100" width="50" />
:src="img"
height="100"
width="50"
/>
</v-sheet> </v-sheet>
</template> </template>
</v-item> </v-item>
@@ -210,23 +179,12 @@
<strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong> <strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
</div> </div>
<v-btn <v-btn class="ma-1" color="#55acee" dark rounded>
class="ma-1"
color="#55acee"
dark
rounded
>
<v-icon>mdi-twitter</v-icon> <v-icon>mdi-twitter</v-icon>
- 45 - 45
</v-btn> </v-btn>
<v-btn <v-btn class="ma-1" color="#3b5998" dark default rounded>
class="ma-1"
color="#3b5998"
dark
default
rounded
>
<v-icon>mdi-facebook</v-icon> <v-icon>mdi-facebook</v-icon>
- 50 - 50
</v-btn> </v-btn>
@@ -237,74 +195,66 @@
</template> </template>
<script> <script>
// Mixins // Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable' import Proxyable from "vuetify/lib/mixins/proxyable";
// Vuex // Vuex
// import { get, sync } from 'vuex-pathify' // import { get, sync } from 'vuex-pathify'
export default { export default {
name: 'DashboardCoreSettings', name: "DashboardCoreSettings",
mixins: [Proxyable], mixins: [Proxyable],
data: () => ({
image:'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
mini: false, data: () => ({
drawer: null, image:
drawerImage: true, "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
gradient: drawer: null,
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)', drawerImage: true,
images: [ gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg', images: [
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg', "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg', "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg",
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg', "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg",
], "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg",
],
gradients: [ gradients: [
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)', "rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)",
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)', "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)', "rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)",
], ],
dark:null, dark: null,
color: "#E91E63",
colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
menu: false,
saveImage: "",
}),
// computed: {
// ...sync('app', [
// 'drawer',
// 'drawerImage',
// 'mini',
// ]),
// ...sync('user', [
// 'drawer@gradient',
// 'drawer@image',
// ]),
// ...get('user', [
// 'images',
// 'gradients',
// ]),
// },
color: '#E91E63', watch: {
colors: [ color(val) {
'#9C27b0', this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
'#00CAE3',
'#4CAF50',
'#ff9800',
'#E91E63',
'#FF5252',
],
menu: false,
saveImage: '',
}),
// computed: {
// ...sync('app', [
// 'drawer',
// 'drawerImage',
// 'mini',
// ]),
// ...sync('user', [
// 'drawer@gradient',
// 'drawer@image',
// ]),
// ...get('user', [
// 'images',
// 'gradients',
// ]),
// },
watch: {
color (val) {
this.$vuetify.theme.themes[this.isDark ? 'dark' : 'light'].primary = val
},
}, },
} },
};
</script> </script>
<style lang="sass"> <style lang="sass">

7
Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue
View File

@@ -4,10 +4,10 @@
elevation="1" elevation="1"
fab fab
small small
@click="mini = !mini" @click="$store.state.home.mini = !$store.state.home.mini"
> >
<v-icon> <v-icon>
{{ mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }} {{ $store.state.home.mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
</v-icon> </v-icon>
</v-btn> </v-btn>
</template> </template>
@@ -17,8 +17,9 @@
// import { sync } from 'vuex-pathify' // import { sync } from 'vuex-pathify'
export default { export default {
data:()=>({ data:()=>({
mini:false
}), }),
name: 'DefaultDrawerToggle', name: 'DefaultDrawerToggle',

75
Yi.Vue/src/store/modules/home.js
View File

@@ -1,42 +1,53 @@
const state = { //状态 const state = {
plateId: 0, drawer: null,
discussId: 0, drawerImage: true,
plateString: "", mini: false,
items: [{
title: 'Dashboard',
icon: 'mdi-view-dashboard',
to: '/',
},
{
title: 'User Profile',
icon: 'mdi-account',
to: '/components/profile/',
},
{
title: 'Regular Tables',
icon: 'mdi-clipboard-outline',
to: '/tables/regular/',
},
{
title: 'Typography',
icon: 'mdi-format-font',
to: '/components/typography/',
},
{
title: 'Icons',
icon: 'mdi-chart-bubble',
to: '/components/icons/',
},
{
title: 'Google Maps',
icon: 'mdi-map-marker',
to: '/maps/google/',
},
{
title: 'Notifications',
icon: 'mdi-bell',
to: '/components/notifications/',
},
],
} }
const mutations = { //变化//载荷 const mutations = { //变化//载荷
SET_PLATEID(state, n) {
state.plateId = n
},
SET_DOSCUSSIDSTRING(state, n) {
state.plateString = n
},
SET_DOSCUSSID(state, n) {
state.discussId = n
},
} }
//在action中可以配合axios进行权限判断 //在action中可以配合axios进行权限判断
const actions = { //动作 const actions = { //动作
set_plateId(context, n) {
context.commit('SET_PLATEID', n)
},
set_plateString(context, n) {
context.commit('SET_DOSCUSSIDSTRING', n)
},
set_discussId(context, n) {
context.commit('SET_DOSCUSSID', n)
}
} }
const getters = {}
// const getters = { //类似与计算属性 派生属性
// msg(state) {
// if (state.count > 80) {
// return "成绩优异"
// } else {
// return "成绩不合格"
// }
// }
// }
export default { state, mutations, actions } export default { state, mutations, actions, getters }

49
Yi.Vue/src/store/modules/user.js
View File

@@ -4,7 +4,26 @@ import accountApi from "@/api/accountApi"
//再导入axion请求 //再导入axion请求
const state = { //状态 const state = { //状态
token: getToken(), token: getToken(),
user: getUser() user: getUser(),
dark: false,
drawer: {
image: 0,
gradient: 0,
mini: false,
},
gradients: [
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
],
images: [
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
],
notifications: [],
rtl: false
} }
const mutations = { //变化//载荷 const mutations = { //变化//载荷
@@ -18,21 +37,12 @@ const mutations = { //变化//载荷
} }
} }
//在action中可以配合axios进行权限判断 //在action中可以配合axios进行权限判断
const actions = { //动作 const actions = { //动作
setIcon({ commit, state }, icon) { setIcon({ commit, state }, icon) {
state.user.icon = icon state.user.icon = icon
commit('SET_USER', state.user) commit('SET_USER', state.user)
}, },
setLevel({ commit, state }, level) {
commit('SET_USER', state.user)
},
// qqUpdate({ state }, openid) { // qqUpdate({ state }, openid) {
// return new Promise((resolv, reject) => { // return new Promise((resolv, reject) => {
// qqApi.qqupdate(openid, state.user.id).then(resp => { // qqApi.qqupdate(openid, state.user.id).then(resp => {
@@ -64,7 +74,6 @@ const actions = { //动作
commit('SET_TOKEN', resp.data.token) commit('SET_TOKEN', resp.data.token)
commit('SET_USER', resp.data.user) commit('SET_USER', resp.data.user)
} }
resolv(resp) resolv(resp)
}).catch(error => { }).catch(error => {
reject(error) reject(error)
@@ -118,5 +127,21 @@ const actions = { //动作
} }
const getters = { //类似与计算属性 派生属性
dark: (state, getters) => {
return (
state.dark ||
getters.gradient.indexOf('255, 255, 255') === -1
)
},
gradient: state => {
return state.gradients[state.drawer.gradient]
},
image: state => {
return state.drawer.image === '' ? state.drawer.image : state.images[state.drawer.image]
}
}
export default { state, mutations, actions }
export default { state, mutations, actions, getters }

4
Yi.Vue/src/util/myaxios.js
View File

@@ -1,5 +1,5 @@
import axios from 'axios' import axios from 'axios'
// import store from '../store/index' import store from '../store/index'
// import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index'; // import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
const myaxios = axios.create({ const myaxios = axios.create({
// baseURL:'/'// // baseURL:'/'//
@@ -11,7 +11,7 @@ const myaxios = axios.create({
}) })
// 请求拦截器 // 请求拦截器
myaxios.interceptors.request.use(function(config) { myaxios.interceptors.request.use(function(config) {
// config.headers.Authorization = 'Bearer ' + store.state.user.token; config.headers.Authorization = 'Bearer ' + store.state.user.token;
// store.dispatch("openLoad"); // store.dispatch("openLoad");
return config; return config;
}, function(error) { }, function(error) {