极简图床（仿写）
一、使用技术
后端：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;
privateString albumCover;privateString albumTitle;privateString albumDescription;privateInteger 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{
@Query("select u from Album u order by u.likes desc")
ListfindHot();
ListfindAll();
}
某个相册内容接口
public interface AlbumCatenaRepository extends JpaRepository {
AlbumCatena findAlbumCatenaById(Integer id);
@Query("select u from AlbumCatena u where u.album_id=?1")ListfindAlbumCatenas(Integer id);
}
相册service
public interface AlbumService {
List getall();
}
某个相册内容service
public interface AlbumCatenaService {
ListfindAlbumCatenas(Integer id);
}
相册service实现类
@Service
public class AlbumImpl implements AlbumService {
@Resource
private AlbumRepository albumRepository;
@OverridepublicListgetall(){returnalbumRepository.findAll();}
}
某个相册内容service实现类
@Service
public class AlbumCatenaImpl implements AlbumCatenaService {
@Resource
private AlbumCatenaRepository albumCatenaRepository;
@Override
public List 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 Listgetallalbum(){returnalbumService.getall();}@GetMapping("/{id}")publicListgetcatenas(@PathVariableInteger id){System.out.println(albumCatenaService.findAlbumCatenas(id));returnalbumCatenaService.findAlbumCatenas(id);}
}
前端代码
相册页面
我的相册
因为还要走很长的路，所以要心无旁骛地望着远方
{{album.albumDescription}}
查看
关注
数量：{{album.likes}}
</template>
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>
img{
width: 348px;
height: 250px;
}
某个相册内容页面
{{albumcatena.title}}
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>
img{
height: 200px;
}
