IDEA spring 前后端一体项目 idea运行前后端分离项目

上节我们已经创建好了两个项目，本章你将习得：

后端：1.配置数据库

            2.提供个简单的Api给到前端

前端：1.使用axios获取到后端给的Api

OK开始吧

一、后端

    1.导入项目，在这里往后的开发工具都以IDEA为例。

        1.1 点击import project

        

        1.2 选择到你后端项目的文件夹，博主的是D:\javaApiXVueFront\demo

        

        1.3 选择第二个Import project from external model ,然后选择第四个 maven,然后一路Next

        

    2.配置数据库连接及服务端口

        2.1 打开application.properties , 在 \src\main\resources 下面

server.port=9899

        2.3 数据库：(以下列出了sql Server,mySql,oracle,pgSql ,请自行食用)

#Sql Server DBConfig
    spring.datasource.driverClassName=com.microsoft.sqlserver.jdbc.SQLServerDriver 
    spring.datasource.url=jdbc:sqlserver://地址localhost:1433;DatabaseName=数据库名
    spring.datasource.username=登录名
    spring.datasource.password=密码

#mySql DBConfig
     spring.datasource.driverClassName=com.mysql.jdbc.Driver 
     spring.datasource.url=jdbc:mysql://地址localhost:3306/数据库名
     spring.datasource.username=登录名
     spring.datasource.password=密码

#oracle DBConfig
    spring.datasource.driverClassName=oracle.jdbc.driver.OracleDriver 
    spring.datasource.url=jdbc:oracle:thin:@地址localhost:1521:数据库名
    spring.datasource.username=登录名
    spring.datasource.password=密码

#pgSql DBConfig
    spring.datasource.driverClassName=org.postgresql.Driver 
    spring.datasource.url=jdbc:postgresql//地址localhost:1521/数据库名
    spring.datasource.username=登录名
    spring.datasource.password=密码

        

        2.4 启动后端项目，首次需打开启动类，在类里右击，然后选择run 'DemoApplication' 或 debug 'DemoApplication'

               启动类在 /src/main/java/创项目时的包名/ 下面 , 首次启动后则可以从上面一排的 Run 里启动了

      

  

      

        看到Started ...则说明项目成功启动，若启动不了则检查下数据库连接配置的是否有误，或者将报错信息贴出来大家一起帮忙看下

    3. 创建一个简单的get请求api，返回hello,world

        3.1 右击包名新建包api

        3.2 右击api包新建TestApi.java 文件

        3.3 在TestApi.java 文件里类名上加上注解@RestController (因为是只做后端，所以就不用@Controller了)，

            @RequestMapping("/test")

        3.4 TestApi.java 添加方法 get 返回值为String,方法上面加上注解@GetMapping

        (关于注解的将在其他文章做讲解，这里不做解释)

        3.5 重启项目，打开浏览器，输入 http://localhost:9899/test  ，不出意外就会出现hello,world，出了意外的话就要检查下你的端口及类上面的注解有没加了哦

 OK至此我们后端就先告一段落了，往下

二、前端

    1.打开前端项目，可直接左上角File--->Open ，选择到你前端项目的文件夹,博主的问D:\javaApiXVueFront\frontDemo

    2.先启动起来再说吧， 点击 Terminal , 输入 npm run dev 启动前端项目，

    3. 前端默认端口是8080 ，若端口冲突，则在 \config\index.js 里面修改端口，

    4. 启动成功后则显示为

        打开浏览器输入http://localhost:8080

        

    5.首页就留个测试按钮吧,我们用来测试掉后端刚起的api , 找到HelloWorld.vue , 留个按钮，并增加个方法,方法里就先打印句话 

    6. 导入axios ，本篇通过axios 访问api接口

        6.2 在HelloWorld.vue 里引用 axios 并且访问 刚后端起的Api

        6.3 点击测试按钮，并打开调试看是否成功打印hello,word

        

        OK，经典的一幕来了，跨域问题，

这里我们打开后端项目的启动类，在启动类里加上：

@Bean
public CorsFilter corsFilter() {
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", buildConfig()); // 设置哪些接口可以跨域访问
   return new CorsFilter(source);
}

private CorsConfiguration buildConfig() {
   CorsConfiguration corsConfiguration = new CorsConfiguration();
   corsConfiguration.addAllowedOrigin("*");   // 设置允许哪些来源地址访问
   corsConfiguration.addAllowedHeader("*");   // 设置允许哪些请求头
   corsConfiguration.addAllowedMethod("*");   // 设置允许的方法，Get / Post / Delete / Put 等
   return corsConfiguration;
}

博主并没有特别的去设置这些，直接默认的是允许所有的跨域请求了，也就是直接对外暴露了我这个接口，谁都可以访问，上线的项目是不推荐不推荐不推荐这样设置

设置好后重启下后端项目，再次点测试Api

OK 完美。