idea + vue3 + mybatis + springBoot3前后端分离实现对一张表的增删改查（前端，从项目搭建到调用后端所有接口）

06-01 1340阅读

项目地址Admin/zwy_manager_up_v1

1.前端项目

1.1项目创建

1.1.1使用cmd创建vue项目

在文件资源管理器中打开你想创建位置路径

npm create vue@latest

选择只选择Route

依次执行以下命令

访问搭建好的vue项目

1.1.2瘦身vue项目

idea打开该项目,项目原始结构如下

瘦身后的项目结构

修改3个文件添加1个文件

名称：App.vue

位置：src/App.vue

名称：main.js

位置：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

名称：HelloWorld.vue

位置：src/views/HelloWorld.vue

  
    Hello World

名称：index.js

位置：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'hello',
      component: () => import('../views/HelloWorld.vue'),
    },
  ],
})
export default router

1.1.3集成element-plus

下载element-plus依赖

npm install element-plus@

package-lock.json或package.json或node_modules查看是否引入

配置element-plus

位置：src/main.js

名称：main.js

 import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

  app.use(ElementPlus)

测试element-plus是否配置好

新建视图

位置：src/views/Button.vue

名称：Button.vue

  
    按钮

添加路由

位置：src/router/index.js

名称：index.js

    {
      path: '/button',
      name: 'button',
      component: () => import('../views/Button.vue'),
    }

访问该视图

1.2视图搭建

一共有4个，404.vue,manager.vue,employeeOp.vue,home.vue

其中manager.vue(employeeOp.vue,home.vue) 是嵌套关系

404.vue是路由守卫

1.2.1 全局映入icon

位置：src/main.js

名称：main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

1.2.2导入所需要的图片和样式

位置：src/assets/global.css

名称：global.css

.card {
    margin-top: 20px;
    margin-left: 10px;
    padding: 10px;
    width: calc(100% - 40px);
    background-color: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    color: #303133;
}

位置：src/assets/img.png

名称：img.png

位置：/assets/404.png

名称：404.png

1.2.3视图文件编写

位置:src/view/employeeDataOp.vue

名称：employeeDataOp.vue

  

    
      
      搜索
      重置
    

    
      新建员工
      批量删除
    

    
     
       
       
       
       
       
     
    

    
      
    
  


import {reactive} from "vue";
const data =  reactive({
  tableData: [
    {
      id:1,
      name:'张三',
      gender:'男',
      title:'高级工程师',
      birthday:'1985-01-01'
    },
  ],
})

位置:src/veiws/home.vue

名称:home.vue

  
    员工管理系统首页

位置：src/veiws/manager.vue

名称：manager.vue

位置：src/view/404.vue

名称：404.vue


    
      
      
  
    
      返回上一页
    
  


import { useRouter } from 'vue-router'
const router = useRouter()
const backLatestPage = () => {
  router.go(-1)
}

1.2.4路由修改

位置：src/router/index.js

名称：index.js

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'hello',
      component: () => import('../views/HelloWorld.vue'),
    },
    {
      path: '/button',
      name: 'button',
      component: () => import('../views/Button.vue'),
    },
    {
      path:'/manager',
      name:'manager',
      component:()=>import('../views/Manager.vue'),
      children:[
        {
          path:'/manager/employeeDataOp',
          name:'employeeDataOp',
          meta:{title:'员工数据操作'},
          component:()=>import('../views/employeeDataOp.vue')
        },
          {
            path:'/manager/home',
            name:'home',
            meta:{title:'首页'},
            component:()=>import('../views/home.vue')
          }
      ]
    },
    {
      path:'/404',
      name:'404',
      meta:{title:'404'},
      component:()=>import('../views/404.vue')
    },
    {
      path:'/:pathMatch(.*)*',
      redirect:'/404',
    }
  ],
})
router.beforeEach((to,from,next)=>{
    document.title=to.meta.title;
    next()
})
export default router

1.2.4静态界面展示

1.3接口调用

1.3.1安装axios（发请求的工具）

 npm install axios@latest

1.3.2编写request.js文件（处理请求）

位置：src/utils/request.js

const request  =  axios.create({
    baseURL:'http://localhost:9999',//后台接口地址
    timeout:5000 //请求超时设置
})
//request 拦截器
// 可以自请求发送前对请求做一些处理
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    return config
},error => {
    return Promise.reject(error)
});
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    response =>{
        let res = response.data;
    //     兼容服务器端返回的字符串数据
        if(typeof res === 'string') {
            res = res ?   JSON.parse(res) : res
        }
        return res;
    },
    error => {
        if(error.response.status === 404){
            ElMessage.error('服务器未找到该接口')
        }else if(error.response.status === 500){
            ElMessage.error('服务器内部错误')
        }else{
            console.error(error.message)
        }
        return Promise.reject(error)
    }
)
export default request

1.3.3修改employeeDataOp.vue

位置：src/views/employeeDataOp.vue

  

    
      
      搜索
      重置
    

    
      新建员工
      批量删除
    

    
     
       
       
       
       
       
       
       
         
           
             
           
           
             
           
         
       
     
    

    
      
    
    
      
      
        男
        女
      
      
        
      
        
          取消
          
            确定
          
        
      
    
  


import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage,ElMessageBox} from "element-plus";
const res = ref();
const data =  reactive({
  AddDialogVisible:false,
  tableData: [
  ],
  currentPage:1,
  pageSize:5,
  searchName:'',
  employee:{
    id:0,
    name:'',
    gender:'',
    title:'',
    birthday:''
  },
  ids:[]
})
const loadData = () => {
  const loadAll = () =>{
        request.get('employee/selectPage', {
          params: {
            pageNum: data.currentPage,
            pageSize: data.pageSize,
          }
        }).then(res=> {
          data.tableData = res.data.list;
          data.total = res.data.total;
          console.log(res.data.list)
        })
      }
      const loadByName = () =>{
        request.post('employee/findByName',{
            name:data.searchName,
        },{  params: {
                pageNum: data.currentPage,
                pageSize: data.pageSize,
              }}).then(res=>{
          data.tableData = res.data.list;
          data.total = res.data.total;
          console.log(res.data.list)
        })
        }
  data.searchName ? loadByName() :loadAll()
}
loadData();
const reset = () =>{
  data.searchName = '';
  loadData();
}
const switchAddDialog = () =>{
  data.AddDialogVisible = data.AddDialogVisible ? false : true;
}
const editRow = (row) =>{
  data.employee = row;
  switchAddDialog();
  //深拷贝,解决就算取消修改，数据还是被修改了的问题
  data.employee = JSON.parse(JSON.stringify(row));
}
const save = () =>{
  const update = () =>{
    request.put('employee/modify',data.employee).then(res=>{
      console.log(res);
      if(res.code === '200'){
        ElMessage.success('添加成功');
        loadData();
        switchAddDialog();
      }else {
        ElMessage.error(res.code + '/n' + res.msg);
      }
    })
  }
  const add = () =>{
    request.post('employee/add',data.employee).then(res=>{
      console.log(res);
      if(res.code === '200'){
        ElMessage.success('添加成功');
        loadData();
        switchAddDialog();
      }else {
        ElMessage.error(res.code + '/n' + res.msg);
      }
    })
  }
  data.employee.id != 0 ? update() : add();
}
const deleteOne = (row) =>{
  request.delete(`employee/deleteById/${row.id}`).then(res=>{
    if(res.code === '200'){
      ElMessage.success('删除成功');
      loadData();
    }else {
      ElMessage.error(res.code + '/n' + res.msg);
    }
  })
}
const handleSelectionChange = (rows) =>{
  data.ids = rows.map(row => row.id);
  console.log(data.ids);
}
const deleteBatch = () =>{
  request.delete(`employee/deleteBatch`,{data:data.ids}).then(res=>{
    if(res.code === '200'){
      ElMessage.success('批量删除成功');
      loadData();
    }else {
      ElMessage.error(res.code + '/n' + res.msg);
    }
  })
}
const deleteMessageBox = (row) =>{
  ElMessageBox.confirm('此操作将永久删除该信息, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'danger',
  }).then(() => {
    deleteOne(row);
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    });
  });
}
const deleteBatchMessageBox = () =>{
  if(data.ids.length === 0){
    ElMessage.error('请选择要删除的数据');
    return;
  }
  ElMessageBox.confirm('此操作将永久删除该信息, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'danger',
  }).then(() => {
    deleteBatch();
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    });
  });
}

我来解释也哈这个视图，

静态内容方面

分为四个部分对应代码四个

第一个是搜索框

第二个是一些基础操作

第三个是表格

第四个是分页组件

还有一个对话框作用是添加或修改员工信息点击新建按钮这个对话框显示对应代码标签

还有一个消息框当，进行删除操作时候提供一个缓冲，以免误删对应const deleteMassageBox,deleteBatchMassageBox.

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

高速稳定云服务器9.9元起