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
注册
菜单加载：
登录成功后去后台查询菜单，在查询完菜单后，在根据用户去查询权限，将权限code也携带在菜单中，可以实现某一些页面中的按钮这个用户没有权限，就不显示。当然在后端的接口也要验证是否有权限，否则通过手动修改按钮显示也是可以实现数据传入后台。
#### 2.软件架构
1. 系统环境
......
config/index.js
浏览文件 @ f49eebe7
......@@ -10,18 +10,18 @@ module.exports = {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
'/api': {
target: 'http://localhost:2020', // 请求的接口地址
changeOrigin: true,
pathRewrite: {
'^/': '/'
'^/api': '/'
}
}
},
// Various Dev Server settings
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,
errorOverlay: true,
notifyOnErrors: true,
......
src/api.js
浏览文件 @ f49eebe7
......@@ -89,7 +89,7 @@ axios.interceptors.response.use(success => {
/**
* 封装请求
*/
let base = '';
let base = 'api/';
export const postApi = (url, params) => {
return axios({
method: 'post',
......
src/router/index.js
浏览文件 @ f49eebe7
......@@ -3,17 +3,16 @@ import Router from 'vue-router'
import login from '../views/login'
import register from '../views/register/register'
import manager from '../views/manager/index'
import menu from '../views/system/menu'
import stuClass from '../views/system/stuClass'
import de from "element-ui/src/locale/lang/de";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '', // 访问的地址
redirect:'/login', // 重定向
component: login // 组件名称
path: '', // 访问的地址
redirect: '/login', // 重定向
component: login // 组件名称
},
{
path: '/login',
......@@ -28,18 +27,32 @@ const router = new Router({
{
path: '/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) => {
if (token === 'null' || token === '') {
next('/login');
} 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)
export default new vuex.Store({
state: {
routes: [],
userInfo: []
userInfo: [],
},
// 同步
......@@ -26,7 +26,7 @@ export default new vuex.Store({
userInfo(state, data) {
state.userInfo = data;
localStorage.setItem("userInfo", JSON.stringify(data));
}
},
},
// 异步
......
src/views/login.vue
浏览文件 @ f49eebe7
......@@ -44,7 +44,7 @@
verification: ""
},
rememberMe: true,
imgSrc: "/getVerify?temp=" + new Date(),
imgSrc: "/api/getVerify?temp=" + new Date(),
message: "",
addAndEditRules: {
account: {
......@@ -68,7 +68,7 @@
created() {},
methods: {
getVerification() {
this.imgSrc = "/getVerify?temp=" + +new Date();
this.imgSrc = "/api/getVerify?temp=" + +new Date();
},
handleConfirmEvent() {
this.$refs.loginFrom.validate(valid => {
......
src/views/manager/index.vue
浏览文件 @ f49eebe7
<template>
<div style="height: 100%">
<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-menu :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
active-text-color="#66b1ff">
<i v-if="isCollapse" @click="handleOpen" class="hideIcon el-icon-s-unfold"></i>
<i v-else @click="handleClose" class="hideIcon el-icon-s-fold"></i>
active-text-color="#66b1ff" :router="true" :collapse-transition="false" :default-active="activePath">
<i v-if="isCollapse" @click="isCollapse = false" class="hideIcon el-icon-s-unfold"></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">
<template slot="title">
<i :class="item.iconImg"></i>
......@@ -14,13 +14,15 @@
</template>
<!-- 第二层菜单-->
<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>
<!-- 第三层菜单-->
<div v-else v-for="itChild in itemChild.child" :key="itChild.id">
<el-submenu :index="itemChild.id">
<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>
</div>
</div>
......@@ -28,14 +30,13 @@
</el-menu>
</el-scrollbar>
</el-aside>
<!-- 系统头部 -->
<el-container>
<el-header style="text-align: right; font-size: 12px;background-color: #a9b3a9">
<el-dropdown>
<div style="margin-top: 5px">
<el-avatar :size="50" class="imgTitle">
<img :src="avatarURL" />
<img :src="avatarURL"/>
</el-avatar>
<span class="nameClass">
{{ userInfo.name }}
......@@ -49,57 +50,58 @@
</el-dropdown-menu>
</el-dropdown>
</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>
<router-view />
<router-view></router-view>
</el-main>
</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"
:before-close="pwdAddAndEditClose" width="30%">
:before-close="pwdAddAndEditClose" width="30%">
<el-form ref="pwdEditElForm" :model="pwdFormData" class="form">
<el-form-item prop="oldPassword" label="旧密码：" :label-width="formLabelWidth">
<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 prop="password" label="新密码：" :label-width="formLabelWidth">
<el-input v-model="pwdFormData.password" placeholder="请输入新密码" style="width:90%" show-password clearable
autosize></el-input>
autosize></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
......@@ -110,11 +112,11 @@
<!-- 用户信息模态框 -->
<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-item prop="name" label="用户名：" :label-width="formLabelWidth">
<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 prop="classId" label="班级：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.classId" placeholder="请选择班级" style="width:90%" clearable autosize>
......@@ -123,11 +125,11 @@
</el-form-item>
<el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth">
<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 prop="phone" label="电话：" :label-width="formLabelWidth">
<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>
<div slot="footer" class="dialog-footer">
......@@ -154,7 +156,7 @@
stu: [],
tableData: [],
isCollapse: true,
menuWith: '64px',
activePath: '', // 当前激活菜单的index,存储在localStorage中
// 模态框相关
title: '',
closeOnClickModal: false,
......@@ -202,6 +204,7 @@
created() {
// 初始化，加载用户信息和菜单
this.init();
this.activePath = window.localStorage.getItem("currentMenu");
},
methods: {
init() {
......@@ -232,19 +235,10 @@
}
},
// 点开菜单
handleOpen() {
this.isCollapse = false
this.menuWith = '218px';
},
// 关闭菜单
handleClose() {
this.isCollapse = true
// 这里为了解决背景灰色框执行太快，体验不好问题
setTimeout(() => {
this.menuWith = '64px';
}, 250);
// 点击的菜单变色
changeActivePath(path) {
localStorage.setItem("currentMenu", path);
this.activePath = path;
},
// 修改用户头像
......@@ -262,7 +256,7 @@
submitPwd() {
let url = "/updatePwd?id=" + this.userInfo.id + "&oldPwd=" + this.pwdFormData.oldPassword + "&newPwd=" + this.pwdFormData.password;
this.api.getApi(url).then(e => {
if (e.data.code === 200){
if (e.data.code === 200) {
this.pwdAddAndEditDialogFormVisible = false;
this.loginOut();
}
......@@ -310,8 +304,9 @@
if (e.data.code === 200) {
this.$store.commit("removeState")
localStorage.removeItem("Authorization");
localStorage.removeItem("currentMenu");
this.$router.push("/login");
}else {
} else {
Message.info("系统出现问题")
}
});
......
src/views/system/stuClass/index.vue
浏览文件 @ f49eebe7
<template>
<div>
班
</div>
</template>
<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>
<div>
欢迎使用
</div>
</template>
<script>
export default {
name: "menu",
name: "welcome",
data() {
return {}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或