一、使用技术
后端：Spring Boot+Spring Data JPA+RESTful API+swagger
前端：VUE.js+VUE cli+bootstrap+jQuery+axios
二、效果图
三、源码
后端代码
相册类
@Entity
@Data
public class Album {
@Id
@GeneratedValue
private Integer id;
private String albumCover;
private String albumTitle;
private String albumDescription;
private Integer likes;
}
某个相册内容类
@Entity
@Data
public class AlbumCatena {
@Id
@GeneratedValue
private Integer id;
private String picture;
private String title;
private Integer album_id;
}
相册接口
public interface AlbumRepository extends JpaRepository<Album,Integer>{
@Query("select u from Album u order by u.likes desc")
List<Album>findHot();
List<Album>findAll();
}
某个相册内容接口
public interface AlbumCatenaRepository extends JpaRepository<AlbumCatena,Integer> {
AlbumCatena findAlbumCatenaById(Integer id);
@Query("select u from AlbumCatena u where u.album_id=?1")
List<AlbumCatena>findAlbumCatenas(Integer id);
}
相册service
public interface AlbumService {
List<Album> getall();
}
某个相册内容service
public interface AlbumCatenaService {
List<AlbumCatena>findAlbumCatenas(Integer id);
}
相册service实现类
@Service
public class AlbumImpl implements AlbumService {
@Resource
private AlbumRepository albumRepository;
@Override
public List<Album> getall() {
return albumRepository.findAll();
}
}
某个相册内容service实现类
@Service
public class AlbumCatenaImpl implements AlbumCatenaService {
@Resource
private AlbumCatenaRepository albumCatenaRepository;
@Override
public List<AlbumCatena> findAlbumCatenas(Integer id) {
return albumCatenaRepository.findAlbumCatenas(id);
}
}
给前端提供接口
@RestController
@CrossOrigin
@RequestMapping(value = "/books")
public class BoController {
@Resource
private AlbumService albumService;
@Resource
private AlbumCatenaService albumCatenaService;
@GetMapping("/album")
public List<Album>getallalbum(){
return albumService.getall();
}
@GetMapping("/{id}")
public List<AlbumCatena>getcatenas(@PathVariable Integer id){
System.out.println(albumCatenaService.findAlbumCatenas(id));
return albumCatenaService.findAlbumCatenas(id);
}
}
前端代码
相册页面
<template>
<div>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">我的相册</h1>
<p class="lead text-muted">因为还要走很长的路，所以要心无旁骛地望着远方</p >
<p>
<a href="" class="btn btn-primary my-2">查看更多</a >
</p >
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4" v-for="album in albums" :key="album.id">
<div class="card mb-4 box-shadow">
<img class="card-img-center" :src="album.albumCover"/>
<div class="card-body">
<p class="card-text">{{album.albumDescription}}</p >
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<router-link tag="a" :to="{ path:'/albumcatena',query:{id:album.id}}">
<button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
</router-link>
<button type="button" class="btn btn-sm btn-outline-secondary">关注</button>
</div>
<small class="text-muted">数量：{{album.likes}}</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'bootstrap/dist/js/bootstrap.min'
export default {
data: function () {
return {
albums: []
}
},
created () {
var _this = this
this.$http.get('http://localhost:8080/books/album')
.then(function (response) {
_this.albums = response.data
})
},
name: 'Album'
}
</script>
<style scoped>
img{
width: 348px;
height: 250px;
}
</style>
某个相册内容页面
<template>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4" v-for="albumcatena in albumcatenas" :key="albumcatena.id">
<div class="card mb-4 box-shadow">
<img class="card-img-center" :src="albumcatena.picture"/>
<div class="card-body">
<p class="card-text">{{albumcatena.title}}</p >
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'bootstrap/dist/js/bootstrap.min'
export default {
data: function () {
return {
albumcatenas: []
}
},
created () {
this.id = this.http.get('http://localhost:8080/books/' + this.id)
.then(function (response) {
_this.albumcatenas = response.data
})
},
name: 'AlbumCatena'
}
</script>
<style scoped>
img{
height: 200px;
}
</style>
