vue交互

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>


<style>
.Main{
width: 100%;
height: 150px;
border-bottom: 2px solid #E7E7E7;
}
.Layout_7 .Main div{
width: 1200px;
height: 150px;
margin: 0 auto;

}
.Main div a{
display: block;
width: 1100px;
height: 150px;
margin: 0 auto;
}
.Main div a img{
display: block;
float: left;
width: 180px;
height: 120px;
margin-top: 15px;
}
.Main div a h1{
width: 730px;
text-align: center;
float: left;
margin-left: 20px;
font-size: 18px;
color: #545454;
margin-top: 20px;
}


 .Main div a p{
width: 730px;
float: left;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-left: 20px;
font-size: 12px;
color: #868383;
margin-top: 15px;
}


 .Main div a span{
float: left;
display: block;
width: 730px;
text-align: right;
margin-left: 20px;
margin-top: 20px;
color: #868383;
font-size: 12px;
}
.Main div a div{
width: 110px;
height: 90px;
border: 1px solid #DEDEDE;
float: right;
margin-top: -60px;
}
.Main div a div p:nth-child(1){
text-align: center;
width: 100%;
margin-left: 0;
font-size: 14px;
color: #393939;
font-family: '方正兰亭仟黑简体' !important;
}


.Main div a div p:nth-child(2){
text-align: center;
width: 100%;
margin-left: 0;
color: #393939;
font-size: 20px;
margin-top: 10px;
font-family: '方正兰亭黑' !important;
}
.Main div a:hover{
margin-left: 40px;
}
.Main:hover {
background: #F5F5F5 !important;
}
.Dj{
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #e5e5e5;
margin: 0 auto;
cursor: pointer;
}
</style>

</head>
<body>
<div id="app">
<div class="Main" v-for='value in myData'>
<div>
<a href="#">
<img :src='value.url'/>
<h1>{{value.h1}}</h1>
<p>{{value.p}}</p>
</a>
</div>
</div>

<div class="Dj" @click='Get'>点一下喊爸爸</div>
</div>

<!--<script>
new Vue({
el:'#app',
data:{
myData:[]
},
methods:{
Get:function(){
this.
$http
.get('js/new_file.json').then(function(res){
this.myData = res.data.splice(0,res.data.length)
},function(red){
alert('未获取到接口')
})
}

}
})
</script>-->
<script>
new Vue({
el:'#app',
data:{
myData:[]
},
methods:{

},
created(){
this.
$http
.get('js/new_file.json').then(function(res){
this.myData = res.data.splice(0,res.data.length)
},function(res){
alert('未获取到接口')
})
}
})
</script>

</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Spring Boot中实现前后端Vue交互的方式有多种。一种常见的方式是通过RESTful API进行数据交互。前端使用Vue框架构建项目,通过axios库发送HTTP请求到后端的接口,获取数据并展示在前端的视图中。后端使用Spring Boot提供的注解和功能来处理这些请求,将数据返回给前端。这种方式实现了前后端的解耦合,前后端可以独立开发并通过API进行交互。\[2\] 另一种传统的方式是将前端的静态界面嵌入到后端的模板中。前端编写HTML静态界面,后端使用Spring Boot提供的模板引擎(如Thymeleaf)将界面渲染并返回给前端。前端通过发送请求到后端的接口,后端将处理请求中的数据渲染到指定的静态界面中,然后返回给前端展示。这种方式实现了前后端的整合,前端和后端的代码在同一个项目中。\[3\] 总结起来,Spring Boot前后端Vue交互可以通过RESTful API进行数据交互,也可以通过将前端静态界面嵌入到后端模板中实现整合。具体选择哪种方式取决于项目需求和开发团队的偏好。 #### 引用[.reference_title] - *1* *3* [Springboot+Vue实现简单的前端后分离数据交互](https://blog.csdn.net/qq_42263280/article/details/126656858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [SpringBoot+Vue前后端分离及交互](https://blog.csdn.net/D_ps19990501/article/details/110412405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值