【项目学习01_2024.05.01_Day03】

ops/2024/10/19 2:20:47/

学习笔记

      • 3.6 开发业务层
        • 3.6.1 创建数据字典表
        • 3.6.2 编写Service
        • 3.6.3 测试Service
      • 3.7 接口测试
      • 3.7.1 接口完善
        • 3.7.2 Httpclient测试
      • 3.8 前后端联调
        • 3.8.1 准备环境
        • 3.8.2 安装系统管理服务
        • 3.8.3 解决跨域问题
          • 解决跨域的方法:
          • 我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.java
        • 3.8.4 前后端联调

3.6 开发业务层

3.6.1 创建数据字典表

课程状态、课程类型、用户类型等等,这一类数据有一个共同点就是它有一些分类项,且这些分类项较为固定。针对这些数据,为了提高系统的可扩展性,专门定义数据字典表去维护。
在这里插入图片描述

3.6.2 编写Service

首先创建Service接口,再创建接口实现类

3.6.3 测试Service

编写单元测试类

3.7 接口测试

3.7.1 接口完善

控制层、业务层以及持久层三层通常可以面向接口并行开发,比如:业务层开发的同事可以先只编写一个Service接口,接口层的同事即可面向Service接口去开发,待接口层和业务层完成后进行连调。
在这里插入图片描述

3.7.2 Httpclient测试

Swagger是一个在线接口文档,虽然使用它也能测试但需要浏览器进入Swagger,最关键的是它并不能保存测试数据。
在IDEA中有一个非常方便的http接口测试工具httpclient,下边介绍它的使用方法,后边我们会用它进行接口测试。
如果IDEA版本较低没有自带httpclient,需要安装httpclient插件
在这里插入图片描述
在这里插入图片描述
先要启动项目,然后参数添加完毕可以运行它。
.http文件即测试用例文档 ,它可以随着项目工程一起保存,这样测试的数据就可以保存下来,方便进行测试。
为了方便保存.http文件 ,我们单独在项目工程的根目录创建一个目录单独存放它们。
在这里插入图片描述
为了方便将来和网关集成测试,这里我们把测试主机地址在配置文件http-client.env.json 中配置
文件后缀.env.json,否则识别不了这个是env,更使用不了其中的dev,下面会用:
在这里插入图片描述

3.8 前后端联调

3.8.1 准备环境

通常由后端工程师将接口设计好并编写接口文档,将接口文档交给前端工程师,前后端的工程师就开始并行开发,前端开发人员会使用mock数据(假数据)进行开发,当前后端代码完成后开始进行接口联调,前端工程师将mock数据改为请求后端接口获取,前端代码请求后端服务测试接口是否正常,这个过程是前后端联调。

安装前端工程运行的环境
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,可以让JavaScript在服务器端运行。它可以用来开发服务器端应用程序,如网站、API等。Node.js的特点是非阻塞I/O和事件驱动,能够高效地处理大量并发请求。

npm是Node.js的包管理工具,用于安装、管理和发布Node.js模块。使用npm可以方便地查找、安装和更新各种Node.js模块,还可以创建自己的模块并分享给其他开发者使用。

简单来说,Node.js是一个让JavaScript在服务器端运行的平台,npm是用来管理Node.js模块的工具。它们的结合使得开发人员可以更方便地开发和管理服务器端应用程序。

安装node.js查看版本号
在这里插入图片描述
在idea中配置node.js的路径在这里插入图片描述

下边启动前端工程,从前端工程拷贝project-xczx2-portal-vue-ts.zip到代码目录(与后端项目顶层同级)并解压,并使用IDEA或VS Code打开project-xczx2-portal-vue-ts目录,下边以IDEA为例进行说明:
右键点击project-xczx2-portal-vue-ts目录下的package.json文件(相当于pom.xml)
在这里插入图片描述
点击Show npm Scripts打开npm窗口
在这里插入图片描述

点击“Edit ‘serve’” setting,下边对启动项目的一些参数进行配置,选择nodejs、npm。
在这里插入图片描述
右键点击Serve,点击“Run serve”启动工程。
在这里插入图片描述
出现如下访问链接说明启动成功
在这里插入图片描述

3.8.2 安装系统管理服务

启动前端工程成功,在浏览器通过http://localhost:8601/地址访问前端工程。
在这里插入图片描述
http://localhost:8601/system/dictionary/all 指向的是系统管理服务。在前端讲解内容管理模块的需求时我们提到一个数据字典表,此链接正是在前端请求后端获取数据字典数据的接口地址。
数据字典表中配置了项目用的字典信息,此接口是查询字典中的全部数据 ,在此我们不再开发,按照下边的步骤安装系统管理服务即可。
==打开pom.xml文件,右键使其识别为maven项目
在这里插入图片描述
在这里插入图片描述
然后pom.xml文件的图标就会变成蓝色
再修改数据库的名称为自己电脑上建的数据库名称
在这里插入图片描述
启动系统管理服务,启动成功,在浏览器请求:http://localhost:63110/system/dictionary/all
如果可以正常读取数据字典信息则说明系统管理服务安装成功。

然后再从前端项目url进行访问http://localhost:8601/

以下则运行成功:(后端目前需要启动两个模块,content和system模块
在这里插入图片描述

3.8.3 解决跨域问题

CORS全称是 cross origin resource share 表示跨域资源共享。

CORS是一种机制,允许网页从不同的域访问服务器上的资源。在网页开发中,由于浏览器的同源策略限制,网页只能访问同源(协议、域名、端口号相同)的资源,而CORS可以通过服务器端设置响应头部信息,允许跨域访问。这样就可以实现跨域资源共享,让网页可以安全地访问其他域的数据。

在这里插入图片描述

比如:
从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 由于协议不同,是跨域。

解决跨域的方法:

1、JSONP
2、添加响应头
服务端在响应头添加 Access-Control-Allow-Origin:*
3、通过nginx代理跨域

java_85">我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.java
java">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;@Configurationpublic class GlobalCorsConfig {/*** 允许跨域调用的过滤器*/@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();//允许白名单域名进行跨域调用config.addAllowedOrigin("*");//允许跨越发送cookieconfig.setAllowCredentials(true);//放行全部原始头信息config.addAllowedHeader("*");//允许所有请求方法跨域调用config.addAllowedMethod("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}}

在这里插入图片描述

3.8.4 前后端联调

前端默认连接的是项目的网关地址,由于现在网关工程还没有创建,这里需要更改前端工程的参数配置文件 ,修改网关地址为内容管理服务的地址。
在这里插入图片描述



http://www.ppmy.cn/ops/27826.html

相关文章

Java Maven 编译资源文件拷贝错误 dirCompressed.zip failed with MalformedInputException:

完整的错误信息为: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.3.1:resources (default-resources) on project core-java-io: filtering C:\WorkDir\Repository\iSharkfly-Docs\java-tutorials\core-java-modules\core-ja…

python - 3D图表绘制

Pyecharts 和 3D 图表绘制 Pyecharts 是一个用于生成各种图表的 Python 库,它基于 Echarts,支持大量的图表类型,非常适合用于数据分析和可视化。Pyecharts 主要优点是易于使用,可以直接在 Python 环境中绘制富有交互性的图表&…

数字旅游以科技创新为核心:推动旅游服务的智能化、精准化、个性化,为游客提供更加贴心、专业、高效的旅游服务

目录 一、引言 二、数字旅游以科技创新推动旅游服务智能化 1、智能化技术的应用 2、提升旅游服务的效率和质量 三、数字旅游以科技创新推动旅游服务精准化 1、精准化需求的识别与满足 2、精准化营销与推广 四、数字旅游以科技创新推动旅游服务个性化 1、个性化服务的创…

Faststone Capture:一触即发的效率革命【AI写作】

首先,这篇文章是基于笔尖AI写作进行文章创作的,喜欢的宝子,也可以去体验下,解放双手,上班直接摸鱼~ 按照惯例,先介绍下这款笔尖AI写作,宝子也可以直接下滑跳过看正文~ 笔尖Ai写作:…

SpringBoot-@Transactional注解失效

Transactional注解失效 Transactional失效场景 以下是一些常见导致Transactional注解失效的场景,配合相应的Java代码演示: 1、方法修饰符非公开(非public) Transactional注解失效的原因在于Spring事务管理器如何实现对事务的代…

【ARM 常见汇编指令学习 6.1 - armv8 乘加指令 madd详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 armv8 乘加指令 madd使用场景示例注意事项 armv8 乘加指令 madd 在ARMv8架构中,madd指令是一种乘加指令,用于执行两个数的乘法操作,并将结果与第三个数相加。madd指令是“Multiply-Add”的缩写&…

【Mac】Photoshop 2024 for mac最新安装教程

软件介绍 Photoshop 2024是Adobe公司推出的一款图像处理软件,它支持Windows和Mac OS系统。Adobe Photoshop是业界领先的图像编辑和处理软件之一,广泛用于设计、摄影、数字绘画等领域。 Photoshop 2024的功能包括: 1.图像编辑:提…

Python中的观察者模式及其应用

观察者模式是设计模式之一,实现一对多依赖,当主题状态变化时通知所有观察者更新。在Python中,通过自定义接口或内置模块实现观察者模式,可提高程序灵活性和扩展性,尤其适用于状态变化时触发操作的场景,如事…