网页增删改查
整体页面
增加
点击提交
诗人信息界面
删除
删除后
修改
修改后
代码
controller
packagecom.wust.controller;importcom.wust.pojo.Poet;importcom.wust.pojo.Result;importcom.wust.service.serviceImpl.PoetService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.*;@RestControllerpublicclassPoetController{@AutowiredprivatePoetService poetService;//查询@GetMapping("/poets")publicResultselect(){returnResult.success(poetService.selectData());}//新增@RequestMapping("/poet")publicResultinsert(@RequestBodyPoet poet){
poetService.insert(poet);returnResult.success();}//删除@DeleteMapping("/delete/{id}")publicResultdelete(@PathVariableInteger id){
poetService.delete(id);returnResult.success();}//修改 先查询,再修改@RequestMapping("/poets/{id}")publicResultgetById(@PathVariableInteger id){Poet poet = poetService.getById(id);returnResult.success(poet);}@PutMapping("/update")publicResultupdate(@RequestBodyPoet poet){
poetService.update(poet);returnResult.success();}}
mapper
packagecom.wust.mapper;importcom.wust.pojo.Poet;importorg.apache.ibatis.annotations.*;importjava.util.List;@MapperpublicinterfacePoetMapper{@Select("select p_id as id, name, gender, dynasty, title, style from poet")List<Poet>selectPoet();@Insert("insert into poet (name, gender, dynasty, title, style) "+"values (#{name},#{gender},#{dynasty},#{title},#{style})")voidinsert(Poet poet);@Delete("delete from poet where p_id=#{id}")voiddelete(Integer id);@Select("select p_id as id, name, gender, dynasty, title, style from poet where p_id=#{id}")PoetgetById(Integer id);@Update("update poet set "+"name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where p_id=#{id}")voidupdate(Poet poet);}
pojo
packagecom.wust.pojo;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@AllArgsConstructor@NoArgsConstructorpublicclassPoet{privateInteger id;//id(主键)privateString name;//姓名privateInteger gender;//性别privateString dynasty;//朝代privateString title;//头衔privateString style;//风格}
packagecom.wust.pojo;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@AllArgsConstructor@NoArgsConstructorpublicclassResult{Integer code;String msg;Object data;publicstaticResultsuccess(){returnnewResult(1,"success",null);}publicstaticResultsuccess(Object data){returnnewResult(1,"success",data);}publicstaticResulterror(String msg){returnnewResult(0,msg,null);}}
service
packagecom.wust.service.serviceImpl;importcom.wust.pojo.Poet;importjava.util.List;publicinterfacePoetService{List<Poet>selectData();voidinsert(Poet poet);voiddelete(Integer id);PoetgetById(Integer id);voidupdate(Poet poet);}
packagecom.wust.service;importcom.wust.mapper.PoetMapper;importcom.wust.pojo.Poet;importcom.wust.service.serviceImpl.PoetService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importjava.util.List;@ServicepublicclassPoetService1implementsPoetService{@AutowiredprivatePoetMapper poetMapper;publicList<Poet>selectData(){return poetMapper.selectPoet();}publicvoidinsert(Poet poet){
poetMapper.insert(poet);}publicvoiddelete(Integer id){
poetMapper.delete(id);}publicPoetgetById(Integer id){return poetMapper.getById(id);}publicvoidupdate(Poet poet){
poetMapper.update(poet);}}
html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>诗人信息</title></head><scriptsrc="./js/vue.js"></script><scriptsrc="./js/axios-0.18.0.js"></script><body><h1align="center">诗人信息列表展示</h1><divid="app"align="center"><tableborder="1"cellspacing="0"width="60%"><tr><th>序号</th><th>姓名</th><th>性别</th><th>朝代</th><th>头衔</th><th>风格</th><th>操作 <buttontype="button"@click="insertPoet()">添加</button></th></tr><tralign="center"v-for="poet in tableData"><td>{{poet.id}}</td><td>{{poet.name}}</td><td>{{poet.gender}}</td><td>{{poet.dynasty}}</td><td>{{poet.title}}</td><td>{{poet.style}}</td><tdclass="text-center"><!-- 删除操作:delete/id
修改操作:poets/id + update --><buttontype="button"@click="editPoet(poet.id)">修改</button><buttontype="button"@click="deletePoet(poet.id)">删除</button></td></tr></table></div></body><script>newVue({el:"#app",data(){return{tableData:[]}},methods:{// 删除操作deletePoet(id){// 弹出确认对话框if(confirm('确定要删除这个诗人的信息吗?')){// 如果用户点击了确定按钮,执行删除操作
axios.delete('delete/'+ id).then(res=>{if(res.data.code){alert('删除成功');this.loadData();}else{alert('删除失败');}});}},// 编辑操作editPoet(id){// 跳转到编辑页面并传递诗人ID
window.location.href ="poetview.html?id="+ id;},// 新增操作insertPoet(){// 跳转到新增页面上
window.location.href ="poetinsert.html";},// 实时数据更新loadData(){
axios.get('poets').then(res=>{this.tableData = res.data.data;// 遍历tableData数组,处理性别字段for(let poet ofthis.tableData){if(poet.gender ===1){
poet.gender ="男";}elseif(poet.gender ===2){
poet.gender ="女";}else{
poet.gender ="不明确";}}});}},mounted(){this.loadData();}});</script></html>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>新增诗人信息</title></head><scriptsrc="./js/vue.js"></script><scriptsrc="./js/axios-0.18.0.js"></script><body><h1align="center">新增诗人信息</h1><divid="insertApp"align="center"><form><labelfor="name">姓名:</label><inputtype="text"id="name"v-model="newForm.name"><br><br><labelfor="gender">性别:</label><inputtype="radio"id="male"value="1"v-model="newForm.gender"> 男
<inputtype="radio"id="female"value="2"v-model="newForm.gender"> 女
<br><br><labelfor="dynasty">朝代:</label><inputtype="text"id="dynasty"v-model="newForm.dynasty"><br><br><labelfor="title">头衔:</label><inputtype="text"id="title"v-model="newForm.title"><br><br><labelfor="style">风格:</label><inputtype="text"id="style"v-model="newForm.style"><br><br><buttontype="button"@click.prevent="insertPoet">提交</button></form></div></body><script>newVue({el:"#insertApp",data(){return{newForm:{name:"",gender:"",dynasty:"",title:"",style:""}}},methods:{insertPoet(){// 数据上传
axios.post('/poet',this.newForm).then(res=>{if(res.data.code){alert('数据添加成功');// 添加成功后跳转到诗人信息列表页面
window.location.href ="poet.html";}else{alert('添加失败');}});}}});</script></html>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>编辑诗人信息</title></head><scriptsrc="./js/vue.js"></script><scriptsrc="./js/axios-0.18.0.js"></script><body><h1align="center">编辑诗人信息</h1><divid="editApp"align="center"><form><labelfor="name">姓名:</label><inputtype="text"id="name"v-model="editForm.name"><br><br><labelfor="gender">性别:</label><inputtype="radio"id="male"value="1"v-model="editForm.gender"> 男
<inputtype="radio"id="female"value="2"v-model="editForm.gender"> 女
<br><br><labelfor="dynasty">朝代:</label><inputtype="text"id="dynasty"v-model="editForm.dynasty"><br><br><labelfor="title">头衔:</label><inputtype="text"id="title"v-model="editForm.title"><br><br><labelfor="style">风格:</label><inputtype="text"id="style"v-model="editForm.style"><br><br><buttontype="button"@click.prevent="updatePoet">提交</button></form></div></body><script>newVue({el:"#editApp",data(){return{editForm:{id:"",name:"",gender:"",dynasty:"",title:"",style:""}}},methods:{updatePoet(){// 数据上传
axios.put('update',this.editForm).then(res=>{if(res.data.code){alert('数据修改成功');// 修改成功后跳转到诗人信息列表页面
window.location.href ="poet.html";}else{alert('修改失败');}});},// 根据诗人ID获取当前信息getPoetInfo(id){
axios.get('poets/'+ id).then(res=>{if(res.data.code){this.editForm = res.data.data;}else{alert('获取诗人信息失败');}});}},mounted(){var poetId = window.location.search.split('=')[1];this.getPoetInfo(poetId);},});</script></html>
本文转载自: https://blog.csdn.net/laen4102/article/details/139014460
版权归原作者 Dlaen 所有, 如有侵权,请联系我们删除。
版权归原作者 Dlaen 所有, 如有侵权,请联系我们删除。