黑马大事件学习-19（文章）

文章列表查询-页面搭建

复制文件

ArticleManager.vue

main.js

javascript 复制代码

import locale from 'element-plus/dist/locale/zh-cn.js'
app.use(ElementPlus,{locale})

回显文章分类

ArticleManager.vue

javascript 复制代码

//回显文章分类
import {articleCategoryListService} from '@/api/article.js'
const articleCategoryList = async () => {
    let result = await articleCategoryListService();
    categorys.value=result.data;
}
articleCategoryList()

文章列表查询-接口调用

ArticleManager.vue

javascript 复制代码

//获取文章列表数据
const articleList = async () => { 
    let params={
        pageNum:pageNum.value,
        pageSize:pageSize.value,
        categoryId:categoryId.value?categoryId.value:null,
        state:state.value?state.value:null
    }
    let result = await articleListService(params);
    //渲染试图
    total.value=result.data.total;
    articles.value=result.data.items;
}

article.js

javascript 复制代码

//文章列表查询
export const articleListService = (params)=>{
    return request.get('/article',{params:params})
}

分类名称

ArticleManager.vue

javascript 复制代码

 //处理数据，给数据模型扩展一个属性，分类名称
    for(let i=0;i<result.data.items.length;i++){
        let article=articles.value[i];
        for(let j=0;j<categorys.value.length;j++){
           if(article.categoryId==categorys.value[j].id){
            article.categoryName=categorys.value[j].categoryName;
            }
        }
    }

文章列表查询-事件处理

ArticleManager.vue

javascript 复制代码

 //当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    articleList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    articleList()
}


<el-button type="primary" @click="articleList">搜索</el-button>
                <el-button @click="categoryId='';state=''">重置</el-button>

添加文章-页面搭建

复制文件

ArticleManager.vue

配置下载富文本编辑器Quill

添加文章-文章封面图片上传

ArticleManager.vue

javascript 复制代码

//导入token
import {useTokenStore} from '@/stores/token.js'
const tokenStore=useTokenStore();
//上传成功的回调函数
const uploadSuccess = (result) => {
    articleModel.value.coverImg=result.data;
    console.log(result.data);
}

  <!-- 
                    auto-upload:设置是否自动上传
                    action：设置服务器接口路径
                    name:设置上传文件的参数名称
                    headers:设置请求头
                    on-success:设置上传成功后的回调函数
                     -->
                    <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                    action="/api/upload" 
                    name="file" 
                    :headers="{Authorization:tokenStore.token}"
                    :on-success="uploadSuccess"
                    >

添加文章-接口调用

article.js

javascript 复制代码

//文章添加
export const articleAddService = (articleData)=>{
    return request.post('/article',articleData)
}

ArticleManager.vue

javascript 复制代码

                    <el-button type="primary" @click="addArticle('已发布')">发布</el-button>
                    <el-button type="info" @click="addArticle('草稿')">草稿</el-button>

import {articleCategoryListService,articleListService, articleAddService} from '@/api/article.js'

//添加文章
import { ElMessage } from 'element-plus'
const addArticle = async (clickState) => { 
    //把发布状态复制给数据模型
    articleModel.value.state=clickState;
    //调用接口
    let result = await articleAddService(articleModel.value);
    ElMessage.success(result.msg ? result.msg:'添加成功')
    //让抽屉消失
    visibleDrawer.value=false;
    //刷新当前列表
    articleList()
}