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

一 博客网介绍

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

二 技术说明

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

三 项目结构图

四 功能设计和实现

博客首页

核心代码实现:

<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>

技术文章列表

获取后台的数据，然后展示到页面中，并且进行分页展示。 项目内容很多，可能一篇文章无法概述完整，需要的 可以咨询 扣扣 二五七九六九二六零六

核心代码

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的内容, 项目内容很多，可能一篇文章无法概述完整，需要的 可以咨询 扣扣 二五七九六九二六零六

核心代码

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

后台发布博客

核心代码:

 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()
            })
          }
        }
      })