一、VUE平台搭建
1、在cmd中键入vue ui进入可视化的vue控制界面，选择新建项目。
2、手动创建配置：选择【Babel】【Router】。
3、安装插件【element ui】
4、安装依赖【axios】【less-loader】【less】
4.1、axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。
4.2、less-loader：用于加载.less文件，将less转化为css
5、在ui创建项目的目录下面找到工程文件，用vscode打开。
6、在APP.vue中 删除多余分支、删除about.vue和home.vue文件，在index.js中删除相应分支。
7、项目架构如下
-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）】
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层。
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
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);
}
}
