在Vue-admin模板项目中，我们可能需要创建一个全局的提示组件，这样在任何页面需要显示信息时，都可以使用这个组件。以下是一个简单的实现：

<template>
  <div class="message-box" v-show="isShow">
    {{ message }}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '',
      isShow: false
    };
  },
  methods: {
    show(msg) {
      this.message = msg;
      this.isShow = true;
      setTimeout(() => {
        this.isShow = false;
      }, 3000); // 显示3秒后自动消失
    }
  }
};
</script>
 
<style scoped>
.message-box {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: #333;
  color: white;
  border-radius: 5px;
}
</style>

在主入口文件或者任何全局性的js文件中，我们可以这样使用这个组件：

import Vue from 'vue'
import MessageBox from './components/MessageBox.vue'
 
// 创建一个全局的MessageBox实例
const MessageBoxInstance = Vue.extend(MessageBox)
const instance = new MessageBoxInstance().$mount()
document.body.appendChild(instance.$el)
 
// 定义全局的showMessage函数
function showMessage(msg) {
  instance.show(msg)
}
 
// 在Vue原型上添加showMessage方法
Vue.prototype.$showMessage = showMessage

在任何组件内，你可以通过this.$showMessage('这是一条全局消息')来显示消息。这样，你就创建了一个全局可用的提示组件，并且可以在任何页面上显示信息。

由于篇幅所限，我将提供一个简化的SpringBoot后端服务的代码示例，用于创建一个训练信息的RESTful API。

// 导入SpringBoot相关依赖
import org.springframework.web.bind.annotation.*;
import org.springframework.http.ResponseEntity;
 
// 定义一个TrainingInfo实体类
@Entity
public class TrainingInfo {
    @Id
    private Long id;
    private String name;
    private String location;
    // 省略其他属性和getter/setter方法
}
 
// 定义一个用于数据传输的对象
public class TrainingInfoDTO {
    private Long id;
    private String name;
    private String location;
    // 省略构造函数、getter和setter方法
}
 
// 创建一个TrainingInfoController类
@RestController
@RequestMapping("/api/training-info")
public class TrainingInfoController {
 
    // 使用Mock数据，实际项目中应连接数据库
    private List<TrainingInfo> trainingInfoList = new ArrayList<>();
 
    // 获取所有训练信息
    @GetMapping
    public ResponseEntity<List<TrainingInfoDTO>> getAllTrainingInfo() {
        return ResponseEntity.ok(trainingInfoList.stream()
                .map(this::convertToDTO)
                .collect(Collectors.toList()));
    }
 
    // 根据ID获取特定训练信息
    @GetMapping("/{id}")
    public ResponseEntity<TrainingInfoDTO> getTrainingInfoById(@PathVariable Long id) {
        return trainingInfoList.stream()
                .filter(ti -> ti.getId().equals(id))
                .map(this::convertToDTO)
                .findFirst()
                .map(ResponseEntity::ok)
                .orElseGet(() -> ResponseEntity.notFound().build());
    }
 
    // 创建新的训练信息
    @PostMapping
    public ResponseEntity<TrainingInfoDTO> createTrainingInfo(@RequestBody TrainingInfoDTO trainingInfoDTO) {
        TrainingInfo trainingInfo = convertToEntity(trainingInfoDTO);
        trainingInfoList.add(trainingInfo);
        return ResponseEntity.ok(convertToDTO(trainingInfo));
    }
 
    // 更新训练信息
    @PutMapping("/{id}")
    public ResponseEntity<TrainingInfoDTO> updateTrainingInfo(@PathVariable Long id, @RequestBody TrainingInfoDTO trainingInfoDTO) {
        return trainingInfoList.stream()
                .filter(ti -> ti.getId().equals(id))
                .map(ti -> {
                    ti.setName(trainingInfoDTO.getName());
                    ti.setLocation(trainingInfoDTO.getLocation());
                    return ti;
                })
                .map(this::convertToDTO)
                .map(ResponseEntity::ok)
       

由于这个问题涉及的内容较多且不具体，我将提供一个简化的示例，展示如何使用Spring Cloud、Spring Boot、MyBatis、Vue和ElementUI创建一个简单的计算器功能。

后端（Spring Cloud + Spring Boot + MyBatis）:

// Controller
@RestController
public class CalculatorController {
 
    @Autowired
    private CalculatorService calculatorService;
 
    @PostMapping("/add")
    public int add(@RequestParam int a, @RequestParam int b) {
        return calculatorService.add(a, b);
    }
}
 
// Service
@Service
public class CalculatorService {
 
    public int add(int a, int b) {
        return a + b;
    }
}
 
// 配置类略

前端（Vue + ElementUI）:

<!-- Calculator.vue -->
<template>
  <div>
    <el-input-number v-model="numberA" :min="0"></el-input-number>
    +
    <el-input-number v-model="numberB" :min="0"></el-input-number>
    =
    <el-input-number v-model="result" :min="0" readonly></el-input-number>
    <el-button @click="calculate">Calculate</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      numberA: 0,
      numberB: 0,
      result: 0
    };
  },
  methods: {
    calculate() {
      this.result = 0; // 假设已经有了HTTP请求工具
      // axios.post('/add', { a: this.numberA, b: this.numberB })
      //    .then(response => {
      //        this.result = response.data;
      //    })
      //    .catch(error => {
      //        console.error('Error fetching data: ', error);
      //    });
    }
  }
};
</script>

在实际的项目中，你需要配置Spring Cloud的服务发现、配置管理、断路器、路由和微代理等，以及处理Vue前端的打包、部署和与后端的API通信等。这些内容通常由Spring Cloud和Vue的各种工具和插件来处理。

由于这个问题过于开放，并且涉及到一个完整的项目，所以我提供了一个简化的例子来说明如何实现前后端交互。在实际的项目中，你需要根据具体需求进行详细设计和编码。

在Vue中使用Element UI创建横向表格，你可以使用<el-table>组件，并通过设置el-table-column的prop属性来指定数据源的字段。下面是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

在这个例子中，<el-table>组件接收data属性，该属性绑定到一个包含对象的数组，每个对象代表表格中的一行数据。<el-table-column>组件的prop属性指定了数据源的字段名。通过调整width属性，你可以控制列宽度，从而使表格横向。

由于这个查询涉及到的内容较多且涉及到学术问题，我无法提供完整的源代码和论文。但我可以提供一个概述性的解答，并指出如何开始构建一个基于SpringBoot和Vue的社区互联网违法和不良信息举报平台。

1. 需求分析：确定系统的功能需求，包括用户注册、登录、信息举报、管理员审核等。
2. 设计阶段：创建数据库模型、定义API接口、设计前端界面。

3. 实现：

   • 后端（SpringBoot）：

     • 实现用户注册和登录功能。
     • 举报信息的API，包括创建举报、查询举报、管理员处理举报等。
     • 安全措施，例如密码加密、CSRF保护等。

   • 前端（Vue）：

     • 用户可以在前端提交举报请求。
     • 管理员可以登录后台查看和处理举报信息。
4. 测试：进行单元测试、集成测试和端到端测试以确保系统的稳定性和正确性。
5. 部署：将SpringBoot后端应用部署到服务器，并确保Vue前端可以正确地与后端通信。

这只是一个高层次的概述，实际的设计和实现将涉及更多细节，包括权限管理、异常处理、日志记录等。

由于涉及到的是实际的项目，我建议你联系原作者或者找一个合适的学术指导以获取完整的源代码和论文。

<template>
  <div id="app">
    <el-form ref="loginForm" :model="loginForm" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="resetLoginForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 注册表单 -->
    <el-form ref="registerForm" :model="registerForm" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="registerForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="register">注册</el-button>
        <el-button @click="resetRegisterForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: 'App',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    login() {
      axios.post('/api/login', this.loginForm)
        .then(response => {
          console.log(response.data);
          // 处理登录成功的逻辑
        })
        .catch(error => {
          console.error(error);
          // 处理登录失败的逻辑
        });
    },
    register() {
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        alert('密码与确认密码不一致！');
        return;
      }
      axios.post('/api/register', this.registerForm)
        .then(response => {
          console.log(response.data);
          // 处理注册成功的逻辑
        })
        .catch(error => {
          console.error(error);
          // 处理注册失败的

Spring Boot 打成 WAR 包通常需要以下步骤：

1. 在 pom.xml 中修改打包方式为 war：

<packaging>war</packaging>

2. 添加 spring-boot-starter-web 依赖，并排除嵌入式容器（Tomcat、Jetty 等）：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>

3. 添加 provided 作用域的 servlet-api 和 jsp-api 依赖：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>javax.servlet.jsp-api</artifactId>
    <version>2.3.1</version>
    <scope>provided</scope>
</dependency>

4. 创建 SpringBootServletInitializer 的子类并覆盖 configure 方法：

import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.annotation.Configuration;
 
@Configuration
public class ServletInitializer extends SpringBootServletInitializer {
 
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(YourApplication.class);
    }
}

5. 打包时使用 mvn clean package。

Vue 打成 WAR 包并部署到 Tomcat 或 WebSphere 中，你需要做以下操作：

1. 在 Vue 项目中执行 npm run build 来生成 dist/ 文件夹。
2. 将生成的 dist/ 文件夹复制到 Spring Boot 项目的 src/main/webapp 目录（如果不存在则创建）。
3. 在 src/main/webapp 下创建 index.html 文件，确保有正确的 publicPath 和 assetsDir。
4. 修改 application.properties 或 application.yml 文件，确保静态资源的映射正确：

spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

5. 打包 Spring Boot 项目，上述步骤已经包含了如何打包成 WAR。
6. 将生成的 WAR 包部署到 Tomcat 或 WebSphere。

在部署时，确保 Tomcat 或 WebSphere 的 Servlet 容器没有覆盖你的 Spring Boot 应用。通常，Spring Boot 的应用会在 web.xml 中配置或者通过注解的方式启动。如果你使用的是 Spring Boot 2.x 版本，默认使用内嵌的 Tomcat，你需要将其关闭并配置外部的 Servlet

这是一个基于Spring Boot和Vue.js的大棚绿植养护管理系统的高层次描述，不是具体的代码实现。为了回答这个问题，我们需要提供系统的概览和核心组件的代码示例。

系统概览:

1. 后端: 使用Spring Boot框架，提供API接口。

   • 用户认证和授权。
   • 绿植管理数据的CRUD操作。

2. 前端: 使用Vue.js框架创建界面。

   • 用户界面，用于与后端API交互。
   • 绿植状态监控和维护建议。

核心组件和代码示例:

后端Spring Boot控制器(部分):

@RestController
@RequestMapping("/greenery")
public class GreeneryController {
 
    @Autowired
    private GreeneryService greeneryService;
 
    @GetMapping("/{id}")
    public GreeneryDto getGreeneryById(@PathVariable Long id) {
        return greeneryService.getGreeneryById(id);
    }
 
    @PostMapping
    public GreeneryDto createGreenery(@RequestBody GreeneryDto greeneryDto) {
        return greeneryService.createGreenery(greeneryDto);
    }
 
    @PutMapping("/{id}")
    public GreeneryDto updateGreenery(@PathVariable Long id, @RequestBody GreeneryDto greeneryDto) {
        return greeneryService.updateGreenery(id, greeneryDto);
    }
 
    // 其他CRUD操作...
}

前端Vue组件(部分):

<template>
  <div>
    <input v-model="greenery.name" placeholder="Name">
    <button @click="saveGreenery">Save</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      greenery: {
        name: ''
      }
    };
  },
  methods: {
    async saveGreenery() {
      try {
        const response = await this.$http.post('/greenery', this.greenery);
        // 处理响应，例如导航到列表页面
      } catch (error) {
        // 处理错误
      }
    }
  }
};
</script>

以上代码仅展示了后端和前端的简单交互，实际系统中还会涉及到更多的功能，如绿植保养方法的记录、数据统计分析、用户权限管理等。

为了保证答案的精简性，我们提供了后端Spring Boot控制器和前端Vue组件的简化代码示例。实际的系统实现需要更多的细节，比如数据库模型、服务层、安全配置等。

在Vue项目中，部署到Tomcat或Nginx涉及以下步骤：

1. 构建Vue项目：

   在项目根目录下运行构建命令：

   
   
   
   npm run build

   这将创建一个dist/目录，里面包含构建后的文件。

2. Tomcat部署：

   • 将dist/目录中的文件复制到Tomcat的webapps目录下的某个应用文件夹中。
   • 如果你的Vue项目配置了publicPath为/app，确保Tomcat的相应应用配置了路径别名。

3. Nginx部署：

   • 将dist/目录中的文件复制到Nginx的服务器目录中。
   • 配置Nginx的server块，使其指向你的Vue应用的路径。

4. 处理跨域问题：

   • 如果前端应用与后端API服务器跨域，可以在服务器配置（如Tomcat或Nginx配置文件）中添加相应的CORS策略。

以下是一个简单的Nginx配置示例，用于托管Vue应用：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://backend-api-url;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

在这个配置中，/api/路径下的请求被代理到后端API服务器，并且配置了CORS头部允许跨域请求。

注意：在生产环境中，不建议使用Access-Control-Allow-Origin: *，它可能会引起安全问题。应该指定具体的域名来允许跨域请求。

在Vue2中使用ElementUI时间选择器组件（el-date-picker），要限制可选的日期范围为今天往前的7天，可以通过设置picker-options属性来实现。以下是一个示例代码：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          // 可选范围为今天往前推7天，不可选今天之后的日期
          return time.getTime() > Date.now() || time.getTime() < Date.now() - 7 * 24 * 3600 * 1000;
        }
      }
    };
  }
};
</script>

在这个例子中，disabledDate 函数用来设置不可选择的日期。time.getTime() 获取的是某个日期的时间戳，Date.now() 获取的是当前时间的时间戳。通过对比，我们可以设置出只能选择今天往前7天内的日期。