1、明确课程设计的小组题目，并认领功能模块（课程设计中要求个人独立完成该模块的前后端所有功能的开发）。请具体说明。
我的小组长是 刘陈枝 ，我们组课程设计的题目是： 宠物救助管理系统 ，我认领的功能模块是： 领养管理
2.作业如下：
PeomController:
package com.example.controller;
import com.example.pojo.Result;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/pe")
@CrossOrigin//因为是Vue,跨域问题，需要跨域
public class PeomController {
//全部注释掉，因为PeomService 没有被注入，不是service组件了。不注释掉会报错
@Autowired
PeomService peomService;
@GetMapping("/peom")
public Result findAll(){
return Result.success(peomService.list());
}
}PeomFenyeController
package com.example.controller;
import com.example.pojo.PageBean;
import com.example.pojo.Result;
import com.example.service.PeomFenyeService;
import com.example.pojo.Peom;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/peomFen")
@CrossOrigin
public class PeomFenyeController {
@Autowired
PeomFenyeService peomFenyeService;
@GetMapping("/peoms")
public Result findAllJson1() {
return Result.success(peomFenyeService.list());
}
//-------按id进行删除-------
@DeleteMapping("/peoms/{id}")
public void deletepeom(@PathVariable("id") Integer id) {
peomFenyeService.deletePeom(id);
}
// -------按id进行查询-------
@GetMapping("/peoms/{id}")
public Result peomfindById(@PathVariable("id") Integer id) {
return Result.success(peomFenyeService.peomfindById(id));
}
//-----更新-------
@PutMapping("/peoms")
public Result updatePeom(@RequestBody Peom peom) {
boolean r = peomFenyeService.updatePeom(peom);
if (r) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("更新失败");
}
}
//-------插入-------
@PostMapping("/peoms")
public Result insertUser(@RequestBody Peom peom) {
boolean result = peomFenyeService.insertUser(peom);
if (result) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("添加失败");
}
}
@GetMapping("/peom/{page}/{pageSize}")
public Result findAll_chaxun(@PathVariable Integer page,
@PathVariable Integer pageSize,
String author,
String style){
PageBean pageBean = peomFenyeService.list_chaxun(page,pageSize,author,style);
return Result.success(pageBean);
}
}PeomMapper:
package com.example.mapper;
import com.example.pojo.Peom;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface PeomMapper {
//查询所有
@Select("select * from peom")
public List<Peom> list();
//带条件的查询
@Select("select * from peom where author like concat('%',#{author},'%') and style like concat('%',#{style},'%')")
public List<Peom> list_chaxun(@Param("author") String author, @Param("style") String style);
@Delete("delete from peom where id=#{id}")
public int deletePeom(Integer id);
@Select("select * from peom where id=#{id}")
public Peom peomfindById(Integer ID);
@Update("update peom set author=#{author},gender=#{gender},dynasty=#{dynasty},title=#{title} ,style=#{style} where id=#{id} ")
public boolean updatePeom(Peom peom);
@Insert("insert into peom(author, gender, dynasty, title, style) values (#{author}, #{gender}, #{dynasty}, #{title}, #{style})")
public int insert(Peom peom);
}PageBean:
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
/**
* 分页查询结果封装类
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {
private Long total;//总记录数
private List rows;//数据列表
}
Peom:
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Peom {
private Integer id;
private String author;
private String gender;
private String dynasty;
private String title;
private String style;
}Result:
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
private Integer code;//响应码，1 代表成功; 0 代表失败
private String msg; //响应信息 描述字符串
private Object data; //返回的数据
public static Result success(PageBean pageBean){
return new Result(1,"success",pageBean);
}
public static Result success(){
return new Result(1,"success",null);
}
public static Result success(Object data){
return new Result(1,"success",data);
}
public static Result error(String str){
return new Result(1,str,null);
}
}PeomServiceB:
package com.example.service.impl;
import com.example.mapper.PeomMapper;
import com.example.pojo.PageBean;
import com.example.pojo.Peom;
import com.example.service.PeomFenyeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import java.util.List;
// 分页查询
@Service
public class PeomServiceB implements PeomFenyeService {
@Autowired
private PeomMapper peomMapper;
@Override
public List<Peom> list() {
return peomMapper.list();
}
@Override
public int deletePeom(Integer id) {
return peomMapper.deletePeom(id);
}
@Override
public Peom peomfindById(Integer id) {
return peomMapper.peomfindById(id);
}
@Override
public boolean updatePeom(Peom peom) {
return peomMapper.updatePeom(peom);
}
@Override
public boolean insertUser(Peom peom) {
int result = peomMapper.insert(peom);
return result == 1;
}
@Override
public PageBean list_chaxun(Integer page,Integer pageSize,String author,String style) {
if(!StringUtils.hasLength(author)){
author = "";
}
if(!StringUtils.hasLength(style)){
style = "";
}
// 设置分页参数
PageHelper.startPage(page, pageSize);
// 执行分页查询
List<Peom> peomList = peomMapper.list_chaxun(author,style);
// System.out.println(peomList);
// 获取分页结果
PageInfo<Peom> p = new PageInfo<>(peomList);
//封装PageBean
PageBean pageBean = new PageBean(p.getTotal(), p.getList());
return pageBean;
}
}PeomServiceImpl:
package com.example.service.impl;
import com.example.mapper.PeomMapper;
import com.example.pojo.PageBean;
import com.example.pojo.Peom;
import com.example.service.PeomService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
//全部查询，不分页
@Service
public class PeomServiceImpl implements PeomService {
@Autowired
private PeomMapper peomMapper;
@Override
public PageBean list_chaxun(Integer page, Integer pageSize, String author, String style) {
return null;
}
@Override
public List<Peom> list() {
return peomMapper.list();
}
}PeomFenyeService:
package com.example.service;
import com.example.pojo.PageBean;
import com.example.pojo.Peom;
import java.util.List;
public interface PeomFenyeService {
List<Peom> list();
public PageBean list_chaxun(Integer page, Integer pageSize,String author,String style);
public int deletePeom(Integer id);
public Peom peomfindById(Integer id);
public boolean updatePeom(Peom peom);
public boolean insertUser(Peom peom);
}PeomService:
package com.example.service;
import com.example.pojo.PageBean;
import com.example.pojo.Peom;
import java.util.List;
public interface PeomService {
public PageBean list_chaxun(Integer page, Integer pageSize,String author,String style);
List<Peom> list();
}index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询出所有</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app">
<h1 align="center">诗人信息</h1>
<el-table
:data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="author">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 10,
total: 100,
tableData: []
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`当前页: ${val}`);
},
findAll() {
var url = `/pe/peom`
axios.get(url)
.then(res =>{
this.tableData = res.data.data;
console.log(tableData);
})
.catch(error=>{
console.error(error);
})
}
},
created(){
this.findAll();
}
})
</script>
</body>
</html>index4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询出所有并分页控件显示</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">
<div id="app" style="width: 80%;align:center">
<h1 align="center">诗人信息</h1>
<el-table
:data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;align:center;font-size: 20px">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="author">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 4,
total: null,
tableData: []
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.findAll();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.findAll();
console.log(`当前页: ${val}`);
},
findAll() {
var url = `/peomFen/peom/${this.currentPage}/${this.pageSize}`
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
}
},
created(){
this.findAll();
}
})
</script>
</body>
</html>index5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询出所有并分页控件显示</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">
<div id="app" style="width: 80%;align:center">
<h1 align="center">诗人信息</h1>
<p align="center">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.author" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="风格">
<el-input v-model="formInline.style" placeholder="风格"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</p>
<el-table
:data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;align:center;font-size: 20px">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="author">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 4,
total: null,
tableData: [],
formInline: {
author: '',
style: ''
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.findAll();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.findAll();
console.log(`当前页: ${val}`);
},
onSubmit() {
var url = `/peomFen/peom/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`
console.log(this.formInline.author);
console.log(this.formInline.style);
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
findAll() {
var url = `/peomFen/peom/${this.currentPage}/${this.pageSize}`
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
}
},
created(){
this.findAll();
}peom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app">
<h1 align="center">诗人信息</h1>
<el-table
:data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="author">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete" circle
@click="handleDelete(scope.$index, scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 10,
total: 100,
tableData: [ {"id":1,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
{"id":2,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
{"id":3,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
{"id":4,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
{"id":5,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
{"id":6,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
{"id":7,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
{"id":8,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
{"id":9,"author":"libai","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"}
]
},
methods: {
handleEdit(index, row) {
console.log(peom, row);
},
handleDelete(index, row) {
console.log(peom, row);
},
handleSizeChange(val) {
this.pageSize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`当前页: ${val}`);
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
}
})
</script>
</body>
</html>peot_listAll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询出所有并分页控件显示</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">
<div id="app" style="width: 80%;align:center">
<h1 align="center">诗人信息</h1>
<p align="center">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.author" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="风格">
<el-input v-model="formInline.style" placeholder="风格"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<a href="peot_insert.html">
<el-button type="success">新增</el-button></a>
</el-form-item>
</el-form>
</p>
<el-table
:data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;align:center;font-size: 20px">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="author">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
label="操作"
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<div style="display: flex;justify-content: center;">
<a :href="'peot_edit.html?id=' + scope.row.id" target="_blank">
<el-button
size="mini"round
type="primary"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)">修改</el-button>
</a>
<!-- 删除按钮的代码，通常不会放在<a>标签内，而是直接绑定@click事件-->
<a :href="'peot_delete2.html?id=' + scope.row.id" target="_blank">
<el-button
size="mini"round
type="danger"
icon="el-icon-delete"
@click="deleteId_restful(scope.row.id)">删除</el-button>
</a>
</div>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 4,
total: null,
tableData: [],
formInline: {
author: '',
style: ''
},
index:''
},
methods: {
handleEdit(row){
window.location.href="peot_edit.html?id="+row.id;
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.findAll();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.findAll();
console.log(`当前页: ${val}`);
},
onSubmit() {
var url = `peomFen/peom/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`
console.log(this.formInline.author);
console.log(this.formInline.style);
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
findAll() {
var url = `peomFen/peom/${this.currentPage}/${this.pageSize}`
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
// 采用restful模式，url来传递。
deleteId_restful:function (id) {
var _thisd = this;
if (window.confirm("确定要删除该条数据吗？？？")){
//${this.id}
var url = `peomFen/peom/${id}` //注意这里是反引号
// 当您想要引用当前对象或类的实例的 id 属性时，使用 this.id。
//当您想要引用一个名为 id 的变量（无论它是在函数外部定义的，还是作为参数传递的），使用 id。
axios.delete(url)
.then(function (response) {
alert("删除成功")
_thisd.findAll();
})
.catch(function (error) {
console.log(error);
});
}
}
},
created(){
this.findAll();
this.id=location.herf.split("?id=")[1]
},
mounted(){
axios.get('/peomFen/peom/').then(res=>{
if(res.data.code==1){
this.tableData = res.data.data;
}
}).catch(r=>{
console.error(r);
});
}
})
</script>
</body>
</html>
实现页面效果如下：
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
