【项目学习01_2024.05.01_Day03】

学习笔记

      • 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代理跨域

我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.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.mzph.cn/web/5773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hadoop学习---基于hive的航空公司客户价值的LRFCM模型案例

案例需求: RFM模型的复习 在客户分类中,RFM模型是一个经典的分类模型,模型利用通用交易环节中最核心的三个维度——最近消费(Recency)、消费频率(Frequency)、消费金额(Monetary)细分客户群体,从而分析不同群体的客户价值。在某些…

CTFHub-Web-文件上传

CTFHub-Web-文件上传-WP 一、无验证 1.编写一段PHP木马脚本 2.将编写好的木马进行上传 3.显示上传成功了 4.使用文件上传工具进行尝试 5.连接成功进入文件管理 6.上翻目录找到flag文件 7.打开文件查看flag 二、前端验证 1.制作payload进行上传发现不允许这种类型的文件上传 …

手机测试之-adb

一、Android Debug Bridge 1.1 Android系统主要的目录 1.2 ADB工具介绍 ADB的全称为Android Debug Bridge,就是起到调试桥的作用,是Android SDK里面一个多用途调试工具,通过它可以和Android设备或模拟器通信,借助adb工具,我们可以管理设备或手机模拟器的状态。还可以进行很多…

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

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

FIFO Generate IP核使用——Native Ports页配置

在使用FIFO Generate IP核时,如果在Basic选项页选择了Naitve接口,就需要配置Native Ports页,该页提供了针对FIFO核心的性能选项(读取模式)、数据端口参数、ECC(错误检查和纠正)以及初始化选项。…

「生存即赚」链接现实与游戏,打造3T平台生态

当前,在线角色扮演游戏(RPG)在区块链游戏市场中正迅速崛起,成为新宠。随着区块链技术的不断进步,众多游戏开发者纷纷将其游戏项目引入区块链领域,以利用这一新兴技术实现商业价值的最大化。在这一趋势中&am…

Flutter笔记:Widgets Easier组件库(8)使用图片

Flutter笔记 Widgets Easier组件库(8):使用图片 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…

redis核心数据结构——跳表项目设计与实现(跳表结构介绍,节点类设计,随机层级函数)

跳表结构介绍。跳表是redis等知名软件的核心数据结构,其实现的前提是有序链表,思想的本质是在原有一串存储数据的链表中,间隔地抽出一半元素作为上一级链表,并将抽提出的元素和原先的位置相关联,这样重复下去直到最上层…

前端鼠标放上去显示更多内容demo

参考文献: title - HTML&#xff08;超文本标记语言&#xff09; | MDN (mozilla.org) <div class"up-detail" title"我是二五仔、总督小号、单曲切片人。 你甚至能在音 手 头条 管 港台bili ytb看到嘎的单曲。我是二五仔、总督小号、单曲切片人。 你甚至能…

【Mac】Axure RP 9(交互原型设计软件)安装教程

软件介绍 Axure RP 9是一款强大的原型设计工具&#xff0c;广泛用于用户界面和交互设计。它提供了丰富的功能和工具&#xff0c;能够帮助设计师创建高保真的交互原型&#xff0c;用于展示和测试软件应用或网站的功能和流程。以下是Axure RP 9的主要特点和功能&#xff1a; 交…

acwing算法提高之数据结构--平衡树Treap

目录 1 介绍2 训练 1 介绍 本博客用来记录使用平衡树求解的题目。 插入、删除、查询操作的时间复杂度都是O(logN)。 动态维护一个有序序列。 2 训练 题目1&#xff1a;253普通平衡树 C代码如下&#xff0c; #include <cstdio> #include <cstring> #include …

程序设计基础--C语言【五】

数组 目录 数组 5.1.一维数组 5.1.1.一维数组的引用 5.1.2.一维数组的初始化 5.1.3.一维数组的程序举例 5.2.二维数组 5.2.1.二维数组的定义 5.2.2.二维数组的引用 5.2.3.二维数组的初始化 5.2.4.举例 5.3.字符数组与字符串 5.3.1.字符组的初始化 5.3.2.字符数组…

【介绍下大数据组件之Storm】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

MySQL-分页查询

MySQL分页查询 MySQL 分页查询原则&#xff1a; 在 MySQL 数据库中使用 LIMIT 子句进行分页查询。MySQL 分页中开始位置为 0。分页子句在查询语句的最后侧。 LIMIT子句 SELECT 投影列 FROM 表名 WHERE 条件 ORDER BY LIMIT 开始位置&#xff0c;查询数量;示例&#xff1a; …

Delta lake with Java--利用spark sql操作数据2

上一篇文章尝试了建库&#xff0c;建表&#xff0c;插入数据&#xff0c;还差删除和更新&#xff0c;所以在这篇文章补充一下&#xff0c;代码很简单&#xff0c;具体如下&#xff1a; import org.apache.spark.sql.SaveMode; import org.apache.spark.sql.SparkSession;publi…

C++ | Leetcode C++题解之第62题不同路径

题目&#xff1a; 题解&#xff1a; class Solution { public:int uniquePaths(int m, int n) {long long ans 1;for (int x n, y 1; y < m; x, y) {ans ans * x / y;}return ans;} };

附录6-4 黑马优购项目-分类和购物车

目录 1 分类 1.1 接口 1.2 窗口限制 1.3 选中状态样式判断 1.4 点击左侧时右侧会到顶点 1.5 源码 2 购物车 2.1 store 2.2 tabBar徽标 2.3 滑动删除 2.4 结算 2.4.1 结算前登录 2.4.2 结算功能 2.5 触发组件事件 2.6 源码 1 分类 分类最上部是…

11【PS Blender 作图】场景作图 景深

【问题背景】 看下图,是一个插画师的作图,是不是好像现实场景;合理利用景深,让画面好像是3D现实场景 那么如何才能完成这样让人身临其境的画面呢? 大体有两个方法: 【1】2D插画,合理利用景深;如用PS画图,在画图的时候注意 画面构图,让2D的画面,看起来像3D 缺点…

小程序wx.getlocation接口如何开通?

小程序地理位置接口有什么功能&#xff1f; 随着小程序生态的发展&#xff0c;越来越多的小程序开发者会通过官方提供的自带接口来给用户提供便捷的服务。但是当涉及到地理位置接口时&#xff0c;却经常遇到申请驳回的问题&#xff0c;反复修改也无法通过&#xff0c;给的理由…

【免费Java系列】大家好 ,今天是学习面向对象高级的第二天点赞收藏关注,持续更新作品 !

day02——面向对象高级 今天我们继续学习面向对象的语法知识&#xff0c;我们今天学习的主要内容是&#xff1a;多态、抽象、接口。 学会这些语法知识&#xff0c;可以让我们编写代码更灵活&#xff0c;代码的复用性更高。 一、多态 接下来&#xff0c;我们学习面向对象三大…