26-Vite与JAVA后端集成原创

这章我们来学习V高级应用的最后一部分，后端集成fate，它不单是一个集成工具，而且呢它还是一个非常好的工程化工具，也就是说我们可以使用V来提高我们前端的开发效率的同时，还可以去集成后端，那后端开发语言呢？我们可以使用Java pp.net go real notde等等，那我们能不能用V来去整合这些语言呢？是可以的，在日常的开发环境中，我们经常发现V跟Java的合作还是比较频繁的，所以呢，这个视频我们就来讲解一下V是如何跟Java来进行后端集成的，这个视频呢，我们就来搭建一个V跟Java一个集成的环境，我们通过开发环境和生产环境两个环境来分别进行演示。想要搭建一个V加Java的一个集成环境，我们得需要一个前端的和一个后端的两个环境。首先呢，我们在V这个前端环境里边创建一个新的项目，我们执行一下PN PM create。

我们来给项目起个名字叫wait advance integrated back就是一个后端集成，我们选择view这个framework，选择view v，然后CD到weight advanced integrated。End，然后执行PN PM install，我们安装一下依赖。接下来呢，我们在开发环境下面来启动一个服务，我们执行一下PN PM run DV。好，这样我们就启动了一个local host3000这样的一个服务了，我们按着command加单击我们就可以打开这个页面了，这就是我们本地的一个前端的开发环境的一个server，那么接下来我们再搭建一个后端的Java环境。

我们需要按照可加回车，然后呢去搜索一下叫做idea，那么开发Java的小伙伴应该知道这个idea工具，我们来创建一个spring boot这样的一个项目。那具体的怎么去创建，怎么去安装这个环境呢？我们就不再赘述了，因为它属于我们Java后端的这块内容，那感兴趣的小伙伴呢，可以看一些关于后端Java相关的一些视频教程。那接下来呢，我们来看一下这个环境，在src的下面有一个man这样的一个文件夹，在这个文件夹下面有一个resources，一个Java这样的两个文件包，在resources里边有个static文件夹，这里面呢包含了一个d.HTML和一个index.html，我们首先先看一下第点HTML，其实这个文件呢，将来就会作为我们在开发环境里边的一个入口文件，这里呢，如果是他要想跟wait做整合的话，必须编写三句非常重要的内容，第一句就是divvip，这块呢，大家都知道是我们在开发view的时候渲染我们页面的一个根节点。

那后边我们在开发环节里边需要载入两个S2C，在spring标签里面加入一个S2CH http local host、3000，然后at wait、斜线client，还有一个就是S2C htvp localho的3000 S2C man.GS同时我们要把这个所谓标签的tap变成一个module，让它可以用原生的浏览器的模块化来载入我们这两个模块。那这两句话呢，其实上大家可以打开vita的官网能看到呢，它给我们做了明细的这样的一个提示，那我们把它写完了以后呢，来启动一下我们的server，看看能不能运行我们当前的这个Java的环境。我们先启动一下，点击这个启动的按钮。

上到天河以后呢，我们这个服务就启动起来了，这个服务是阿帕7TOMCAT启动起来的，它的端口号呢是8080，好来到浏览器，我们新建一个页面，然后输入一个localhot 8080，后面加一个d.HTML好，我们发现这个页面也渲染出来了。那你可能会问第一个问题，这个页面不就是我们VAPP渲染的这个开发环境下的这个server吗？我们为什么非得要放在我们Java环境里呢？因为将来我们的项目要部署的话，要前后端整合在一起，我们真正对外部署的时候，Index atml，或者说我们的入口文件呢，是归后端管辖的，所以我们再去做真正的开发环境这个集成测试的时候，我们得需要去搭建一个前后端的开发环境的一个集成环境，所以呢，我们需要这样的一个环境，我们在Java环境里面去读取，呃，我们dev环境里面启动的server，其实上这个页面呢，是由我们V那个环境下渲染出来的。

第二个问题，你可能会问，诶，这个图片怎么没有了，那我们现在看一下这个图片的路径，我们点击右键看一下检查，我们去选择一下这个图片，我发现这个路径呢是杠S2C-AS-logo.p级，我们回到代码，在我们当前的环境下面，根本就没有刚才的src的目录，因为那个目录呢，是在我们前端的目录下面的src的，这个目录下面的那那个路径很显然是我们wait打包出来的，那么这个路径我们该怎么去让它正常显示呢？我们得需要做一个在他们K下面的一个代理，让它访问到杠S2C的时候，能够请求到我们local耗的3000的S2C下。那这样的话，我们得需要去做个代理的配置，在当前的这个Java环境里边，我已经把代理写好了，大家可以看在Java的。com千锋这个目录下面有一个千锋serve light configuration，在这里边呢，就是我们代理的一个核心的serve light，然后接下来我们再次打开resources下面的application.pro这个配置文件，好，这里呢有两个环境，我们现在暂时先把上面的给删除掉，我们只打开div这个环境，在这里边呢，我们配一个pro serve light_URL也就是当我们这个服务。

遇到杠S2C杠星的时候，我们就把它替换到一个target URL里，就是htvp log号的3000-S2C下面。回到浏览器刷新，我们看到这个图片呢，就显示出来了，这时我们在开发环境里边V和Java的整合，那么在生产环境该怎么办呢？我们先回到前端的这个环境，我们CTRLC先退出，我们当前在开发环境里面启动这个服务，然后呢，我们打开v con GS来去做一个配置，在这里边我们输入一个build，在build的后面我们再去做一个manifest这个属性的配置，设置为true，好保存一下，然后呢，我们执行一下PN PM run build。

打完包以后，我们在this目录下面能看到这里有个manifest，就是Jason，这里边呢，有我们的GSCSS以及图片的相关的一些资源路径的一个KY6，那我们可以在后端去读取这个值，然后装载到我们的后端集成的那个钩子文件，比方说d.HTML或者是index.html里，这样的情况下呢，我们就可以去更新我们前端的这个包，然后呢，它能够把我们最新更新的这个文件名字给替换掉。那这个做完了以后呢，我们得需要把data这个目录拷贝到我们后端的某个文件夹里，因为呢，我们打算进行发布了。我们回到后端的代码，我们可以把这个目录拷贝到static这个文件夹下面，我们点击右键粘贴好，我们准备把我们前端打完好以后的那个this文件夹放到我们static这个目录下面，那接下来呢，我们再次打开index.html，在这个文件里边，我们通过link和script来分别加载了一个CSS和JS，但是这两个文件的文件名呢，我们得需要通过res和S2C给引入进来。

但是我们这里头呢，用了一个CSS和GS的一个所谓的模板，那么我们可以通过在Java环境里边去读取我们Dis目录下的manifest Jason文件，把这里边的file和CSS这两个文件的名字替换到我们这个位置，这样情况下呢，我们就可以在后端去访问我们前端打好包的这些资源了，那至于后端是怎么读取的呢？我们可以给大家去观摩一下这个代码，首先呢们来看一下，在com点千封这个文件夹下面有个UQ这样的一个目录，在这个目录下面有一个index h前面replace这个包呢，就是我写的一个用Java来去读取我们的JS文件，并且呢，去替换我们在index.atml里面写的script标签里面的CSS和JS，具体的代码呢，我就不再赘述了，我回头可以把代码发给大家，大家自己仔细看一下就可以了，好，替换完了以后，那么我们这个资源就可以读取我们静态的目录。

那我们现在呢，可以重新启动一下我们这个服务。然后仍旧是访问8080，不过这次呢，我们不访问这个杠d.HTML了，我们访问杠index.html，那我们直接回车就好，好我们发现呢，现在没有问题，只是这个图片还是访问不了，因为刚才呢，我们是在application.pro里面配置了我们开发环境的这两个替换，现在呢，我们需要把这两句给注释掉，然后把这个生产环境的两个代理的这个路径的替换给打开，然后我们再重新的去启动一下我们的服务。

好，再次回到浏览器，我们再次刷新一下这个index atml，我发现又没有问题了，那这样的话呢，我们就实现了在生产环境和开发环境的两个环境下如何进行V和Java的集成了，那大家可以根据我们现在集成的流程和思路，去跟你的后端Java或者是其他语言来进行合作，把我们这个后端集成的环境给迅速的搭建起来。好，关于和Java的集成，我们就讲到这里，大家加油。