SpringBoot如何整合前端页面

最新推荐文章于 2024-05-07 22:31:26 发布

web15286201346

最新推荐文章于 2024-05-07 22:31:26 发布

阅读量3.1k

点赞数

分类专栏： java 文章标签： java 后端

本文链接：https://blog.csdn.net/web15286201346/article/details/124038516

版权

java 专栏收录该内容

306 篇文章 9 订阅

订阅专栏

1 步骤

1.1

在这里插入图片描述

1.2

在这里插入图片描述

1.3

server:
  port: 6666
  servlet:
    context-path: /
spring:
  datasource:
    #数据库驱动 高版本   com.mysql.cj.jdbc.Driver   
    #低版本                       com.mysql.jdbc.Driver   
    #driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/hui?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root
    
  thymeleaf:
    prefix: classpath:/templates/pages/
    suffix: .html

mybatis:
  #定义别名包
  type-aliases-package: com.cy.pojo
  #添加映射文件
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

1.4

在这里插入图片描述

1.5

在这里插入图片描述

1.6

1.7

在这里插入图片描述

1.8

在这里插入图片描述

1.9

在这里插入图片描述

1.10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	$(function(){
		$.get("/getAllUser",function(result){
			//console.log(result);
			
			/*
			for(var i =0 ; i<result.length ; i++){
				var user = result[i];
				var name = user.name;
				alert(name);
				
			}
			*/
			 addTable("tab1",result);
		})
		
		
		//定义ajax 展现数据函数
		function addTable(eleId,data){
			//遍历数据
			var trs = "";
			$(data).each(function(index,user){
				var id = user.id;
				var name = user.name;
				var age = user.age;
				var sex = user.sex;
				trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"
					  +age+"</td><td>"+sex+"</td></tr>"
			});
			//var id = '#'+eleId
			$("#"+eleId).append(trs);
		}
		
		//方法2   常规ajax写法
		$.ajax({
			   type: "post",		//method
			   url: "/getAllUser",		//网址
			   //data: "name=John&location=Boston",  //传递数据
			   dataType: "json",
			   success: function(result){
					//准备一个函数,实现表格数据的添加.	
				    addTable("tab2",result);
				    //提示成功信息
			   },
			   error :function(data){
					alert("提示信息: 当前网络正忙,请稍后再试");
			   },
			   async : true,    //默认条件下都是异步.    false表示请求同步.
			   cache : false	//缓存页面信息          false表示不缓存
			   
			});
		
	})
</script>
</head>
<body>
	
	<table id="tab1" border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>用户信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
    </table>
    
</body>
</html>

1.11

在这里插入图片描述

web15286201346

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot如何整合前端页面

1 步骤1.11.21.3server: port: 6666 servlet: context-path: /spring: datasource: #数据库驱动高版本 com.mysql.cj.jdbc.Driver #低版本 com.mysql.jdbc.Driver #driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc
复制链接

扫一扫