相册功能的实现

Diuut

发布于 2022-11-22 19:15:58

1K0

发布于 2022-11-22 19:15:58

文章被收录于专栏：Diuut

提供好的有album模板界面，上传组件，pojo类，albumService接口，album通用Mapper，数据库表。

首先分析数据库表：

相册数据库整体只有一张表，主键为相册id，相册内的图片是由url，uid，status组成的json字符串数组共同存在一条相册的一个字段中，所以得出结论新建相册的操作是insert一条数据库字段，而添加删除相册内的图片则是对该字段的json数组进行修改，因此就是对这条相册数据库的update操作。麻烦的地方就是对于该字段json数组的增删转换。

前端方面的思路：因为分为相册列表和相册详情，所以需要两个页面才方便展示不同的操作，直接复制个album界面，通过修改按钮和表格显示体现出列表与详情的区别。相册列表界面显示所有相册，然后点击查看相册，带上相册id跳转至相册详情页面，在相册详情页面通过截取方式获取id后再发送请求获取相册详情，再将imageItems中图片读取展示出来。

axios.get(`/album/findById.do?id=${window.location.href.split("id=")[1]}`)

相册列表

相册详情

后端service层：利用现成的Service接口中简单的增删查改进行组合，主要在controller层进行编写

    @PostMapping("/add")
    public Result add(@RequestBody Album album){
        //相册的上传
        albumService.add(album);
        return new Result();
    }

    @PostMapping("/update")
    public Result update(@RequestBody Album album){
        //主要用于相册中图片列表字段的增删
        albumService.update(album);
        return new Result();
    }
    @GetMapping("/delete")
    public Result delete(Long id){
        //删除相册
        albumService.delete(id);
        return new Result();
    }

前端显示：个人感觉最麻烦的就是前端对于图片详情字段的增删操作，因为传过来的其实只是一段String字符串，需要先转换成json数组，然后再进行查改。

&lt;!---------图片详情显示部分代码---------&gt;
            &lt;el-table :data="tableData" border style="width: 100%"&gt;
                &lt;el-table-column prop="images" label="相册图片" width="250"&gt;
                    &lt;template slot-scope="scope"&gt;
                        &lt;img width="230px" height="230px" :src="scope.row.url"&gt;
                    &lt;/template&gt;
                &lt;/el-table-column&gt;
                &lt;el-table-column
                        label="操作"&gt;
                    &lt;template slot-scope="scope"&gt;
                        &lt;el-button @click="dele(scope.row.uid)" size="mini" type="danger" size="small"&gt;删除&lt;/el-button&gt;
                    &lt;/template&gt;
                &lt;/el-table-column&gt;
            &lt;/el-table&gt;


&lt;!----------请求部分代码----------&gt;

 new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                items: [],
                images:[null],
                id: ""
            }
        },
        created() {
            this.fetchData();
        },

        methods: {
            fetchData() {
                axios.get(`/album/findById.do?id=${window.location.href.split("id=")[1]}`).then(response =&gt; {
                    this.items = response.data.imageItems;
                    this.pojo.title = response.data.title;
                    this.id = response.data.id;
                    this.images = JSON.parse(this.items);
                    this.tableData = this.images;
                });
            },
            save() {
                //相册详情页面向相册中添加图片
                let json = {"url": this.imageUrl, "uid": this.get_uuid(), "status": "success"};
                this.images.push(json);
                this.pojo.id = this.id;
                this.pojo.imageItems = this.images;
                axios.post(`/album/update.do`, this.pojo).then(response =&gt; {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            get_uuid() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i &lt; 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] &amp; 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },
            dele(uid) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() =&gt; {
                    this.pojo.id = this.id;
                    for (let i = 0; i &lt; this.images.length; i++) {
                        if (this.images[i].uid == uid) {         //根据uid判断删除json字段
                            this.images.splice(i, 1)
                        }
                    }
                    this.pojo.id = this.id;
                    this.pojo.imageItems = this.images;
                    axios.post(`/album/update.do`, this.pojo).then(response =&gt; {
                        this.fetchData(); //刷新列表
                    })
                })
            }

此外还有个问题就是在新建相册的时候，默认的图片详情的字段为空，所以在albums中如果第一次上传的话会导致识别不出images为数组，所以无法使用push方法进行字段添加，所以需要在album页面新建相册时添加“[]”字符串进行占位，之后albums中就可以进行正常增删操作。

  save() {
                this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                this.pojo.imageItems="[]",
                axios.post(`/album/add.do`, this.pojo).then(response =&gt; {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },

以上。

Post Views: 70

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年10月21日，如有侵权请联系 cloudcommunity@tencent.com 删除

json