基于vue3+ts+elementplus+vite+vuex+router4的博客网

淩亂°似流年 2022-08-28 11:00 170阅读 0赞

# 一 博客网介绍 #

博客网是基于vue3+ts+elementplus+vite+vuex+router4+springboot打造的前台和后台项目，前台有博客的首页，技术文章列表，文章分页，文章高级查询，文章详情，文章评论，注册，登录，关于我们等，后台管理系统 发布技术文章，支持markdown格式，markdown上传文件，评论管理，用户管理，系统管理等等功能

# 二 技术说明 #

前端：  
vue3  
typescript  
vuex  
elementplus  
vite2  
router4  
markdown编辑  
后端  
springboot+ssm

# 三 项目结构图 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 四 功能设计和实现 #

博客首页  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
核心代码实现:

<el-main style="height:800px" class='main_index_cls'>
                  <el-image style="width: 256px; margin-top:100px; height: 256px" src="../../static/logo/blog.png" >
                  </el-image>
    
                 <div style="font-size:40px;color:green;height:30px;font-weight:900">VueBlog</div>
    
                  <el-button type="success" style="font-size:30px;margin-top:100px">开始阅读-></el-button>
    
                 <el-divider></el-divider>
    
                 <el-row :gutter="20">
                    <el-col :span="8">
                       <div style="display:flex;flex-direction:column;justify-content: flex-end">
                           <span style='font-size:28px;text-align:left'>轻量</span>
                           <span style='text-align:left;margin-top:20px'>vue以少量代码完成复杂设计</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                       <div style="display:flex;flex-direction:column;justify-content: flex-end">
                           <span style='font-size:28px;text-align:left'>快速</span>
                           <span style='text-align:left;margin-top:20px'>项目启动,加载速度都非常的块</span>
                      </div>
                    </el-col>
                     <el-col :span="8">
                       <div style="display:flex;flex-direction:column;justify-content: flex-end">
                           <span style='font-size:28px;text-align:left'>技术文章</span>
                           <span style='text-align:left;margin-top:20px'>高品质,海量原创型技术文章,大咖带您进入<br>技术的海洋</span>
                      </div>
                    </el-col>
                </el-row>
          </el-main>

技术文章列表

获取后台的数据，然后展示到页面中，并且进行分页展示。 项目内容很多，可能一篇文章无法概述完整，需要的 可以咨询 扣扣 二五七九六九二六零六  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

核心代码

const getAllArticle = ()=>{ 
    
            $store.dispatch('article/getArticleList', queryParams)
            .then((data) => { 
              articleList.value = data.rows
              console.log(articleList.value)
              total.value = data.total
            })
            .catch((err) => { 
              console.log('失败' + err)
            })
    
        }

博客详情  
展示博客的内容，展示markdown的内容, 项目内容很多，可能一篇文章无法概述完整，需要的 可以咨询 扣扣 二五七九六九二六零六

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]  
核心代码

const getArticleById = (id:any)=>{ 
             $store.dispatch('article/getArticleById', { id:id})
                .then((data) => { 
                     article.value = data
                     queryCommentsByAId()
                })
                .catch((err) => { 
                console.log('失败' + err)
                })
        }

后台发布博客  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

核心代码:

const submitForm =() =>{ 
          articleformRef.value.validate(valid => { 
            if (valid) { 
              
              if (articleformState.form.id !== undefined) { 
                $store.dispatch('article/updateArticle', articleformState.form).then(data => { 
                  open.value = false
                  getList()
                })
              }else{ 
    
                $store.dispatch('article/saveArticle', articleformState.form).then(data => { 
                  open.value = false
                  getList()
                })
              }
            }
          })

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/f5846bef78e64a1796f88effdcc7f898.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/f16b91997fcb4affb6d528e220f364ed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/a75ede58dbd643109759500692b40d28.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/67fe660ce2e646c281b0e39e6b2dd0e3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFya0NvZGVy_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20220828/163036d23d0b4a79a047e778631048db.png