04-学成在线之系统管理服务模块之查询数据字典表中的内容,前后端联调测试

news2025/11/7 8:15:59

前后端联调

配置前端环境

实际开发中先由后端工程师将接口设计好并编写接口文档并交给前端工程师，前后端的工程师就开始并行开发

  • 前端开发人员先自己mock数据即使用假数据进行开发,当后端代码完成后前端工程师尝试请求后端接口获取数据然后渲染到页面

第一步: 首先配置前端工程运行的环境,并在idea中配置node.js的路径

在这里插入图片描述

第二步: 启动前端工程，使用IDEA或VS Code打开project-xczx2-portal-vue-ts目录

第三步: 右键点击project-xczx2-portal-vue-ts目录下的package.json文件,点击Show npm Scripts打开npm窗口

第四步: 点击server右键点击Edit serve setting，下边对启动项目的一些参数进行配置

在这里插入图片描述

第五步: 设置前端工程的参数配置文件.env,由于前端默认连接的是项目的网关地址,所以查询课程信息时还需要修改网关地址为内容管理服务的地址

在这里插入图片描述

第六步: 右键点击Serve，点击Run serve启动工程,出现如下访问链接说明启动成功

在这里插入图片描述

第七步:访问首页地址http://localhost:8601/此时默认会访问内容管理服务http://localhost:8601/#/organization/course-list的课程查询的接口

第八步: 查询的课程信息有一部分数据是代码,对应的文字描述信息来自数据字典表,所以此时需要在系统管理服务中编写system/dictionary/all接口处理请求

在这里插入图片描述

系统管理服务

导入xuecheng-plus-system工程到项目工程的根目录,点击pom.xml文件右键Add as Maven Project可以自动识别maven工程

数据模型(model工程)

在xuecheng-plus-system-model工程的com.xuecheng.system.model.po包下定义模型类,然后在model工程的pom文件添加MP等相关的依赖

在这里插入图片描述

@Data
@TableName("dictionary")
public class Dictionary implements Serializable {
    private static final long serialVersionUID = 1L;
    /**
     * id标识
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 数据字典名称
     */
    private String name;

    /**
     * 数据字典代码
     */
    private String code;
    /**
     * 数据字典项--json格式
            [{
                  "sd_name": "低级",
                  "sd_id": "200001",
                  "sd_status": "1"
               }, {
                  "sd_name": "中级",
                  "sd_id": "200002",
                  "sd_status": "1"
               }, {
                  "sd_name": "高级",
                  "sd_id": "200003",
                  "sd_status": "1"
               }]
     */
    private String itemValues;
}

接口定义(api工程)

第一步: 在api接口工程的resources目录下添加工程所需的日志配置文件log4j2-dev.xml和属性配置文件bootstrap.yml

server:
  servlet:
    context-path: /system
  # 设置系统服务的端口为63110 
  port: 63110
#微服务配置
spring:
  application:
    name: system-service

# 日志文件配置路径
logging:
  config: classpath:log4j2-dev.xml

# swagger 文档配置
swagger:
  title: "学成在线内容管理系统"
  description: "内容系统管理系统对课程相关信息进行业务管理数据"
  base-package: com.xuecheng.content
  enabled: true
  version: 1.0.0

第二步: 编写接口处理请求,然后向api工程的pom.xml文件中添加所WebMvc等相关的依赖

@Slf4j
@RestController
public class DictionaryController  {
    @Autowired
    private DictionaryService  dictionaryService;
    @GetMapping("/dictionary/all")
    public List<Dictionary> queryAll() {
        return dictionaryService.queryAll();
    }
    @GetMapping("/dictionary/code/{code}")
    public Dictionary getByCode(@PathVariable String code) {
        return dictionaryService.getByCode(code);
    }
}

第三步: 在api接口工程中定义启动类SystemApplication,同时使用@EnableSwagger2Doc注解启用Swagger

@EnableScheduling
@EnableSwagger2Doc
@SpringBootApplication
public class SystemApplication {
    public static void main(String[] args) {
        SpringApplication.run(SystemApplication.class,args);
    }
}

业务层开发(service工程)

第一步: 在xuecheng-plus-system-service工程的resources/application.yml文件中配置数据库的连接参数

spring:
  application:
    name: system-service
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/xc_system?serverTimezone=UTC&userUnicode=true&useSSL=false&
    username: root
    password: 123456
# 日志文件配置路径
logging:
  config: classpath:log4j2-dev.xml

第二步: 编写Service接口及其实现类

public interface DictionaryService extends IService<Dictionary> {
    /**
     * 查询所有数据字典内容
     * @return
     */
    List<Dictionary> queryAll();

    /**
     * 根据code查询数据字典
     * @param code -- String 数据字典Code
     * @return
     */
    Dictionary getByCode(String code);
}

@Slf4j
@Service
public class DictionaryServiceImpl extends ServiceImpl<DictionaryMapper, Dictionary> implements DictionaryService {
    @Override
    public List<Dictionary> queryAll() {
        List<Dictionary> list = this.list();
        return list;
    }
    @Override
    public Dictionary getByCode(String code) {
        LambdaQueryWrapper<Dictionary> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(Dictionary::getCode, code);
        Dictionary dictionary = this.getOne(queryWrapper);
        return dictionary;
    }
}

第三步: 在api工程中执行启动类SystemApplication即暴露系统管理服务的API接口,访问http://localhost:63110/system/dictionary/all查看结果

[
    {
        "id": 12,
        "name": "公共属性类型",
        "code": "000",
        "itemValues": "[{\"code\":\"1\",\"codeInt\":1,\"desc\":\"使用态\"},{\"code\":\"0\",\"codeInt\":0,\"desc\":\"删除态\"},{\"code\":\"-1\",\"codeInt\":-1,\"desc\":\"暂时态\"}]"
    },
    {
        "id": 15,
        "name": "课程审核状态",
        "code": "202",
        "itemValues": "[{\"code\":\"202001\",\"desc\":\"审核未通过\"},{\"code\":\"202002\",\"desc\":\"未提交\"},{\"code\":\"202003\",\"desc\":\"已提交\"},{\"code\":\"202004\",\"desc\":\"审核通过\"}]"
    },.......
]

解决前端请求的跨域问题

在内容管理的api工程的config包下编写配置类GlobalCorsConfig,以下配置类指适用于Spring Boot2.4及以下版本

  • 向容器中注册一个跨域过虑器CorsFilter,这样每当服务器向浏览器响应结果的时候都会添加Access-Control-Allow-Origin响应头
package com.xuecheng.system.config;
/**
 * @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);
  }
 }

重启系统管理服务,访问前端工程首页可以正常访问http://localhost:63110/system/dictionary/all

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1216377.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大力说企微第一课：企业微信的注册验证和认证

大力说企微第一课：企业微信的注册验证和认证

这段时间有好几个朋友问我&#xff0c;怎么用企业微信&#xff0c;还有一些朋友反馈&#xff0c;企业微信使用起来不太方便。 在我的印象中&#xff0c;企业微信确实不如微信那么简单&#xff0c;毕竟用户对象是企业&#xff0c;是企业就有多个部门&#xff0c;就有流程&#x…
阅读更多...
ubuntu20源码编译搭建SRS流媒体服务器

ubuntu20源码编译搭建SRS流媒体服务器

第一、下载源码 下载源码&#xff0c;推荐用Ubuntu20&#xff1a; git clone -b develop https://gitee.com/ossrs/srs.git第二、编译 2.1、切换到srs/trunk目录&#xff1a; cd srs/trunk2.2、执行configure脚本 ./configure2.3、执行make命令 make2.4、修改conf/rtmp.c…
阅读更多...
零代码实现问卷网与巨量引擎的对接

零代码实现问卷网与巨量引擎的对接

通过数环通&#xff0c;您可以使用不到几分钟的时间即可实现问卷网与巨量引擎的对接与集成&#xff0c;从而高效实现工作流程自动化&#xff0c;降本增效&#xff01; 1.产品介绍 巨量引擎是字节跳动旗下的营销服务品牌&#xff0c;它整合了字节跳动旗下的产品及海量内容&…
阅读更多...
简单高效的定制移动固态硬盘，稳定易用的办公小助手

简单高效的定制移动固态硬盘，稳定易用的办公小助手

我在平时的工作中&#xff0c;常常需要处理各种大文件和数据&#xff0c;如果硬盘速度跟不上&#xff0c;那工作效率就会大幅降低。今年固态硬盘的价格大幅下降&#xff0c;有很多国产品牌加入其中&#xff0c;很容易找到一款性价比高的固态硬盘&#xff0c;搭配硬盘盒使用&…
阅读更多...
mac清除所有数据，不抹除的情况下如何实现？

mac清除所有数据，不抹除的情况下如何实现？

mac清除所有数据是一个比较复杂的任务&#xff0c;尤其是在不进行系统抹除的情况下。但是&#xff0c;如果你想要将mac完全恢复到出厂设置的状态&#xff0c;同时保留数据&#xff0c;本文将介绍一些可行的方法&#xff0c;帮助您在不抹除硬盘数据的情况下&#xff0c;让mac清除…
阅读更多...
Ganache结合内网穿透实现远程不同局域网公网访问

Ganache结合内网穿透实现远程不同局域网公网访问

文章目录 前言1. 安装Ganache2. 安装cpolar3. 创建公网地址4. 公网访问连接5. 固定公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站…
阅读更多...
Zookeeper Java 开发，自定义分布式锁示例

Zookeeper Java 开发，自定义分布式锁示例

文章目录 一、概述二、导入依赖包三、创建锁的过程3.1 通过 create 创建节点信息3.2 AsyncCallback.StringCallback 回调函数3.3 AsyncCallback.Children2Callback 的回调函数3.4 Watcher 的回调函数 四、完整示例4.1 完整分布式锁代码4.2 测试类 如果您还没有安装Zookeeper请看…
阅读更多...
Shopee选品工具软件——知虾，助您轻松把握市场趋势

Shopee选品工具软件——知虾，助您轻松把握市场趋势

在如今竞争激烈的电商市场中&#xff0c;了解市场趋势和数据分析是成功的关键。对于Shopee虾皮平台上的商家来说&#xff0c;知虾是一款强大的选品工具软件&#xff0c;它提供了全面的数据分析服务&#xff0c;帮助商家快速了解大盘走势&#xff0c;并挖掘潜力行业类目。本文将…
阅读更多...
[msg_msg] corCTF2021 -- fire_of_salvation

[msg_msg] corCTF2021 -- fire_of_salvation

前言 msg_msg 是 kernel pwn 中经常用作堆喷的结构体. 其包含一个 0x30 大小的 header. 但 msg_msg 的威力远不如此, 利用 msg_msg 配合其他堆漏洞可以实现任意地址读写的功能. 程序分析 本题给了源码, 可以直接对着源码看. 并且题目给了编译配置文件, 所以可以直接编译一个…
阅读更多...
C 语言指针和数组

C 语言指针和数组

C 语言指针和数组 在本教程中&#xff0c;您将了解C语言编程中数组与指针之间的关系。您还将学习使用指针访问数组元素。 在了解数组与指针之间的关系之前&#xff0c;请确保检查以下两个主体&#xff1a; [C 数组](C 语言数组-CSDN博客)[C 指针](C 语言指针-CSDN博客) 数组…
阅读更多...
2023上海国际电力电工展盛大举行 规模创新高 与行业「升级、转型、融合」

2023上海国际电力电工展盛大举行 规模创新高 与行业「升级、转型、融合」

由中国电力企业联合会、国家电网主办及雅式展览服务有限公司承办的「第三十一届上海国际电力设备及技术展览会 (EP Shanghai 2023)」从11月15日起至17日一连三天于上海新国际博览中心盛大举行&#xff0c;并首度增设专题子展「上海国际储能技术应用展览会」。本届展会以“升级、…
阅读更多...
2023_“数维杯”问题B：棉秸秆热解的催化反应-详细解析含代码

2023_“数维杯”问题B：棉秸秆热解的催化反应-详细解析含代码

题目翻译&#xff1a; 随着全球对可再生能源需求的不断增加&#xff0c;生物质能作为一种成熟的可再生能源得到了广泛的关注。棉花秸秆作为一种农业废弃物&#xff0c;因其丰富的纤维素、木质素等生物质成分而被视为重要的生物质资源。虽然棉花秸秆的热解可以产生各种形式的可…
阅读更多...
jffs2文件系统（二）

jffs2文件系统（二）

本篇文章讲解一下如何制作jffs2文件系统&#xff0c;以及如何在linux下把jffs2作为根文件系统使用。 文件系统制作 制作工具&#xff1a;mtd_utils&#xff0c;可以自己安装 mkfs.jffs2 -o root-uclibc-jffs2 -r root-uclibc -e 0x10000 -s 0x1000 -n -l -X zlib --pad0x10000…
阅读更多...
基于卷积神经网络的猫种类的识别

基于卷积神经网络的猫种类的识别

1.介绍 图像分类是计算机视觉中的一个关键任务&#xff0c;而猫种类识别作为一个有趣且实用的应用场景&#xff0c;通过卷积神经网络&#xff08;CNN&#xff09;的模型能够识别猫的不同品种。在这篇博客中&#xff0c;将详细介绍如何利用深度学习技术构建模型&#xff0c;从而…
阅读更多...
gd32 USB HOST 接口

gd32 USB HOST 接口

接口 CPU引脚 复用 DM PB14 USBHS_DM AF12 DP PB15 USBHS_DP AF12
阅读更多...
2023年408真题复盘

2023年408真题复盘

阅读更多...
互联网上门预约洗衣洗鞋店小程序；

互联网上门预约洗衣洗鞋店小程序；

拽牛科技干洗店洗鞋店软件&#xff0c;方便快捷&#xff0c;让你轻松洗衣。只需在线预约洗衣洗鞋服务&#xff0c;附近的门店立即上门取送&#xff0c;省心省力。轻松了解品牌线下门店&#xff0c;通过列表形式展示周围门店信息&#xff0c;自动选择最近门店为你服务。简单填写…
阅读更多...
【Linux专题】SFTP 用户配置 ChrootDirectory

【Linux专题】SFTP 用户配置 ChrootDirectory

【赠送】IT技术视频教程&#xff0c;白拿不谢&#xff01;思科、华为、红帽、数据库、云计算等等https://xmws-it.blog.csdn.net/article/details/117297837?spm1001.2014.3001.5502 红帽认证 认证课程介绍&#xff1a;红帽RHCE9.0学什么内容&#xff0c;新版有什么变化-CSDN…
阅读更多...
【带头学C++】----- 七、链表 ---- 7.1 链表的概述

【带头学C++】----- 七、链表 ---- 7.1 链表的概述

目录 七、链表 7.1 链表的是什么&#xff1f; 7.2数组和链表的优点和缺点 7.3 链表概述 ​编辑 7.4 设计静态链表 7.4.1 定义一个结点&#xff08;结构体&#xff09; 7.4.2 使用头结点构建一个单向链表 七、链表 7.1 链表的是什么&#xff1f; C链表是一种数据结构&a…
阅读更多...
如何构建风险矩阵?3大注意事项

如何构建风险矩阵?3大注意事项

风险矩阵法&#xff08;RMA&#xff09;是确定威胁优先级别的最有效工具之一&#xff0c;可以帮助项目团队识别和评估项目中的风险&#xff0c;帮助项目团队对风险进行排序&#xff0c;清晰地展示风险的可能性和严重性&#xff0c;为项目团队制定风险管理策略提供依据。 如果没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023