基于VUE+SPRING BOOT实现跨域访问的demo(对用户表的增删改查以及登录) ————后端部分

最新推荐文章于 2024-05-28 19:52:48 发布

卖酒人

最新推荐文章于 2024-05-28 19:52:48 发布

阅读量746

点赞数 3

文章标签： spring boot vue

本文链接：https://blog.csdn.net/qq_25492005/article/details/86644534

版权

前言：此次的demo制作是本人由于项目需要，在初学vue的时候临时起意写出来的，大概用了七天左右的时间（尴尬），遇炕无数，所以如有不足，还请大家指正。

关于vue的环境搭建请参考这位博主的博客（https://segmentfault.com/a/1190000013950461），本demo的原型也是基于这篇博客来的。

首先，来晒晒自己的成果：

登录页面

注册页面

列表首页

添加页面

以上就是一周的工作成果，现在来谈谈demo中遇到的技术炕，有些来不及记录，可能已经忘了。

本demo所用到的技术栈：

后端：spring boot+mysql+restful api

前端：vue+axios+element ui

开发环境：jdk1.8

开发工具：idea(前后台均用)

后端中遇到的问题：

1：关于后端boot环境的搭建问题，请注意大家的jdk版本和maven中各个配件的版本是否兼容，以及maven中各个配件的版本是否互相兼容。有个mybatis的版本问题搞了一天多才弄好，请大家尽量自动生成boot项目，我这个是自己建的。

2：后端中关于实体与数据库的映射直接使用的generate工具来逆向生成的。

3：本demo中用到的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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.star</groupId>
    <artifactId>ConstellationBlinddate</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>ConstellationBlinddate Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-test -->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-test -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>1.5.9.RELEASE</version>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>1.5.9.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-web -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.18.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.0.4.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <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-devtools</artifactId>
            <version>1.5.9.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.29</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-jdbc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
            <version>1.5.2.RELEASE</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.h2database/h2 -->
        <!-- https://mvnrepository.com/artifact/com.h2database/h2 -->
        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->


        <!-- https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core -->

        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <!--  <dependency>
              <groupId>org.mybatis.spring.boot</groupId>
              <artifactId>mybatis-spring-boot-starter</artifactId>
              <version>1.3.2</version>
          </dependency>
          &lt;!&ndash; https://mvnrepository.com/artifact/mysql/mysql-connector-java &ndash;&gt;
          &lt;!&ndash; https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core &ndash;&gt;
          <dependency>
              <groupId>org.mybatis.generator</groupId>
              <artifactId>mybatis-generator-core</artifactId>
              <version>1.3.5</version>
          </dependency>-->
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->

    </dependencies>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
        <java.version>1.7</java.version>
    </properties>
    <build>
        <finalName>ConstellationBlinddate</finalName>
        <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
            <plugins>
                <plugin>
                    <artifactId>maven-clean-plugin</artifactId>
                    <version>3.0.0</version>
                </plugin>
                <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>3.0.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.7.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.20.1</version>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-install-plugin</artifactId>
                    <version>2.5.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-deploy-plugin</artifactId>
                    <version>2.8.2</version>
                </plugin>
                <!--添加mybatis generator maven插件-->
                <plugin>
                    <groupId>org.mybatis.generator</groupId>
                    <artifactId>mybatis-generator-maven-plugin</artifactId>
                    <version>1.3.5</version>
                    <dependencies>
                        <dependency>
                            <groupId>mysql</groupId>
                            <artifactId>mysql-connector-java</artifactId>
                            <version>5.1.6</version>
                        </dependency>
                        <dependency>
                            <groupId>org.mybatis.generator</groupId>
                            <artifactId>mybatis-generator-core</artifactId>
                            <version>1.3.5</version>
                        </dependency>
                    </dependencies>
                    <executions>
                        <execution>
                            <id>Generate MyBatis Artifacts</id>
                            <phase>package</phase>
                            <goals>
                                <goal>generate</goal>
                            </goals>
                        </execution>
                    </executions>
                    <configuration> <!--允许移动生成的文件 -->
                        <verbose>true</verbose> <!-- 是否覆盖 -->
                        <overwrite>true</overwrite> <!-- 自动生成的配置 -->
                        <configurationFile>src/main/resources/mybatis-generater</configurationFile>
                    </configuration>
                </plugin>

            </plugins>
        </pluginManagement>
    </build>
</project>

4：关于boot中的跨域问题，最开始使用的是@CrossOrigin注解来实现的跨域的，后来发现这样加注解几乎每个控制层都要加，所以就在想能不能弄一个全局的跨域配置，刚开始想的比较简单，直接在启动类中加入了@CrossOrigin（发现没什么卵用，尴尬），后来经过认真的百度，突然想起来boot的配置类还没用，于是参照度娘中某位博主的配置稍微做了一下修改，配置如下：（参考博客地址）

@Configuration
public class CorsConfiguration extends WebMvcConfigurerAdapter {
    private Logger logger = Logger.getLogger(getClass());

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        logger.info("*****************************全局跨域配置开始*******************************");
        registry.addMapping("/**")    //匹配了所有的URL
                .allowedHeaders("*")  //允许跨域请求包含任意的头信息
                .allowedMethods("*")  //允许外域发起请求任意HTTP Method
                .allowedOrigins("http://localhost:8081"); //允许所有的外域发起跨域请求
    }

5：关于restful 风格接口的说明，基于http协议，这里主要用到的请求方式有 GET(查询用户),POST（提交用户信息），PUT(更新用户信息)，DELETE(删除用户信息)

刚开始使用的是@mapping注解来接入api，后来看到了网友们说的@getmapping等注解，就用了下，代码看上去确实整洁了许多。类似于下面这种：

  @GetMapping("/allinfo")
    public List<SpdUser> getAllUserInfo() {
        logger.info("*******************查找所有的用户信息**********************");
        return userService.findAllUserInfo();
    }

6：关于控制层配置全局路由的问题，哎，这个问题弄得我好尴尬，都不好意思说，我在写demo时常常莫名其妙的把全局路由写到了@controller注解里面（太蠢了），导致404，希望看到这篇文章的人不要犯我这种傻逼错误。

7：关于demo中用到的接参注解@RequestBody，@PathVariable，@ModelAttribute，@RequestParam（这个好像没用到）的比较与说明。可以参照这位博主写的（三种注解的区别）

尽管楼上的博主已经写的已经很详细了，但是我还是要在此啰嗦几句：

（1），对于Content-Type: 为 application/x-www-form-urlencoded来编码的，无论是post还是get请求使用@RequestParam注解将其对应到实体属性是没有任何问题的。

（2）：对于Content-Type: 为application/json来编码的，对于@RequestBody注解，body指的是http的请求体。对于post请求，请求的参数都会放到body中，所以，对于post请求的json数据可以使用@RequestBody，没问题，但是get请求的参数都是放到路由中的，所以不适用。

（3）：对于@ModelAttribute注解，则是把请求参数绑定到实体中，博主的文章中说到此注解也适用于post请求，但是在我写demo时注解并没有生效，但是用@RequestBody却生效了，所以请看到这篇文章的童鞋们再去验证一下（对于json格式的参数并不适用，因为无法解析）

（4）：@PathVariable这个注解应该是sping对rest的特殊照顾吧，可以映射url中的占位符，如下形式：

  @DeleteMapping("/delete/{id}")
    public ResultBean deleteUserInfoByUserId(@PathVariable Integer id) {
        return userService.deleteUserInfoById(id);
    }

8：其他我遇到的问题还有例如mapper中方法找不到的问题，以及sql日志无法打印的问题。

问题一的解决方式就是在启动类中加入注解扫描@MapperScan，例如下面的形式：

@SpringBootApplication
@MapperScan(basePackages = {"mainRun.dao"})
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class,args);
    }
}

问题二可以在boot的配置文件中加入logging的打印级别，如下：

logging:
  level:
    mainRun:
      dao: debug

level下面就是你数据层的接口路径，大家配置自己的就可以。

完整的 yml配置如下：

server:
  port: 8091
spring:
  datasource:
    #基础信息配置
    name: testVue
    url: jdbc:mysql://localhost:3306/spd?characterEncoding=utf-8
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: admin
mybatis:
  mapper-locations: classpath:mapper/*.xml
logging:
  level:
    mainRun:
      dao: debug

后端源码地址如下:

https://github.com/MrLi2018/ConstellationBlindDate

卖酒人

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
基于VUE+SPRING BOOT实现跨域访问的demo(对用户表的增删改查以及登录) ————后端部分

前言：此次的demo制作是本人由于项目需要，在初学vue的时候临时起意写出来的，大概用了七天左右的时间（尴尬），遇炕无数，所以如有不足，还请大家指正。关于vue的环境搭建请参考这位博主的博客（https://segmentfault.com/a/1190000013950461），本demo的原型也是基于这篇博客来的。首先，来晒晒自己的成果：...
复制链接

扫一扫