Home页重构

src/main/resources/modules/SpringBoot/resources/templates/screen/home.ftl

@@ -130,6 +130,16 @@
 
                 <el-button type="primary" @click="doAjax">调用AJAX</el-button>
 
+                <el-divider></el-divider>
+
+                <p>ajax.example({}).then(function (response) {</p>
+                <p style="text-indent: 2em;">if (response.errors.length > 0) {</p>
+                <p style="text-indent: 4em;">nav.e(response.errors[0].message);</p>
+                <p style="text-indent: 2em;">} else {</p>
+                <p style="text-indent: 4em;">nav.i("Ajax调用成功!");</p>
+                <p style="text-indent: 2em;">}</p>
+                <p>})</p>
+
             </el-card>
 
             <el-card class="box-card" style="width: 600px;margin: 20px">
@@ -145,6 +155,18 @@
                     <el-button size="small" type="primary">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                 </el-upload>
+
+                <el-divider></el-divider>
+
+                <p>ajax.fileUpload(req.file).then(function (response) {</p>
+                <p style="text-indent: 2em;">if (response.errors.length > 0) {</p>
+                <p style="text-indent: 4em;">req.onError();</p>
+                <p style="text-indent: 4em;">nav.e(response.errors[0].message);</p>
+                <p style="text-indent: 2em;">} else {</p>
+                <p style="text-indent: 4em;">req.onSuccess();</p>
+                <p style="text-indent: 4em;">nav.i("文件上传成功!");</p>
+                <p style="text-indent: 2em;">}</p>
+                <p>})</p>
             </el-card>
 
         </el-tab-pane>

src/main/resources/modules/SpringBoot/resources/templates/screen/index.ftl

@@ -1,13 +1,14 @@
 <div id="app" v-cloak>
     <div id="aside">
         <el-menu
-                :style="{width:(isCollapse?'64px':'200px')}"
+                :style="{width:(properties.isCollapse?'64px':'200px')}"
-                default-active="1-1"
+                :default-active="properties.defaultActive"
                 @open="handleOpen"
                 @close="handleClose"
                 @select="handleSelect"
-                :unique-opened="true"
+                :unique-opened="properties.uniqueOpened"
-                :collapse="isCollapse"
+                :collapse="properties.isCollapse"
+                :collapse-transition="properties.transition"
                 background-color="#252a2f"
                 text-color="#d6d6d6"
                 active-text-color="#ffd04b">
@@ -22,7 +23,7 @@
             </el-submenu>
             <el-submenu index="2">
                 <template slot="title">
-                    <i class="el-icon-loading"></i>
+                    <i class="el-icon-time"></i>
                     <span slot="title">日志管理</span>
                 </template>
                 <el-menu-item index="2-1">登录日志</el-menu-item>
@@ -33,7 +34,7 @@
     <div id="main">
         <div id="head">
             <div class="collapseSwitch" @click="collapseSwitch">
-                <a :class="isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
+                <a :class="properties.isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
             </div>
 
             <el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>
@@ -41,7 +42,8 @@
             <div class="menu">
                 <ul>
                     <li>
-                        <el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
+                        <el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span
+                                style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
                     </li>
                     <li>
                         <el-dropdown>
@@ -54,7 +56,6 @@
                             </el-dropdown-menu>
                         </el-dropdown>
                     </li>
-
                     <li>
                         <el-link :underline="false" @click="onHome" icon="el-icon-warning">关于</el-link>
                     </li>
@@ -131,14 +132,15 @@
     }
 
     #aside {
-        transition: all 0.4s;
         background: #252a2f;
     }
 
     #aside .el-menu {
-        border-right: 0px
+        transition: all .5s;
+        border-right: 0
     }
-    #aside .el-menu-item, .el-submenu__title{
+
+    #aside .el-menu-item, .el-submenu__title {
         height: 40px;
         line-height: 40px;
     }
@@ -164,20 +166,22 @@
         border-left: 1px solid #424242;
         border-right: 1px solid #424242;
     }
+
     #head .collapseSwitch a {
         display: inline-block;
         transition: all 1s;
     }
+
     #head .collapseSwitch a.reversal {
         transform: rotate(90deg);
     }
 
-    #head a{
+    #head a {
         color: #d6d6d6;
         vertical-align: top;
     }
 
-    #head a:hover{
+    #head a:hover {
         color: #409EFF;
         opacity: 1;
     }
@@ -257,9 +261,14 @@
     var app = new Vue({
         el: "#app",
         data: {
-            isCollapse: false,//左侧菜单是否收缩
             tabs: [],//所有Tabs
             activeTabName: '',
+            properties: {
+                uniqueOpened: true,//是否保持一个子菜单展开
+                isCollapse: false,//左侧菜单是否收缩
+                transition:false,
+                defaultActive:"1-1",
+            }
         },
         methods: {
             onHome: function () {
@@ -270,7 +279,7 @@
                 })
             },
             collapseSwitch: function () {
-                this.isCollapse = !this.isCollapse;
+                this.properties.isCollapse = !this.properties.isCollapse;
             },
             handleOpen: function () {
 

src/main/resources/modules/SpringBoot/resources/templates/screen/login.ftl

@@ -6,13 +6,13 @@
             <el-form :model="form" :rules="rules" ref="form" class="form">
                 <el-form-item prop="name">
                     <el-input placeholder="用户名" v-model="form.name">
-                        <template slot="prepend"><i class="icon iconfont icon-dengluzhanghao"></i></template>
+                        <template slot="prepend"><i class="icon iconfont el-icon-user"></i></template>
                     </el-input>
                 </el-form-item>
 
                 <el-form-item prop="password">
                     <el-input placeholder="密码" v-model="form.password" type="password">
-                        <template slot="prepend"><i class="icon iconfont icon-guanbi"></i></template>
+                        <template slot="prepend"><i class="icon iconfont el-icon-lock"></i></template>
                     </el-input>
                 </el-form-item>
                 <el-form-item>
@@ -22,7 +22,7 @@
                 </el-form-item>
             </el-form>
 
-            <a class="tip">登录</a>
+            <a class="tip">系统登录</a>
         </div>
     </div>
 
@@ -40,8 +40,8 @@
     }
 
     .frame {
-        width: 50%;
+        width: 600px;
-        height: 50%;
+        height: 500px;
         background: #42424263;
         border-radius: 10px;
         display: flex;