当前位置:   article > 正文

VUE3 博客全栈-前端-07_vue3博客

vue3博客

本节:博客分类的编写

div:  循环列表

 添加和修改模态框的形式

 script:1.引入模块   2.实例化引入的模块

 1.获取分类方法 (1)定义变量接收数据 (2)写方法连接接口,赋值 (3)页面上循环渲染 ,挂载分类方法

2. 添加分类的方法:(1)定义变量接收前端添加的数据 (2)写方法连接接口,传值给后端 ,状态的返回

 3.删除方法:把删除的id传给后端,后端就可以删除数据了。 

 4.修改方法:(1)定义变量接收修改后的数据  (2)点击获取修改的数据,赋值

(3)写方法调用接口,传值给后端修改 ,返回状态

 整个分类页面的代码:

  1. <template>
  2. <div>
  3. <n-button @click="showAddModal=true">添加</n-button>
  4. <n-table :bordered="false" :single-line="false">
  5. <thead>
  6. <tr>
  7. <th>编号</th>
  8. <th>名称</th>
  9. <th>操作</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr v-for="(i,index) in categortyList">
  14. <td>{{i.id}}</td>
  15. <td>{{i.name}}</td>
  16. <td>
  17. <n-space>
  18. <!-- n-space可以自动调试合适的距离 -->
  19. <n-button @click="toUpdate(i)">修改</n-button>
  20. <n-button @click="deleteCategory(i)">删除</n-button>
  21. </n-space>
  22. </td>
  23. </tr>
  24. </tbody>
  25. </n-table>
  26. <n-modal v-model:show="showAddModal" preset="dialog" title="Dialog">
  27. <template #header>
  28. <div>添加分类</div>
  29. </template>
  30. <div>
  31. <n-input v-model:value="addCategory.name" type="text" placeholder="请输入名称" />
  32. </div>
  33. <template #action>
  34. <div>
  35. <n-button @click="addMessage">提交</n-button>
  36. </div>
  37. </template>
  38. </n-modal>
  39. <n-modal v-model:show="showUpdateModal" preset="dialog" title="Dialog">
  40. <template #header>
  41. <div>修改分类</div>
  42. </template>
  43. <div>
  44. <n-input v-model:value="updateCategory.name" type="text" placeholder="请输入名称" />
  45. </div>
  46. <template #action>
  47. <div>
  48. <n-button @click="updateMessage">提交</n-button>
  49. </div>
  50. </template>
  51. </n-modal>
  52. </div>
  53. </template>
  54. <script setup>
  55. import { AdminStore } from '../../stores/AdminStore' //1.引入
  56. import { ref, reactive, inject, onMounted } from 'vue'
  57. import { useRouter, useRoute } from 'vue-router'; //路由
  58. const router = useRouter()
  59. const route = useRoute()
  60. const dialog = inject("dialog")
  61. const message = inject("message")
  62. const axios = inject("axiosTool") //axiosTool 是我provide定义的名字
  63. const adminStore = AdminStore(); //2.实例化
  64. onMounted(() => {
  65. loadDatas()
  66. })
  67. const categortyList = ref([])
  68. const loadDatas = async () => {
  69. let res = await axios.get("/categorty/list")
  70. categortyList.value = res.data.rows
  71. console.log(res);
  72. }
  73. const addCategory = reactive({
  74. name: "",
  75. })
  76. const showAddModal = ref(false);
  77. const addMessage = async () => {
  78. let res = await axios.post("/categorty/_token/add", {
  79. name: addCategory.name
  80. })
  81. // { headers: { token: adminStore.token } }
  82. console.log(res);
  83. if (res.data.code == 200) {
  84. message.info(res.data.msg)
  85. loadDatas()
  86. } else {
  87. message.error(res.data.msg)
  88. }
  89. showAddModal.value = false;
  90. }
  91. const updateCategory = reactive({
  92. name: "",
  93. id: 0
  94. })
  95. const showUpdateModal = ref(false);
  96. const toUpdate = async (i) => {
  97. showUpdateModal.value = true
  98. updateCategory.id = i.id
  99. updateCategory.name = i.name
  100. }
  101. const updateMessage = async () => {
  102. let res = await axios.post("/categorty/_token/update", {
  103. name: updateCategory.name,
  104. id: updateCategory.id,
  105. })
  106. // { headers: { token: adminStore.token } }
  107. console.log(res);
  108. if (res.data.code == 200) {
  109. message.info(res.data.msg)
  110. loadDatas()
  111. } else {
  112. message.error(res.data.msg)
  113. }
  114. showUpdateModal.value = false;
  115. }
  116. const deleteCategory = async (i) => {
  117. dialog.warning({
  118. title: '警告',
  119. content: '是否要删除',
  120. positiveText: '确定',
  121. negativeText: '取消',
  122. onPositiveClick: async () => {
  123. // message.success('确定')
  124. let res = await axios.delete(`/categorty/_token/delete?id=${i.id}`)
  125. if (res.data.code == 200) {
  126. loadDatas()
  127. message.info(res.data.msg)
  128. } else {
  129. message.error(res.data.msg)
  130. }
  131. },
  132. onNegativeClick: () => {
  133. }
  134. })
  135. }
  136. </script>
  137. <style lang="scss" scoped>
  138. </style>

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号