springboot+vue实现增(包含上传图片)删改查打包到服务器并同时插入数据库

---

springboot+vue实现增(包含上传图片)删改查打包到服务器并同时插入数据库

*hello everybody，为了让大家更快的找到自己想要的功能，我们先来看看需要完成的项目是什么样子的叭
如下：

那我们再来看看做出来的效果图是什么样子的吧（这是新增的效果图）

新增以后显示的效果：

大家可以看出，我刚刚上传的图片是可以显示的，新增的数据也是有的（如果图片显示不出来刷新一下即可），至于修改跟删除是一样的啦，只是修改会根据你的id获取你的数据显示在form表单上，这个下面我们会提的，删除等会咱也会提的哈，8要着急

好啦，废话不多说，接下来进入正题了 。。。。。。。。。。。。。。。。。。。。。。。。。。

咱们从数据库开始，因为我们的项目是要发布到服务器上去的，所有，你得把你的数据库连接一下你的服务器（前提是，你得买一个服务器，我的话，直接用的阿里云的服务器，有需要的可以去阿里云购买）

然后，你就需要安装一个docker，然后再docker里面安装mysql，tomcat啥的（这里的各类安装的命令我就不说了，我直接贴一个链接，有需要的自己看吧https://www.cnblogs.com/aikutao/p/11163333.html）

接下来，贴一我的数据库

第一个是goods表：

第二个是GoodsDetail表：

ok，next，我们来写后台代码吼。。。。。。。。。。。。。。。。。。。。。。。。。。

这是我后台项目的整个结构

我先把pom.xml文件和application.properties给你们

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.1.RELEASE</version>
        <relativePath/>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>goods</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>goods</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.5</version>
        </dependency>
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.3</version>
        </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.16.10</version>
            </dependency>
        <dependency>
            <groupId>commons-collections</groupId>
            <artifactId>commons-collections</artifactId>
            <version>3.2.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
        </dependency>
        <dependency>
            <groupId>commons-net</groupId>
            <artifactId>commons-net</artifactId>
            <version>3.1</version>
        </dependency>

        <!-- spring boot web支持：mvc,aop... -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <!-- 过滤springboot默认嵌入式tomcat插件 -->
            <!--<exclusions>-->
            <!--<exclusion>-->
            <!--<groupId>org.springframework.boot</groupId>-->
            <!--<artifactId>spring-boot-starter-tomcat</artifactId>-->
            <!--</exclusion>-->
            <!--</exclusions>-->
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--thymeleaf模板-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        <!--MyBatis依赖jar包和MySQL连接相关的jar包-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency>

        <!--打包添加的依赖-->
        <!--添加发布依赖-->
        <!--<dependency>-->
        <!--<groupId>org.springframework.boot</groupId>-->
        <!--<artifactId>spring-boot-starter-tomcat</artifactId>-->
        <!--<scope>provided</scope>-->
        <!--</dependency>-->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-core</artifactId>
            <version>3.0.5</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.4</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.properties:

spring.datasource.url=jdbc:mysql://39.105.16.76/goods?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=sasa
server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis-plus.mapper-locations=classpath:mappers/*Dao.xml
logging.level.com.example.goods.mapper=debug
# url path
#server.port=8088
#server.servlet.context-path=/shipin

# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
#spring.thymeleaf.content-type
spring.thymeleaf.servlet.content-type=text/html

# 开发阶段务必关闭缓存 (=false)
spring.thymeleaf.cache=false

#最大文件大小。值可以使用后缀“MB”或“KB”。指示兆字节或千字节大小。
spring.servlet.multipart.max-file-size=-1
# 最大请求大小可以是mb也可以是kb
spring.servlet.multipart.max-request-size=-1

#配置外部访问文件（把上传的图片视频文件放到E盘下的fileUpload文件夹下）
cbs.imagesPath=file:/E:/fileUpload/