优化

src/router/index.js

@@ -3,6 +3,8 @@ 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'
 
 Vue.use(Router)
 
@@ -27,6 +29,16 @@ const router = new Router({
       path: '/manager',
       name: 'manager',
       component: manager
+    },
+    {
+      path: '/system/menu',
+      name: 'menu',
+      component: menu
+    },
+    {
+      path: '/system/stuClass',
+      name: 'stuClass',
+      component: stuClass
     }
   ]
 });

src/views/login.vue

@@ -88,8 +88,8 @@ export default {
 
 <style scoped>
 .login {
-  /*background-color: #edf0ff; !* 登录页面背景 *!*/
-  background-color: #ccecff; /* 登录页面背景 */
+  background-image: url("../assets/img/2.jpg");
+  /*background-color: #ccecff; !* 登录页面背景 *!*/
   height: 100%;
 }
 

src/views/manager/index.vue

@@ -11,6 +11,16 @@
             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>
+            <el-submenu v-for="(item,index) in menu" :key="item.id" :index="index">
+              <template slot="title">
+                <i :class="item.icon"></i>
+                <span>导航二</span>
+              </template>
+              <el-menu-item index="2-1">选项21</el-menu-item>
+              <el-menu-item index="2-2">选项22</el-menu-item>
+              <el-menu-item index="2-3">选项3</el-menu-item>
+            </el-submenu>
+
             <el-submenu index="1">
               <template slot="title">
                 <i class="el-icon-location"></i>
@@ -25,27 +35,7 @@
               </el-submenu>
             </el-submenu>
 
-            <el-submenu index="2">
-              <template slot="title">
-                <i class="el-icon-menu"></i>
-                <span>导航二</span>
-              </template>
-              <el-menu-item index="2-1">选项21</el-menu-item>
-              <el-menu-item index="2-2">选项22</el-menu-item>
-              <el-menu-item index="2-3">选项3</el-menu-item>
-            </el-submenu>
-
-            <el-menu-item index="3" disabled>
-              <i class="el-icon-document"></i>
-              <span slot="title">导航三</span>
-            </el-menu-item>
 
-            <el-menu-item index="4">
-              <template slot="title">
-                <i class="el-icon-setting"></i>
-                <span>导航四</span>
-              </template>
-            </el-menu-item>
           </el-menu>
         </el-scrollbar>
       </el-aside>
@@ -173,219 +163,223 @@
 </template>
 
 <script>
-import {VueCropper} from 'vue-cropper'
+  import {VueCropper} from 'vue-cropper'
 
-export default {
-  name: 'index',
-  components: {VueCropper},
-  data() {
-    return {
-      stu: [],
-      tableData: [],
-      isCollapse: true,
-      menuWith: '64px',
-      // 模态框相关
-      title: '',
-      closeOnClickModal: false,
-      addAndEditDialogFormVisible: false,
-      addAndEditFormData: {
-        name: '',
-        classId: '',
-        oldPassword: '',
-        password: '',
-        phone: '',
-        idCard: ''
-      },
-      formLabelWidth: '120px',
-      classIds: [],
+  export default {
+    name: 'index',
+    components: {VueCropper},
+    data() {
+      return {
+        stu: [],
+        tableData: [],
+        isCollapse: true,
+        menuWith: '64px',
+        // 模态框相关
+        title: '',
+        closeOnClickModal: false,
+        addAndEditDialogFormVisible: false,
+        addAndEditFormData: {
+          name: '',
+          classId: '',
+          oldPassword: '',
+          password: '',
+          phone: '',
+          idCard: ''
+        },
+        formLabelWidth: '120px',
+        classIds: [],
+        // 菜单数组
+        menu: [],
 
-      // 头像相关参数
-      avatarURL: require("@/assets/img/w1.png"),
-      editAvatarDialog: false,
-      previews: {},
-      option: {
-        img: '', // 裁剪图片的地址
-        info: true, // 裁剪框的大小信息
-        outputSize: 1, // 剪切后的图片质量（0.1-1）
-        full: true, // 输出原图比例截图 props名full
-        outputType: 'png', // 裁剪生成额图片的格式
-        canMove: true,  // 能否拖动图片
-        original: false,  // 上传图片是否显示原始宽高
-        canMoveBox: true,  // 能否拖动截图框
-        autoCrop: true, // 是否默认生成截图框
-        autoCropWidth: 100,
-        autoCropHeight: 100,
-        fixedBox: true // 截图框固定大小
-      },
+        // 头像相关参数
+        avatarURL: require("@/assets/img/w1.png"),
+        editAvatarDialog: false,
+        previews: {},
+        option: {
+          img: '', // 裁剪图片的地址
+          info: true, // 裁剪框的大小信息
+          outputSize: 1, // 剪切后的图片质量（0.1-1）
+          full: true, // 输出原图比例截图 props名full
+          outputType: 'png', // 裁剪生成额图片的格式
+          canMove: true,  // 能否拖动图片
+          original: false,  // 上传图片是否显示原始宽高
+          canMoveBox: true,  // 能否拖动截图框
+          autoCrop: true, // 是否默认生成截图框
+          autoCropWidth: 100,
+          autoCropHeight: 100,
+          fixedBox: true // 截图框固定大小
+        },
 
 
-    }
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let cl = {
-        id: 8889998,
-        name: "苍穹长空"
       }
-      this.classIds.push(cl);
-      // this.api.getApi('/manager/stu/get?name=&phone=&classId=').then(res => {
-      //   this.stu = res.data.data;
-      // })
-    },
-    handleOpen() {
-      this.isCollapse = false
-      this.menuWith = '218px';
-    },
-    handleClose() {
-      this.isCollapse = true
-      // 这里为了解决背景灰色框执行太快，体验不好问题
-      setTimeout(() => {
-        this.menuWith = '64px';
-      }, 250);
     },
-    // 修改用户头像
-    editAvatar() {
-      this.editAvatarDialog = true
-      this.option.img = this.avatarURL
+    created() {
+      this.init();
     },
-    // 修改用户信息
-    updateUserInfo() {
-      this.title = "修改用户信息";
-      this.addAndEditDialogFormVisible = true;
+    methods: {
+      init() {
+        let cl = {
+          id: 8889998,
+          name: "苍穹长空"
+        }
+        this.classIds.push(cl);
 
+        // 加载菜单
+        this.api.getApi('/menu/get/treeMenu').then(res => {
+          this.menu = res.data;
+        })
+      },
+      handleOpen() {
+        this.isCollapse = false
+        this.menuWith = '218px';
+      },
+      handleClose() {
+        this.isCollapse = true
+        // 这里为了解决背景灰色框执行太快，体验不好问题
+        setTimeout(() => {
+          this.menuWith = '64px';
+        }, 250);
+      },
+      // 修改用户头像
+      editAvatar() {
+        this.editAvatarDialog = true
+        this.option.img = this.avatarURL
+      },
+      // 修改用户信息
+      updateUserInfo() {
+        this.title = "修改用户信息";
+        this.addAndEditDialogFormVisible = true;
 
-    },
-    // 退出系统
-    loginOut() {
-      this.api.getApi("/logout").then(e => {
-        if (e.data.code === 200) {
-          this.$router.push("/login");
-          localStorage.removeItem("Authorization");
-        }
-      });
-    },
-    // 提交修改的用户信息
-    handleConfirmEvent() {
-      this.addAndEditDialogFormVisible = false;
 
-    },
-    // 取消提交修改的用户信息
-    handleDialogClose() {
-      this.addAndEditDialogFormVisible = false;
-    },
+      },
+      // 退出系统
+      loginOut() {
+        this.api.getApi("/logout").then(e => {
+          if (e.data.code === 200) {
+            this.$router.push("/login");
+            localStorage.removeItem("Authorization");
+          }
+        });
+      },
+      // 提交修改的用户信息
+      handleConfirmEvent() {
+        this.addAndEditDialogFormVisible = false;
 
-    /**用户头像相关方法*/
-    // 保存头像修改
-    saveEditAvatar() {
-      this.editAvatarDialog = false
-      this.finish('blob')
-    },
-    // 放大/缩小
-    changeScale(num) {
-      num = num || 1;
-      this.$refs.cropper.changeScale(num);
-    },
-    // 左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft();
-    },
-    // 右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight();
-    },
-    // 保存上传图片
-    finish(type) {
-      if (type === 'blob') {
-        this.$refs.cropper.getCropBlob((data) => {
-          this.avatarURL = window.URL.createObjectURL(data)
-          //访问接口保存到数据库写这儿!
-        })
-      } else {
-        this.$refs.cropper.getCropData((data) => {
-          //访问接口保存到数据库写这儿!
-        })
-      }
-    },
-    // 实时预览函数
-    realTime(data) {
-      this.previews = data
-    },
-    // 下载图片
-    down(type) {
-      var aLink = document.createElement('a')
-      aLink.download = 'author-img'
-      if (type === 'blob') {
-        this.$refs.cropper.getCropBlob((data) => {
-          aLink.href = window.URL.createObjectURL(data)
-          aLink.click()
-        })
-      } else {
-        this.$refs.cropper.getCropData((data) => {
-          aLink.href = data;
-          aLink.click()
-        })
-      }
-    },
-    // 更换头像--上传本地图片
-    uploadImg(file) {
-      var _this = this;
-      var reader = new FileReader();
-      reader.onload = (e) => {
-        let data;
-        if (typeof e.target.result === 'object') {
-          // 把Array Buffer转化为blob 如果是base64不需要
-          data = window.URL.createObjectURL(new Blob([e.target.result]))
+      },
+      // 取消提交修改的用户信息
+      handleDialogClose() {
+        this.addAndEditDialogFormVisible = false;
+      },
+
+      /**用户头像相关方法*/
+      // 保存头像修改
+      saveEditAvatar() {
+        this.editAvatarDialog = false
+        this.finish('blob')
+      },
+      // 放大/缩小
+      changeScale(num) {
+        num = num || 1;
+        this.$refs.cropper.changeScale(num);
+      },
+      // 左旋转
+      rotateLeft() {
+        this.$refs.cropper.rotateLeft();
+      },
+      // 右旋转
+      rotateRight() {
+        this.$refs.cropper.rotateRight();
+      },
+      // 保存上传图片
+      finish(type) {
+        if (type === 'blob') {
+          this.$refs.cropper.getCropBlob((data) => {
+            this.avatarURL = window.URL.createObjectURL(data)
+            //访问接口保存到数据库写这儿!
+          })
         } else {
-          data = e.target.result
+          this.$refs.cropper.getCropData((data) => {
+            //访问接口保存到数据库写这儿!
+          })
         }
-        _this.option.img = data
-      }
-      // 转化为base64
-      // reader.readAsDataURL(file.raw)
-      // 转化为blob
-      reader.readAsArrayBuffer(file.raw);
-    },
+      },
+      // 实时预览函数
+      realTime(data) {
+        this.previews = data
+      },
+      // 下载图片
+      down(type) {
+        var aLink = document.createElement('a')
+        aLink.download = 'author-img'
+        if (type === 'blob') {
+          this.$refs.cropper.getCropBlob((data) => {
+            aLink.href = window.URL.createObjectURL(data)
+            aLink.click()
+          })
+        } else {
+          this.$refs.cropper.getCropData((data) => {
+            aLink.href = data;
+            aLink.click()
+          })
+        }
+      },
+      // 更换头像--上传本地图片
+      uploadImg(file) {
+        var _this = this;
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          let data;
+          if (typeof e.target.result === 'object') {
+            // 把Array Buffer转化为blob 如果是base64不需要
+            data = window.URL.createObjectURL(new Blob([e.target.result]))
+          } else {
+            data = e.target.result
+          }
+          _this.option.img = data
+        }
+        // 转化为base64
+        // reader.readAsDataURL(file.raw)
+        // 转化为blob
+        reader.readAsArrayBuffer(file.raw);
+      },
+    }
   }
-}
 </script>
 
 <style scoped>
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  min-height: 400px;
-}
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
 
-.hideIcon {
-  font-size: 30px;
-  color: #e7efee;
-  margin: 10px 30%;
-}
+  .hideIcon {
+    font-size: 30px;
+    color: #e7efee;
+    margin: 10px 30%;
+  }
 
-.imgTitle {
-  /*margin-top: 6px;*/
-}
+  .imgTitle {
+    /*margin-top: 6px;*/
+  }
 
-/*用户头像修改*/
-.previewBox {
-  text-align: center;
-  margin-left: 60px;
-}
+  /*用户头像修改*/
+  .previewBox {
+    text-align: center;
+    margin-left: 60px;
+  }
 
-.preview {
-  width: 150px;
-  height: 150px;
-  margin: 0px auto 20px auto;
-  border-radius: 50%;
-  border: 1px solid #ccc;
-  background-color: #ccc;
-  overflow: hidden;
-}
+  .preview {
+    width: 150px;
+    height: 150px;
+    margin: 0px auto 20px auto;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    background-color: #ccc;
+    overflow: hidden;
+  }
 
-.cropper {
-  width: 260px;
-  height: 260px;
-}
+  .cropper {
+    width: 260px;
+    height: 260px;
+  }
 </style>

src/views/register/register.vue

@@ -156,6 +156,11 @@ export default {
 </script>
 
 <style scoped>
+  #register{
+    background-image: url("../../assets/img/1.jpg");
+    height: 100%;
+  }
+
 .registerForm {
   border-radius: 15px;
   background-clip: padding-box;

src/views/system/menu/index.vue

+<template>
+
+</template>
+
+<script>
+  export default {
+    name: "menu",
+    data() {
+      return {}
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/system/stuClass/index.vue

@@ -4,7 +4,7 @@
 
 <script>
   export default {
-    name: "index",
+    name: "stuClass",
     data() {
       return {}
     }