springboot Vue3 day05 前后端结合

我搬去水星了

274人浏览 · 2025-12-03 22:17:59

我搬去水星了 · 2025-12-03 22:17:59 发布

axios

最终项目的地址：gitee地址

安装axios

 npm install axios i

手写工具类
新建JS文件

import axios from "axios";
import {ElMessage} from "element-plus";

const request = axios.create({
  baseURL: "http://localhost:8080",
  timeout: 3000,
});

// 定义请求拦截器，在每个http请求发送之前执行
request.interceptors.request.use(
    config=>{
        config.headers['Content-type'] = 'application/json;charset=utf-8';
        return config;
    },error=>{
        return Promise.reject(error);
    }
)

// 定义响应拦截器，在每个http响应返回之后执行
request.interceptors.response.use(
    response=>{
        if(response.status !== 200){
            ElMessage.error('请求失败');
        }
        let resdata = response.data;
        if(typeof resdata === 'string'){
            // 转换为json
            resdata = resdata ? JSON.parse(resdata) : resdata;
        }
        return resdata;
    },error=>{
        if(error.response.code === 401){
            ElMessage.error('登录已过期，请重新登录');
        }else if(error.response.code === 500){
            ElMessage.error('服务器错误');
        }else{
            ElMessage.error('请求失败');
        }
        return Promise.reject(error);
    }
)
export default request;

接着我们就可以在前端使用这个Axios去请求我们写的接口

import request from "@/utils/request.js";
request.get('/employee/getEmps')
  .then(res => {
    console.log(res.data)
  }).catch(err => {
    console.log(err)
  })

前后端分页

新增

新增的实现，使用Dialog。我们点击新增按钮，直接弹出新增对话框，然后把要添加的信息，直接传递给后端即可。
逻辑上实现起来还是比较简单的。

<template>
  <div>
    <el-card shadow="hover" style="min-height: 75px">
      <el-input v-model="input" style="width: 240px" placeholder="Please input" />
      <el-button @click="search" type="default" style="margin-left: 10px; width: 75px">搜 索</el-button>
      <el-button @click="reset" type="warning" style="margin-left: 10px; width: 75px">重 置</el-button>
    </el-card>

    <el-card shadow="hover" style="min-height: 85px; margin-top: 5px">
      <div>
        <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </el-card>

    <el-card shadow="hover" style="max-height: 700px; margin-top: 5px">
      <el-table :data="allTableData.tableData"
                stripe style="width: 100%; --el-table-row-height: 70px;">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="birth" label="生日" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="deptId" label="部门" />
      </el-table>
    </el-card>

    <el-card shadow="hover" style="max-height: 500px; margin-top: 5px">
      <el-pagination
          v-model:current-page="allTableData.currentPage"
          v-model:page-size="allTableData.pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog v-model="dialogFormVisible" title="新增用户" width="800">
      <el-form :model="employee">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="employee.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="employee.age" autocomplete="off" />
        </el-form-item>


        <el-form-item label="邮箱" :label-width="formLabelWidth">
        <div class="mt-4">
          <el-input
              v-model="employee.email"
              style="max-width: 600px"
              placeholder="Please input"
              class="input-with-select"
          >
            <template #append>
              <el-select v-model="employee.emailrare" placeholder="Select" style="width: 115px">
                <el-option label="@163.com" value="@163.com" />
                <el-option label="@qq.com" value="@qq.com" />
                <el-option label="@gmail.com" value="@gmail.com" />
              </el-select>
            </template>
          </el-input>
        </div>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
              v-model="employee.birth"
              type="date"
              placeholder="请选择出生日期"
              size="default"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>


      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import request from "@/utils/request.js";

const input = ref('')

const allTableData = ref({
  tableData: [
   ],
  pageSize: 10,
  currentPage: 1,
  total: 0,
})

onMounted(() => {
  getData();
})

const getData = () => {
  // 获取数据
  request.get('/employee/getEmpPage', {
    params: {
      name: input.value,
      pageNum: allTableData.value.currentPage,
      pageSize: allTableData.value.pageSize
    }
  }).then(res => {
        console.log(res)
        allTableData.value.tableData = res.data.list;
        allTableData.value.total = res.data.total;
        // 如果birth字段包含T, 就去除T后面的
        allTableData.value.tableData.forEach(item => {
          if (item.birth.includes('T')) {
            item.birth = item.birth.split('T')[0]
          }
        })
      }).catch(err => {
    console.log(err)
  })
}

const search = () => {
  // 获取数据,根据用户输入，搜索，并分页
  getData();
}

const reset = () => {
  input.value = ''
}



const handleCurrentChange = (val) => {
  // 直接请求数据
  getData();
}

const handleSizeChange = (val) => {
  // 直接请求数据
  getData();
}

// 弹窗相关信息
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const employee = ref({
  name: '',
  age: '',
  birth: '',
  email: '',
  deptId: '',
  emailrare: '@163.com'
})

// 确认提交
const submit = () => {
  employee.value.email = employee.value.name + employee.value.emailrare
  request.post('/employee/addEmp', employee.value).then(res => {
    console.log("请求返回的数据 ：" + res.data)
    if (res.code === 200) {
      closeDialog()
      // 置空
      employee.value = {
        name: '',
        age: '',
        birth: '',
        email: '',
        deptId: '',
        emailrare: '@163.com'
      }
      getData()
    } else {
      ElMessage.error('添加失败')
    }
  }).catch(err => {
    console.log(err)
  })
}

// quxiao
const cancel = () => {
  closeDialog()
}

const closeDialog = () => {
  dialogFormVisible.value = false
}

</script>

<style scoped>

</style>

生成最终的完整版：

<template>
  <div>
    <el-card shadow="hover" style="min-height: 75px">
      <el-input v-model="input" style="width: 240px" placeholder="Please input" />
      <el-button @click="search" type="default" style="margin-left: 10px; width: 75px">搜 索</el-button>
      <el-button @click="reset" type="warning" style="margin-left: 10px; width: 75px">重 置</el-button>
    </el-card>

    <el-card shadow="hover" style="min-height: 85px; margin-top: 5px">
      <div>
        <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
        <el-button type="primary" @click="batchDelete">批量删除</el-button>
      </div>
    </el-card>

    <el-card shadow="hover" style="max-height: 700px; margin-top: 5px">
      <el-table :data="allTableData.tableData"
                stripe style="width: 100%; --el-table-row-height: 70px;"
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="birth" label="生日" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="deptId" label="部门" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card shadow="hover" style="max-height: 500px; margin-top: 5px">
      <el-pagination
          v-model:current-page="allTableData.currentPage"
          v-model:page-size="allTableData.pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog v-model="dialogFormVisible" title="新增用户" width="800">
      <el-form :model="employee">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="employee.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="employee.age" autocomplete="off" />
        </el-form-item>


        <el-form-item label="邮箱" :label-width="formLabelWidth">
        <div class="mt-4">
          <el-input
              v-model="employee.email"
              style="max-width: 600px"
              placeholder="Please input"
              class="input-with-select"
          >
            <template #append>
              <el-select v-model="employee.emailrare" placeholder="Select" style="width: 115px">
                <el-option label="@163.com" value="@163.com" />
                <el-option label="@qq.com" value="@qq.com" />
                <el-option label="@gmail.com" value="@gmail.com" />
              </el-select>
            </template>
          </el-input>
        </div>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
              v-model="employee.birth"
              type="date"
              placeholder="请选择出生日期"
              size="default"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>


      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import request from "@/utils/request.js";
import { ElMessageBox, ElMessage } from 'element-plus'

const input = ref('')

const allTableData = ref({
  tableData: [
   ],
  pageSize: 10,
  currentPage: 1,
  total: 0,
})


onMounted(() => {
  getData();
})

const getData = () => {
  // 获取数据
  request.get('/employee/getEmpPage', {
    params: {
      name: input.value,
      pageNum: allTableData.value.currentPage,
      pageSize: allTableData.value.pageSize
    }
  }).then(res => {
        console.log(res)
        allTableData.value.tableData = res.data.list;
        allTableData.value.total = res.data.total;
        // 如果birth字段包含T, 就去除T后面的
        allTableData.value.tableData.forEach(item => {
          if (item.birth.includes('T')) {
            item.birth = item.birth.split('T')[0]
          }
        })
      }).catch(err => {
    console.log(err)
  })
}

const search = () => {
  // 获取数据,根据用户输入，搜索，并分页
  getData();
}

const reset = () => {
  input.value = ''
}

const selectIds = ref( [])

const handleSelectionChange = (val) => {
  // 直接获取所有的id
  selectIds.value = val.map(item => item.id)
}


const handleCurrentChange = (val) => {
  // 直接请求数据
  getData();
}

const handleSizeChange = (val) => {
  // 直接请求数据
  getData();
}

const handleEdit = (index, row) => {
  // 修改数据
  dialogFormVisible.value = true
  employee.value = { ...row}
  employee.value.emailrare = employee.value.email.split('@')[1]
  employee.value.email = employee.value.email.split('@')[0]
}

const handleDelete = (index, row) => {
  // 删除数据, 直接跟id进行删除
  ElMessageBox.confirm('删除后数据无法回复, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 删除数据
    deleteData(row)
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })

}

// 弹窗相关信息
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const employee = ref({
  id: '',
  name: '',
  age: '',
  birth: '',
  email: '',
  deptId: '',
  emailrare: '@163.com'
})

const deleteData = (row) => {
  request.delete('/employee/deleteEmp', {
    params: {
      id: row.id
    }
  }).then(res => {
    if (res.code === 200) {
      getData()
    } else {
    }
  })
}

// 确认提交
const submit = () => {
  employee.value.email = employee.value.name + employee.value.emailrare;
  employee.value.id ? update() : add();
}

// 新增数据
const add = () => {
  request.post('/employee/addEmp', employee.value).then(res => {
    console.log("请求返回的数据 ：" + res.data)
    if (res.code === 200) {
      closeDialog()
      // 置空
      employee.value = {
        name: '',
        age: '',
        birth: '',
        email: '',
        deptId: '',
        emailrare: '@163.com'
      }
      getData()
    } else {
      ElMessage.error('添加失败')
    }
  }).catch(err => {
    console.log(err)
  })
}

// 批量删除
const batchDelete = () => {
  if (selectIds.value.length === 0) {
    ElMessage.error('请选择要删除的数据')
  } else {
    ElMessageBox.confirm('删除后数据无法回复, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 删除数据
      request.post('/employee/deleteEmpByIds', selectIds.value).then(res=> {
        if (res.code === 200) {
          getData()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
  }
}

// 修改数据
const update = () => {
  request.put('/employee/updateEmp', employee.value).then(res => {
    if (res.code === 200) {
      closeDialog()
      // 置空
      employee.value = {
        name: '',
        age: '',
        birth: '',
        email: '',
        deptId: '',
        emailrare: '@163.com'
      }
      getData()
    } else {
      ElMessage.error('修改失败')
    }
  }).catch(err => {
    console.log(err)
  })
}

// quxiao
const cancel = () => {
  closeDialog()
}

const closeDialog = () => {
  dialogFormVisible.value = false
}

</script>

<style scoped>

</style>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

别让你的 Agent 一口吃成胖子：AI Agent 任务拆分的工程实践指南

AI Agent技术社区

AI Agent律师行业智能体的实践步骤

AI Agent技术社区

MCP + 企业IM架构：AI Agent调用OA、ERP、MES时，身份和权限如何传递？

<think>我们只需要根据内容生成摘要，不超过150字。先理解文章核心：MCP+企业IM架构，AI Agent调用OA/ERP/MES时身份和权限传递。要点：IM从消息入口变任务入口；MCP解决连接，但不解决权限；需要五层身份映射；权限分层（可见性、调用、数据范围、确认）；建议组合MCP+API网关。摘要需简洁。参考生成： "本文探讨MCP与企业IM集成中AI Agent调用业务系统时的身份权