• 手把手教你前后分离架构(三) 前端项目美化

            前面我们已经实现了前后两端项目的基础搭建以及前后数据交互，目前的UI页面十分的简陋，所以今天咱们来完善前端项目，让UI更加美观。
            如果你的html、js、css的基础很好，那么前端项目研发起来相信不会很困难，不管是传统技术JSTL、JQuery与easyUI、bootstrap等UI框架，还是vue、react、angular与elmentui、layui等新技术，前端底层实现都是大同小异的，无非每项技术的特点各有不同。后期可根据团队人员和项目的基本情况来进行配套组合的技术选型。我们继续以Vue.js和elmentui为例研发本项目。

    基础组件整合

    为了后续不断完善前端项目，需要一些VUE组件来帮助我们更好的实现前端功能。

    页面模块化

    require和import的区别

    vue编程中最重要的思想就是模块化，import和require都是被模块化所使用。
    遵循规范
    require 是 AMD规范引入方式。
    import是ES6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法。
    调用时间
    require是运行时调用，所以require理论上可以运用在代码的任何地方。
    import是编译时调用，所以必须放在文件开头。
    原来得样例中页面引入咱们使用   import login from '@/views/login'的方式。
    后续如果页面过多，开发环境如果使用懒加载， 页面太多的话会造成webpack热更新太慢。所以生产环境使用懒加载,开发环境不使用懒加载。
    添加模块化工具类
    router目录下添加工具类根据不同环境采用不同的模块化方式

    import-development.js

    module.exports = file => require('@/views/' + file + '.vue').default

    import-production.js

    module.exports = file => () => import('@/views/' + file + '.vue')

    嵌套路由

    嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看Vue的官网教程。
    当我们点击左边的项目的时候，我们知道，他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面，我们可以看到，他就是一个路由。或者我们应该说，他就是一个子路由。

     index.js 添加路由

    1. const _import = require('./import-' + process.env.NODE_ENV)
    2.  
    3.  
    4. //全局路由
    5. const routes = [
    6.   { path: '/login', name:'login',component: _import('login') },
    7. ]
    8.  
    9. // 嵌套路由入口
    10. const mainRoutes = {
    11.   path: '/',
    12.   component: _import('layout/main'),
    13.   name: 'main',
    14.   redirect: { name: 'home' },
    15.   meta: { title: '主入口整体布局' },
    16.   children: [
    17.     { path: '/home', component: _import('demo/list'), name: 'home', meta: { title: '首页' } },
    18.  { path: '/test1', component: _import('demo/test1'), name: 'test1', meta: { title: '选项一', isTab: true } },
    19.     { path: '/test2', component: _import('demo/test2'), name: 'test2', meta: { title: '选项二', isTab: true } },
    20.     { path: '/test', component: _import('demo/add'), name: 'test', meta: { title: '测试功能', isTab: true } },
    21.     { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题', isTab: true } },
    22.   ],
    23. }
    24.  
    25. export default new Router({
    26.   routes: routes.concat(mainRoutes)
    27. })

    状态管理

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    vuex 包含有五个基本的对象：

    state：存储状态。也就是变量；
    getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
    mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似。
    actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)
    modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

    有了Vuex可以实现组件全局状态(数据)的管理,方便的实现组件之间的数据共享。

    Sass整合

    Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许使用变量 (variables),嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。

    1. npm install node-sass --save-dev //安装node-sass 
    2. npm install sass-loader --save-dev //安装sass-loader 
    3. npm install style-loader --save-dev //安装style-loader

    此处安装后可能会因sass-loader版本过高报错，可手动指定版本

    npm install sass-loader@7.3.1 --save-dev   //版本不能太高

    也可在package.json中更改版本，然后npm install

    基本UI设计

    我们先研后台管理系统，管理系统一般有一下几类UI页面。
    1、登录页面
    这个不多说了用户密码登录页面。
    2、主页面
    登录验证成功后跳转到本页面，左侧菜单右侧详情的常规布局。
    3、功能列表页
    4、功能编辑详情

    登录页面

    登录页面前边我们已经实现了简单表单，样子比较丑陋，登录页比较简单，样式大家可以自行找网上提供的布局样式也可，基础较好的同学可以自己调整布局。这里举一个简单的登录样式的样例。

    1. <template>
    2.   <div class="login">
    3.     <el-form ref="dataForm" :model="dataForm" :rules="loginRules" size="mini" class="login-form" status-icon>
    4.       <h2 class="title">欢迎登录后台管理系统</h2>
    5.       <el-form-item prop="username">
    6.         <el-input
    7.           v-model="dataForm.username"
    8.           type="text"
    9.           auto-complete="off"
    10.           placeholder="账号"
    11.         >
    12.           <i slot="prefix" class="el-input__icon el-icon-s-custom svg-external-icon"></i>
    13.         </el-input>
    14.       </el-form-item>
    15.       <el-form-item prop="password">
    16.         <el-input
    17.           v-model="dataForm.password"
    18.           type="password"
    19.           auto-complete="off"
    20.           placeholder="密码"
    21.           @keyup.enter.native="dataFormSubmit"
    22.         >
    23.           <i slot="prefix" class="el-input__icon el-icon-s-goods svg-external-icon"></i>
    24.         </el-input>
    25.       </el-form-item>
    26. <!--      <el-form-item prop="captcha" v-if="captchaOnOff">
    27.         <el-input
    28.           v-model="dataForm.captcha"
    29.           auto-complete="off"
    30.           placeholder="验证码"
    31.           style="width: 63%"
    32.           @keyup.enter.native="dataFormSubmit"
    33.         >
    34.           <i slot="prefix" class="el-input__icon el-icon-menu svg-external-icon"></i>
    35.         </el-input>
    36.         <div class="login-code">
    37.           <img :src="captchaPath" @click="getCaptcha()" style="width: 100%"  class="login-code-img"/>
    38.         </div>
    39.       </el-form-item>-->
    40.       <!--      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
    41.       <el-form-item style="width:100%;">
    42.         <el-button
    43.           :loading="loading"
    44.           size="medium"
    45.           type="primary"
    46.           style="width:100%;"
    47.           @click.native.prevent="dataFormSubmit"
    48.         >
    49.           <span v-if="!loading">登 录</span>
    50.           <span v-else>登 录 中...</span>
    51.         </el-button>
    52.         <div style="float: right;" v-if="register">
    53.           <router-link class="link-type" :to="'/register'">立即注册</router-link>
    54.         </div>
    55.       </el-form-item>
    56.     </el-form>
    57.     <!--  底部  -->
    58.     <div class="el-login-footer">
    59.       <span>Copyright © 2021-2022 All Rights Reserved.</span>
    60.     </div>
    61.   </div>
    62. </template>
    63.  
    64. <script>
    65.  
    66. export default {
    67.   name: "Login",
    68.   data() {
    69.     return {
    70.       codeUrl: "",
    71.       dataForm: {
    72.         username: '',
    73.         password: '',
    74.         uid: '',
    75.         captcha: '',
    76.         client_id:'webApp',
    77.         client_secret:'webApp',
    78.         grant_type:'password'
    79.       },
    80.       loginRules: {
    81.         username: [
    82.           { required: true, trigger: "blur", message: "请输入您的账号" }
    83.         ],
    84.         password: [
    85.           { required: true, trigger: "blur", message: "请输入您的密码" }
    86.         ],
    87.         captcha: [{ required: true, trigger: "change", message: "请输入验证码" }]
    88.       },
    89.       captchaPath: '',
    90.       loading: false,
    91.       // 验证码开关
    92.       captchaOnOff: true,
    93.       // 注册开关
    94.       register: false,
    95.     };
    96.   },
    97.   created() {
    98.     // this.getCaptcha()
    99.     var info=this.$route.params.data
    100.     if(info!=null)
    101.       this.$message({
    102.         showClose: true,
    103.         message: info,
    104.         type: 'error',
    105.         duration:1000
    106.       });
    107.   },
    108.   methods: {
    109.     // 提交表单
    110.     dataFormSubmit () {
    111.       this.$refs['dataForm'].validate((valid) => {
    112.         if (valid) {
    113.           this.loading = true;
    114.           this.$router.replace({ name: 'home'})
    115.        
    116.         }
    117.       })
    118.     },
    119.     // 获取验证码
    120.     getCaptcha () {
    121.       this.dataForm.uid = getUUID()
    122.       this.captchaPath = this.$http.adornUrl(`/api-auth/captcha/captcha.jpg?uid=${this.dataForm.uid}`)
    123.     },
    124.   }
    125. };
    126. </script>
    127.  
    128. <style rel="stylesheet/scss" lang="scss">
    129. .login {
    130.   display: flex;
    131.   justify-content: center;
    132.   align-items: center;
    133.   height: 100%;
    134.   /*background-image: url("../assets/images/login-background.jpg");*/
    135.   background: #3a8ee6;
    136.   background-size: cover;
    137. }
    138. .title {
    139.   margin: 0px auto 20px auto;
    140.   text-align: center;
    141.   color: #707070;
    142. }
    143.  
    144. .login-form {
    145.   border-radius: 6px;
    146.   background: #ffffff;
    147.   width: 450px;
    148.  
    149.   padding: 25px 25px 5px 25px;
    150.   .el-input {
    151.     height: 38px;
    152.     input {
    153.       height: 38px;
    154.     }
    155.   }
    156.   .input-icon {
    157.     height: 39px;
    158.     width: 14px;
    159.     margin-left: 2px;
    160.   }
    161. }
    162. .login-tip {
    163.   font-size: 13px;
    164.   text-align: center;
    165.   color: #bfbfbf;
    166. }
    167. .login-code {
    168.   width: 33%;
    169.   height: 36px;
    170.   float: right;
    171.   img {
    172.     cursor: pointer;
    173.     vertical-align: middle;
    174.   }
    175. }
    176. .el-login-footer {
    177.   height: 40px;
    178.   line-height: 40px;
    179.   position: fixed;
    180.   bottom: 0;
    181.   width: 100%;
    182.   text-align: center;
    183.   color: #fff;
    184.   font-family: Arial;
    185.   font-size: 12px;
    186.   letter-spacing: 1px;
    187. }
    188. .login-code-img {
    189.   height: 38px;
    190. }
    191. .svg-external-icon{
    192.   font-size: 12px;
    193.   //margin-right: 18px;
    194.   margin-left: 3px;
    195.   display: flex;
    196.   align-items: center;
    197. }
    198. body {
    199.   height: 100%;
    200.   -moz-osx-font-smoothing: grayscale;
    201.   -webkit-font-smoothing: antialiased;
    202.   text-rendering: optimizeLegibility;
    203.   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    204. }
    205.  
    206. html {
    207.   height: 100%;
    208.   box-sizing: border-box;
    209. }
    210.  
    211. #app {
    212.   height: 100%;
    213. }
    214. .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    215.   font-family: inherit;
    216.   font-weight: 500;
    217.   line-height: 1.1;
    218.   color: inherit;
    219. }
    220. </style>

    访问 ：http://localhost:9081/#/login 显示如下

     这里先不做后台校验，随便输入用户名、密码后跳转主页面。

    主页面实现

    主页面是整个后台管理系统的门面，它的重要程度不言而喻。

    先实现常规的左侧是菜单、右侧是详情页面，头部有登录人的基础信息提示。更炫酷的要求后面逐步实现。

    整体布局我们参考element官网布局容器来实现，我门以这个样例作为参考样例。

     新增主页面main.vue

    1. <template>
    2.   <div class="site-wrapper" :class="classObj">
    3.     <template >
    4.       <main-sidebar />
    5.       <main-navbar />
    6.       <div class="site-content__wrapper" :style="styleObj">
    7.         <main-content />
    8.       </div>
    9.     </template>
    10.   </div>
    11. </template>
    12.  
    13. <script>
    14.   import MainNavbar from './main-navbar'
    15.   import MainSidebar from './main-sidebar'
    16.   import MainContent from './main-content'
    17.  
    18.   export default {
    19.     data () {
    20.       return {
    21.         loading: true,
    22.         styleObj: {'min-height': this.documentClientHeight + 'px'}
    23.       }
    24.     },
    25.     components: {
    26.       MainNavbar,
    27.       MainSidebar,
    28.       MainContent
    29.     },
    30.     computed: {
    31.       documentClientHeight: {
    32.         get () { return this.$store.state.common.documentClientHeight },
    33.         set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    34.       },
    35.       userId: {
    36.         get () { return this.$store.state.user.id },
    37.         set (val) { this.$store.commit('user/updateId', val) }
    38.       },
    39.       userName: {
    40.         get () {
    41.           return this.$store.state.user.name
    42.         },
    43.         set (val) {
    44.           this.$store.commit('user/updateName', val)
    45.         }
    46.       },
    47.       sidebarFold: {
    48.         get () { return this.$store.state.common.sidebarFold }
    49.       },
    50.       clientType() {
    51.         let type = this.$store.state.common.clientType;
    52.         if (type === 'phone') {
    53.           this.styleObj['margin-left'] = '0px';
    54.           this.styleObj['padding-top'] = '100px';
    55.         } else {
    56.           if (this.styleObj['margin-left']) this.$delete(this.styleObj, 'margin-left');
    57.           if (this.styleObj['padding-top']) this.$delete(this.styleObj, 'padding-top');
    58.         }
    59.         return type
    60.       },
    61.       showScreen() {
    62.         if (this.clientType == 'phone' && !this.sidebarFold) return true;
    63.         return false;
    64.       },
    65.       classObj() {
    66.         return {
    67.           'site-sidebar--hide': this.sidebarFold && this.clientType == 'phone',
    68.           'site-sidebar--fold': this.sidebarFold && this.clientType != 'phone',
    69.           'tab-phone-top': this.clientType == 'phone'
    70.         };
    71.       }
    72.     },
    73.     created () {
    74.  
    75.     },
    76.     mounted () {
    77.       this.resetDocumentClientHeight()
    78.     },
    79.     methods: {
    80.     
    81.       }
    82.     }
    83.   }
    84. </script>

    封装Aside、Header、Main-content三个组件，在Main.vue主页面中使用。

    Aside组件存放菜单
    参照element官网 导航菜单组件

     main-sidebar.vue

    1. <template>
    2.   <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    3.     <div class="site-sidebar__inner">
    4.       <el-menu
    5.         :collapse="sidebarFold"
    6.         default-active="home"
    7.         :collapseTransition="false"
    8.         class="site-sidebar__menu"
    9.        >
    10.         <el-menu-item index="home" @click="$router.push({ name: 'home' })"  v-show="showSidebar">
    11.           <i class="el-icon-s-home"></i>
    12.           <span slot="title">首页</span>
    13.         </el-menu-item>
    14.         <el-submenu index="1">
    15.           <template slot="title">
    16.             <i class="el-icon-location"></i>
    17.             <span>导航一</span>
    18.           </template>
    19.           <el-menu-item-group>
    20.             <template slot="title">分组一</template>
    21.             <el-menu-item index="1-1" @click="$router.push({ name: 'test1' })">选项1</el-menu-item>
    22.             <el-menu-item index="1-2" @click="$router.push({ name: 'test2' })">选项2</el-menu-item>
    23.           </el-menu-item-group>
    24.           <el-menu-item-group title="分组2">
    25.             <el-menu-item index="1-3">选项3</el-menu-item>
    26.           </el-menu-item-group>
    27.           <el-submenu index="1-4">
    28.             <template slot="title">选项4</template>
    29.             <el-menu-item index="1-4-1">选项1</el-menu-item>
    30.           </el-submenu>
    31.         </el-submenu>
    32.         <el-menu-item index="2">
    33.           <i class="el-icon-menu"></i>
    34.           <span slot="title">导航二</span>
    35.         </el-menu-item>
    36.         <el-menu-item index="3" disabled>
    37.           <i class="el-icon-document"></i>
    38.           <span slot="title">导航三</span>
    39.         </el-menu-item>
    40.         <el-menu-item index="4">
    41.           <i class="el-icon-setting"></i>
    42.           <span slot="title">导航四</span>
    43.         </el-menu-item>
    44.       </el-menu>
    45.     </div>
    46.   </aside>
    47. </template>
    48.  
    49. <script>
    50.   import { isURL } from '@/utils/validate'
    51.   export default {
    52.     data () {
    53.       return {
    54.         dynamicMenuRoutes: [],
    55.         menuValue: '',
    56.         leafMenu: []
    57.       }
    58.     },
    59.     components: {
    60.  
    61.     },
    62.     computed: {
    63.       sidebarLayoutSkin: {
    64.         get () { return this.$store.state.common.sidebarLayoutSkin }
    65.       },
    66.       sidebarFold: {
    67.         get () { return this.$store.state.common.sidebarFold }
    68.       },
    69.       menuList: {
    70.         get () { return this.$store.state.common.menuList },
    71.         set (val) { this.$store.commit('common/updateMenuList', val) }
    72.       },
    73.       menuActiveName: {
    74.         get () { return this.$store.state.common.menuActiveName },
    75.         set (val) { this.$store.commit('common/updateMenuActiveName', val) }
    76.       },
    77.       mainTabs: {
    78.         get () { return this.$store.state.common.mainTabs },
    79.         set (val) { this.$store.commit('common/updateMainTabs', val) }
    80.       },
    81.       mainTabsActiveName: {
    82.         get () { return this.$store.state.common.mainTabsActiveName },
    83.         set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
    84.       },
    85.       showSidebar() {//在phone模式并且关闭菜单状态下不展示菜单
    86.         if (this.$store.state.common.clientType == 'phone' && this.sidebarFold) return false;
    87.         return true;
    88.       }
    89.     },
    90.     watch: {
    91.       $route: 'routeHandle'
    92.     },
    93.     created () {
    94.       this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    95.       this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    96.       this.routeHandle(this.$route)
    97.       this.getLeafMenu(this.menuList);
    98.     },
    99.     methods: {
    100.       getLeafMenu(menuList) {
    101.         menuList.forEach((item)=>{
    102.           if (item.list) {
    103.             this.getLeafMenu(item.list)
    104.           } else {
    105.             this.leafMenu.push(item)
    106.           }
    107.         })
    108.       },
    109.       chose() {
    110.         let route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === this.menuValue)
    111.         if (route.length >= 1) {
    112.           this.$router.push({name: route[0].name})
    113.         }
    114.         this.menuValue = ''
    115.       },
    116.       // 路由操作
    117.       routeHandle (route) {
    118.         if (route.meta.isTab&&this.$store.state.common.navbarTab) {
    119.           // tab选中, 不存在先添加
    120.           var tab = this.mainTabs.filter(item => item.name === route.name)[0]
    121.           if (!tab) {
    122.             if (route.meta.isDynamic) {
    123.               var globalRoutes=this.$router.options.routes
    124.               var mainRoutes
    125.               for (var i = 0; i < globalRoutes.length; i++) {
    126.                 if (globalRoutes[i].children && globalRoutes[i].children.length >= 1 && globalRoutes[i].name == 'main-dynamic') {
    127.                   mainRoutes = globalRoutes[i].children
    128.                 }
    129.               }
    130.               route = mainRoutes.filter(item => item.name === route.name)[0]
    131.               if (!route) {
    132.                 return console.error('未能找到可用标签页!')
    133.               }
    134.             }
    135.             tab = {
    136.               menuId: route.meta.menuId || route.name,
    137.               name: route.name,
    138.               title: route.meta.title,
    139.               type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
    140.               iframeUrl: route.meta.iframeUrl || ''
    141.             }
    142.             this.mainTabs = this.mainTabs.concat(tab)
    143.           }
    144.           this.menuActiveName = tab.menuId + ''
    145.           this.mainTabsActiveName = tab.name
    146.         }
    147.       }
    148.     }
    149.   }
    150. </script>

    Header
     

    1. <template>
    2.   <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    3.    <div class="site-navbar__header" :style="brandStyle">
    4.       <h1 class="site-navbar__brand" :style="brandStyle" @click="$router.push({ name: 'home' })">
    5.         <a class="site-navbar__brand-lg" href="javascript:;">后台管理系统</a>
    6.         <a class="site-navbar__brand-mini" href="javascript:;"></a>
    7.       </h1>
    8.     </div>
    9.     <div class="site-navbar__body clearfix">
    10.       <el-menu
    11.         class="site-navbar__menu"
    12.         mode="horizontal">
    13.         <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
    14.           <i class="el-icon-s-fold"></i>
    15.         </el-menu-item>
    16.       </el-menu>
    17.       <el-menu
    18.         class="site-navbar__menu site-navbar__menu--right"
    19.         mode="horizontal">
    20.        <el-menu-item class="site-navbar__avatar" index="3">
    21.           <el-dropdown :show-timeout="0" placement="bottom">
    22.  
    23.             <span class="el-dropdown-link">
    24.              欢迎，登录！
    25.             </span>
    26.             <el-dropdown-menu slot="dropdown">
    27.               <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
    28.               <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
    29.             </el-dropdown-menu>
    30.           </el-dropdown>
    31.         </el-menu-item>
    32.       </el-menu>
    33.     </div>
    34.   </nav>
    35. </template>
    36.  
    37. <script>
    38.   export default {
    39.     name: 'screenfull',
    40.     data () {
    41.       return {
    42.         updatePassowrdVisible: false,
    43.         isFullscreen: false,
    44.       }
    45.     },
    46.     components: {
    47.  
    48.     },
    49.     computed: {
    50.       navbarLayoutType: {
    51.         get () { return this.$store.state.common.navbarLayoutType }
    52.       },
    53.       sidebarFold: {
    54.         get () { return this.$store.state.common.sidebarFold },
    55.         set (val) { this.$store.commit('common/updateSidebarFold', val) }
    56.       },
    57.       mainTabs: {
    58.         get () { return this.$store.state.common.mainTabs },
    59.         set (val) { this.$store.commit('common/updateMainTabs', val) }
    60.       },
    61.       userName: {
    62.         get () { return this.$store.state.user.name }
    63.       },
    64.       brandStyle: {
    65.         get() {
    66.           let type = this.$store.state.common.clientType;
    67.           if (type === 'phone') {
    68.             return this.brandStyle = {
    69.               float: 'none',
    70.               width: '100%'
    71.             }
    72.           } else {
    73.             return this.brandStyle = {}
    74.           }
    75.         },
    76.         set() {}
    77.       }
    78.     },
    79.     methods: {
    80.       // 修改密码
    81.       updatePasswordHandle () {
    82.         this.updatePassowrdVisible = true
    83.         this.$nextTick(() => {
    84.           this.$refs.updatePassowrd.init()
    85.         })
    86.       },
    87.       // 退出
    88.       logoutHandle () {
    89.        this.$router.push({ name: 'login' })
    90.       }
    91.     }
    92.   }
    93. </script>

    右侧主页面
    主页面多个tabs标签页组成，
    参考官网

    main-content.vue

    1. <template>
    2.   <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab && this.$store.state.common.navbarTab}">
    3.     <!-- 主入口标签页 s -->
    4.     <el-tabs
    5.       v-if="$route.meta.isTab && this.$store.state.common.navbarTab"
    6.       v-model="mainTabsActiveName"
    7.       :closable="true"
    8.       @tab-click="selectedTabHandle"
    9.       @tab-remove="removeTabHandle">
    10.       <el-dropdown class="site-tabs__tools" :show-timeout="0">
    11.         <i class="el-icon-arrow-down el-icon--right"></i>
    12.         <el-dropdown-menu slot="dropdown">
    13.           <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
    14.           <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
    15.           <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
    16.           <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
    17.         </el-dropdown-menu>
    18.       </el-dropdown>
    19.       <el-tab-pane
    20.         v-for="item in mainTabs"
    21.         :key="item.name"
    22.         :label="item.title"
    23.         :name="item.name">
    24.         <el-card :body-style="siteContentViewHeight">
    25.           <iframe
    26.             v-if="item.type === 'iframe'"
    27.             :src="item.iframeUrl"
    28.             width="100%" height="100%" frameborder="0" scrolling="yes">
    29.           </iframe>
    30.           <keep-alive v-else>
    31.             <router-view v-if="item.name === mainTabsActiveName" />
    32.           </keep-alive>
    33.         </el-card>
    34.       </el-tab-pane>
    35.     </el-tabs>
    36.     <!-- 主入口标签页 e -->
    37.     <el-card v-else :body-style="siteContentViewHeight">
    38.       <keep-alive>
    39.         <router-view />
    40.       </keep-alive>
    41.     </el-card>
    42.   </main>
    43. </template>
    44.  
    45. <script>
    46.   import { isURL } from '@/utils/validate'
    47.   export default {
    48.     data () {
    49.       return {
    50.       }
    51.     },
    52.     computed: {
    53.       documentClientHeight: {
    54.         get () { return this.$store.state.common.documentClientHeight }
    55.       },
    56.       menuActiveName: {
    57.         get () { return this.$store.state.common.menuActiveName },
    58.         set (val) { this.$store.commit('common/updateMenuActiveName', val) }
    59.       },
    60.       mainTabs: {
    61.         get () { return this.$store.state.common.mainTabs },
    62.         set (val) { this.$store.commit('common/updateMainTabs', val) }
    63.       },
    64.       mainTabsActiveName: {
    65.         get () { return this.$store.state.common.mainTabsActiveName },
    66.         set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
    67.       },
    68.       siteContentViewHeight () {
    69.         var height = this.documentClientHeight - 50 - 30 - 2
    70.         if (this.$route.meta.isTab && this.$store.state.common.navbarTab) {
    71.           height -= 40
    72.           return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
    73.         }
    74.         return { minHeight: height + 'px' }
    75.       }
    76.     },
    77.     methods: {
    78.       // tabs, 选中tab
    79.       selectedTabHandle (tab) {
    80.         tab = this.mainTabs.filter(item => item.name === tab.name)
    81.         if (tab.length >= 1) {
    82.           this.$router.push({ name: tab[0].name })
    83.         }
    84.       },
    85.       // tabs, 删除tab
    86.       removeTabHandle (tabName) {
    87.         this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
    88.         if (this.mainTabs.length >= 1) {
    89.           // 当前选中tab被删除
    90.           if (tabName === this.mainTabsActiveName) {
    91.             this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
    92.               this.mainTabsActiveName = this.$route.name
    93.             })
    94.           }
    95.         } else {
    96.           this.menuActiveName = ''
    97.           this.$router.push({ name: 'home' })
    98.         }
    99.       },
    100.       // tabs, 关闭当前
    101.       tabsCloseCurrentHandle () {
    102.         this.removeTabHandle(this.mainTabsActiveName)
    103.       },
    104.       // tabs, 关闭其它
    105.       tabsCloseOtherHandle () {
    106.         this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
    107.       },
    108.       // tabs, 关闭全部
    109.       tabsCloseAllHandle () {
    110.         this.mainTabs = []
    111.         this.menuActiveName = ''
    112.         this.$router.push({ name: 'home' })
    113.       },
    114.       // tabs, 刷新当前
    115.       tabsRefreshCurrentHandle () {
    116.         var tempTabName = this.mainTabsActiveName
    117.         this.removeTabHandle(tempTabName)
    118.         this.$nextTick(() => {
    119.           this.$router.push({ name: tempTabName })
    120.         })
    121.       }
    122.     }
    123.   }
    124. </script>
    125.

    访问测试

     列表页

    list.vue
     

    1. <template>
    2.   <div>
    3.     <el-form :model="dataForm" ref="dataForm">
    4.       <el-row :gutter="20" >
    5.         <el-col :xs="24" :sm="6" >
    6.           <el-form-item prop="classCode">
    7.             <el-input v-model="dataForm.name" placeholder="姓名" maxlength="20" clearable></el-input>
    8.           </el-form-item>
    9.         </el-col>
    10.         <el-col :xs="24" :sm="6" >
    11.           <el-form-item prop="className">
    12.             <el-input v-model="dataForm.province" placeholder="省份" maxlength="20" clearable></el-input>
    13.           </el-form-item>
    14.         </el-col>
    15.         <el-col :xs="{span:24,offset:0}"  :sm="{span:6,offset:6}">
    16.           <el-form-item style="float: right">
    17.             <el-button type="primary"  icon="el-icon-search">查询</el-button>
    18.             <el-button type="default"  plain icon="el-icon-refresh-left">重置</el-button>
    19.           </el-form-item>
    20.         </el-col>
    21.       </el-row>
    22.     </el-form>
    23.     <el-divider></el-divider>
    24.     <el-row style="padding-bottom: 10px;" align="left">
    25.       <el-button type="primary" icon="el-icon-plus" @click="addPage()">新增</el-button>
    26.       <el-button type="success" icon="el-icon-mouse" @click="add()">测试</el-button>
    27.       <el-button type="info" @click="addPage()">弹框按钮</el-button>
    28.     </el-row>
    29.     <el-table
    30.       :data="tableData"
    31.       border
    32.       style="width: 100%">
    33.       <el-table-column
    34.         fixed
    35.         prop="date"
    36.         label="日期"
    37.         >
    38.       </el-table-column>
    39.       <el-table-column
    40.         prop="name"
    41.         label="姓名"
    42.         >
    43.       </el-table-column>
    44.       <el-table-column
    45.         prop="province"
    46.         label="省份"
    47.         width="120">
    48.       </el-table-column>
    49.       <el-table-column
    50.         prop="city"
    51.         label="市区"
    52.         width="120">
    53.       </el-table-column>
    54.       <el-table-column
    55.         prop="address"
    56.         label="地址"
    57.         width="300">
    58.       </el-table-column>
    59.       <el-table-column
    60.         prop="zip"
    61.         label="邮编"
    62.         width="120">
    63.       </el-table-column>
    64.       <el-table-column
    65.         fixed="right"
    66.         label="操作"
    67.         width="100">
    68.         <template slot-scope="scope">
    69.           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    70.           <el-button type="text" size="small">编辑</el-button>
    71.         </template>
    72.       </el-table-column>
    73.     </el-table>
    74.     <add-page ref="addPage" @refreshDataList="test"></add-page>
    75.   </div>
    76. </template>
    77.  
    78. <script>
    79. import axios from 'axios'
    80. import AddPage from './addPage'
    81. export default {
    82.   components: {
    83.     AddPage
    84.   },
    85.   methods: {
    86.     handleClick(row) {
    87.       console.log(row);
    88.     },
    89.     test(){
    90.       axios
    91.         .get('http://127.0.0.1:8888/test', {
    92.           params: {
    93.             id: 12345
    94.           }
    95.         })
    96.         .then(response => (
    97.           // this.info = response
    98.           alert(response.data)
    99.           // this.info = response
    100.         ))
    101.         .catch(function (error) { // 请求失败处理
    102.           console.log(error);
    103.         });
    104.     },
    105.     add(){
    106.       this.$router.push({ path:'/add'})
    107.     },
    108.     addPage(id){
    109.       this.$nextTick(() => {
    110.         this.$refs.addPage.init(id);
    111.       })
    112.     }
    113.   },
    114.   mounted () {
    115.  
    116.   },
    117.   data() {
    118.     return {
    119.       dataForm: {
    120.         name: '',
    121.         province: ''
    122.       },
    123.       addPageVisible: false,
    124.       tableData: [{
    125.         date: '2016-05-02',
    126.         name: '王小虎',
    127.         province: '上海',
    128.         city: '普陀区',
    129.         address: '上海市普陀区金沙江路 1518 弄',
    130.         zip: 200333
    131.       }, {
    132.         date: '2016-05-04',
    133.         name: '王小虎',
    134.         province: '上海',
    135.         city: '普陀区',
    136.         address: '上海市普陀区金沙江路 1517 弄',
    137.         zip: 200333
    138.       }, {
    139.         date: '2016-05-01',
    140.         name: '王小虎',
    141.         province: '上海',
    142.         city: '普陀区',
    143.         address: '上海市普陀区金沙江路 1519 弄',
    144.         zip: 200333
    145.       }, {
    146.         date: '2016-05-03',
    147.         name: '王小虎',
    148.         province: '上海',
    149.         city: '普陀区',
    150.         address: '上海市普陀区金沙江路 1516 弄',
    151.         zip: 200333
    152.       }]
    153.     }
    154.   }
    155. }
    156. </script>
    157.  
    158. <style scoped>
    159. .el-divider--horizontal {
    160.   display: block;
    161.   height: 1px;
    162.   width: 100%;
    163.   margin: 12px 0;
    164. }
    165. </style>

    演示截图

    明细页面 

    addPage.vue
     

    1. <template>
    2.   <el-dialog
    3.     class="custom_dialog"
    4.     :fullscreen=false
    5.     :show-close=false
    6.     :close-on-click-modal=false
    7.     :visible.sync="visible">
    8.     <div slot="title" class="dialog-title">
    9.       <i class="el-icon-edit-outline"></i>
    10.       <span class="title-text">数据详情</span>
    11.     </div>
    12.  
    13.     <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
    14.              label-width="100px">
    15.       <el-row :gutter="40">
    16.         <el-col :xs="24" :lg="24">
    17.           <el-form-item label="姓名：" prop="classCode">
    18.             <el-input v-model="dataForm.classCode" maxlength="20" placeholder="类型编码"></el-input>
    19.           </el-form-item>
    20.         </el-col>
    21.         <el-col :xs="24" :lg="24">
    22.           <el-form-item label="省份：" prop="className">
    23.             <el-input v-model="dataForm.className" maxlength="20" placeholder="类型名称"></el-input>
    24.           </el-form-item>
    25.         </el-col>
    26.         <el-col :xs="24" :lg="24">
    27.           <el-form-item label="邮编：" prop="dataName">
    28.             <el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
    29.           </el-form-item>
    30.         </el-col>
    31.         <el-col :xs="24" :lg="24">
    32.           <el-form-item label="邮编：" prop="dataName">
    33.             <el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
    34.           </el-form-item>
    35.         </el-col>
    36.         <el-col :xs="24" :lg="24">
    37.           <el-form-item label="市区：" prop="dataCode">
    38.             <el-input v-model="dataForm.dataCode" maxlength="20" placeholder="键值"></el-input>
    39.           </el-form-item>
    40.         </el-col>
    41.         <el-col :xs="24" :lg="24">
    42.           <el-form-item label="邮编：" prop="dataName">
    43.             <el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
    44.           </el-form-item>
    45.         </el-col>
    46.         <el-col :xs="24" :lg="24">
    47.           <el-form-item label="地址：" prop="dataOrder">
    48.             <el-input v-model="dataForm.dataOrder" maxlength="10" placeholder="排序"></el-input>
    49.           </el-form-item>
    50.         </el-col>
    51.       </el-row>
    52.     </el-form>
    53.     <span slot="footer" class="dialog-footer">
    54.       <el-button icon="el-icon-close" @click="visible = false">取消</el-button>
    55.       <el-button icon="el-icon-check" type="primary">提交</el-button>
    56.     </span>
    57.   </el-dialog>
    58. </template>
    59.  
    60. <script>
    61. export default {
    62.   data() {
    63.     return {
    64.       visible: false,
    65.       dataForm: {
    66.         id: '',
    67.         classCode: '',
    68.         className: '',
    69.         dataCode: '',
    70.         dataName: '',
    71.         dataOrder: '',
    72.         status: ''
    73.       },
    74.       dataRule: {
    75.         classCode: [
    76.           {required: true, message: '类型编码不能为空', trigger: 'blur'}
    77.         ],
    78.         className: [
    79.           {required: true, message: '类型名称不能为空', trigger: 'blur'}
    80.         ],
    81.         dataCode: [
    82.           {required: true, message: '键值不能为空', trigger: 'blur'}
    83.         ],
    84.         dataName: [
    85.           {required: true, message: '名称不能为空', trigger: 'blur'}
    86.         ],
    87.         dataOrder: [
    88.           {required: true, message: '排序不能为空', trigger: 'blur'}
    89.         ],
    90.         status: [
    91.           {required: true, message: '状态不能为空', trigger: 'blur'}
    92.         ]
    93.       }
    94.     }
    95.   },
    96.   methods: {
    97.     submitForm(formName) {
    98.       this.$refs[formName].validate((valid) => {
    99.         if (valid) {
    100.           alert('submit!');
    101.         } else {
    102.           console.log('error submit!!');
    103.           return false;
    104.         }
    105.       });
    106.     },
    107.     resetForm(formName) {
    108.       this.$refs[formName].resetFields();
    109.     },
    110.     init (id) {
    111.       // this.dataForm.id = id
    112.       this.visible = true
    113.     }
    114.   }
    115. }
    116. </script>
    117.  
    118. <style scoped>
    119.  
    120. </style>

    演示样例

     以上就是前端系统主要页面及常用组件，有新的组件可通过elementUI官网，查询具体用法，另外样式的底层逻辑是相同的。

  • 相关阅读:
    （附源码）ssm汽车租赁 毕业设计 271621
    SD 交货单过账后自动产生服务确认单据
    【大话设计模式】依赖倒转原则
    C++类作用域
    腾讯大牛手撕SpringBoot，Cloud，Nginx与Docker，你凭什么还搞不懂啊！
    Leaflet结合Echarts实现迁徙图
    html实训大作业《简单的学生网页作业源码 基于html css javascript红色文化传媒网站(20页)》
    一区TOP期刊提出一种植被覆盖度估算新方法
    使用 PyTorch 搭建网络 - train_py篇
    【Delphi】使用TWebBrowser执行JavaScript命令传入JSON参数执行出错解决方案
  • 原文地址：https://blog.csdn.net/sundehui01/article/details/124882246