SpringBoot + Vue实现博文上传+展示+博文列表

文章目录

前言
实现效果
博文列表
- 前端
- 后端接口
博文上传
博文显示
- 前端
- 后端
总结

前言

ok，又到了水文时间了，那么今天带来的是这个WhiteHole的最新的开发进度，也就是实现了我们的博文的基本功能。那么之后比较重大的功能就是我们的消息系统+流量统计（文章，问答之类的数据信息）其他的什么社区，社区管理什么的和我们先前的业务是类似的。所以的话这里就不想复述了，因为意义不大，那部分的话基本上技术没什么难的就是基本的CURD+调用微服务。实话实说，这部分的开发对我来说其实就是繁琐，其实很简单，当然要考虑的东西不少。然后的话还有咱们的后台管理系统，这部分用户端做的差不多了，这个后台的其实也快，无法也是CURD+一些高权限的操作。现阶段的代码还是一个初级阶段，后面把组件上齐了，咱们还会在修改说明的。

那么这次的话也是我们尽可能完整一点。
不过的话也是有部分内容重复的，所以请先阅读这篇文章：
Vue整合Markdown组件+SpringBoot文件上传+代码差异对比

实现效果

博文列表

在这里插入图片描述

文章编辑

在这里插入图片描述

文章显示

在这里插入图片描述

其实这里的实现逻辑和先前的那个很像，区别就是说，但是先前的话也是没有说完整，那么现在的话我们说仔细一点，完整的前端代码+后端的主要业务代码。

博文列表

首先来说的是我们的一个博文的列表。

先说一下我们的这个博文的这个数据表：
在这里插入图片描述
我们这边是将内容和我们的blog分开的。因为我们这边要实现很多的操作，比如文章的fork，合并修等等。

前端

我们先来看到前端的完整的代码，这里的话我就直接给出我这个显示的列表的代码。这里的前端的所有的代码都是没有封装的，好处是方便修改，方便理解。坏处是，不方便调用，但是不好维护，所以的话，不去封装了，开发完再说，还有很多的辅助功能没做呢。

那么我们就来看看吧：


<template>
  <div style="width: 100%">
    <el-empty
      image="/static/image/empty.gif" :image-size="600" description="暂时木有找到博文~"
      v-if="isEmpty"
    >
    el-empty>
    <br>
    <br>
    <div v-if="!isEmpty" style="width: 100%;margin-left: 1%" class="main">
      <el-card shadow="hover" v-for="(message,index) in Messages" :key="index">

        <div style="height:100px">
          <div  style="width:14%;height: 100%;border-radius: 100px;display:inline-block;">
            <el-image
              style="width:100%;height: 100%;border-radius: 100px"
              v-bind:src="message.blogimg"
              class="image"
            />
          div>
          <div style="display:inline-block;margin-left: 5%;width: 60%">
            <p class="message" style="font-weight:bold">
              <router-link class="alink" :to="{ path: '/blogshow',query:{'blogid':message.blogid}}">
                {{message.blogTitle}}
              router-link>
            p>
            <p style="font-weight: lighter" class="message">
              {{message.info}}
            p>
            <p class="message">
              阅读：
              <i class="el-icon-view">i>
              {{message.viewNumber}}
                
              收藏：
              <i class="el-icon-star-off">i>
              {{message.collectNumber}}
                
              fork:{{message.forkNumber}}
            p>

          div>

          <div  style="width:18%;height: 100%;
          display:inline-block;
          "
          >
            <p style="text-align: center;font-size: 8px">{{message.createTime}}p>
          <br><br>
          div>

        div>
        <br>
      el-card>
    div>
    <br>
    <div class="footer" style="margin: 0 auto;width: 100%;">
    div>
  div>
template>

<script>
export default {
  name: "lastArticle",
  data(){
    return{
      isEmpty: true,
      total: 0,
      page: 1,
      limit: 10,
      Messages:[
        {
          userid: null,
          info: null,
          blogid: null,
          contentid: null,
          blogTitle: null,
          userNickname: null,
          userImg: null,
          createTime: null,
          viewNumber: null,
          likeNumber: null,
          collectNumber: null,
          status: null,
          level: null,
          forkNumber: null,
          blogimg: null
        },
      ]
    }
  },
  methods:{
    getDataList(){
      //这里客户端自己进行一个缓存
      let pageSession = sessionStorage.getItem("lastHomeBlogListPageSession");
      let total  = sessionStorage.getItem("lastHomeBlogListTotal");
      if(pageSession && total){
        this.Messages = JSON.parse(pageSession);
        this.total = parseInt(total);
        this.isEmpty = (this.total === 0);
      }else {
        this.axios({
          url: "/blog/blog/home/last",
          method: 'get',
        }).then((res) => {
          res = res.data;
          if (res.code === 0) {
            //这个就是我们的默认展示图片
            let image_base_user = "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
            let image_base_blog = "https://whiteholecloud-dev.oss-cn-shanghai.aliyuncs.com/2022-09-25/8cee84b4-1d03-483f-8376-14d419d84ca5_03.jpg"
            //同样的拿到数据后需要临时保存
            let page = res.page;
            this.total = page.totalCount;
            this.Messages = page.list
            this.isEmpty = (this.total === 0);
            for (let i=0;i<this.Messages.length;i++)
            {
              if(!this.Messages[i].userImg){this.Messages[i].userImg=image_base_user;}
              if(!this.Messages[i].blogimg){this.Messages[i].blogimg=image_base_blog}
            }
            //存储临时缓存
            sessionStorage.setItem("lastHomeBlogListPageSession", JSON.stringify(this.Messages));
            sessionStorage.setItem("lastHomeBlogListTotal",page.totalCount);
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    }
  },
  created() {
    this.getDataList();
  },
}
script>

<style scoped>
.message{
  width: 25em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.alink{
  text-decoration: none;
  color: #333333;
}

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

我们这边的话，为了防止客户端的数据丢失以及降低我们的服务端的压力，所以的话做一个缓存，当然我们服务端还是有哨兵的，双重限流嘛。

后端接口

之后的话，就是接口的实现，这个其实相当简单，查表就好了，当然我们这边还要做一个缓存，这个缓存的话就是直接使用SpringCache来做的。
首先是我们的接口：

    @RequestMapping("/last")
    @Cacheable(value={"homePageBlog:lastHomePageList"},key = "#root.methodName")
    public R lastHomePageList() throws Exception {
        return blogHomePageService.lastBlogList();
    }
1
2
3
4
5

之后的话是我们的实现类：

   @Override
    public R lastBlogList() throws Exception {
        HashMap<String, Object> params = new HashMap<>();
        //组装请求博文列表所需要的数据，当访问的为内部接口时，所有的参数均为Map形式
        params.put("page","1");
        params.put("limit","10");
        params.put("accurate","single");
        //此时指定HoleNULL，那么这个key不参与查询,但是需要进行占位，不能为空
        params.put("table_name","HoleNULL");
        params.put("key","1");
        params.put("order","desc");
        params.put("status","1");
        params.put("level","1");
        PageUtils page = blogService.queryPage(params);
        return R.ok().put("page", page);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里的话我们重写了这个queryPage的方法来实现分页。

public class BlogServiceImpl extends ServiceImpl<BlogDao, BlogEntity> implements BlogService {

    /**
     *
     * 在所有的基础方法当中我们做出如下约定，（因为有大量的请求是需要使用到分页查询的，并且这个方法相当重要）
     * key,表示需要模糊查询或者精确查询的值，和 accurate 相互配合。
     * accurate表示改查询需要进行精确查询 当accurate=single 表示精确查询，需要指定
     * table_name 还有order:desc,asc当为many，表示需要更加复杂的查询，此时需要附带 accurate_query 即查询QueryWrapper
     * 所有的附加值都需要具备
     * 最后必须参数为
     * 'page': 第几页
     * 'limit':每页多少,
     * 此外对于用户端的查询，需要指明status，和 level否则处理将失败
     * */

    @Override
    public PageUtils queryPage(Map<String, Object> params) throws Exception {
        String key = (String) params.get("key");
        String accurate = (String) params.get("accurate");
        IPage<BlogEntity> page_params = new Query<BlogEntity>().getPage(params);
        QueryWrapper<BlogEntity> blogEntityQueryWrapper = new QueryWrapper<>();
        if(key!=null){
            if(accurate==null){
                //此时表示只有key,没有accurate，说明是后台管理系统在调用
                blogEntityQueryWrapper.like("userid",key).or().
                        like("blogid",key).or().
                        like("user_nickname",key).or().
                        like("blog_title",key);
            }else {
                //此时有accurate说明是用户端在调用
                if(accurate.equals("single")){
                    String table_name = (String) params.get("table_name");
                    String order = (String) params.get("order");
                    Integer status = Integer.valueOf((String) params.get("status"));
                    Integer level = Integer.valueOf((String) params.get("level"));
                    if(table_name.equals("HoleNULL")){
                        blogEntityQueryWrapper.eq("status",status)
                                .eq("level",level);
                    }else {
                        blogEntityQueryWrapper.eq(table_name,key)
                                .eq("status",status)
                                .eq("level",level);
                    }

                    if(order.equals("desc")){
                        blogEntityQueryWrapper.orderByDesc("blogid");
                    }

                }else if(accurate.equals("many")){
                    Object accurate_query = params.get("accurate_query");
                    QueryWrapper<BlogEntity> deserialize = (QueryWrapper<BlogEntity>) SerializeUtil.deserialize(accurate_query.toString());
                    blogEntityQueryWrapper = deserialize;
                }
            }
        }
        IPage<BlogEntity> page = this.page(
                page_params,
                blogEntityQueryWrapper
        );

        return new PageUtils(page);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

这些代码后面在做一个映射封装。

这里的话还有我们的R类：

public class R extends HashMap<String, Object> {
	private static final long serialVersionUID = 1L;
	
	public R() {
		put("code", 0);
		put("msg", "success");
	}
	
	public static R error() {
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
	}
	
	public static R error(String msg) {
		return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.put("code", code);
		r.put("msg", msg);
		return r;
	}

	public static R warn() {
		R r = new R();
		r.put("code", 1);
		r.put("msg", "warning");
		return r;
	}

	public static R ok(String msg) {
		R r = new R();
		r.put("msg", msg);
		return r;
	}
	
	public static R ok(Map<String, Object> map) {
		R r = new R();
		r.putAll(map);
		return r;
	}
	
	public static R ok() {
		return new R();
	}

	public R put(String key, Object value) {
		super.put(key, value);
		return this;
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

博文上传

ok,我们的博文的列表搞定了。

那么就是我们的博文上传了。
这里也是分前后端的。

前端

我们先来看到我们的前端的实现。
这个前端的实现的话，也是，直接看就好了。


<template>
  <div id="main">
    <div>
      <div>
        <input type="text" v-model="form.title" placeholder="请输入文章标题" required>
        <el-button @click="submitForm" type="primary">发布文章el-button>
      div>

      <br>
      <br>

      <mavon-editor
        v-model="form.value"
        ref="md"
        @imgAdd="imgAdd"
        @change="change"
        style="min-height: 800px;width: 100%"
      />
    div>

    <el-dialog
      style="width:80%;margin: 0 auto"
      title="文章提交"
      :visible.sync="dialogFormVisible"
    >

      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">

        <el-form-item label="文章封面" >

          <signle-upload :urlpolicy="this.urlPol" v-model="ruleForm.url" v-on:urlImg="urlImg">signle-upload>
        el-form-item>
        <el-form-item label="选择权限" prop="level">
          <el-select v-model="ruleForm.level" placeholder="请选择文章权限">
            <el-option label="私密" :value=0>el-option>
            <el-option label="公开" :value=1>el-option>
          el-select>
        el-form-item>

        <el-form-item label="文章类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="1">原创el-radio>
            <el-radio :label="2">转载el-radio>
            <el-radio :label="3">翻译el-radio>
          el-radio-group>
        el-form-item>
        <el-form-item label="文章描述" prop="desc">
          <el-input type="textarea"
                    v-model="ruleForm.desc"
                    aria-placeholder="请输入文章描述10-150个字符~"
          >
          el-input>
        el-form-item>
      el-form>

      <div  style="margin: 0 auto" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消el-button>
        <el-button type="primary"
                   @click="submit"
                   v-loading.fullscreen.lock="fullscreenLoading"
        >
          确 定
        el-button>
      div>
    el-dialog>
  div>
template>
<script>
import signleUpload from "../../components/upload/signleUpload";
import { mavonEditor } from 'mavon-editor'     //引入mavon-editor组件
import 'mavon-editor/dist/css/index.css'
import {getUUID} from "../../components/upload/uuid";       //引入组件的样式
export default {
  // 注册
  name: "writeblog",
  components: {
    mavonEditor,
    signleUpload,
  },
  data() {
    return {
      urlPol:"/third-part/oss/blogFaceImgPolicy",
      userid: null,
      loginToken: null,
      dialogFormVisible: false,
      fullscreenLoading: false,
      form: {
        value:'', // 输入的markdown
        html:'',    // 及时转的html
        title: '',
      },
      ruleForm: {
        blogImg: '',
        level:'',
        desc: '',
        type:'',
      },
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: '',
      },
      rules: {
        desc: [
          { required: true, message: '请输入文章描述', trigger: 'blur' },
          { min: 1, max: 150, message: '长度在 10 到 150 个字符', trigger: 'blur' }
        ],
        level:[
          { required: true, message: '请选择文章权限', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],

      }
    }
  },
  created() {

    let loginToken = localStorage.getExpire("LoginToken");
    let userid = localStorage.getExpire("userid");
    if(loginToken==null && userid==null) {
      alert("检测到您未登录，请先登录")
      this.$router.push({path: "/login"});
    }else {
      this.userid=userid;
      this.loginToken = loginToken;
    }
  },
  methods: {
    urlImg(val){
      this.ruleForm.blogImg=val;
    },
    toOss(pos,$file){
      let formData = new FormData();
      Object.keys(this.dataObj).forEach(key => {
        formData.append(key, this.dataObj[key]);
      });
      formData.append('file',$file)
      this.axios({
        url: this.dataObj.host,
        method: 'post',
        data: formData
      }).then((res) => {
        let imgpath = this.dataObj.host + '/' + this.dataObj.key;
        //把这个给到我们的编辑器
        this.$refs.md.$img2Url(pos,imgpath)
      })
    },
    imgAdd(pos, $file){
      /**
       * 上传图片到OSS服务里面
       * */
      let filename = $file.name
      let _self = this;
      // 获取认证码
      this.axios
        .get('/third-part/oss/blogWriteImgPolicy')
        .then(response => {
          response = response.data;
          _self.dataObj.policy = response.data.policy;
          _self.dataObj.signature = response.data.signature;
          _self.dataObj.ossaccessKeyId = response.data.accessid;
          _self.dataObj.key = response.data.dir +getUUID()+"_"+filename;
          _self.dataObj.dir = response.data.dir;
          _self.dataObj.host = response.data.host;
          //推送到OSS
          this.toOss(pos,$file);
        }).catch(function (error) {
        alert(error)
        console.log("出错了...",err)
      })
    },
    // 所有操作都会被解析重新渲染
    change(value, render){
      this.form.html = render;
    },
    // 提交
    submit(){
      this.fullscreenLoading = true;
      //将Markdown文档提交到服务器
      let flag = true;
      if(!this.form.value){
        flag = false;
      }else {
        if(this.form.value.length<100){
          flag = false;
          alert("博文的编辑不能少于100个字符呦~")
        }
      }
      if(!this.ruleForm.desc){
        flag = false
      }else {
        if(this.ruleForm.desc.length<10){
          flag = false;
          alert("博文的描述不能低于10个字符呦~")
        }else if (this.ruleForm.desc.length>150){
          flag = false;
          alert("博文的描述不能高于于150个字符呦~")
        }
      }
      if(!this.form.title){
        flag = false;
      }else {
        if(this.form.title.length<4){
          flag = false;
          alert("标题不能低于4个字符！");
        }else if(this.form.title.length>100){
          flag = false
          alert("标题不能高于100个字符！");
        }
      }
      if(flag){
        //此时对用户回答进行提交
        this.axios({
          url: "/blog/blog/up/blogUp",
          method: 'post',
          headers: {
            "userid": this.userid,
            "loginType": "PcType",
            "loginToken": this.loginToken,
          },
          data:{
            "userid": this.userid,
            "blogTitle": this.form.title,
            "info": this.ruleForm.desc,
            "context": this.form.value,
            "level": this.ruleForm.level,
            "blogtype": this.ruleForm.type
          }
        }).then((res)=>{
          res = res.data;
          if(res.code===0){
            alert(res.msg)
          }else {
            this.$message.error(res.msg);
          }
          this.fullscreenLoading = false;
          this.editFlag = false;
        });
      }else {
        this.fullscreenLoading = false;
        alert("您还未编写对应内容！")
      }

    },
    submitForm() {
      let flag = true;
      if(!this.form.value){
        flag = false;
        alert("博文内容为空！")
      }else {
        if(this.form.value.length<100){
          flag = false;
          alert("博文的编辑不能少于100个字符呦~")
        }
      }
      if(!this.form.title){
        flag = false;
        alert("博文标题为空！")
      }else {
        if(this.form.title.length<4){
          flag = false;
          alert("标题不能低于4个字符！");
        }else if(this.form.title.length>100){
          flag = false
          alert("标题不能高于100个字符！");
        }
      }
      if(flag){
        this.dialogFormVisible = true;
      }else {
        this.dialogFormVisible = false;
      }
    },
  },
}
script>
<style scoped>
#center {
  margin-top: 5%;
  width: 96%;
  height: 96%;
  border: 1px;
}

img {
  margin: auto;
  margin-left: 30%;
  height: 40%;
  width: 40%;
  position: relative;
  top: 10%;
}

input {

  width: 85%;
  height: 30px;
  border-width: 2px;
  border-radius: 5px;
  border-color: #00c4ff;
  border-bottom-color: #2C7EEA;
  color: #586e75;
  font-size: 15px;

}
#main{
  width: 90%;
  margin: 0 auto;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321

这边前端的话其实很眼熟是吧，这边的区别的话，其实就是咱们的文件上传的一个组件。这个组件的话是这样的：

<template>
  <div>
    <el-upload
      :action="dataObj.host"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MBdiv>
    el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    el-dialog>
  div>
template>
<script>
import {getUUID} from "./uuid";
import axios from "_axios@0.26.1@axios";
export default {
  name: 'singleUpload',
  props: {
    urlpolicy: String,
    value: String
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== '') {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [{
        name: this.imageName,
        url: this.imageUrl
      }]
    },
    showFileList: {
      get: function () {
        return this.value !== null && this.value !== ''&& this.value!==undefined;
      },
      set: function (newValue) {
      }
    }
  },
  data() {
    return {
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: '',
        // callback:'',
      },
      dialogVisible: false
    };
  },
  methods: {
    emitInput(val) {
      this.$emit('input', val)
    },
    handleRemove(file, fileList) {
      this.emitInput('');
    },
    handlePreview(file) {
      this.dialogVisible = true;
    },
    beforeUpload(file) {

      let _self = this;
      return new Promise((resolve, reject) => {
        // 请求后端（请求地址和后端访问地址一样）
        let urlPol = _self.urlpolicy;
        if(!urlPol){
          urlPol = '/third-part/oss/policy'
        }
        axios
          .get(urlPol)
          .then(response => {
            console.log("这是什么${filename}");
            response = response.data;
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir +getUUID()+"_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch(function (error) {
            alert(error)
            console.log("出错了...",err)
            reject(false);
          })
      });
    },
    handleUploadSuccess(res, file) {
      console.log("数据获取为",this.dataObj)
      console.log("上传成功...")
      let url = this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name);
      this.showFileList = true;
      this.fileList.pop();
      this.fileList.push(
        {
          name: file.name,
          url: url
        }
      );
      this.$emit('urlImg',url)
      this.emitInput(this.fileList[0].url);
    }
  }
}
script>
<style>

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

那么这边的话，我们就完成了我们的前端。

之后是后端。

后端

我们的后端分几个部分，首先是我们的这个获取ＯＳＳ签名，但是这个的话，我们前面说过，这里不重复，那么之后的话，我们这边来看到这个接口：

@RestController
@RequestMapping("/blog/up")
public class BlogUpController {

    @Autowired
    BlogUpService blogUpService;
    @PostMapping("/blogUp")
    @NeedLogin
    public R blogUp(@Validated @RequestBody UpBlogEntity upBlogEntity){
        return blogUpService.blogUp(upBlogEntity);
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

登录验证

那么我们这边的话，有一个自定义注解：

@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public @interface NeedLogin {
    String value() default "";
}
1
2
3
4
5


/**
 * 负责专门校验，用户有没有登录用的
 * 1. 当前主要负责校验token是否合法
 * */
@Component
@Aspect
@Slf4j
public class VerificationAspect {

    @Autowired
    RedisUtils redisUtils;

    @Pointcut("@annotation(com.huterox.common.holeAnnotation.NeedLogin)")
    public void verification() {}

    /**
     * 环绕通知 @Around ,当然也可以使用 @Before (前置通知)  @After (后置通知)就算了
     * @param proceedingJoinPoint
     * @return
     * 我们这里再直接抛出异常，反正有那个谁统一异常类
     */

    @Around("verification()")
    public Object verification(ProceedingJoinPoint proceedingJoinPoint) throws Throwable{

        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        ServletRequestAttributes servletRequestAttributes = (ServletRequestAttributes) requestAttributes;
        assert servletRequestAttributes != null;
        HttpServletRequest request = servletRequestAttributes.getRequest();

        //正常逻辑是先进行伪参数验证这里先不做

        //分登录的设备进行验证
        String loginType = request.getHeader("loginType");
        String userid = request.getHeader("userid");
        String tokenUser = request.getHeader("loginToken");
        String tokenKey = RedisTransKey.getTokenKey(userid + ":" + loginType);
        if(tokenUser==null || userid==null || loginType==null){
            throw new BadLoginParamsException();
        }
        if(redisUtils.hasKey(tokenKey)){
            if(loginType.equals(LoginType.PcType)){
                Object o = redisUtils.get(tokenKey);
                LoginToken loginToken = JSON.parseObject(o.toString(), LoginToken.class);
                if(!loginToken.getPcLoginToken().equals(tokenUser)){
                    throw new BadLoginTokenException();
                }
            }else if (loginType.equals(LoginType.MobileType)){
                Object o = redisUtils.get(tokenKey);
                LoginToken loginToken = JSON.parseObject(o.toString(), LoginToken.class);
                if(!loginToken.getMobileLoginToken().equals(tokenUser)){
                    throw new BadLoginTokenException();
                }
            }
        }else {
            throw new NotLoginException();
        }

        return proceedingJoinPoint.proceed();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

这个玩意的原理很简单就是看用户携带的token和我们redis里面的对不对得到，正常情况下，如果用户恶意修改token，校验都是过不了的，除非我服务器有内鬼。
之后的话这里还定义了几个异常。

public class NotLoginException extends RuntimeException{
    public NotLoginException(){}
    public NotLoginException(String message){
        super(message);
    }
}

1
2
3
4
5
6
7

都是Runtime异常，这里就不复述了。

博文上传

之后的话，我们就可以上传了。
首先是我们和前端交互的数据请求类。

@Data
@AllArgsConstructor
@NoArgsConstructor
public class UpBlogEntity {

    @NotEmpty(message = "userid不能为空")
    private String userid;
    @NotEmpty(message = "quizTitle不能为空")
    @Length(min = 10,message="长度不能低于10个字符")
    private String blogTitle;
    //文章的Markdown文档
    @NotEmpty(message = "context不能为空")
    @Length(min = 100,message="长度不能低于10个字符")
    private String context;
    @Length(min = 4,max = 100,message="长度不能低于10个字符")
    private String info;
    @NotNull
    private Integer level=1;
    @NotNull
    private Integer blogtype=1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

之后的话就是我们的实际业务了。

   @Override
    public R blogUp(UpBlogEntity entity) {
        String userid = entity.getUserid();
        String backMessage = "success";
        //接口限流
        if(redisUtils.hasKey(RedisTransKey.getBlogUpKey(entity.getUserid()))){
            return R.error(BizCodeEnum.OVER_UPBLOG.getCode(), BizCodeEnum.OVER_UPBLOG.getMsg());
        }
        R info = feignUserService.info(userid);
        String userString = FastJsonUtils.toJson(info.get("user"));
        UserEntity user = FastJsonUtils.fromJson(userString, UserEntity.class);
        if(user!=null){
            String context = entity.getContext();
            String blogInfo = entity.getInfo();
            /**
             * 先对context和bloginfo进行校验，是否为存在不友好的信息
             * */
            int countContext = wordFilter.wordCount(context);
            int countInfo = wordFilter.wordCount(blogInfo);
            int status = 1;
            //博文的摘要过滤,只要摘要没有过，直接先打回去！
            if(countInfo>=blogInfo.length()*threshold){
                return R.error(BizCodeEnum.BAD_BLOGINFO.getCode(),BizCodeEnum.BAD_BLOGINFO.getMsg());
            }
            //博文内容的过滤
            if(countContext>=context.length()*threshold){
                return R.error(BizCodeEnum.BAD_CONTEXT.getCode(),BizCodeEnum.BAD_CONTEXT.getMsg());
            }else if (countContext>0&&countContext<context.length()*threshold){
                backMessage="哇！您的提交直接通过了呢！";
            }else {
                status = 2;
                context = wordFilter.replace(context, '*');
                backMessage="您的提问已提交，正在等待审核哟！";
            }
            //预存储content
            ContentEntity contentEntity = new ContentEntity();
            contentEntity.setContent(context);
            contentEntity.setVersion("1.0");
            contentEntity.setCreateTime(DateUtils.getCurrentTime());
            contentService.save(contentEntity);
            Long contentid = contentEntity.getContentid();
            //预存储博文
            BlogEntity blogEntity = new BlogEntity();
            blogEntity.setBlogTitle(entity.getBlogTitle());
            blogEntity.setLevel(entity.getLevel());
            blogEntity.setBlogtype(entity.getBlogtype());
            //查询用户的头像信息
            R RHeadImg = feignHeadimgService.headimg(userid);
            String headImgString = FastJsonUtils.toJson(RHeadImg.get("headimg"));
            final HeadimgEntity headimg = FastJsonUtils.fromJson(headImgString, HeadimgEntity.class);
            if(headimg!=null){
                blogEntity.setUserImg(headimg.getImgpath());
            }
            blogEntity.setCreateTime(DateUtils.getCurrentTime());
            blogEntity.setUserNickname(user.getNickname());
            blogEntity.setUserid(userid);
            blogEntity.setStatus(status);
            blogEntity.setInfo(blogInfo);
            blogService.save(blogEntity);
            Long blogid = blogEntity.getBlogid();

            //完成正式存储
            contentEntity.setBlogid(blogid);
            blogEntity.setContentid(contentid);
            blogService.updateById(blogEntity);
            contentService.updateById(contentEntity);
            /**
             * 更新用户日志
             * */
            LogActicleEntity logActicleEntity = new LogActicleEntity();
            logActicleEntity.setAction(1);
            logActicleEntity.setUserid(userid);
            logActicleEntity.setArticleid(blogEntity.getBlogid());
            logActicleEntity.setArticleTitle(blogEntity.getBlogTitle());
            logActicleEntity.setCreteTime(blogEntity.getCreateTime());
            feignLogActicleService.save(logActicleEntity);
            /**
             * 设置标志
             */
            redisUtils.set(RedisTransKey.setBlogUpKey(entity.getUserid())
                    ,.1,10, TimeUnit.MINUTES
            );
        }else{
            return R.error(BizCodeEnum.NO_SUCHUSER.getCode(),BizCodeEnum.NO_SUCHUSER.getMsg());
        }
        return R.ok(backMessage);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

这里的话基本上都是调用dao或者是远程的微服务进行存储，没啥亮点。之后的话就是上seate。搞分布式事务。

博文显示

终于到了这里了，这个部分其实也不难，还是我们的前端（这里的话还有些接口，我就不说了，重点是加载文章内容）

前端

来看到我们的前端。

<template>
<div style="width: 85%;margin: 0 auto">

  <el-container>
    <el-container>
      <el-aside width="10%">
        <div>
          <br><br>
          <div>
            <el-badge :value="Blog.likeNumber" class="item" type="primary">
              <el-button size="big" icon="el-icon-check">el-button>
            el-badge>
          div>
          <br>
          <div>
            <el-badge :value="Blog.collectNumber" class="item" type="primary">
              <el-button size="big" icon="el-icon-star-off">el-button>
            el-badge>
          div>
          <br>
          <div>
            <el-badge :value="12" class="item" type="primary">
              <el-button size="big" icon="el-icon-chat-dot-square">el-button>
            el-badge>
          div>
          <br>
          <div>
            <el-badge :value="12" class="item" type="primary">
              <el-button size="big" icon="el-icon-upload2">el-button>
            el-badge>
          div>
          <br>

          <div>
              <el-button class="share-button" icon="el-icon-share" type="primary" plain>el-button>
          div>
          <br>
          <div>
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                Fork是对文章的最高礼遇<br>
                因此fork/取消都需要在<br>
                十分钟后通过冷静期后进行操作
              div>
            <el-button v-if="!status.isfork"  size="small" type="primary" @click="forkBlog" plain>
              <p>Forkp>
            el-button>
            <el-button v-else type="primary"  @click="forkBlog" size="small">Forkel-button>
            el-tooltip>
          div>
          <br>
          <div>
            <el-button @click="goMerge" type="primary" plain size="small" >
              <span>合并span>
            el-button>
          div>

        div>
      el-aside>
      <el-main>
          <div style="width: 100%" class="show">
            <div style="width: 96%;margin: 0 auto">
              <br>
            <p style="font-size: 20px;font-weight: bold">{{Blog.blogTitle}}p>
              <div style="height:100px">




                <div  style="width:14%;height: 100%;border-radius: 100px;display:inline-block;">
                  <el-image
                    style="width:100%;height: 100%;border-radius: 100px"
                    :src="Blog.userImg"
                    class="image"
                  />
                div>
                <div style="display:inline-block;margin-left: 5%;vertical-align:top">
                  <p>{{Blog.userNickname}}p>
                  <p class="message">
                    {{Blog.createTime}} ·  阅读 {{Blog.viewNumber}}
                  p>
                div>
                                   
                <div style="display:inline-block;vertical-align:top">
                  <p>
                    <el-button @click="focusOn"  v-if="focusOnFlag===false" icon="el-icon-plus" type="primary" plain >
                      <span>关注span>
                    el-button>
                    <el-button @click="focusOn"  v-else icon="el-icon-check" type="primary" plain >
                      <span>已关注span>
                    el-button>
                  p>
                div>
              div>
              <br>
            div>
        div>

        <div class="showblog">
          <hr style="margin:0px;background-color:#eee;height:0.5px;border:none;" />
          <div style="width: 96%;margin: 0 auto">
            <mavon-editor
              class="md"
              :boxShadow="false"
              :value="Blog.content"
              :subfield="false"
              defaultOpen="preview"
              :toolbarsFlag="true"
            />
          div>

        div>
        
        <div class="showcom">
          <comment_article>comment_article>
        div>

      el-main>
      <el-aside width="25%" style="height: 600px" class="el-aside-right">

        <div class="show">
          <p>
            <el-tooltip content="参与文章Pull，并通过作者审核后可上榜" placement="bottom" effect="light">
              <el-button icon="el-icon-trophy" type="primary" round size="big">贡献墙el-button>
            el-tooltip>
          p>
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">el-avatar>
            <el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">el-avatar>
            <el-avatar src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png">el-avatar>
          div>
        div>
          <div class="show">
            <p>日志p>
            <el-timeline v-if="Message.length>0" v-infinite-scroll="load"
                         v-bind:infinite-scroll-distance="long"
                         infinite-scroll-disabled="busy"
                         class="infinite-list">
              <el-timeline-item
                v-for="(message, index) in Message"
                :key="index"
                :color=message.color
                :timestamp="message.data"
              >
                {{message.content}}
              el-timeline-item>
            el-timeline>
          div>

      el-aside>
    el-container>
  el-container>

div>
template>

<script>
import comment_article from "../../components/comment/comment_article";
export default {
  name: "blogshow",
  components:{
    comment_article
  },
  data(){
    return{
      myuserid: null,
      loginToken: null,
      blogid: null,
      focusOnFlag:false,
      long: 2,
      status:{
        isCollect: true,
        isLike: true,
        isfork: true,
      },
      Blog:{
        userid: null,
        blogid: null,
        content: null,
        blogTitle: null,
        userNickname: null,
        userImg: null,
        createTime: null,
        viewNumber: null,
        likeNumber: null,
        collectNumber: null,
        forkNumber: null,
        blogtype: null,
        blogimg: null
      },
      Message: [
        {
          //颜色由后端传递
          content: 'Huterox 修改了博文',
          data: '2022-10-2',
          color:'#0f6cc9'
        }, {
          content: 'Dx pull了博文',
          data: '2022-05-02',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
      ],
    }
  },
  created(){
    this.blogid= this.$route.query.blogid;
    this.Blog = JSON.parse(sessionStorage.getItem("blog:"+this.blogid));
    if(!this.Blog){
        this.getBlog(this.blogid)
    }

    //判断用户是否登录
    let loginToken = localStorage.getExpire("LoginToken");
    let myuserid = localStorage.getExpire("userid");
    if(loginToken==null && myuserid==null) {}
    else {
      this.myuserid = myuserid;
      this.loginToken = loginToken;
      this.getStatus();
    }

  },
  methods:{
    getStatus(){
      //如果登录了，就看看这个篇博文和用户的关系
      let loginToken = localStorage.getExpire("LoginToken");
      let myuserid = localStorage.getExpire("userid");
      if(loginToken!=null && myuserid!=null){
        this.myuserid = myuserid;
        this.loginToken = loginToken;
        this.axios({
          url: "/blog/blog/bloginfo/status",
          method: 'post',
          headers: {
            "userid": myuserid,
            "loginType": "PcType",
            "loginToken": loginToken,
          },
          data:{
            "userid":this.myuserid,
            "blogid":this.Blog.blogid,
          }
        }).then((res)=>{
          res = res.data;
          if(res.code===0){
            this.status = res.status
          }else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    forkBlog(){
      /**
       * 判断用户有没有登录，如果没有那就提示一下
       *
       * */
      let loginToken = localStorage.getExpire("LoginToken");
      let myuserid = localStorage.getExpire("userid");
      if(loginToken==null && myuserid==null) {
        this.$message.warning("您还未登录");
      }else {
        this.myuserid = myuserid;
        this.loginToken = loginToken;
        //这里开始进行我们的逻辑
        this.axios({
          url: "/blog/blog/fork/blogFork",
          method: 'post',
          headers: {
            "userid": this.myuserid,
            "loginType": "PcType",
            "loginToken": this.loginToken,
          },
          data:{
            "userid":this.myuserid,
            "blogid":this.Blog.blogid,
            "blogUserid":this.Blog.userid,
            "blogTitle": this.Blog.blogTitle,
            "blogUserNickname":this.Blog.userNickname,
            "blogImg": this.Blog.blogimg
          }
        }).then((res)=>{
          res = res.data;
          if(res.code===0){
            this.getStatus();
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg);
          }
        });

      }
    },
    getBlog(blogid){
      this.axios({
        url: "/blog/blog/bloginfo/blogById",
        method: 'get',
        params: {
          'blogid': blogid,
        }
      }).then((res) => {
        res = res.data;
        if (res.code === 0) {
          //这个就是我们的默认展示图片
          let image_base_user = "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
          //同样的拿到数据后需要临时保存
          this.Blog = res.blog
          if(!this.Blog.userImg){this.Blog.userImg=image_base_user;}
          sessionStorage.setItem("blog:"+this.blogid, JSON.stringify(this.Blog));
          this.$router.go(0);
        } else {
          this.$message.error(res.msg);
          this.$router.go(-1);
        }
      });
    },
    goMerge(){
      this.$router.push({path:'/blogshowMerge',query: {id:'1'}})
    },
    focusOn(){
      this.focusOnFlag=!this.focusOnFlag;
      if(this.focusOnFlag){
        alert("关注成功")
      }else {
        alert("取关成功")
      }
    },

    load () {
      //这部分让你的axios去动态加载
      let temp=[
        {
          content: '加载了',
          data: '2022-03-27',
        },
        {
          content: '加载了',
          data: '2022-03-27',
        }

      ]
      for (let i = 0; i < temp.length; i++) {
        this.Message.push(temp[i])
      }

    },
  }
}
script>

<style  lang="stylus" scoped>
.show{
  margin: 20px auto;
  width: 90%;

  border: 0px solid #81badc;
  transition: all 0.9s;
  border-radius: 10px;

}
.show:hover{
  box-shadow: 0px 15px 30px rgb(12, 132, 224);
  margin-top: 10px;

}

.showblog{
  margin: 20px auto;
  width: 100%;

  border: 0px solid #81badc;
  transition: all 0.9s;
  border-radius: 10px;

}
.showblog:hover{
  box-shadow: 0px 15px 30px rgb(12, 132, 224);
  margin-top: 10px;

}

.showcom{
  margin: 20px auto;
  width: 100%;

  border: 0px solid #81badc;
  transition: all 0.9s;
  border-radius: 10px;

}
.showcom:hover{
  box-shadow: 0px 15px 30px rgb(12, 132, 224);
  margin-top: 20px;

}
.el-header, .el-footer {

  text-align: center;
}

.el-aside-right {
  background-color:#f9fafc;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-main {
  background-color: white;
  color: #333;

}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443

这里面的刷新有点问题，这里在我们的项目里面，所以的话有些东西只能先这样写了。不然有bug,问题在我们的项目里面，改的话后面再说，也是个小问题。

后端

首先是我们的返回类：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class BlogBody implements Serializable {
    private static final long serialVersionUID = 1L;
    /**
     * 这边的话userid啥的都是指文章的作者
     * */
    private String userid;
    private Long blogid;
    private String content;
    private String blogTitle;
    private String userNickname;
    private String userImg;
    private String createTime;
    private Integer viewNumber;
    private Integer likeNumber;
    private Integer collectNumber;
    private Integer forkNumber;
    private String blogtype;
    private String blogimg;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这个就是我们的返回类

那么我们要做的其很简单，组合就好了。

    @Override
    public R blogById(Long blogById) {
        BlogEntity blog = blogService.getById(blogById);
        ContentEntity content = contentService.getOne(new QueryWrapper<ContentEntity>().eq("blogid", blog.getBlogid())
                .orderByDesc("contentid")
                .last("limit 0,1")
        );
        if(blog==null){
            return R.error(BizCodeEnum.NO_SUCHBLOG.getCode(),BizCodeEnum.NO_SUCHBLOG.getMsg());
        }
        if(content==null){
            return R.error(BizCodeEnum.NO_SUCHCONTENT.getCode(), BizCodeEnum.NO_SUCHCONTENT.getMsg());
        }
        BlogBody blogBody = new BlogBody();
        BeanUtils.copyProperties(blog,blogBody);
        blogBody.setContent(content.getContent());
        blogBody.setBlogtype(BlogType.BLOGTYPE.get(blog.getBlogtype()));
        return R.ok().put("blog",blogBody);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

总结

到月末了，冲个活动业绩，下个月更新超过5篇算我输（狗头）

相关阅读:
MLX90363KDC 3轴X，Y，Z 磁力计位置传感器IC
基于OPENCV和图像减法的PCB缺陷检测
 C语言文件操作
 Annotation-Based Configuration Configuring Beans for the Container
Python之第十章 IO及对象列化
 软考中级软件设计师--下午题
 智慧实验室系统云LIS全套源码，满足医院实验室、医院集团、独立实验室、临检中心及其它检验机构的专业化检验需求。
本地部署Ollama+qwen本地大语言模型Web交互界面
 渗透测试之内核安全系列课程：Rootkit技术初探（三）
DDD领域驱动设计-限界上下文
原文地址：https://blog.csdn.net/FUTEROX/article/details/127523721