企业官网建设流程全解析

表格的呈现

关于数据的增删改内容：

controller部分：

package com.example.qianduanproject.controller; import org.springframework.web.bind.annotation.RestController; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.example.qianduanproject.pojo.bandPlayers; import com.example.qianduanproject.pojo.result; import com.example.qianduanproject.service.bandService; import org.springframework.web.bind.annotation.RequestMethod; @RestController public class bandController { @Autowired private bandService bandService; @RequestMapping("/playerFindAllJson") public result findAllJson() { return result.success(bandService.getAllBands()); } @RequestMapping( "/playerFindAll") public List<bandPlayers> findAll() { return bandService.getAllBands(); } @RequestMapping("/deleteById") public result deleteById(@RequestParam("id") int id) { bandService.deleteById(id); return result.success(); } @RequestMapping("/addPlayer") public result addPlayer(@RequestBody bandPlayers player) { bandService.addPlayer(player); return result.success(); } @RequestMapping("/updatePlayer") public result updatePlayer(@RequestBody bandPlayers player) { bandService.updatePlayer(player); return result.success(); } }

mapper部分:

package com.example.qianduanproject.mapper; import java.util.List; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import com.example.qianduanproject.pojo.bandPlayers; @Mapper public interface bandMapper { @Select("select * from mygo_characters") List<bandPlayers> getAllBands(); @Delete("delete from mygo_characters where id = #{id}") void deleteById(int id); @Update("update mygo_characters set name = #{name}, band = #{band}, gender = #{gender}, position = #{position}, style = #{style} where id = #{id}") void updateBand(bandPlayers band); @Insert("insert into mygo_characters (name,gender,band,position,style) values (#{name}, #{gender}, #{band}, #{position}, #{style})") void addPlayer(bandPlayers player); }

service部分：

package com.example.qianduanproject.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.example.qianduanproject.pojo.bandPlayers; import com.example.qianduanproject.service.bandService; import com.example.qianduanproject.mapper.bandMapper; @Service public class bandServiceImpl implements bandService { @Autowired private bandMapper bandMapper; @Override public List<bandPlayers> getAllBands() { return bandMapper.getAllBands(); } @Override public void deleteById(int id) { bandMapper.deleteById(id); } @Override public void addPlayer(bandPlayers player) { bandMapper.addPlayer(player); } @Override public void updatePlayer(bandPlayers player) { bandMapper.updateBand(player); } }

vue部分：

<script> new Vue({ el: "#app", data: { tableData: [], addraw: false, newPlayer: { name: '', gender: '', band: '', position: '', style: '' }, editingid: null, editingPlayer: { name: '', gender: '', band: '', position: '', style: '' } }, mounted: function () { this.findAll(); }, methods: { findAll: function () { var _this = this; axios.get('/playerFindAll') .then(function (response) { _this.tableData = response.data; }) .catch(function (error) { console.error('加载失败', error); alert('数据加载失败，请重试'); }); }, addPlayer: function () { this.newPlayer = { name: '', gender: '', band: '', position: '', style: '' }; this.addraw = true; }, saveNewPlayer: function () { var _this = this; if (!this.newPlayer.name || !this.newPlayer.gender || !this.newPlayer.band || !this.newPlayer.position || !this.newPlayer.style) { alert('请完整填写所有字段！'); return; } axios.post('/addPlayer', this.newPlayer) .then(function (response) { alert('添加成功'); _this.addraw = false; _this.findAll(); }) .catch(function (error) { console.error('添加失败', error); alert('添加失败，请重试'); }); }, cancelAdd: function () { this.addraw = false; }, editPlayer: function (player) { this.editingPlayer={ name: player.name, gender: player.gender, band: player.band, position: player.position, style: player.style } this.editingid = player.id; }, savePlayer: function () { var _this = this; if (!this.editingPlayer.name || !this.editingPlayer.gender || !this.editingPlayer.band || !this.editingPlayer.position || !this.editingPlayer.style) { alert('请完整填写所有字段！'); return; } axios.post('/updatePlayer', { id: this.editingid, name: this.editingPlayer.name, gender: this.editingPlayer.gender, band: this.editingPlayer.band, position: this.editingPlayer.position, style: this.editingPlayer.style }) .then(function (response) { alert('更新成功'); _this.editingid = null; _this.findAll(); }) .catch(function (error) { console.error('更新失败', error); alert('更新失败，请重试'); }); }, cancelEdit: function () { this.editingid = null; }, deletePlayer: function (id) { var _this = this; if (window.confirm('确定要删除该条数据吗？？？')) { axios.post('/deleteById?id=' + id) .then(function (response) { alert('删除成功'); _this.findAll(); }) .catch(function (error) { console.error('删除失败', error); alert('删除失败，请重试'); }); } } } }); </script>