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

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

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

博客首页

核心代码实现:

              
              

             
VueBlog

              开始阅读->

             

             
                
                   

                       轻量
                       vue以少量代码完成复杂设计
                  
                
                
                   

                       快速
                       项目启动,加载速度都非常的块
                  
                
                 
                   

                       技术文章
                       高品质,海量原创型技术文章,大咖带您进入
技术的海洋
                  
                
            
      

技术文章列表

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

核心代码

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