open
/
open-dbtool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
master
wangbing 6 years ago
parent 23792ceb25
commit 84cc7a6549
7 changed files with 818 additions and 116 deletions
Show Stats Download Patch File Download Diff File

2
src/main/java/xyz/wbsite/dbtool/javafx/manger/callable/SpringBootCallable.java
Unescape View File

@ -669,7 +669,7 @@ public class SpringBootCallable implements Callable {
}
{//js文件
freeMarkerManager.outputTemp(new File(js.getAbsolutePath(), "ajax.js"), option + "/resources/static/js/ajax.ftl", ctx);
freeMarkerManager.outputTemp(new File(js.getAbsolutePath(), "ajax.js"), option + "/resources/static/js/ajax.js", ctx);
}
{//img
Tool.outputResource(option + "/resources/static/img/logo.png", new File(img.getAbsolutePath(), "logo.png"));

46
src/main/resources/modules/SpringBoot/java/config/WebMvcConfig.java
Unescape View File

@ -1,44 +1,22 @@
package ${basePackage}.config;
import ${basePackage}.frame.springmvc.GlobalHandlerInterceptor;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.MapperFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.apache.catalina.connector.Connector;
import org.apache.coyote.http11.Http11NioProtocol;
import ${basePackage}.frame.springmvc.GlobalHandlerInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.system.ApplicationHome;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.core.io.ClassPathResource;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import ${basePackage}.frame.springmvc.GlobalHandlerInterceptor;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//将资源Order设为 -1 权重大于 Mapping，保证资源优先级高于Mapping("**")
registry.setOrder(-1);
}
@Autowired
private GlobalHandlerInterceptor globalHandlerInterceptor;
@ -61,19 +39,15 @@ public class WebMvcConfig implements WebMvcConfigurer {
*/
@Override
public void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter();
ObjectMapper objectMapper = jackson2HttpMessageConverter.getObjectMapper();
objectMapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
objectMapper.configure(MapperFeature.SORT_PROPERTIES_ALPHABETICALLY, true);
objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
SimpleModule simpleModule = new SimpleModule();
simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
simpleModule.addSerializer(Long.TYPE, ToStringSerializer.instance);
objectMapper.registerModule(simpleModule);
jackson2HttpMessageConverter.setObjectMapper(objectMapper);
// 将转化器注册到首个
converters.add(0, jackson2HttpMessageConverter);
for (HttpMessageConverter<?> converter : converters) {
if (converter instanceof MappingJackson2HttpMessageConverter){
ObjectMapper objectMapper = ((MappingJackson2HttpMessageConverter)converter).getObjectMapper();
SimpleModule simpleModule = new SimpleModule();
simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
simpleModule.addSerializer(Long.TYPE, ToStringSerializer.instance);
objectMapper.registerModule(simpleModule);
}
}
}
// @Bean

6
src/main/resources/modules/SpringBoot/resources/application-dev.ftl
Unescape View File

@ -47,6 +47,12 @@ pagehelper.autoRuntimeDialect=true
pagehelper.reasonable=false
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
# jackson 相关配置
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.jackson.default-property-inclusion=use_defaults
spring.jackson.mapper.sort-properties-alphabetically=true
spring.jackson.deserialization.fail-on-unknown-properties=false
# freemarker
spring.freemarker.enabled=true
spring.freemarker.allow-request-override=false

6
src/main/resources/modules/SpringBoot/resources/application-prod.ftl
Unescape View File

@ -46,6 +46,12 @@ pagehelper.autoRuntimeDialect=true
pagehelper.reasonable=false
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
# jackson 相关配置
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.jackson.default-property-inclusion=use_defaults
spring.jackson.mapper.sort-properties-alphabetically=true
spring.jackson.deserialization.fail-on-unknown-properties=false
# freemarker
spring.freemarker.enabled=true
spring.freemarker.allow-request-override=false

BIN
src/main/resources/modules/SpringBoot/resources/static/dist/fonts/element-icons.woff vendored
View File

Binary file not shown.

16
src/main/resources/modules/SpringBoot/resources/static/js/ajax.ftl → src/main/resources/modules/SpringBoot/resources/static/js/ajax.js
Unescape View File

@ -23,10 +23,18 @@ instance.interceptors.request.use(function (config) {
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
nav.tip.close();
nav.bar.finish();
try {//确保服务器正确返回Json
if(response.data.errors.length > 0){
console.error(response.data.errors)
}
nav.bar.finish();
}catch (e){
nav.bar.error();
response.data = {errors: [{message: '服务器错误'}]};
}
return response;
}, function (error) {
// 对响应错误做点什么
// 对响应错误做点什么,保准化返回结果
nav.tip.close();
nav.bar.error();
const rsp = {errors: []};
@ -64,7 +72,7 @@ jsonRequest = function (config) {
params: {
method: config.method
},
url: "${contextPath?default("")}/ajax",
url: '${contextPath?default("")}/ajax',
headers: {'Content-Type': 'text/plain'},
data: config.data
}).then(function (response) {
@ -75,7 +83,7 @@ jsonRequest = function (config) {
};
fileRequest = function (config) {
return instance.request({
url: "${contextPath?default("")}/upload",
url: '${contextPath?default("")}/upload',
data: config.data,
headers: {'Content-Type': 'multipart/form-data'},
onUploadProgress: function (progressEvent) {

858
src/main/resources/modules/SpringBoot/resources/templates/screen/home.ftl
Unescape View File

@ -1,19 +1,130 @@
<div id="app" v-cloak>
<el-tabs tab-position="left" value="f">
<el-tab-pane label="简&#12288;&#12288;&#12288;介">
<h1>介绍说明</h1>
<p> Freemarker 是一款模板引擎，是一种基于模版生成静态文件的通用
工具，它是为Java程序员提供的一个开发包，或者说是一个类库，它不是面向最终用户的，而是为程序员提供了一款可以嵌入他们开发产品的应用程序。</p>
<p> Freemarker 是使用纯java编写的，为了提高页面的访问速度，需要把页面静态化， 那么Freemarker就是被用来生成html页面。</p>
<h1>前提条件</h1>
<p>本工程使用的Freemarker整合了Spring MVC， 与你需要了解或熟悉Spring MVC框架。如果你熟悉EL表达，将有助于该工程Freemarker的使用。</p>
<el-tabs tab-position="left" value="d">
<el-tab-pane label="主题颜色">
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<span>主要颜色</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<div class="bg-success" style="border-radius: 4px;padding: 20px;color: #ffffff">Success
<div class="value">#67C23A</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-warning" style="border-radius: 4px;padding: 20px;color: #ffffff">Warning
<div class="value">#E6A23C</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-danger" style="border-radius: 4px;padding: 20px;color: #ffffff">Danger
<div class="value">#F56C6C</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-info" style="border-radius: 4px;padding: 20px;color: #ffffff">Info
<div class="value">#909399</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<span>中性色</span>
</div>
<el-row>
<el-col :span="5">
<div>
<div class="bg-text-primary"
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #303133">
主要文字
<div class="value">#303133</div>
</div>
<div class="bg-text-regular"
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #606266">
常规文字
<div class="value">#606266</div>
</div>
<div class="bg-text-secondary"
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #909399">
次要文字
<div class="value">#909399</div>
</div>
<div class="bg-text-placeholder"
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #C0C4CC">
占位文字
<div class="value">#C0C4CC</div>
</div>
</div>
</el-col>
<el-col :span="1">
<div style="width: 20px;height: 10px"></div>
</el-col>
<el-col :span="5">
<div>
<div class="bg-border-base"
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">一级边框
<div class="value">#DCDFE6</div>
</div>
<div class="bg-border-light"
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">二级边框
<div class="value">#E4E7ED</div>
</div>
<div class="bg-border-lighter"
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">三级边框
<div class="value">#EBEEF5</div>
</div>
<div class="bg-border-extra-light"
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">四级边框
<div class="value">#F2F6FC</div>
</div>
</div>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="介绍说明">
<h4>主要框架</h4>
<ol style="line-height: 40px;padding-left: 20px;" type="1">
<li>
<el-tag>SpringBoot v2.1.2.RELEASE</el-tag>
</li>
<li>
<el-tag>Freemarker v2.1.2.RELEASE</el-tag> Html模板引擎
</li>
<li>
<el-tag>pagehelper v1.2.5</el-tag> 分页插件、提供便捷的分页功能
</li>
<li>
<el-tag>dozer v5.5.1</el-tag> 对象复制拷贝
</li>
<li>
<el-tag>logback v1.2.3</el-tag> 日志框架
</li>
<li>
<el-tag>jQuery v3.2.1</el-tag> 前端JavaScript框架（保留），打包进base.min.js，但请尽量勿使用jQuery直接操作Dom
</li>
<li>
<el-tag>Vue v2.5.17</el-tag> DOM渲染引擎
</li>
<li>
<el-tag>ElementUI v2.8.2</el-tag> 前端UI框架，提供统一风格控件
</li>
<li>
<el-tag>Maven</el-tag> 后端构建管理工具
</li>
<li>
<el-tag>JDK 8+</el-tag> SpringBoot2.x开始不再支持JDK 7及以下，所以请将JDk升级到8+
</li>
</ol>
<h4></h4>
</el-tab-pane>
<el-tab-pane label="Ajax&#12288;调用">
<el-tab-pane label="Ajax调用">
<el-card class="box-card" style="width: 600px;margin: 20px">
@ -37,6 +148,7 @@
</el-card>
</el-tab-pane>
<el-tab-pane label="自定义工具">
<el-card class="box-card" style="width: 600px;margin: 20px">
<el-button type="primary" @click="this.nav.i('消息')">普通消息</el-button>
@ -56,6 +168,7 @@
<el-button type="primary" @click="this.nav.bar.error()">失败</el-button>
</el-card>
</el-tab-pane>
<el-tab-pane label="Freemarker">
<el-card class="box-card" style="width: 600px;margin: 20px">
@ -116,84 +229,524 @@
</el-tab-pane>
<el-tab-pane label="UI常用组件" >
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>1、表单控件集合及验证</h3>
</div>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<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="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col style="text-align: center" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="form.date2"
style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<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="特殊资源" prop="resource">
<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="活动形式" prop="desc">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
<el-tab-pane label="主题颜色" name="f">
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<span>主要颜色</span>
<h3>2、表格数据</h3>
</div>
<el-row :gutter="20">
<el-col :span="5">
<div class="bg-success" style="border-radius: 4px;padding: 20px;color: #ffffff">Success
<div class="value">#67C23A</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-warning" style="border-radius: 4px;padding: 20px;color: #ffffff">Warning
<div class="value">#E6A23C</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-danger" style="border-radius: 4px;padding: 20px;color: #ffffff">Danger
<div class="value">#F56C6C</div>
</div>
</el-col>
<el-col :span="5">
<div class="bg-info" style="border-radius: 4px;padding: 20px;color: #ffffff">Info
<div class="value">#909399</div>
</div>
</el-col>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:default-sort="{prop: 'date', order: 'descending'}"
style="width: 100%">
<el-table-column
type="selection"
width="50">
</el-table-column>
<el-table-column
label="日期"
width="100">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="70">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="100">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>3、分页</h3>
</div>
<el-pagination
background
layout="prev, pager, next, jumper"
:total="1000">
</el-pagination>
</el-card>
<el-card class="box-card" style="width: 700px;margin: 20px">
<div slot="header">
<h3>4、按钮</h3>
</div>
<el-row style="margin-bottom: 10px;">
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button type="danger" round>危险按钮</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button disabled>默认按钮</el-button>
<el-button type="primary" disabled>主要按钮</el-button>
<el-button type="success" disabled>成功按钮</el-button>
<el-button type="info" disabled>信息按钮</el-button>
<el-button type="warning" disabled>警告按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button plain disabled>朴素按钮</el-button>
<el-button type="primary" plain disabled>主要按钮</el-button>
<el-button type="success" plain disabled>成功按钮</el-button>
<el-button type="info" plain disabled>信息按钮</el-button>
<el-button type="warning" plain disabled>警告按钮</el-button>
<el-button type="danger" plain disabled>危险按钮</el-button>
</el-row>
<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
<el-row style="margin-bottom: 10px;">
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</el-row>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<span>中性色</span>
<h3>5、Link 文字链接</h3>
</div>
<el-row style="margin-bottom: 10px">
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
</el-row>
<el-row style="margin-bottom: 10px">
<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>
</el-row>
<el-row style="margin-bottom: 10px">
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i></el-link>
</el-row>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>6、Tabs 标签页</h3>
</div>
<el-tabs tab-position="left" style="height: 200px;">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
<p>
Tabs位置共有4个位置分别为：
<el-tag>
<span>top</span>
<el-divider direction="vertical"></el-divider>
<span>right</span>
<el-divider direction="vertical"></el-divider>
<span>bottom</span>
<el-divider direction="vertical"></el-divider>
<span>left</span>
</el-tag>
</p>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>7、弹框、对话框、通知</h3>
</div>
<el-row style="margin-bottom: 10px;">
<el-button
plain
@click="showNotify">
通知
</el-button>
<el-button
plain
@click="showMessageBox">
消息Box
</el-button>
<el-button
plain
@click="showConfirmBox">
消息确认Box
</el-button>
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
</el-row>
<el-row>
<el-col :span="5">
<div >
<div class="bg-text-primary" style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #303133">主要文字
<div class="value">#303133</div>
</div>
<div class="bg-text-regular" style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #606266">常规文字
<div class="value">#606266</div>
</div>
<div class="bg-text-secondary" style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #909399">次要文字
<div class="value">#909399</div>
</div>
<div class="bg-text-placeholder" style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #C0C4CC">占位文字
<div class="value">#C0C4CC</div>
</div>
</div>
</el-col>
<el-col :span="1">
<div style="width: 20px;height: 10px"></div>
</el-col>
<el-col :span="5">
<div >
<div class="bg-border-base" style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">一级边框
<div class="value">#DCDFE6</div>
</div>
<div class="bg-border-light" style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">二级边框
<div class="value">#E4E7ED</div>
</div>
<div class="bg-border-lighter" style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">三级边框
<div class="value">#EBEEF5</div>
</div>
<div class="bg-border-extra-light" style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">四级边框
<div class="value">#F2F6FC</div>
</div>
</div>
</el-col>
<el-button @click="dialogVisible = true">对话框Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</el-row>
</el-card>
</el-tab-pane>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>6、其他小控件</h3>
</div>
<el-row style="margin-bottom: 10px">
<el-switch
:value="true"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<el-switch
:value="false"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<el-slider></el-slider>
</el-row>
<el-row style="margin-bottom: 10px">
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
</el-row>
<el-row style="margin-bottom: 10px">
<el-tag closable>标签一</el-tag>
<el-tag closable type="success">标签二</el-tag>
<el-tag closable type="info">标签三</el-tag>
<el-tag closable type="warning">标签四</el-tag>
<el-tag closable type="danger">标签五</el-tag>
</el-row>
<el-row style="margin-bottom: 10px">
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<el-tag size="small" closable>小型标签</el-tag>
<el-tag size="mini" closable>超小标签</el-tag>
</el-row>
<el-row style="margin-bottom: 10px;word-spacing: 30px;">
<el-badge :value="12" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
</el-row>
<el-row style="margin-bottom: 10px;word-spacing: 30px;">
<el-badge :value="200" :max="99" class="item">
<el-button size="small">评论（最大值）</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">回复（最大值）</el-button>
</el-badge>
<el-badge value="new" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">回复</el-button>
</el-badge>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-alert
style="margin-bottom: 10px"
title="成功提示的文案"
type="success"
show-icon>
</el-alert>
<el-alert
style="margin-bottom: 10px"
title="消息提示的文案"
type="info"
show-icon>
</el-alert>
<el-alert
style="margin-bottom: 10px"
title="警告提示的文案"
type="warning"
show-icon>
</el-alert>
<el-alert
style="margin-bottom: 10px"
title="错误提示的文案"
type="error"
show-icon>
</el-alert>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-dropdown>
<span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary">
默认尺寸
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
中等尺寸
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
小型尺寸
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
超小尺寸
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-row>
<el-row style="margin-bottom: 10px;">
<span>头上一片晴天，心中一个想念</span>
<el-divider content-position="left">少年包青天</el-divider>
<span>饿了别叫妈, 叫饿了么</span>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<span>为了无法计算的价值</span>
<el-divider content-position="right">阿里云</el-divider>
</el-row>
<el-tab-pane label="常见问题">
<el-row style="margin-bottom: 10px;">
<span>雨纷纷</span>
<el-divider direction="vertical"></el-divider>
<span>旧故里</span>
<el-divider direction="vertical"></el-divider>
<span>草木深</span>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="常见问题" name="d">
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<span>1、页面初始化前闪现源代码</span>
<h3>1、页面初始化前闪现源代码</h3>
</div>
<p>${'<style type="text/css">'?html}</p>
@ -213,6 +766,60 @@
<p>${'</div>'?html}</p>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>2、为什么Long类型返回json字符串变为String</h3>
</div>
<p>因为Long可支持的长度比JavaScript中Number支持的位数更多，所以当Long数值很大时转为Json再转为Number就会丢失精度，造成难以发现的Bug，所以本系统默认处理了该问题。</p>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>3、Date类型格式化问题</h3>
</div>
<p>默认启用全局Date格式化
<el-tag>yyyy-MM-dd HH:mm:ss</el-tag>
，需要关闭请在
<el-tag>application-*</el-tag>
中关闭。
</p>
<p>对于个别返回结果的Date格式化可以通过注解方式
<el-tag>@JsonFormat(pattern = "yyyy-MM-dd")</el-tag>
</p>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>4、权限问题</h3>
</div>
<p>1、本系统启用自定义Token来控制权限，任何访问都会有一个全局Token,任何一处都可以通过<el-tag>LocalData.getToken()</el-tag>来获取
当前访问对象的Token。其中Token充当着访问对象的通行证，其中包含访问对象的<el-tag>用户ID</el-tag>、<el-tag>用户名</el-tag>、
<el-tag>可访问资源</el-tag>等信息。
</p>
<p>2、对于未登录对象会提供临时(访客)<el-tag>LocalData.getTempToken()</el-tag>(有限的权限)来提供访问系统。</p>
<p>3、如果系统存在Task等定时任务时，是不存在访问对象，通过<el-tag>LocalData.getSystemToken()</el-tag>来获取系统层的Token来操作系统。</p>
</el-card>
<el-card class="box-card" style="width: 600px;margin: 20px">
<div slot="header">
<h3>5、Token配置</h3>
</div>
<p>Springboot环境配置文件<b>application-*</b>中配置了系统中需要验证权限和不需要验证的url。而需要验证权限的URl会在<el-tag>SecurityConfig.getAuthorization()</el-tag>
方法中通过Parameter或Cookies中获取当前访问对象的登录信息，从而为当前访问对象组装Token对象。
</p>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
@ -228,6 +835,59 @@
el: "#app",
data: {
fileList: [],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市'
}],
multipleSelection: [],
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
region: [
{required: true, message: '请选择活动区域', trigger: 'change'}
],
date1: [
{type: 'date', required: true, message: '请选择日期', trigger: 'change'}
],
date2: [
{type: 'date', required: true, message: '请选择时间', trigger: 'change'}
],
type: [
{type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
],
resource: [
{required: true, message: '请选择活动资源', trigger: 'change'}
],
desc: [
{required: true, message: '请填写活动形式', trigger: 'blur'}
]
},
dialogVisible: false
},
methods: {
doAjax: function () {
@ -250,6 +910,54 @@
}
})
},
submitForm: function (formName) {
this.$refs[formName].validate(function (valid) {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm: function (formName) {
this.$refs[formName].resetFields();
},
handleEdit: function (index, row) {
nav.i("编辑");
},
showNotify: function () {
this.$notify.info({
title: '消息',
message: '这是一条消息的提示消息'
});
},
showMessageBox: function () {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: function (action) {
console.log(action)
}
});
},
showConfirmBox: function () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
this.$message({
type: 'success',
message: '删除成功!'
});
}.bind(this)).catch(function () {
this.$message({
type: 'info',
message: '已取消删除'
});
}.bind(this));
},
},
created: function () {
},

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.