学做毕设 2022 第十讲 VUE CURD

h安装axios

D:\itunes\Vue2022\sprintboot\vu20\  npm i axios -s 

前端 scr\utils\request.js

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:9090',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

 home.vue

<template>

    <el-container style="min-height: 100vh">
      <el-aside :width=" side_With +'px'" style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px #888888">
        <el-menu :default-openeds="['1', '3']" style="height: 100%;" background-color="rgb(48,65,86)"
        text-color="#fff" overflow-x:hidden active-text-color="#ffd04b"
                 :collapse-transition="false"
                 :collapse="isCollapse">

          <div style="height: 60px;line-height: 60px;text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top:5px;margin-right:5px">
          <b style="color: azure;" v-show="logoTextShow">后台管理系统</b>
        </div>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message">
            </i> <span slot="title">导航一</span></template>

            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>
              <span slot="title">导航二</span></template>


            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>

            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style=" font-size: 12px; border-bottom:1px solid #ccc; line-height:60px;
                   display:flex">
          <div style="flex: 1; font-size: 25px">
            <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
          </div>
          <el-dropdown style="width: 70px; cursor:pointer">
            <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

        <el-main>
          <div style="margin-bottom: 10px">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>

            </el-breadcrumb>

          </div>

          <div style="margin: 10px 0">
            <el-input style="width: 200px;cursor: pointer" suffix-icon="el-icon-search" placeholder="请输入名称"  v-model="username"></el-input>
            <el-input style="width: 200px;cursor: pointer" suffix-icon="el-icon-message" placeholder="请输入邮箱" v-model="email" class="ml-5"></el-input>
            <el-input style="width: 200px;cursor: pointer" suffix-icon="el-icon-position" placeholder="请输入地址" v-model="address" class="ml-5"></el-input>
            <el-button type="primary" class="ml-5" @click="load">搜索</el-button>
            <el-button type="warning" class="ml-5" @click="reset">重置</el-button>
          </div>

          <div style="margin: 10px 0">
            <el-button type="primary" class="ml-5" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i> </el-button>
<!--            二次确认按钮-->
            <el-popconfirm
                class="ml-5"
                confirm-button-text='好的'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="你确定删除吗？"
                @confirm="delBatch"
            >
            <el-button type="danger" slot="reference" class="ml-5" >批量删除<i class="el-icon-remove-outline"></i> </el-button>
            </el-popconfirm>

            <el-button type="primary" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>
            <el-button type="primary" class="ml-5">导出<i class="el-icon-top"></i> </el-button>
          </div>
          <el-table :data="tableData" border stripe :header-cell-class-name="headBg" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="id" width="80">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="140">
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" width="120">
            </el-table-column>
            <el-table-column prop="email" label="邮箱地址" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="150">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="150">
            </el-table-column>


            <el-table-column prop=" " label=" " width="230">
              <template slot-scope="scope">
                <el-button type="success" @click="handleEdit(scope.row)" >编辑<i class="el-icon-edit"></i></el-button>
                  <el-popconfirm
                      class="ml-5"
                      confirm-button-text='好的'
                      cancel-button-text='我再想想'
                      icon="el-icon-info"
                      icon-color="red"
                      title="你确定删除吗？"
                      @confirm="handleDel(scope.row.id)"
                  >
                  <el-button slot="reference" type="danger">删除<i class="el-icon-remove-outline"></i></el-button>
                </el-popconfirm>



              </template>
            </el-table-column>

          </el-table>

          <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">

              <el-form label-width="70px" size="small" >
                <el-form-item label="用户名" >
                  <el-input v-model="form.username" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" >
                  <el-input v-model="form.nickname" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" >
                  <el-input v-model="form.email" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" >
                  <el-input v-model="form.phone" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" >
                  <el-input v-model="form.address" type="text" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer" >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
              </div>
            </el-dialog>


          </div>
        </el-main>
      </el-container>
    </el-container>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";

export default {
  name: 'Home',
  data(){

    return {

      tableData: [],
      total:0,
      pageNum:1,
      pageSize:2,
      username:"",
      nickname:"",
      email:"",
      address:"",
      dialogFormVisible:false,
      form:{},
      multipleSelection:[],
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      side_With:200,
      logoTextShow:true,
      headBg:'headBg'
    }
  },
     created() {
           this.load()
     },
  methods:{
       collapse(){//点击收缩按钮触发
         console.log('AAA');
        this.isCollapse=!this.isCollapse;
        if (this.isCollapse)
        {
          this.side_With=64
          this.collapseBtnClass='el-icon-s-unfold'
          this.logoTextShow=false
        }else {
          this.side_With=200
          this.collapseBtnClass='el-icon-s-fold'
          this.logoTextShow=true
        }
       },
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        this.load()
      },
      handleCurrentChange(pageNum){
        this.pageNum=pageNum
        this.load()
      },
      load(){
        //请求分页查询数据
        request.get("/user/page",{
          params:{
             pageNum:this.pageNum,
             pageSize:this.pageSize,
             username:this.username,
             email:this.email,
             address:this.address,
          }
            }).then(res=>
        {
          console.log(res)
          this.tableData=res.records
          this.total=res.total
        })

      },
      reset(){
             this.username="",
             this.email="",
             this.address="",
             this.load()
        },
      saveUser(){
        request.post("/user/",this.form).then(res=>{
          if(res){
            this.$message.success("保存成功"),
            this.dialogFormVisible=false,
            this.load()
          }else {
            this.$message.error("保存失败")
          }
        })
      },
      handleAdd(){
         this.dialogFormVisible=true;
         this.form={}
      },
      handleEdit(row){
         this.form=row,
         this.dialogFormVisible=true
      },
      handleDel(id){
         request.delete("/user/"+id).then(res=>{
           if(res){
             this.$message.success("删除成功"),
             this.load()
           }else {
             this.$message.error("删除失败")
           }
         })
      },
      delBatch(){
         let ids=this.multipleSelection.map(v=>v.id) //[{},{},{},{}]   ==>  1,2,3
        request.post("/user/del/batch",ids).then(res=>{
          if(res){
            this.$message.success("批量删除成功"),
                this.load()
          }else {
            this.$message.error("批量删除失败")
          }
        })
      },
      handleSelectionChange(val){
         console.log(val),
         this.multipleSelection=val
      }
     }
}
</script>
<style>
.headBg{
  background:lightblue!important
}
</style>

usercontroller

package com.yinming.sprintboot.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.yinming.sprintboot.entity.User;
import com.yinming.sprintboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> findAll()
    {
        List<User> all=userService.list();
        return all;
    }

    @PostMapping
    //@RequestBody User 将前台的jason对象转为java对象
    public boolean save(@RequestBody User user)
    {
        //新增或者更新都在这个里面
        return userService.saveUser(user);
    }
    @DeleteMapping("/{id}")
    public boolean delete(@PathVariable Integer id)
    {
        //新增或者更新都在这个里面
        return userService.removeById(id);
    }

    @PostMapping("/del/batch")
    public boolean deleteBatch(@RequestBody List<Integer> ids)
    {
        //新增或者更新都在这个里面
        return userService.removeBatchByIds(ids);
    }

    // 分页查询，mybatisPlus的方式
    @GetMapping("/page")
    public IPage<User> findPage(@RequestParam Integer pageNum,
                                       @RequestParam Integer pageSize,
                                       @RequestParam(defaultValue = "") String username,
                                       @RequestParam(defaultValue = "") String email,
                                       @RequestParam(defaultValue = "") String address
                                )
    {
        IPage<User> page=new Page<>(pageNum, pageSize);
        QueryWrapper<User> queryWrapper=new QueryWrapper<>();
        if(!"".equals(username)) {
            queryWrapper.like("username", username);
        }
        if(!"".equals(email)) {
            queryWrapper.like("email", email);
        }
        if(!"".equals(address)) {
        queryWrapper.like("address", address);
    }

        IPage<User> userPage=userService.page(page,queryWrapper);
        return userPage;

    }

}