赞
踩
本节:博客分类的编写
div: 循环列表
添加和修改模态框的形式
script:1.引入模块 2.实例化引入的模块
1.获取分类方法 (1)定义变量接收数据 (2)写方法连接接口,赋值 (3)页面上循环渲染 ,挂载分类方法
2. 添加分类的方法:(1)定义变量接收前端添加的数据 (2)写方法连接接口,传值给后端 ,状态的返回
3.删除方法:把删除的id传给后端,后端就可以删除数据了。
4.修改方法:(1)定义变量接收修改后的数据 (2)点击获取修改的数据,赋值
(3)写方法调用接口,传值给后端修改 ,返回状态
整个分类页面的代码:
- <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="(i,index) in categortyList">
- <td>{{i.id}}</td>
- <td>{{i.name}}</td>
- <td>
- <n-space>
- <!-- n-space可以自动调试合适的距离 -->
- <n-button @click="toUpdate(i)">修改</n-button>
- <n-button @click="deleteCategory(i)">删除</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="请输入名称" />
- </div>
- <template #action>
- <div>
- <n-button @click="addMessage">提交</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="请输入名称" />
- </div>
- <template #action>
- <div>
- <n-button @click="updateMessage">提交</n-button>
- </div>
- </template>
- </n-modal>
- </div>
- </template>
-
- <script setup>
- import { AdminStore } from '../../stores/AdminStore' //1.引入
- import { ref, reactive, inject, onMounted } from 'vue'
- import { useRouter, useRoute } from 'vue-router'; //路由
-
- const router = useRouter()
- const route = useRoute()
- const dialog = inject("dialog")
- const message = inject("message")
- const axios = inject("axiosTool") //axiosTool 是我provide定义的名字
- const adminStore = AdminStore(); //2.实例化
-
- onMounted(() => {
- loadDatas()
- })
- const categortyList = ref([])
- const loadDatas = async () => {
- let res = await axios.get("/categorty/list")
- categortyList.value = res.data.rows
- console.log(res);
-
- }
- const addCategory = reactive({
- name: "",
- })
-
- const showAddModal = ref(false);
- const addMessage = async () => {
- let res = await axios.post("/categorty/_token/add", {
- name: addCategory.name
- })
- // { headers: { token: adminStore.token } }
- console.log(res);
- if (res.data.code == 200) {
- message.info(res.data.msg)
- loadDatas()
- } else {
- message.error(res.data.msg)
-
- }
- showAddModal.value = false;
-
- }
-
- const updateCategory = reactive({
- name: "",
- id: 0
-
- })
- const showUpdateModal = ref(false);
- const toUpdate = async (i) => {
- showUpdateModal.value = true
- updateCategory.id = i.id
- updateCategory.name = i.name
-
- }
- const updateMessage = async () => {
- let res = await axios.post("/categorty/_token/update", {
- name: updateCategory.name,
- id: updateCategory.id,
-
- })
- // { headers: { token: adminStore.token } }
- console.log(res);
- if (res.data.code == 200) {
- message.info(res.data.msg)
- loadDatas()
- } else {
- message.error(res.data.msg)
-
- }
- showUpdateModal.value = false;
-
- }
-
-
-
-
- const deleteCategory = async (i) => {
- dialog.warning({
- title: '警告',
- content: '是否要删除',
- positiveText: '确定',
- negativeText: '取消',
- onPositiveClick: async () => {
- // message.success('确定')
- let res = await axios.delete(`/categorty/_token/delete?id=${i.id}`)
- if (res.data.code == 200) {
- loadDatas()
- message.info(res.data.msg)
-
- } else {
- message.error(res.data.msg)
-
- }
- },
- onNegativeClick: () => {
- }
- })
-
- }
- </script>
-
- <style lang="scss" scoped>
-
- </style>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。