vue3+express全栈——博客开发（4）

后台框架

Dashboard.vue

<template>
     <!-- 分成左右两部分 -->
    <div class="main-panel">
       <div class="menus">
            <div v-for="(menu,index) in menus" @click="toPage(menu)">
                {{ menu.name }}
            </div>
       </div>

       <div style="padding: 20px;width: 100%">
            <router-view></router-view>
       </div>
    </div>
    <!-- 水印 -->
    <!-- <div class="title">后台管理系统</div> -->
</template>

<script setup>
    import { AdminStore } from '../../stores/AdminStore';
    import {ref,reactive,inject} from 'vue'
    import { useMessage } from 'naive-ui'
    import { useRouter,useRoute}from 'vue-router'
    //注入
    const axios=inject("axios")
    const message = useMessage()
    const router=useRouter()
    const route=useRoute()
    const adminStore=AdminStore()

    let menus=[
        { name:"文章管理",href:"/dashboard/article"},
        { name:"分类管理",href:"/dashboard/category"},
        { name:"退出",href:"logout"},
    ];

    const toPage=(menu)=>{
        if(menu.href == 'logout'){
            router.push("/login")
        }else{
            router.push(menu.href)
        }
    }
</script>

<style scoped>
    .main-panel{
        display:flex;
        color:#64676a;
        max-width:1500px;
        margin:0 auto;
    }

    .menus{
        padding:20px 0;
        box-sizing:border-box;
        line-height:55px;
        text-align:center;
        width:180px;
        height:95vh;
        border-right:1px solid #dadada;

        div {
            cursor:pointer;
            &:hover{
                color:#fd760e;
            }
        }
    }

    .title{
        font-size:65px;
        font-weight:bold;
        text-align:right;
        position:fixed;
        color:rgba(0,0,0,20%);
        right:calc((100vw - 1500px)/2);
        bottom:20px;
    }
</style>

Category.vue分类管理

点击添加，输入分类名称，添加分类

点击进行删除和修改

<template>
    <div>
        <n-button @click="showAddModal=true">添加</n-button>

        //表格
        <n-table :bordered="false" :single-line="false">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(category,index) in categoryList">
                    <td>{{ category.id }}</td>
                    <td>{{ category.name }}</td>
                    <td>
                        <n-space>
                            <n-button @click="toUpdate(category)">修改</n-button>
                            <n-button @click="deleteCategory(category)">删除</n-button>
                        </n-space>
                    </td>
                </tr>
            </tbody>
        </n-table>

        //添加
        <n-modal v-model:show="showAddModal" preset="dialog" title="Dialog">
            <template #header>
                <div>添加分类</div>
            </template>
            <div>
                <n-input v-model:value="addCategory.name"type="text"placeholder="请输入名称"></n-input>
            </div>
            <template #action>
                <div>
                    <n-button @click="add">提交</n-button>
                </div>
            </template>
        </n-modal>

        //修改
        <n-modal v-model:show="showUpdateModal" preset="dialog" title="Dialog">
            <template #header>
                <div>修改分类</div>
            </template>
            <div>
                <n-input v-model:value="updateCategory.name"type="text"placeholder="请输入名称"></n-input>
            </div>

            <template #action>
                <div>
                    <n-button @click="update">更新</n-button>
                </div>
            </template>
        </n-modal>

    </div>
</template>

<script setup>
    import { AdminStore } from '../../stores/AdminStore';
    import {ref,reactive,inject,onMounted,defineComponent} from 'vue'
    import { useMessage,useDialog } from 'naive-ui'
    import { useRouter,useRoute}from 'vue-router'
    //注入
    const axios=inject("axios")
    const message = useMessage()
    const dialog = useDialog()

    const router=useRouter()
    const route=useRoute()
    const adminStore=AdminStore()
    const showAddModal=ref(false)
    const showUpdateModal=ref(false)//是否显示

    const categoryList=ref([])
    const addCategory=reactive({
        name:""
    })
    const updateCategory=reactive({
        id:1,
        name:""
    })

    onMounted(()=>{
        loadDatas()
    })

    const loadDatas=async()=>{
        let res=await axios.get("/category/list")
        categoryList.value=res.data.rows
        //console.log(res)
    }

    const add=async()=>{//添加数据
        let res=await axios.post("/category/_token/add",{name:addCategory.name})//token!token给服务端
        if(res.data.code==200)
        {
            loadDatas()
            message.info(res.data.msg)
        }else{
            message.error(res.data.msg)
        }
        showAddModal.value=false;
    }

    const toUpdate=async(category)=>{//更新弹框
        showUpdateModal.value=true
        updateCategory.id=category.id
        updateCategory.name=category.name
    }
    
    const update=async()=>{//修改数据
        let res=await axios.put("/category/_token/update",{id:updateCategory.id,name:updateCategory.name})//token!token给服务端
        if(res.data.code==200)
        {
            loadDatas()
            message.info(res.data.msg)
        }else{
            message.error(res.data.msg)
        }
        showUpdateModal.value=false;
    }

    const deleteCategory=async(category)=>{//删除数据
        dialog.warning({
          title: '警告',
          content: '是否删除？',
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: async() => {
            let res=await axios.delete(`/category/delete?id=${category.id}`)//token!token给服务端
            if(res.data.code==200)
            {
                loadDatas()
                message.info(res.data.msg)
            }else{
                message.error(res.data.msg)
            }
          },
       
        })

       
    }

</script>

<style scoped>

</style>

下一篇：文章管理，稍微复杂一点点