1、vue+springboot环境搭建

一、VUE平台搭建

1、在cmd中键入vue ui进入可视化的vue控制界面，选择新建项目。

2、手动创建配置：选择【Babel】【Router】。

3、安装插件【element ui】

image.png

4、安装依赖【axios】【less-loader】【less】

4.1、axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。
4.2、less-loader：用于加载.less文件，将less转化为css

5、在ui创建项目的目录下面找到工程文件，用vscode打开。

image.png

6、在APP.vue中 删除多余分支、删除about.vue和home.vue文件，在index.js中删除相应分支。

7、项目架构如下

image.png

-public:存放一些公共的代码，index.html
-assets:存放一些静态文件，imgs、css
-components:自己写的vue组件
-plugins:创建项目时安装的组件，element-ui
-router:导入.vue组件，路由配置文件。下面的index.js中配置了路由转发、重定向的细节。
-main.js:页面入口js文件，实现跨域请求，导入css文件

二、利用IDEA搭建springboot环境

1、IDEA快速搭建SpringBoot环境：File--New--Project--Spring Initializr--Next*2--选择模块【WEB（Spring WEB）&&SQL（JDBC API、MyBatis Framework，MySql Driver）】

image.png

2、配置mybatis数据源

2.1、编写application.yml文件

spring:
  datasource:
    #MySQL配置
    driverClassName:  com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/easyproject?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
    username: root
    password: root

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.demo.model
  
server:
  port: 9000

2.2、测试在前端能否访问成功
1）.创建controller层。

image.png

2）.在前端访问localhost:9000/test可以看到ok

3、测试能否连接到数据库

• 3.1、创建User实体bean:要求属性与mysql数据库中名字一致。实现构造函数2个（无参+有参）、set/get方法（注意手动检查改名字）、tostring()方法。
  
  image.png
  
  
  image.png
• 3.2、编写dao接口层：定义查询数据库的方法.
  
  image.png

• 3.3、编写xml映射文件，实现dao接口的查询功能。
  注意：xml文件与dao接口文件要同名，否则会出现映射绑定失败的情况。

  
  
  image.png
• 3.4 编写controller文件，实现查询功能

@RestController
public class LoginController {
    @Autowired
    private UserDao userDao;
    @RequestMapping("/test")
    public String test()
    {
        User allUser = userDao.getAllUser();
        System.out.println(allUser);
        return "ok";
    }
}

• 遇到的问题1：在LoginController 中无法实现使用Autowired自动装载UserDao对象。

  
  
  image.png

解决方案：因为包没被扫到导致。Spring Boot项目的Bean装配默认规则是根据Application类(指项目入口类)所在的包位置从上往下扫描。所以在启动函数上加@MapperScan("com.example.sportplay_java.dao")
https://blog.csdn.net/yuxielea/article/details/103986289

• 遇到问题2：dao接口与xml文件无法绑定。
  

  image.png
  
  解决方案：检查xml文件命名是否有后缀，尽量与dao接口名字相同。
  https://blog.csdn.net/sundacheng1989/article/details/81630370

• 最终效果：访问localhost:9000/test

image.png

4、解决跨域问题

4.1、问题分析：因为vue默认使用8080端口，所以后端不能再使用8080端口，改用9000。对于所有的8080端口过来的请求均放行。
4.2、服务器端实现：创建全局配置类，继承WebMvcConfigurerAdapter。
4.3、具体实现

//注解说明该类是全局配置类
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    /**
     * 将vue所有8080端口的访问均放行，相当于映射成9000
     * @param registry
     * 1 允许访问路径
     * 2 请求的来源
     * 3 允许的方法
     * 4 是否可以携带token
     * 5 最大生存时间
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("Http://localhost:8080","null")
                .allowedMethods("GET","POST","OPTIONS","DELETE")
                .allowCredentials(true)
                .maxAge(3600);
    }
}