毕业设计记录集:Day3

姐姐结婚，拉下两天，开始更新。

1.下载axios

cd vue
npm i axios -S

2.封装

新建一个request.jswe没空啊么，这里使用lelement plus框架

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

const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 50000  // 后台接口超时时间
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
request.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8';
  return config
}, error => {
  return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
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

axios最重要的功能  拦截器

1. 请求拦截器：在请求被发送之前处理请求配置

   axios.interceptors.request.use(
     function (config) {
       // 在发送请求之前做些什么
       return config;
     },
     function (error) {
       // 对请求错误做些什么
       return Promise.reject(error);
     }
   );

2. 响应拦截器：在响应到达 then/catch 之前处理响应数据

   axios.interceptors.response.use(
     function (response) {
       // 对响应数据做点什么
       return response;
     },
     function (error) {
       // 对响应错误做点什么
       return Promise.reject(error);
     }
   );

 然后请求一下，看页面是有获取的数据的

request.get('/admin/selectAll').then(res => {
  if (res.code === '200') {
    console.log(res)
  } else {
    ElMessage.error(res.msg)
  }
})

3.分页查询

在 pom.xml 里添加依赖PageHelper

    com.github.pagehelper
    pagehelper-spring-boot-starter
    1.4.6
    
        
            org.mybatis
            mybatis
        
    

 total：数据库表所有数据总的个数

list: 返回的数据数组

pageSizer: 每页的数据个数

OK，知道要做什么，我们先去element-plus上面找到自己要的组件

这个是带有斑马纹的组件，我看着感觉比较好看，比较符合个人简约一点的审美，所以用这个。
根据自己的数据库里的名称，改一下这里的prop和label，要符合真实逻辑。
然后添加查询方法

const load = () => {
  request.get('/admin/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      username: data.username,
      name: data.name
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()

 在controller层中

    public PageInfo selectPage(Integer pageNum, Integer pageSize, Admin admin) {
        // 开启分页查询
        PageHelper.startPage(pageNum, pageSize);
        List list = adminMapper.selectAll(admin);
        return PageInfo.of(list);
    }

在 Mapper.xml中

 
      select * from `admin`
      
          username like concat('%', #{username}, '%')
          and name like concat('%', #{name}, '%')  
      
      order by id desc
  

自己加一个页脚，也是element-plus
然后control加方法

 @GetMapping("/selectPage")
    public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,
                             @RequestParam(defaultValue = "10") Integer pageSize,
                             Admin admin) {
        PageInfo pageInfo = adminService.selectPage(pageNum, pageSize, admin);
        return Result.success(pageInfo);  // 返回的是分页的对象
    }

4.新增

先来一个小弹窗（element-plus随便选一个）

那我们自己修改一下试试看

在const data = reactive({rules})里 

rules: {
    username: [
      { required: true, message: '请填写账号', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请填写名称', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请填写手机', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请填写邮箱', trigger: 'blur' }
    ]
  },

如果不加这个，你就你只添加空白的，你懂我意思吧，能一直加，但是一直空白。

const add = () => {
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.post('/admin/add', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false
          ElMessage.success('新增成功')
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

Controller层

   @PostMapping("/add")
    public Result add(@RequestBody Admin admin) {  // @RequestBody 接收前端传来的 json参数
        adminService.add(admin);
        return Result.success();
    }

Service

    public void add(Admin admin) {
        // 根据新的账号查询数据库  是否存在同样账号的数据
        Admin dbAdmin = adminMapper.selectByUsername(admin.getUsername());
        if (dbAdmin != null) {
            throw new CustomerException("账号重复");
        }
        // 默认密码
        if (StrUtil.isBlank(admin.getPassword())) {
            admin.setPassword("hechen123");
        }
        adminMapper.insert(admin);
    }

中间有个mapper自己加一下就好了。

Mapper.xml

    
        insert into `admin` (username, password, name, phone, email)
        values(#{username}, #{password}, #{name}, #{phone}, #{email})
    

5.修改 

和正常的增加差不多就行，要改的就是先用row读取每行数据就行
updata的方法

const update = () => {
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.put('/admin/update', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false
          ElMessage.success('修改成功')
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

 但是但是但是，你在表单里，改一下就会有数据变化，那该怎么办呢
答案：

深度拷贝

const handleEdit = (row) => {
  data.form = JSON.parse(JSON.stringify(row))  // 深度拷贝数据
  data.formVisible = true
}

Controller(这里是put，上面是post，如果不改那就是405)

  @PutMapping("/update")
    public Result update(@RequestBody Admin admin) {  // @RequestBody 接收前端传来的 json参数
        adminService.update(admin);
        return Result.success();
    }

Xml

        update `admin` set username = #{username}, password = #{password}, name = #{name}, phone = #{phone}, email = #{email}
        where id = #{id}

 6.删除

单个删除

const del = (id) => {
  ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/admin/delete/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success('删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

 全删除

const handleSelectionChange = (rows) => {  // rows 就是实际选择的数组
  data.rows = rows
}

const deleteBatch = () => {
  if (data.rows.length === 0) {
    ElMessage.warning('请选择数据')
    return
  }
  ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/admin/deleteBatch', { data: data.rows }).then(res => {
      if (res.code === '200') {
        ElMessage.success('批量删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

 这里要去element-plus里面找个table的属性，很久之前写的，应该是这个

@selection-change="handleSelectionChange"

---

 然后我自己运行的时候有个BUG，困惑了两分钟，给大家看一下，大家也注意一下。

这里 是路由错了，后面多了一个斜杠，但是下面那个方法要有斜杠，我没查看后端的接口是什么定义的，那时候真的懒了，现在能跑，我也没看了。规范性还是没有做好。