记一次Springboot+vue项目增加功能

最新推荐文章于 2024-06-27 23:42:05 发布

MY_FT

最新推荐文章于 2024-06-27 23:42:05 发布

阅读量1.7k

点赞数

分类专栏： JavaEE 文章标签： vue.js intellij-idea spring boot

本文链接：https://blog.csdn.net/qq_43876374/article/details/122035943

版权

JavaEE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、拿到别人的springboot+vue项目，首先自己有idea，springboot好导入，是一个多模块依赖项目，这个时候如果要导包，首先要搞懂模块之间的依赖，导出最后没有任何依赖的那个modole。

导出为jar包过程中也遇到了几个问题，首先是在父项目pom文件中添加了

 <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.2</version>
                <configuration>
                    <skipTests>true</skipTests>
                </configuration>
            </plugin>
        </plugins>
    </build>

然后在需要导出jar的module的pom里添加，指定全局唯一入口

 <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <!-- 指定该Main Class为全局的唯一入口 -->
                    <mainClass>com.teacher.evaluate.api.EvaluateApiApplication</mainClass>
                    <layout>ZIP</layout>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal><!--可以把依赖的包都打包到生成的Jar包中-->
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

拿到别人的项目，要注意数据库连接ip地址，数据库名字和密码在application.yml中修改。

利用maven打包，idea右侧maven中找到module的lifecycle-clean-compile-package即可。

有次遇到打包时一个模块找不到另一个模块的依赖，后来好像通过在父项目lifecycle中install成功了。

后端大概项目发布就这么多。

2、接下来是vue，vue实际可以完成的功能很多，比如这次实现的页面pdf下载以及网页二维码下载。

PDF下载用的html2canvas，二维码用的vue-qr。

刚开始找的下载pdf老是只能导出屏幕大小的，经过一位师兄指导可以全部导出，好像他也就在原来的div里又添加了一个div。

经过这次的两个功能实现，其实最主要是要搞清楚vue框架的结构，一般在.vue文件里<template>标签里就是网页显示内容，然后是<script>里正常import导入外部的包或者自己写的js，导入的格式也有一定规则，还可导入另一个.vue文件。然后是export default里一般加一些方法返回值，methods里加入一些方法。

像生成二维码除了有div标签，导入包，我们将二维码div标签隐藏掉，加了一个浏览器可下载的功能

downloadImg(){
            var oQrcode = document.querySelector('#qrcode img')
            var url = oQrcode.src
            var a = document.createElement('a')
            var event = new MouseEvent('click')
            // 下载图名字
            a.download = '二维码'
            //url
            a.href = url
            //合成函数，执行下载
            a.dispatchEvent(event)
        },

直接加了这个方法，搞定

vue导包用npm run build-online.这个命令应该是根据package.json中的命令来的。

3、然后发布在windows服务器上

用的ngnix，后端直接运行jar就可以，其实跨域问题我没想清楚，不知道啥时候要跨域，还有ngnix配置问题，现在只有一个项目放在html下，但是还有其它项目呢，

现在ngix配置也很简单，只是提供了一个端口转到vue中，vue中env.producton中配好了后端ip和端口。