企业级微服务项目实战《学成在线》学习日志（二）

下面正式开始开发！

课程查询

开发习惯从底层开始，所以就从DAO层（mapper层）开始写，再写service。

先在content-service写个测试类，配置和包看黑马的去。介绍下以前学过的分页查询插件courseBaseMapper,实质上就是在sql语句上加上limit等语句，可以看下测试类的代码：

@SpringBootTest
public class CourseBaseMapperTests {

    @Autowired
    CourseBaseMapper courseBaseMapper;
    @Test
    public void testCourse(){
        CourseBase courseBase = courseBaseMapper.selectById(18);
        Assertions.assertNotNull(courseBase);
    }
}

ctrl点击selectById就可以看到这个插件的底层实现原理。然后是分页查询的全部代码：

@Test
    public void testCourse(){
        CourseBase courseBase = courseBaseMapper.selectById(18);
        Assertions.assertNotNull(courseBase);

        //分页查询

        PageParams pageParams =new PageParams();
        pageParams.setPageNo(1L);
        pageParams.setPageSize(10L);

        QueryCourseParamsDto courseParamsDto =new QueryCourseParamsDto();
        courseParamsDto.setCourseName("java");
        LambdaQueryWrapper<CourseBase> queryWrapper = new LambdaQueryWrapper<>();
        //在sql中拼接course_base.name like '%值%'
        queryWrapper.like(StringUtils.isNotEmpty(courseParamsDto.getCourseName()),CourseBase::getName,courseParamsDto.getCourseName());
        //根据课程审核状态查询
        queryWrapper.eq(StringUtils.isNotEmpty(courseParamsDto.getAuditStatus()),CourseBase::getAuditStatus,courseParamsDto.getAuditStatus());

        Page<CourseBase> page = new Page<>(1,10);
        Page<CourseBase> pageResult = courseBaseMapper.selectPage(page, queryWrapper);
        PageResult<CourseBase> tPageResult = new PageResult<>(pageResult.getRecords(),pageResult.getTotal(),pageParams.getPageNo(),pageParams.getPageSize());
        System.out.println(tPageResult);
    }

运行出来拿到断点有结果就成了：

 大概流程就是利用LambdaQueryWrapper那个插件然后一直利用参数查询所需要的结果，一步一步装填数据，最终以PageResult的形式返回就行。

然后说一下根据课程状态进行查询，在实际开发中一般会以代码来代替课程状态的中文，也是为了方便修改和规范，所以有个xc2.0_system的dictionary的数据库表就拿来表示对应关系：

 直接在刚刚的代码下加一个条件：courseParamsDto.setAuditStatus("202004");

接下来就来测试接口，在默认文件里api模块下有个Controller类里面接口是写好的，然后就可以运行ContentApplication的springboot启动项，然后浏览器输入localhost:63040/content/swagger-ui.html,然后测试一下有数据就成功。还有个HttpClient插件接口测试，可以去下载搜一下，postman也可以。像我的就比较推荐httpclient直接就在idea里测试：

它还可以设置环境，在api-test下创建一个env.json文件，里面编写：

{
  "dev": {
    "access_token": "",
    "gateway_host": "localhost:63010",
    "content_host": "localhost:63040",
    "system_host": "localhost:63110",
    "media_host": "localhost:63050",
    "search_host": "localhost:63080",
    "auth_host": "localhost:63070",
    "checkcode_host": "localhost:63075",
    "learning_host": "localhost:63020"
  }
}

然后再在http里将localhost:63040换成{{content-host}}

前后端联调

解压打开前端文件这里用idea打开，然后去设置里配置npm和node的位置，打开根目录下的package.json ,运行serve的（idea它有），或者右键package.json选择查看npm脚本找到serve运行。对了如果运行失败，大概率是你的node版本与该项目的node文件版本不一致，两种办法，一是卸载项目里的node_moudels,再cnpm install安装自己版本的node文件，二是你自己更换node版本，这里是16.17.0，但是我用了第一种方法发现运行是没问题，但是一直报错，可能版本不同有些语法也不同吧哈哈哈，还是用第二种吧。

这里推荐另一个插件nvm，可以管理node的版本：windows下node更换版本（简单操作）_node版本更改-CSDN博客，有了它想切换哪个版本就切换。推荐我这样做，算是第三种方法吧qwq

将资料的system文件导入java项目中，复制api的resourse到service并修改下数据库的连接地址。

解决跨域问题

在浏览器通过http://localhost:8601/地址访问前端工程。

chrome浏览器报错如下：

firefox浏览器报错如下：

提示：从http://localhost:8601访问http://localhost:63110/system/dictionary/all被CORS policy阻止，因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。

出这个提示的原因是基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

比如：

从http://localhost:8601  到   http://localhost:8602  由于端口不同，是跨域。

从http://192.168.101.10:8601  到   http://192.168.101.11:8601  由于主机不同，是跨域。

从http://192.168.101.10:8601  到   https://192.168.101.10:8601  由于协议不同，是跨域。

注意：服务器之间不存在跨域请求。

浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。

比如：

服务器收到请求判断这个Origin是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如下：

如果允许任何域名来源的跨域请求，则响应如下：

解决跨域的方法：

1、JSONP

通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图：

2、添加响应头

服务端在响应头添加 Access-Control-Allow-Origin：*

3、通过nginx代理跨域

由于服务端之间没有跨域，浏览器通过nginx去访问跨域地址。

1）浏览器先访问http://192.168.101.10:8601 nginx提供的地址，进入页面

2）此页面要跨域访问http://192.168.101.11:8601 ，不能直接跨域访问http://www.baidu.com:8601  ，而是访问nginx的一个同源地址，比如：http://192.168.101.11:8601/api ，通过http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601。

这样就实现了跨域访问。

浏览器到http://192.168.101.11:8601/api 没有跨域

nginx到http://www.baidu.com:8601通过服务端通信，没有跨域。

我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.java，

或直接从课程资料/项目工程下拷贝，

代码如下：

package com.xuecheng.system.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @description 跨域过虑器
 * @author Mr.M
 * @date 2022/9/7 11:04
 * @version 1.0
 */
 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

此配置类实现了跨域过虑器，在响应头添加Access-Control-Allow-Origin。

重启系统管理服务，前端工程可以正常进入http://localhost:8601，观察浏览器记录，成功解决跨域。