前端上传图片到服务器-前端上传图片到服务器

（开源地址）

（官网，有在线Demo和API文档）

如果没有耐心看文字介绍，可以点此链接观看：视频介绍，在项目目录文件/docs/1-Development Environment Construction Instructions.docx中也有更详细的介绍。

现在的软件开发需要大量的技术栈，搭建本地开发环境运行系统就成了一件比较复杂的事情，有时甚至成为开源项目推广的第一难点，即只有搭建环境足够了，只有简单流畅，人们才会有兴趣去学习更多。

因此，WebRose在这方面秉承了“低代码”极简主义的思想，并做了很多创新。 可以做到零配置，绿色版一键解压，分分钟搭建运行，就是想办法让环境尽可能的简单。 再简单不过了。

主要创新点如下：

前端采用标准原生Web技术部署开发（这也是为了实现PaaS在线编码）。 请勿安装和使用NodeJs、npm、yarn、webpack等脚手架工具。 你只需要了解一些基本的Web原理，非常简单。 直接将JDK、MySQL、Ant、TomCat等需要的第三方软件上传到Gitee库中。 下载后，解压后即可运行，这样就省去了各种启动命令中路径变量的配置，因为都是预先配置和匹配的。 向上。 开源项目本身是Idea的标准Java项目，不是Maven项目。 依赖的第三方ClassPath Jar包预先设置在工程目录下。 导入Idea后可以直接编译运行，编译速度快很多。 前端和后端项目合并在一个 Gitee 库中。 开发只需要一个开发工具。 每个人都可以同时编写前端和后端代码。 运行和发布时，前后端分开部署。 直接编写Ant脚本编译打包SpringBoo服务Jar包，无需Maven等复杂的打包工具，简洁、透明、灵活、免费。

环境搭建如果用简单的话概括一下：第一步解压Rar环境工具，第二步启动MySQL，第三步启动Web服务器，第四步编译启动Idea中的SpringBoot服务类。

然后就一切OK了，每一步都不需要做任何配置。

下面一一详细说明（因为内容说明了设计初衷，有些文字略多）。

Gitee克隆下载环境

将上述地址直接导入Idea，或者从Gitee网站下载Zip文件，解压后导入Idea。 这两种方法都可以，这里不再赘述。

创建本地目录

这是关键的第一步。 如果你创建一个两级目录命名为D:\ABCWorkSpace\webrose（注意大小写），然后将项目导入到该目录下，后续不需要修改任何配置（即零配置）即可运行一键解压，原因是后面命令中的路径变量都预设为这个路径名。

所以一开始，为了运行的更顺畅，建议先在这个默认目录下搭建，熟悉后再修改配置使用其他目录。

一键解压MySQL/JDK/Ant/TomCat等运行环境工具

Gitee下载完成后，整个项目目录结构如下：

项目目录说明

其中，RunTimeEnv目录下有几个rar文件，是运行环境工具。 理论上可以直接解压。

但是如果直接在当前Idea项目文件夹下解压，会导致Idea建立索引文件，因为文件太多，比较费时，而且这些文件其实是外部环境工具和软件，而不是用于构建的文件项目开发，无需建索引。 所以最好的办法就是复制到项目外的目录下解压。 所以我特地在目录下写了一个CopyFile.cmd，将文件复制到D:\ABCWorkSpace\webroseEnvTemp目录下，双击这个命令，命令内容如下：

md D:\ABCWorkSpace\webroseEnvTemp
copy .\*.rar D:\ABCWorkSpace\webroseEnvTemp

如果你手动创建这个临时目录，然后手动复制，当然也是可以的。

之所以一定要调用这个目录名，也是因为后面一些命令参数中的路径也预设为这个名字，这样可以做到零配置。

复制到临时目录后前端上传图片到服务器，可以直接手动解压各个Rar文件到当前文件夹，无需任何其他配置。 截图如下：

外部环境工具临时目录

启动MySQL数据库

上一步解压完每个Rar后，启动MySQL就很简单了，因为这个MySQL已经做成了绿色解压版，直接进入MySQL5_1_57目录双击执行命令【★★MyStart- MySQL★★.cmd]。 启动后界面如下：

MySQL成功启动界面

MySQL监听端口为5306，用户名为root，密码为111111，自带两个Demo演示库webrose_crm和webrose_ehr，不要再次安装该库。

之所以把整个MySQL做成绿色解压版上传到Gitee库，不像有些框架提供一个.sql文件，然后执行SQL安装到自己的MySQL数据库中，就是为了简化步骤数据库环境。 ，每个人电脑上的MySQL版本不一样（字符集也可能不一样），用户名和密码肯定不一样，然后还要有配置数据源之类的一堆注意事项，经常有各种小问题，所以上传整个库直接解压是最稳定，最简单，最傻逼的操作。

之所以选择低版本的MySQL，是为了减小整个rar文件的体积，让Gitee上传下载速度更快。 熟悉之后就可以导入自己喜欢的高版本MySQL了，但其实这个版本的MySQL也是经典稳定版。 , 完全足够且易于使用。

MySQL目录可以复制到其他任意目录，双击启动命令即可，因为这是绿色解压版，没有任何配置。

启动网络服务器 (TomCat)

前后端分离架构 前端需要启动一个web服务器。 在生产环境中，通常是 Ngnix 或 Apache 等专业的 Web 服务器。 开发环境可根据个人喜好自由选择。 只要能运行，我们选择TomCat的绿色解压版，启动方法是进入TomCat5.5.23目录，双击执行命令【MyStart-TomCat.cmd】（不要做任何配置）。 启动后界面如下：

Web服务器TomCat启动界面

TomCat监听端口为5001，启动后的系统访问入口地址为：

:5001/webrose/framework/login.html，用户名/密码：xch/1

注意必须同时启动SpringBoot后端服务才能正式登录，否则加载登录图片会报错。

之所以选择TomCat，主要是因为它是一款非常老牌的Web/Java服务器，极其稳定可靠。 不像某些 Web 服务器有时会出现奇怪的缓存刷新问题，配置也非常简单。

之所以选择低版本的TomCat，是因为Rar文件更小，Gitee上传下载速度更快，而这个低版本就足够了，因为我们只是把它当作Web服务器，而不是Java服务器。

之所以不需要任何配置就能成功启动应用，是因为在启动命令和Server.xml中配置的路径正是前端强调的预设目录名。 看截图就明白了：

TomCat启动命令

TomCat-Server.xml

从截图可以看出，零配置的前提是项目目录必须使用默认目录。 相反，如果你想换到别的目录，只需要改变这些配置的路径即可。

启动SpringBoot服务

因为该项目不是Maven项目，是标准Java项目，即ClassPath依赖的jar文件都放在\ServiceProject\lib3目录下，所以在Idea中编译后端Java项目非常简单，不做任何配置，直接编译Just Rebuild Project。

编译完成后，搜索类cn.net.webrose.bs.WebRoseSpringRun，直接运行，即成功在Idea中启动了springBoot服务。

之所以能够在不进行任何配置的情况下成功启动并连接数据库，是因为MySQL的相关参数和后续数据源配置/appouter_config/webrose.xml中的内容都是预设的匹配对。 截图如下：

SpringBoot服务启动成功界面

也就是说如果不提前把整个MySQL做成一键解压版本，而是使用自己版本的MySQL，至少要修改数据源配置，各种报错可能不会顺利，并且您无法实现零配置。 这也是我们将整个第三方环境放在Gitee库中，直接下载解压使用的原因，就是为了减少各种配置，降低出错和失败的概率。

至于为什么最标准简单的Java项目不是Maven项目，其实第一次构建环境肯定是用Maven，但是构建完成后，ClassPath的jar环境不会经常变化，所以在使用的时候其他的，使用Maven依赖的jar包导出，直接放在项目目录下。 做一个Java项目就方便简单多了。 导入后，无需任何配置，直接编译使用，编译速度快很多。 也可以说Maven只是第一次用，只要ClassPath环境不变，其实没有必要每次都用。 理解这种辩证关系，并不是否定Maven，而是有时用有时不用。

Ant编译生产环境SpringBoot服务包

上面讲的是开发工具中的环境搭建，最后还需要发布到生产环境。 有编译打包的过程。

首先强调一下，虽然在开发环境中，前后端代码文件都在同一个Idea工程中，但实际上操作也是分开执行的。

即前端为TomCat反向映射启动目录D:\ABCWorkSpace\webrose\WebProject，后端文件目录没有使用。

后端是编译所有src，只用到D:\ABCWorkSpace\webrose\ServiceProject目录下的文件，没有用到前端目录文件。

也就是把文件合并在一个项目里，方便写代码和转Git，也就是一个Git库，一个项目，一个开发工具就够了，前后端代码都可以同时写入一个工具界面。

然后我们连每个产品，每个工程都放在这个工程里面，只要在Ant脚本里面设置你要编译哪些产品和工程目录就可以了。

这是因为很多中小型软件公司和项目由于人力资源有限，往往无法将前后端程序员分开。 项目和产品。

如果前端项目有一个Git库，后端项目是另一个，然后每个产品和项目都是一个Git库，前端开发使用VSCode开发工具，使用Idea开发工具对于后端开发来说，再搭建或者切换各个产品和项目的环境是非常繁琐的，需要在不同的开发工具和项目之间来回切换。

因此，为了简化环境搭建，我们将前后端代码、每个产品和项目代码合并为一个项目，一共只有一个项目和一个环境，永不切换。

当然也有人认为权限不分离，即每个人都有所有的产品和项目代码权限，这样不安全。 这个原则在一些大公司是有的，但是在中小型企业和项目中有时候不是很关键。 如果出现这样的问题，也可以自己重新设置目录，只要把Ant编译打包脚本也相应改一下即可。

如果只想编译某个产品的源码，不想编译所有不相关的源码，只需要将本地环境中不相关的产品源码暂时设置到一个普通目录即可（不是Sources源码目录），这样编译速度就不会受到影响。

开发环境的前后端目录和原理都讲清楚了，接下来就是如何发布生产环境了。

前端发布：

前端发布很简单，直接将开发环境目录复制到生产环境web服务器（一般是Ngnix）对应目录即可。 这是因为我们是原生 web 架构，不需要使用 WebPack 来做二次包构建。 复制目录文件即可，也就是说开发环境和生产环境完全一样，就是标准的原生Web。

这也是因为WebPack的二次打包与我们后期想要实现的PaaS在线开发的效果存在“结构性矛盾”。 PaaS在线开发需要实现立即保存运行的效果，而不是先编译成另一种格式再上传，所以这就需要创新思路，回归原生Web发布机制。

后台发布：

后端发布需要编译打包成一个SpringBoot服务包，即最后只直接运行一个Jar文件，整个环境的所有Jar都打包在这个Jar中。

一般的方法是使用Maven打包，但是目录结构需要遵循Maven的很多规则（将每个产品项目的前后端目录合并可能会有问题），所以我们选择直接打包蚂蚁脚本。 其实Maven本质上也是使用Ant执行的（在Maven执行提示中可以看到Ant Task的字样）。 两者是一回事，但是自己写Ant脚本更自由灵活，可以对项目目录做更多创新的设置。

Ant的具体执行方法是直接双击运行命令\ServiceProject\buildjar\MyAnt.cmd。

查看这个Ant命令的内容可以看出，这个命令执行的是配置文件ServiceProject\buildjar\MyBuilder.xml。

看MyBuilder.xml的配置内容，很容易理解它的原理（不清楚的可以先上网找一些Ant的资料学习一下），其实就是不断的拷贝、编译、打包、复制。 . 最后启动SpringBoot服务包进程。 该文件内容如下：

Ant脚本MyBuilder.xml开始部分内容

Ant 脚本 MyBuilder.xml 末尾的内容

即Ant脚本仅使用5~6个最常用的功能命令，完全可以自行模拟Maven底层的执行过程，自由组合控制SpringBoot服务Jar包的输出，一切透明.

最重要的是，自定义Ant脚本可以自由发挥，创新性的设置项目目录，不遵循Maven规则，然后根据自己的想法修改脚本打包，甚至还有一些更大的创新，比如WebRose有一个中间可以执行一个程序的函数 先对所有源码进行加密，然后打到最终Jar的某个目录下，然后在出现异常时点击堆栈链接，打开源码（先解密）界面。 实现这种在打包过程中的自由扩展，使用Maven不方便，直接写Ant脚本灵活自由。

Ant实际执行截图如下：

Ant编译打包执行过程

Ant执行后会在D:\ABCWorkSpace\webroseEnvTemp\_SpringBootServiceDeploy目录下生成最终文件，截图如下；

Ant 最终输出文件

最后，只需将生成的SpringBoot服务Jar文件上传到生产环境（一般是Linux）即可运行。

其实不管是Idea还是Maven，编译部署本质上都是用的Ant。 下面是运行日志的截图，可以看到。 一个更灵活、更高、更低的维度。

idea编译其实用的是Ant

PaaS在线开发

以上所有流程都是指在本地开发工具中开发，最后部署到生产环境，但现在也流行PaaS云开发模式。 所谓PaaS，就是未来开发者直接在云端配置开发。 需要重新发布部署或者重启服务器。

微信小程序其实相当于一个PaaS开发平台。 开发者在微信提供的嵌入式平台接口中进行开发。 开发者不知道也感受不到背后的操作系统、数据库、缓存服务器、Java服务器。 什么，它是如何部署的，它是如何启动和运行的。

WebRose平台有这样一个在线PaaS功能，即可以从头开始在线创建表格、菜单、前端和前端编码，保存后立即运行，无需将程序上传到生产环境发布。 换句话说，上面提到的一堆过程是不必要的。 系统只需要部署一次，永远不会部署和重启服务器。 不再需要本地开发工具和环境。 一切直接在线开发，开发者无需学习编译、打包、发布、重启服务器等系统级知识，只关注应用级API。 以下是工具界面：

PaaS在线开发接口

PaaS开发绝对是未来的发展趋势之一，特别适用于需要快速响应、快速迭代、不方便频繁发布和重启服务器的中小型软件项目场景。

工程路径修改及配置参数

上面说的零配置的前提是工程目录必须在D:\ABCWorkSpace\webrose目录下，但是如果只是想换个目录，需要修改哪些命令配置呢？

MySQL数据库和Idea的Java项目编译是相对路径，不要修改任何配置项。

需要修改TomCat和Ant这四个文件中的变量。 详情如下：

TomCat5.5.23\MyStart-TomCat.cmd，修改JAVA_HOME变量

TomCat5.5.23\conf\server.xml，修改上下文路径

ServiceProject\buildjar\MyAnt.cmd，修改其中的JAVA_HOME和ANT_HOME

ServiceProject\buildjar\MyBuilder.xml，修改开头的三个变量路径Java_Home、FromDir、ToDir

另外，除了Spring自带的resources配置文件名外前端上传图片到服务器，后端还有一个（也是唯一一个）配置文件appouter_config/webrose.xml，配置数据源在这里。

前端只有一个配置文件，就是WebProject/config.js，后端的URL设置在这里。

即整个平台的配置参数很少，也很简单。

总结

总而言之，WebRose搭建本地开发环境，编译发布生产环境，非常简单，独树一帜。 下载、解压、零配置后即可真正运行。