整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

SPRING BOOT实现文件上传和下载

SPRING BOOT实现文件上传和下载

pringBoot实现文件上传和下载,前端VUE2,VUE3,React,HTML,后端SpringBoot,JAVA,JSP,在前端网页上面实现大文件上传和下载功能,支持批量上传,分片上传,断点续传,加密上传,压缩上传,批量下载,加密下载,加密传输,文件夹上传,文件夹下载。

SpringBoot实现HTTP大文件断点续传分片下载,JAVA以HTTP方式实现大文件分片,分段,分块,分割下载。

需要支持断点续传,下载一半关闭电脑后,明天能够继续下载。或者关闭浏览器,或关闭网页,或刷新网页。

最好下载能够支持加密下载,在下载过程中数据是加密的,下载完后自动解密,主要是有安全需求。

速度这块的话,内网是希望跑满的,百兆网络的话12MB/S左右,千兆的话50MB/S左右。

需要支持文件夹下载,断点续传,下载保留层级结构。

网上搜到的SpringBoot的代码不多,完整的不多,能用的也不多,基本上大部分的文章只是提供了少量的代码,讲一下思路,或者实现方案。

之前一般的做法都是使用HTML5来做的,大部都是传文件的,传文件夹的不多。网上能够搜到的能用的不多。下来下的话,基本上都不能满足用户的 需求。或者用户在用的时候总是会遇到这样或那样的问题,维护的话也很麻烦,用户满意度比较低。

我们主要是做政府项目,客户也都是政府单位的,对用户体验要求比较高,要让他们感觉用的方便,对稳定性要求比较高,基本上一年365天都不希望你出问题,对安全性要求也比较高,涉密了,信创国产化,不能连外网的,都是内网。兼容性要求比较高,有用WIN7+IE8的,也要兼容。

版本:6.5.40
代码:https://gitee.com/xproer/up6-jsp-springboot/tree/6.5.40/

nosql示例

nosql示例不需要进行任何配置,可以直接访问测试。

SQL示例

1.创建数据库

2.配置数据库连接

3.自动下载maven依赖

4.启动项目

启动成功

6.访问及测试

默认页面接口定义:

在浏览器中访问:

数据表中的数据

相关问题:

1.javax.servlet.http.HttpServlet错误

2.项目无法发布到tomcat

3.md5计算完毕后卡住

4.服务器找不到config.json文件

5.Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile

相关参考:

文件保存位置

目介绍

微人事是一个前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及到的技术点,例如 Redis、RabbitMQ 等。

如果您需要获取到这份人力资源管理系统源码的话,关注本头条号,转发文章之后私信回复【源码】查看获取方式!

  • 项目部署视频教程(旧版)
  • 项目部署视频教程(新版)
  • 项目其他相关资料

项目技术栈

后端技术栈

  1. Spring Boot
  2. Spring Security
  3. MyBatis
  4. MySQL
  5. Redis
  6. RabbitMQ
  7. Spring Cache
  8. WebSocket
  9. ...

前端技术栈

  1. Vue
  2. ElementUI
  3. axios
  4. vue-router
  5. Vuex
  6. WebSocket
  7. vue-cli4
  8. ...

项目效果图

首先,不同的用户在登录成功之后,根据不同的角色,会看到不同的系统菜单,完整菜单如下:

不同用户登录上来之后,可能看到的会有差异,如下:

每个用户的角色是由系统管理员进行分配的,系统管理员给用户分配角色的页面如下:


系统管理员也可以管理不同角色可以操作的资源,页面如下:


文档

文档是对项目开发过程中遇到的一些问题的详细记录,主要是为了帮助没有基础的小伙伴快速理解这个项目。

  1. 权限数据库设计
  2. 服务端环境搭建
  3. 动态处理角色和资源的关系
  4. 密码加密并加盐
  5. 服务端异常的统一处理
  6. axios 请求封装,请求异常统一处理
  7. 将请求方法挂到Vue上
  8. 登录状态的保存
  9. 登录成功后动态加载组件
  10. 角色资源关系管理
  11. 用户角色关系管理

目前源码已经全部上传完毕

如果您需要获取到这份人力资源管理系统源码的话,关注本头条号,转发文章之后私信回复【源码】查看获取方式!

景:公司要开发一个新的项目,但是我们的前端就一个,还要忙着维护处理其他的项目,但是后端人员比较多,所以就要求后台管理系统的页面由后端人员开发,实在不会的找前端协助,这就没办法了,只能自己上了!

Idea创建项目





vue结构分析


其中我们最常修改的部分就是 components 文件夹,几乎所有需要手动编写的代码都在其中。


1.public下index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%=BASE_URL %>favicon.ico">
    <title><%=htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%=htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件,让它不平凡的是 <div id="app"></div> ,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

2.src下App.vue

这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里也有一句 <div id="app">,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行, <router-view/>,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

3.src下main.js

前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip=false

new Vue({
  render: h=> h(App),
}).$mount('#app')

4.运行