弹出对话框

C3-axios/demo2/src/api/request.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus';
 const axiosInstance = axios.create({
   baseURL: 'http://localhost:8080/api',
   timeout: 5000,
@@ -22,9 +22,26 @@ axiosInstance.interceptors.response.use(response => {
   }
 }, error => {
   // 处理响应错误
-  // 如果error对象包含response属性，并且response对象包含data属性，显示错误消息
+  // 检查错误对象 error 是否包含 response 属性，并且如果包含，则使用 ElMessage.error 显示错误信息
   error.response && ElMessage.error(error.response.data)
   // 返回一个拒绝的Promise，其原因是error对象的response的data属性
-  // return Promise.reject(error.response.data)
+  return Promise.reject(error.response)
 })
+
+
+axiosInstance.interceptors.request.use( config => {
+  /*const token = localStorage.getItem('token')
+  console.log(token)
+  if(token){
+    config.headers.Authorization = `Bearer ${token}`
+  }*/
+  return config
+},  error => {
+  // 处理响应错误
+  // 检查错误对象 error 是否包含 response 属性，并且如果包含，则使用 ElMessage.error 显示错误信息
+  error.response && ElMessage.error(error.response.data)
+  // 返回一个拒绝的Promise，其原因是error对象的response的data属性
+  return Promise.reject(error.response)
+})
+
 export default axiosInstance;

C3-axios/demo2/src/views/users/Dialog.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { reactive, ref, watch, computed } from 'vue';
+import { defineEmits } from 'vue';
+import { updateStudent, addAccountStudent } from '@/api/students'
+import { ElMessage } from 'element-plus';
+
+const form = reactive({
+    id: "",
+    name: "",
+    gender: "",
+    birthday: "",
+})
+const formRef = ref(null);
+const rules = reactive({
+    id: [
+        { required: true, message: '请输入学号', trigger: 'blur' },
+    ],
+    name: [
+        { required: true, message: '请输入姓名', trigger: 'blur' },
+    ],
+    gender: [
+        { required: true, message: '请选择性别', trigger: 'blur' },
+    ],
+    birthday: [
+        { required: true, message: '请选择日期', trigger: 'blur' },
+    ]
+})
+</script>
+
+<template>
+    <el-dialog v-model="centerDialogVisible" title="Warning" width="500" align-center>
+        <!-- 表单 -->
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
+            <el-form-item prop="id" label="学号">
+                <el-input v-model="form.id" />
+            </el-form-item>
+            <el-form-item prop="name" label="姓名">
+                <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item prop="gender" label="性别">
+                <el-select v-model="form.gender" placeholder="请选择性别">
+                    <el-option label="男" value="1" />
+                    <el-option label="女" value="2" />
+                </el-select>
+            </el-form-item>
+            <el-form-item prop="birthday" label="出生日期">
+                <el-date-picker v-model="form.birthday" placeholder="选择日期" type="date" style="width: 100%" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">取消</el-button>
+                <el-button type="primary" @click="handleConfirm">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped></style>

C3-axios/demo2/src/views/users/Students.vue

@@ -25,7 +25,7 @@ const handleSearch = async () => {
     }
 }
 initGetStudents()
-
+const centerDialogVisible = ref(false)
 </script>
 
 <template>
@@ -42,12 +42,29 @@ initGetStudents()
             <el-table-column :prop="item.prop" :label="item.label" width="" v-for="(item, index) in options" :key="index">
                 <template v-if="item.prop === 'action'" #default="scope">
                     <el-button type="primary" size="small" :icon="Edit" />
-                    <el-button type="primary" size="small" :icon="Delete" />
+                    <el-button type="danger" size="small" :icon="Delete" />
                 </template>
             </el-table-column>
         </el-table>
         <template #footer>Footer content</template>
     </el-card>
+    <Dialog v-model="centerDialogVisible" :dialogValue="dialogValue" @close="handleDialogClose" :dialogTitle="dialogTitle"
+        @initStudentList="initGetStudents" />
+    <!-- demo -->
+    <el-button plain @click="centerDialogVisible = true">
+        Click to open the Dialog
+    </el-button>
+    <el-dialog v-model="centerDialogVisible" title="Warning" width="500" align-center>
+        <span>Open the dialog from the center from the screen</span>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="centerDialogVisible = false">Cancel</el-button>
+                <el-button type="primary" @click="centerDialogVisible = false">
+                    Confirm
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>