SpringBoot+uniapp实现数据获取1、设计数据库表结构
单纯的测试数据，结构不严谨。
create table if not exists activity
(id integer unsigned primary key auto_increment,
imgURL varchar(255) not null,
title varchar(255) not null,
classification varchar(255) not null,
address varchar(255) not null,
starttime varchar(255) not null,
endtime varchar(255) not null,
price varchar(255) not null,
info varchar(255) not null,
Regstarttime varchar(100) not null,
Regendtime varchar(100) not null,
sponsor varchar(100) not null);
2、插⼊数据
insert ignore into activity values
(null,
'\\static\\activityImg\\activity2.jpg',
'活动2标题','industry',
'活动2地址',
'20200202',
'20200303',
'3000',
'活动2详情简介',
'20200101',
'20200130',
'主办⽅2');
3、SpringBoot项⽬链接MySQL数据库
spring.datasource.sql.jdbc.Driver
spring.datasource.url = jdbc:mysql://IP地址:3306/数据库名称?useSSL=true&characterEncoding=utf-8&serverTimezone=PRC
spring.datasource.username =帐号名称
spring.datasource.password =密码
server.port=8090
4、创建模块
package com.dels;
public class ActivityList {
private long id;
private String imgURL;
private String title;
private String classification;
private String address;
private String startTime;
private String endTime;
private String price;
private String info;
private String regStartTime;
private String regEndTime;
private String sponsor;
public ActivityList(){
}
public ActivityList(String imgURL, String title, String classification, String address, String startTime, String endTime, String price, String info, String regSta rtTime, String regEndTime, String sponsor){
this.imgURL = imgURL;
this.title = title;
this.classification = classification;
this.address = address;
this.startTime = startTime;
this.price = price;
this.info = info;
springboot结构
this.sponsor = sponsor;
}
// getter and setter
}
5、接⼝
@Mapper
public interface ActivityRepository {
@Select("select * from activity")
public List<ActivityList>findAll();
@Select("select * from activity where classification = #{classification}")
public List<ActivityList>findByLife(String classification);
}
6、控制器
@RestController
@CrossOrigin
@RequestMapping("/api/ActivityList")
public class ApiController {
@Autowired
private ActivityRepository repo;
@GetMapping("/life/{page}")
public List<ActivityList>index1(@PathVariable int page){
List<ActivityList> activity = repo.findByLife("life");
return activity;
}
@GetMapping("/industry/{page}")
public List<ActivityList>index2(@PathVariable int page){
List<ActivityList> activity = repo.findByLife("industry");
return activity;
}
@GetMapping("/study/{page}")
public List<ActivityList>index3(@PathVariable int page){
List<ActivityList> activity = repo.findByLife("study");
return activity;
}
@GetMapping("/parentChild/{page}")
public List<ActivityList>index4(@PathVariable int page){
List<ActivityList> activity = repo.findByLife("parentChild");
return activity;
}
}
8、拿到数据
9、在uniapp项⽬中发起请求
// 通过quest从数据库当中获取数据
async getActivityList(index){
let tempAcivityList =[];
// 发起⽹络请求
/
/ this.page伪页数,⽆逻辑
url:this.server_url+'/api/ActivityList/'+this.ActivityFilterList[index].filterBy+'/'+this.page,  success:(res)=>{
console.log(res.data)
this.ActivityList = res.data
}
})
},
数据存储在tempAcivityList中。
10、在点击某个tab项时把数据传递过去
handleSelected(index){
console.log(this.ActivityFilterList[index].text)
// 通过获取到的index绑定单击后的样式
this.ActivityFilterList[index].selected =true
// 只能选中⼀项，把其他的设置为false
for(let i=0;i<this.ActivityFilterList.length;i++){
if(i!=index){
this.ActivityFilterList[i].selected =false
}
}
// 传递当前tab的text值
},
数据获取成功

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。