美文网首页
极简图床(仿写)

极简图床(仿写)

作者: 逍遥_6b76 | 来源:发表于2018-10-24 21:53 被阅读0次

    一、使用技术

    后端: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;

    }

    相关文章

      网友评论

          本文标题:极简图床(仿写)

          本文链接:https://www.haomeiwen.com/subject/jzgwaftx.html