Skip to content

S
Stusystem Web

cxt104926 / Stusystem Web

通知 4
Star 0
Fork 0
S
Stusystem Web

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f49eebe7 编写于 作者: cxt104926's avatar cxt104926
浏览文件
操作

嵌入页面

上级 72f1812d
隐藏空白更改
内联 并排
Showing with 234 addition and 94 deletion
README.md
浏览文件 @ f49eebe7
...@@ -38,6 +38,9 @@ npm run build --report ...@@ -38,6 +38,9 @@ npm run build --report
注册 注册
菜单加载：
登录成功后去后台查询菜单，在查询完菜单后，在根据用户去查询权限，将权限code也携带在菜单中，可以实现某一些页面中的按钮这个用户没有权限，就不显示。当然在后端的接口也要验证是否有权限，否则通过手动修改按钮显示也是可以实现数据传入后台。
#### 2.软件架构 #### 2.软件架构
1. 系统环境 1. 系统环境
......
config/index.js
浏览文件 @ f49eebe7
...@@ -10,18 +10,18 @@ module.exports = { ...@@ -10,18 +10,18 @@ module.exports = {
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/': { '/api': {
target: 'http://localhost:2020', // 请求的接口地址 target: 'http://localhost:2020', // 请求的接口地址
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/': '/' '^/api': '/'
} }
} }
}, },
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST host: 'localhost', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 2021, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
notifyOnErrors: true, notifyOnErrors: true,
......
src/api.js
浏览文件 @ f49eebe7
...@@ -89,7 +89,7 @@ axios.interceptors.response.use(success => { ...@@ -89,7 +89,7 @@ axios.interceptors.response.use(success => {
/** /**
* 封装请求 * 封装请求
*/ */
let base = ''; let base = 'api/';
export const postApi = (url, params) => { export const postApi = (url, params) => {
return axios({ return axios({
method: 'post', method: 'post',
......
src/router/index.js
浏览文件 @ f49eebe7
...@@ -3,17 +3,16 @@ import Router from 'vue-router' ...@@ -3,17 +3,16 @@ import Router from 'vue-router'
import login from '../views/login' import login from '../views/login'
import register from '../views/register/register' import register from '../views/register/register'
import manager from '../views/manager/index' import manager from '../views/manager/index'
import menu from '../views/system/menu' import de from "element-ui/src/locale/lang/de";
import stuClass from '../views/system/stuClass'
Vue.use(Router) Vue.use(Router)
const router = new Router({ const router = new Router({
routes: [ routes: [
{ {
path: '', // 访问的地址 path: '', // 访问的地址
redirect:'/login', // 重定向 redirect: '/login', // 重定向
component: login // 组件名称 component: login // 组件名称
}, },
{ {
path: '/login', path: '/login',
...@@ -28,18 +27,32 @@ const router = new Router({ ...@@ -28,18 +27,32 @@ const router = new Router({
{ {
path: '/manager', path: '/manager',
name: 'manager', name: 'manager',
component: manager redirect: '/system/welcome',
component: manager,
children: [
{
path: '/system/welcome',
name: 'welcome',
component: () => import("../views/system/welcome")
},
{
// 嵌入页面
path: '/system/stuIframe',
name: 'stuIframe',
component: () => import("../views/system/stuIframe")
},
{
path: '/system/stuMenu',
name: 'stuMenu',
component: () => import("../views/system/stuMenu")
},
{
path: '/system/stuClass',
name: 'stuClass',
component: () => import("../views/system/stuClass")
}
]
}, },
{
path: '/system/menu',
name: 'menu',
component: menu
},
{
path: '/system/stuClass',
name: 'stuClass',
component: stuClass
}
] ]
}); });
...@@ -53,7 +66,14 @@ router.beforeEach((to, from, next) => { ...@@ -53,7 +66,14 @@ router.beforeEach((to, from, next) => {
if (token === 'null' || token === '') { if (token === 'null' || token === '') {
next('/login'); next('/login');
} else { } else {
next(); // 看是否是嵌入页面，嵌入页面url前缀有iframe:
let path = to.path;
if (path.indexOf("iframe:") !== -1) {
// router.push('/system/iframe');
router.push({path: '/system/stuIframe', query: {url: path}});
} else {
next();
}
} }
} }
}); });
......
src/store/store.js
浏览文件 @ f49eebe7
...@@ -6,7 +6,7 @@ vue.use(vuex) ...@@ -6,7 +6,7 @@ vue.use(vuex)
export default new vuex.Store({ export default new vuex.Store({
state: { state: {
routes: [], routes: [],
userInfo: [] userInfo: [],
}, },
// 同步 // 同步
...@@ -26,7 +26,7 @@ export default new vuex.Store({ ...@@ -26,7 +26,7 @@ export default new vuex.Store({
userInfo(state, data) { userInfo(state, data) {
state.userInfo = data; state.userInfo = data;
localStorage.setItem("userInfo", JSON.stringify(data)); localStorage.setItem("userInfo", JSON.stringify(data));
} },
}, },
// 异步 // 异步
......
src/views/login.vue
浏览文件 @ f49eebe7
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
verification: "" verification: ""
}, },
rememberMe: true, rememberMe: true,
imgSrc: "/getVerify?temp=" + new Date(), imgSrc: "/api/getVerify?temp=" + new Date(),
message: "", message: "",
addAndEditRules: { addAndEditRules: {
account: { account: {
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
created() {}, created() {},
methods: { methods: {
getVerification() { getVerification() {
this.imgSrc = "/getVerify?temp=" + +new Date(); this.imgSrc = "/api/getVerify?temp=" + +new Date();
}, },
handleConfirmEvent() { handleConfirmEvent() {
this.$refs.loginFrom.validate(valid => { this.$refs.loginFrom.validate(valid => {
......
src/views/manager/index.vue
浏览文件 @ f49eebe7
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<el-container style="height: 100%; border: 1px solid #eee"> <el-container style="height: 100%; border: 1px solid #eee">
<el-aside :width="menuWith" style="background-color: rgb(238, 241, 246)"> <el-aside :width="isCollapse?'64px':'200px'" style="background-color: rgb(238, 241, 246)">
<el-scrollbar style="width: 100%"> <el-scrollbar style="width: 100%">
<el-menu :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
active-text-color="#66b1ff"> active-text-color="#66b1ff" :router="true" :collapse-transition="false" :default-active="activePath">
<i v-if="isCollapse" @click="handleOpen" class="hideIcon el-icon-s-unfold"></i> <i v-if="isCollapse" @click="isCollapse = false" class="hideIcon el-icon-s-unfold"></i>
<i v-else @click="handleClose" class="hideIcon el-icon-s-fold"></i> <i v-else @click="isCollapse = true" class="hideIcon el-icon-s-fold"></i>
<el-submenu v-for="(item,index) in menu" :key="item.id" :index="item.id"> <el-submenu v-for="(item,index) in menu" :key="item.id" :index="item.id">
<template slot="title"> <template slot="title">
<i :class="item.iconImg"></i> <i :class="item.iconImg"></i>
...@@ -14,13 +14,15 @@ ...@@ -14,13 +14,15 @@
</template> </template>
<!-- 第二层菜单--> <!-- 第二层菜单-->
<div v-for="(itemChild,index) in item.child" :key="itemChild.id"> <div v-for="(itemChild,index) in item.child" :key="itemChild.id">
<el-menu-item v-if="itemChild.child === undefined" :index="itemChild.id">{{ itemChild.name }} <el-menu-item v-if="itemChild.child === undefined" :index="itemChild.url"
@click="changeActivePath(itemChild.url)">{{ itemChild.name }}
</el-menu-item> </el-menu-item>
<!-- 第三层菜单--> <!-- 第三层菜单-->
<div v-else v-for="itChild in itemChild.child" :key="itChild.id"> <div v-else v-for="itChild in itemChild.child" :key="itChild.id">
<el-submenu :index="itemChild.id"> <el-submenu :index="itemChild.id">
<template slot="title">{{ itemChild.name }}</template> <template slot="title">{{ itemChild.name }}</template>
<el-menu-item :index="itChild.id">{{ itChild.name }}</el-menu-item> <el-menu-item :index="itChild.url" @click="changeActivePath(itChild.url)">{{ itChild.name }}
</el-menu-item>
</el-submenu> </el-submenu>
</div> </div>
</div> </div>
...@@ -28,14 +30,13 @@ ...@@ -28,14 +30,13 @@
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</el-aside> </el-aside>
<!-- 系统头部 --> <!-- 系统头部 -->
<el-container> <el-container>
<el-header style="text-align: right; font-size: 12px;background-color: #a9b3a9"> <el-header style="text-align: right; font-size: 12px;background-color: #a9b3a9">
<el-dropdown> <el-dropdown>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<el-avatar :size="50" class="imgTitle"> <el-avatar :size="50" class="imgTitle">
<img :src="avatarURL" /> <img :src="avatarURL"/>
</el-avatar> </el-avatar>
<span class="nameClass"> <span class="nameClass">
{{ userInfo.name }} {{ userInfo.name }}
...@@ -49,57 +50,58 @@ ...@@ -49,57 +50,58 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-header> </el-header>
<!-- 修改头像模态框 -->
<el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="30%">
<el-row type="flex" justify="center">
<div class="cropper">
<vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
:info="option.info" :full="option.full" :canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
@realTime="realTime"></vueCropper>
</div>
<div class="previewBox">
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img">
</div>
<el-row type="flex" justify="center">
<el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="uploadImg">
<el-button size="mini" type="primary">更换头像</el-button>
</el-upload>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-plus" circle size="mini" @click="changeScale(1)"></el-button>
<el-button icon="el-icon-minus" circle size="mini" @click="changeScale(-1)"></el-button>
<el-button icon="el-icon-download" circle size="mini" @click="down('blob')"></el-button>
<el-button icon="el-icon-refresh-left" circle size="mini" @click="rotateLeft"></el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="rotateRight"></el-button>
</el-row>
</div>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveEditAvatar">确 定</el-button>
<el-button @click="editAvatarDialog = false">取 消</el-button>
</span>
</el-dialog>
<el-main> <el-main>
<router-view /> <router-view></router-view>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
<!-- 修改头像模态框 -->
<el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="30%">
<el-row type="flex" justify="center">
<div class="cropper">
<vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
:info="option.info" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
:original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime"></vueCropper>
</div>
<div class="previewBox">
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img">
</div>
<el-row type="flex" justify="center">
<el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="uploadImg">
<el-button size="mini" type="primary">更换头像</el-button>
</el-upload>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-plus" circle size="mini" @click="changeScale(1)"></el-button>
<el-button icon="el-icon-minus" circle size="mini" @click="changeScale(-1)"></el-button>
<el-button icon="el-icon-download" circle size="mini" @click="down('blob')"></el-button>
<el-button icon="el-icon-refresh-left" circle size="mini" @click="rotateLeft"></el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="rotateRight"></el-button>
</el-row>
</div>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveEditAvatar">确 定</el-button>
<el-button @click="editAvatarDialog = false">取 消</el-button>
</span>
</el-dialog>
<!-- 密码模态框 --> <!-- 密码模态框 -->
<el-dialog title="修改密码" :closeOnClickModal="pwdCloseOnClickModal" :visible.sync="pwdAddAndEditDialogFormVisible" <el-dialog title="修改密码" :closeOnClickModal="pwdCloseOnClickModal" :visible.sync="pwdAddAndEditDialogFormVisible"
:before-close="pwdAddAndEditClose" width="30%"> :before-close="pwdAddAndEditClose" width="30%">
<el-form ref="pwdEditElForm" :model="pwdFormData" class="form"> <el-form ref="pwdEditElForm" :model="pwdFormData" class="form">
<el-form-item prop="oldPassword" label="旧密码：" :label-width="formLabelWidth"> <el-form-item prop="oldPassword" label="旧密码：" :label-width="formLabelWidth">
<el-input v-model="pwdFormData.oldPassword" placeholder="请输入旧密码" style="width:90%" show-password clearable <el-input v-model="pwdFormData.oldPassword" placeholder="请输入旧密码" style="width:90%" show-password clearable
autosize></el-input> autosize></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" label="新密码：" :label-width="formLabelWidth"> <el-form-item prop="password" label="新密码：" :label-width="formLabelWidth">
<el-input v-model="pwdFormData.password" placeholder="请输入新密码" style="width:90%" show-password clearable <el-input v-model="pwdFormData.password" placeholder="请输入新密码" style="width:90%" show-password clearable
autosize></el-input> autosize></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -110,11 +112,11 @@ ...@@ -110,11 +112,11 @@
<!-- 用户信息模态框 --> <!-- 用户信息模态框 -->
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
:before-close="handleDialogClose" width="30%"> :before-close="handleDialogClose" width="30%">
<el-form ref="addAndEditElForm" :model="addAndEditFormData" class="form"> <el-form ref="addAndEditElForm" :model="addAndEditFormData" class="form">
<el-form-item prop="name" label="用户名：" :label-width="formLabelWidth"> <el-form-item prop="name" label="用户名：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:90%" type="text" clearable <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:90%" type="text" clearable
autosize></el-input> autosize></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="classId" label="班级：" :label-width="formLabelWidth"> <el-form-item prop="classId" label="班级：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.classId" placeholder="请选择班级" style="width:90%" clearable autosize> <el-select v-model="addAndEditFormData.classId" placeholder="请选择班级" style="width:90%" clearable autosize>
...@@ -123,11 +125,11 @@ ...@@ -123,11 +125,11 @@
</el-form-item> </el-form-item>
<el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth"> <el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.idCard" placeholder="请输入身份证号" style="width:90%" type="number" min="0" <el-input v-model="addAndEditFormData.idCard" placeholder="请输入身份证号" style="width:90%" type="number" min="0"
clearable autosize></el-input> clearable autosize></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="phone" label="电话：" :label-width="formLabelWidth"> <el-form-item prop="phone" label="电话：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="number" min="0" <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="number" min="0"
clearable autosize></el-input> clearable autosize></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -154,7 +156,7 @@ ...@@ -154,7 +156,7 @@
stu: [], stu: [],
tableData: [], tableData: [],
isCollapse: true, isCollapse: true,
menuWith: '64px', activePath: '', // 当前激活菜单的index,存储在localStorage中
// 模态框相关 // 模态框相关
title: '', title: '',
closeOnClickModal: false, closeOnClickModal: false,
...@@ -202,6 +204,7 @@ ...@@ -202,6 +204,7 @@
created() { created() {
// 初始化，加载用户信息和菜单 // 初始化，加载用户信息和菜单
this.init(); this.init();
this.activePath = window.localStorage.getItem("currentMenu");
}, },
methods: { methods: {
init() { init() {
...@@ -232,19 +235,10 @@ ...@@ -232,19 +235,10 @@
} }
}, },
// 点开菜单 // 点击的菜单变色
handleOpen() { changeActivePath(path) {
this.isCollapse = false localStorage.setItem("currentMenu", path);
this.menuWith = '218px'; this.activePath = path;
},
// 关闭菜单
handleClose() {
this.isCollapse = true
// 这里为了解决背景灰色框执行太快，体验不好问题
setTimeout(() => {
this.menuWith = '64px';
}, 250);
}, },
// 修改用户头像 // 修改用户头像
...@@ -262,7 +256,7 @@ ...@@ -262,7 +256,7 @@
submitPwd() { submitPwd() {
let url = "/updatePwd?id=" + this.userInfo.id + "&oldPwd=" + this.pwdFormData.oldPassword + "&newPwd=" + this.pwdFormData.password; let url = "/updatePwd?id=" + this.userInfo.id + "&oldPwd=" + this.pwdFormData.oldPassword + "&newPwd=" + this.pwdFormData.password;
this.api.getApi(url).then(e => { this.api.getApi(url).then(e => {
if (e.data.code === 200){ if (e.data.code === 200) {
this.pwdAddAndEditDialogFormVisible = false; this.pwdAddAndEditDialogFormVisible = false;
this.loginOut(); this.loginOut();
} }
...@@ -310,8 +304,9 @@ ...@@ -310,8 +304,9 @@
if (e.data.code === 200) { if (e.data.code === 200) {
this.$store.commit("removeState") this.$store.commit("removeState")
localStorage.removeItem("Authorization"); localStorage.removeItem("Authorization");
localStorage.removeItem("currentMenu");
this.$router.push("/login"); this.$router.push("/login");
}else { } else {
Message.info("系统出现问题") Message.info("系统出现问题")
} }
}); });
......
src/views/system/stuClass/index.vue
浏览文件 @ f49eebe7
<template> <template>
<div>
班
</div>
</template> </template>
<script> <script>
......
src/views/system/stuIframe/index.vue 0 → 100644
浏览文件 @ f49eebe7
<template>
<div class="iframe-container">
<iframe id="iframeId" :src="src" frameborder="0" class="pc iframe" scrolling="auto"></iframe>
</div>
</template>
<script>
export default {
name: "stuIframe",
data() {
return {
src: '',
}
},
created() {
let iframe = this.$route.query.url;
let split = iframe.split(":");
this.src = split[1];
},
methods: {},
mounted() {
function changeFrameHeight() {
const oIframe = document.getElementById('iframeId');
const deviceWidth = document.documentElement.clientWidth;
const deviceHeight = document.documentElement.clientHeight;
oIframe.style.width = (Number(deviceWidth) - 220) + 'px';
oIframe.style.height = (Number(deviceHeight) - 125) + 'px';
}
changeFrameHeight()
},
}
</script>
<style scoped>
.iframe-container {
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.iframe-container .iframe {
width: 100%;
height: 100%;
}
</style>
src/views/system/stuMenu/index.vue 0 → 100644
浏览文件 @ f49eebe7
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "stuMenu",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
}
}
</script>
<style scoped>
</style>
src/views/system/menu/index.vue → src/views/system/welcome/index.vue
浏览文件 @ f49eebe7
<template> <template>
<div>
欢迎使用
</div>
</template> </template>
<script> <script>
export default { export default {
name: "menu", name: "welcome",
data() { data() {
return {} return {}
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或