自学springcloud机场小项目—前后端交互数据

尽力漂亮

于 2020-03-28 13:10:24 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_44106334/article/details/105144597

本文介绍了在自学SpringCloud过程中，实现机场小项目时遇到的前后端交互数据及跨域问题。重点讲解了跨域的定义，以及如何处理跨域设置以避免错误。同时，列举了后台数据接口和前端表格、下拉框数据字典的HTTP请求URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

-思路：

注意跨域问题
要有跨域设置
在这里插入图片描述
不然会提示跨域报错

1.什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

2.完成数据字典的需求

mapper接口编写sql语句（1001生产者工程）

service接口（1001生产者工程，写实现类）

通过zuul网关进行调用测试，后台接口功能是否正常

3.前段获取到数据，通过jquery进行页面的渲染（js,css渲染页面）

jquery 操作dom

vue是mvvm 模型专门操作数据

后台数据

http://zuul.wxm:3001/wxm/flightServer/dataItem/list?accessToken=

在这里插入图片描述
表格数据

http://zuul.wxm:3001/wxm/flightServer/dataDict/list?accessToken=1111

在这里插入图片描述
这是下拉框数据字典的数据

http://zuul.wxm:3001/wxm/flightServer/dataItem/form?accessToken=

在这里插入图片描述

项目前端html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>机场分布式项目测试主页</title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>
		<style type="text/css">
			* {
    
    
				margin: 0;
				padding: 0;
			}

			.header {
    
    
				height: 60px;
				border-bottom: 1px solid red;
			}

			.content {
    
    
				/* height: 600px;
				border-bottom: 1px solid red; */
				margin-bottom: 60px;
			}

			li {
    
    
				list-style: none;
			}

			.title {
    
    
				font-size: 30px;
			}

			.user {
    
    
				font-size: 20px;
				line-height: 60px;
			}

			.user>b {
    
    
				font-size: 26px;
				color: red;
				margin: 0 3px;
			}

			.footer {
    
    
				text-align: center;
				height: 60px;
				line-height: 60px;
				font-size: 20px;
			}
			.badge{
    
    
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row header">
				<div class="col-md-9 title">
					SpringCloud机场管理项目
				</div>
				<div class="col-md-3 user">
					管理员<b>小aaaaa</b>上线了