博客发布中，新增分类选择和封面上传，接入七牛云存储

2024-11-01 16:15:04 +08:00 · 2024-11-01 16:15:04 +08:00 · ff1fdabed2
parent 91d459b673
commit ff1fdabed2
4 changed files with 193 additions and 27 deletions
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@ -22,11 +22,13 @@
            </div>
            <div class="right-nav">
                <el-badge is-dot :hidden=isSignVisible>
-                    <el-dropdown @command="handleCommand" class="el-dropdown-link">
+                    <el-dropdown class="el-dropdown-link">
                        <span>
-                            <el-avatar v-if="imageUrl" :src="imageUrl" style="width: 50px; height: 50px;"
-                                class="avatar flip animated"></el-avatar>
-                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                            <router-link to="/personalHomapage" type="success" class="button-container">
+                                <el-avatar v-if="imageUrl" :src="imageUrl" style="width: 50px; height: 50px;"
+                                    class="avatar flip animated"></el-avatar>
+                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                            </router-link>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <p>{{ this.username }}</p>
@ -36,8 +38,9 @@
                                </el-dropdown-item>

                            </a>
-                            <el-upload action="http://62.234.217.137:8088/user/uploadAvatar" :headers="uploadHeaders" :show-file-list="false"
-                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                            <el-upload action="http://62.234.217.137:8088/user/uploadAvatar" :headers="uploadHeaders"
+                                :show-file-list="false" :on-success="handleAvatarSuccess"
+                                :before-upload="beforeAvatarUpload">
                                <el-dropdown-item divided icon="el-icon-picture-outline-round">更换头像</el-dropdown-item>
                            </el-upload>
                            <a @click="nameChangeVisible = true">
@ -56,6 +59,12 @@
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-badge>
+                <router-link to="/add">
+                    <el-button type="danger" round icon="el-icon-circle-plus-outline"
+                        style="margin-left: 20px; font-size: 18px;">
+                        发布
+                    </el-button>
+                </router-link>
            </div>
        </div>
        <el-dialog title="修改昵称" :modal="false" :visible="nameChangeVisible" width="400px"
--- a/src/config/ImageUrl.js
+++ b/src/config/ImageUrl.js
@ -0,0 +1,2 @@
+export const IMAGE_BASE_URL = "http://sm7c4t0ft.hb-bkt.clouddn.com/";
+export const IMAGE_UPLOAD_URL = "http://sm7c4t0ft.hb-bkt.clouddn.com/";
--- a/src/views/BlogAddView.vue
+++ b/src/views/BlogAddView.vue
@ -1,9 +1,9 @@
 <template>
-    <div>
+    <div class="m_content">
        <!-- 引用导航 -->
-        <AddHeader></AddHeader>
+        <Menu></Menu>
        <br>
-        <div class="m_content">
+        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
@ -17,10 +17,54 @@
                    <!-- 特殊组件 -->
                    <mavon-editor v-model="ruleForm.content"></mavon-editor>
                </el-form-item>
+                <el-form-item prop="cover">
+                    <el-card>
+                        <el-row style="display: flex; align-items: center;">
+                            <el-col :span="3">
+                                <p>
+                                    <span style="color: red">*</span>
+                                    文章分类
+                                </p>
+                            </el-col>
+                            <el-col :span="16" style="display: flex; flex-wrap: wrap;">
+                                <el-popover trigger="hover" style="float: left;" placement="bottom" width="300">
+                                    <el-checkbox-group v-model="selectedTags">
+                                        <el-checkbox v-for="tag in tags" :label="tag.id" :key="tag.id"
+                                            @change="handleClick(tag)">
+                                            {{ tag.name }}
+                                        </el-checkbox>
+                                    </el-checkbox-group>
+                                    <el-button icon="el-icon-plus" slot="reference">添加文章标签</el-button>
+                                </el-popover>
+                                <div v-for="selectedTag in selectedTags" :key="selectedTag">
+                                    <el-tag style="margin-left: 3px;" :closable="true"
+                                        @close="handleClose(selectedTag)">
+                                        {{ tags.find(t => t.id === selectedTag).name }}
+                                    </el-tag>
+                                </div>
+                            </el-col>
+                        </el-row>
+                        <el-row style="display: flex; align-items: center;">
+                            <el-col :span="3">
+                                <p>
+                                    添加封面
+                                </p>
+                            </el-col>
+                            <el-col :span="16" style="display: flex; flex-wrap: wrap;">
+                                <el-upload class="cover-uploader" action="http://up-z1.qiniup.com"
+                                    :headers="uploadHeaders" :show-file-list="false" :on-success="handleCoverSuccess"
+                                    :before-upload="beforeCoverUpload" :data="uploadData">
+                                    <img v-if="imageUrl" :src="imageUrl" class="cover">
+                                    <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                </el-upload>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
-                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+                    <!-- <el-button s@click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>
        </div>
@ -32,11 +76,11 @@

 <script>
 import axios from 'axios';
-import AddHeader from "../components/AddHeader";
 import Footer from "../components/Footer";
+import Menu from '../components/Menu.vue'

 export default {
-    components: {AddHeader, Footer},
+    components: { Footer, Menu },
    beforeRouteEnter(to, from, next) {
        // 在组件进入之前，将页面滚动到顶部
        window.scrollTo(0, 0);
@ -44,6 +88,35 @@ export default {
    },
    data() {
        return {
+            tags: [{
+                id: 1,
+                name: "Java"
+            }, {
+                id: 2,
+                name: "Python"
+            },
+            {
+                id: 3,
+                name: "Vue"
+            },
+            {
+                id: 4,
+                name: "Spring"
+            },
+            {
+                id: 5,
+                name: "Linux"
+            },
+            {
+                id: 6,
+                name: "MySQL"
+            },
+            ],
+            selectedTags: [],
+            imageUrl: '',
+            imageKey: '',
+            uploadData: { key: "", token: "" },
+            form: {},
            ruleForm: {
                id: "",
                title: "",
@ -74,11 +147,12 @@ export default {
                if (valid) {
                    //提交表单
                    axios.post('/blog/addBlog', {
-                        // id: this.ruleForm.id,
                        title: this.ruleForm.title,
                        description: this.ruleForm.description,
+                        categories: this.selectedTags,
                        content: this.ruleForm.content,
-                        created: new Date()
+                        coverImage: this.imageKey,
+                        status: '草稿'
                    }).then(function (response) {
                        console.log(response.data)
                        //跳转到主页
@ -93,8 +167,53 @@ export default {
        resetForm(formName) {
            console.log(formName)
            this.$refs[formName].resetFields();//Element的一个方法,用于重置表单为初始值。
-            
-        
+        },
+        handleClose(tagId) {
+            this.selectedTags = this.selectedTags.filter(t => t !== tagId);
+        },
+        handleClick(tag) {
+            if (!this.selectedTags.includes(tag.id)) {
+                this.selectedTags.push(tag.id);
+            }
+        },
+        handleCoverSuccess(res, file) {
+            console.log(res)
+            this.imageKey = res.key;
+            this.imageUrl = URL.createObjectURL(file.raw);
+            console.log("图片路径：", this.imageUrl)
+        },
+        beforeCoverUpload(file) {
+            // 获取上传凭证
+            axios.get('/upload/getUploadCredentials').then((res) => {
+                if (res.status === 200) {
+                    this.uploadData.key = file.uid + file.name
+                    this.uploadData.token = res.data
+                    console.log(this.uploadData)
+                } else {
+                    this.uploadData.key = "";
+                    this.uploadData.token = "";
+                    console.log('获取上传凭证失败')
+                }
+            })
+
+            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+            if (!isJPG) {
+                this.$message.error('上传图片只能是 JPG/PNG 格式!');
+            }
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+            }
+            return isJPG && isLt2M;
+        }
+    },
+    computed: {
+        uploadHeaders() {
+            // 从localStorage获取token
+            const token = window.localStorage.getItem("token");
+            return {
+                Authorization: token ? token : ''
+            };
        }
    },

@ -103,9 +222,44 @@ export default {
 </script>

 <style>
-
-
 .m_content {
    margin: 0 auto;
+    background: #e6e6e6;
+}
+
+.demo-ruleForm {
+    margin: 0 auto;
+    width: 80%;
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.01);
+}
+
+.cover-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.cover-uploader .el-upload:hover {
+    border-color: #409EFF;
+}
+
+.cover-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+}
+
+.cover {
+    width: 150px;
+    height: 150px;
+    display: block;
 }
 </style>
--- a/src/views/BlogHomeView.vue
+++ b/src/views/BlogHomeView.vue
@ -8,16 +8,17 @@
                <div class="live2d-container">
                    <el-col :span="1">
                        <live2d style="position: absolute; left: 0; bottom: 0;"
-                            :model="['Potion-Maker/Pio', 'school-2017-costume-yellow']" :direction="direction" :size="size">
+                            :model="['Potion-Maker/Pio', 'school-2017-costume-yellow']" :direction="direction"
+                            :size="size">
                        </live2d>
                    </el-col>
                </div>
                <el-col :span="23">
-                    <el-card  :body-style="{ padding: '0px' }" v-for="blog in pagedBlogs" style="margin-bottom: 20px;"
+                    <el-card :body-style="{ padding: '0px' }" v-for="blog in pagedBlogs" style="margin-bottom: 20px;"
                        :key="blog.id">
                        <el-col :span="12">
-                            <router-link  :to="{ name: 'BlogDetail', params: { blogId: blog.id } }">
-                                <img  :src="blog.imageUrl" class="pulse animated image" />
+                            <router-link :to="{ name: 'BlogDetail', params: { blogId: blog.id } }">
+                                <img :src="blog.coverImage" class="pulse animated image" :data="blog.id" />
                            </router-link>
                        </el-col>
                        <el-col :span="12">
@ -55,6 +56,8 @@ import Footer from "../components/Footer";
 // 在组件中引入
 import live2d from 'vue-live2d'
 import { startSakura } from "../js/Sakura"
+import { IMAGE_BASE_URL } from "../config/ImageUrl";
+
 export default {
    components: {
        HomeHeader,
@ -117,8 +120,8 @@ export default {
            axios.get("/blog/getBlogs").then((response) => {
                that.blogs = response.data;
                for (let index in that.blogs) {
-                    that.blogs[index].imageUrl = this.imageUrls[index % 8];
-                    console.log(that.blogs[index].imageUrl);
+                    that.blogs[index].coverImage = IMAGE_BASE_URL + that.blogs[index].coverImage;
+                    console.log(that.blogs[index].coverImage);
                }
                that.total = that.blogs.length; //总博客数
                that.handleCurrentChange(that.currentPage); //初始化当前页
@ -128,10 +131,8 @@ export default {
            const startIndex = (page - 1) * this.pageSize; //当前页的起始索引
            const endIndex = startIndex + this.pageSize; //当前页的结束索引
            this.pagedBlogs = this.blogs.slice(startIndex, endIndex); //通过分割获取当前页的数据
-
-
        },
-        
+
        show() {
            !function () {
                function n(n, e, t) {