Vue 整合 Axios
文章目錄
- Vue 整合 Axios
- 一、需求說明
- 二、資料庫
- 三、前端
- 四、後端
-
- 1.StudentTableService.java
- 2.StudentTableController.java
- 五、測試
-
- 1.新增
- 2.修改
- 3.删除
提示:本篇基于【小項目】Axios 實作前後端互動
一、需求說明
- 使用者發起請求 http://localhost:8080/vue/findAll,擷取所有的 student 資料
- 通過 Vue.js 在頁面中以表格的形式展現
- 為每行資料添加修改、删除的按鈕
- 在一個新的 div 中,編輯 3 個文本框 name/age/sex 通過送出按鈕實作新增
- 如果使用者點選修改按鈕,則在使用者修改的 div 中回顯資料
- 使用者修改完成後,通過送出按鈕實作資料的修改
- 當使用者點選删除按鈕時,要求實作資料的删除
二、資料庫
把 student 表清空即可
三、前端
檔案名:StudentTable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生清單</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div align="center">
<h3>學生新增</h3>
姓名:<input type="text" v-model="addStu.name">
郵箱:<input type="text" v-model="addStu.email">
年齡:<input type="text" v-model="addStu.age">
<button @click="addStuBtn">新增</button>
</div>
<div align="center">
<h3>學生修改</h3>
<p>
編号:<input type="text" v-model="updateStu.id" disabled>
姓名:<input type="text" v-model="updateStu.name">
</p>
<p>
郵箱:<input type="text" v-model="updateStu.email">
年齡:<input type="text" v-model="updateStu.age">
</p>
<button @click="submitBtn">送出修改</button>
</div>
<table align="center" border="1px" width="80%" style="margin-top: 10px">
<tr align="center">
<th colspan="5"><h3>學生清單</h3></th>
</tr>
<tr>
<th>編号</th>
<th>姓名</th>
<th>郵箱</th>
<th>年齡</th>
<th>操作</th>
</tr>
<tr v-cloak v-for="student in studentList" align="center">
<th v-text="student.id"></th>
<th v-text="student.name"></th>
<th v-text="student.email"></th>
<th v-text="student.age"></th>
<th width="20%">
<button @click="updateStuBtn(student)">修改</button>
<button @click="deleteStuBtn(student)">删除</button>
</th>
</tr>
</table>
</div>
</body>
</html>
<script>
axios.defaults.baseURL = "http://localhost:8080/Vue"
const app = new Vue({
el:"#app",
data:{
studentList : [],
addStu : {
name : '',
email : '',
age : ''
},
updateStu : {
id : '',
name : '',
email : '',
age : ''
}
},
methods:{
getStuList(){
axios.get("/findAll").then(promise => {
this.studentList = promise.data
})
},
addStuBtn(){
axios.post("/addStu", this.addStu).then(promise => {
alert(promise.data)
this.getStuList()
this.addStu = {}
})
},
deleteStuBtn(student){
axios.delete("/deleteStu?id=" + student.id).then(promise => {
this.getStuList()
alert(promise.data)
})
},
updateStuBtn(student){
this.updateStu = JSON.parse(JSON.stringify(student))
},
submitBtn(){
axios.put("/updateStu", this.updateStu).then(promise => {
alert(promise.data)
this.updateStu = {}
this.getStuList()
})
}
},
created(){
this.getStuList()
}
})
</script>
四、後端
1.StudentTableService.java
package com.sisyphus.studentssm.service;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.service.IService;
import com.sisyphus.studentssm.mapper.StudentMapper;
import com.sisyphus.studentssm.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Collection;
import java.util.List;
import java.util.Map;
import java.util.function.Function;
/**
* @Description: $
* @Param: $
* @return: $
* @Author: Sisyphus
* @Date: $
*/
@Service
public class StudentTableService implements IService<Student> {
@Autowired
private StudentMapper studentMapper;
public List<Student> findAll(){
QueryWrapper<Student> queryWrapper = new QueryWrapper<>();
queryWrapper
.select("id","name","email","age");
return studentMapper.selectList(queryWrapper);
}
public void addStu(Student student){
studentMapper.insert(student);
}
public void deleteStu(Integer whereId){
studentMapper.deleteById(whereId);
}
public void updateStu(Student student){
UpdateWrapper<Student> updateWrapper = new UpdateWrapper<>();
updateWrapper
.eq(true, "id", student.getId())
.set(true, "name",student.getName())
.set(true, "email",student.getEmail())
.set(true, "age",student.getAge());
studentMapper.update(student, updateWrapper);
}
@Override
public boolean saveBatch(Collection<Student> entityList, int batchSize) {
return false;
}
@Override
public boolean saveOrUpdateBatch(Collection<Student> entityList, int batchSize) {
return false;
}
@Override
public boolean updateBatchById(Collection<Student> entityList, int batchSize) {
return false;
}
@Override
public boolean saveOrUpdate(Student entity) {
return false;
}
@Override
public Student getOne(Wrapper<Student> queryWrapper, boolean throwEx) {
return null;
}
@Override
public Map<String, Object> getMap(Wrapper<Student> queryWrapper) {
return null;
}
@Override
public <V> V getObj(Wrapper<Student> queryWrapper, Function<? super Object, V> mapper) {
return null;
}
@Override
public BaseMapper<Student> getBaseMapper() {
return null;
}
@Override
public Class<Student> getEntityClass() {
return null;
}
}
2.StudentTableController.java
package com.sisyphus.studentssm.controller;
import com.sisyphus.studentssm.pojo.Student;
import com.sisyphus.studentssm.service.StudentTableService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* @Description: $
* @Param: $
* @return: $
* @Author: Sisyphus
* @Date: $
*/
@RestController
@RequestMapping("Vue")
@CrossOrigin
public class StudentTableController {
@Autowired
private StudentTableService studentTableService;
@GetMapping("findAll")
public List<Student> findAll(){
return studentTableService.findAll();
}
@PostMapping("addStu")
public String addStu(@RequestBody Student student){
studentTableService.addStu(student);
return "新增成功";
}
@DeleteMapping("deleteStu")
public String deleteStu(@RequestParam("id") Integer whereId){
studentTableService.deleteStu(whereId);
return "删除成功";
}
@PutMapping("updateStu")
public String updateStu(@RequestBody Student student){
studentTableService.updateStu(student);
return "修改成功";
}
}