一、小组设计
我的小组长是 胡旭明 ,我们组课程设计的题目是: 健身房管理系统 ,我认领的功能模块是: 器材管理
二、器材管理模块
1、创建数据表
create table course
(
id int ,
cno char(8) primary key,
cname varchar(20) null,
ctype varchar(20) null
);
create table equip
(
id int ,
eno char(8) comment '器材号'
primary key,
ename varchar(20) null,
cno char(8) null,
constraint ecno
foreign key (cno) references course (cno)
on update cascade on delete set null
);
create table teacher
(
id int ,
tno char(8) not null
primary key,
tname varchar(20) null,
tsex varchar(2) null,
tsalary varchar(20) null,
cno char(8) null,
constraint tcno
foreign key (cno) references course (cno)
on update cascade on delete set null
);
create table vip
(
id int ,
vno char(8) not null
primary key,
vname varchar(20) null,
vsex varchar(2) null,
vage varchar(2) null,
cno char(8) null,
constraint vcno
foreign key (cno) references course (cno)
on update cascade on delete set null
);
[点击并拖拽以移动]
2、mapper
package com.example.mapper;
import com.example.pojo.Equip;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface EquipMapper {
@Select("select * from equip")
public List<Equip> findAll() ;
@Delete("delete from equip where id=#{id}")
public int deleteEquip(Integer id);
@Select("select * from equip where id=#{id}")
public Equip equipfindByID(Integer id);
@Update("update equip set eno=#{eno} ,ename=#{ename},cno=#{cno} where id=#{id}")
public boolean updateEquip(Equip equip);
@Insert("insert into equip(id,eno,ename,cno) values (#{id},#{eno},#{ename}, #{cno})")
public int insert(Equip equip);
}
3、service
package com.example.service;
import com.example.mapper.EquipMapper;
import com.example.pojo.Equip;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
public interface EquipService {
public List<Equip> findAll();
public int deleteEquip(Integer id);
public Equip equipfindByID(Integer id);
public boolean updateEquip(Equip equip);
public boolean insertEquip(Equip equip);
}
package com.example.service.impl;
import com.example.mapper.EquipMapper;
import com.example.pojo.Equip;
import com.example.service.EquipService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class EquipServiceImpl implements EquipService {
@Autowired
private EquipMapper equipMapper;
@Override
public List<Equip> findAll(){
return equipMapper.findAll();
}
@Override
public int deleteEquip(Integer id){
return equipMapper.deleteEquip(id);
}
@Override
public Equip equipfindByID(Integer id) {
return equipMapper.equipfindByID(id);
}
@Override
public boolean updateEquip(Equip equip) {
return equipMapper.updateEquip(equip);
}
@Override
public boolean insertEquip(Equip equip) {
int result = equipMapper.insert(equip);
return result==1;
}
}
4、controller
package com.example.controller;
import com.example.pojo.Equip;
import com.example.pojo.Result;
import com.example.service.EquipService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class EquipController {
@Autowired
private EquipService equipService;
@RequestMapping("/findAll")
public List<Equip> findAll(){
return equipService.findAll();
}
@RequestMapping("/findAllJson")
public Result findAllJson(){
return Result.success(equipService.findAll());
}
@RequestMapping("/deleteEquip")
public void deleteEquip(Integer id){
equipService.deleteEquip(id);
}
@RequestMapping("/equipfindByEID/{id}")
public Result equipfindByID(@PathVariable("id") Integer id){
return Result.success(equipService.equipfindByID(id));
}
@RequestMapping("/equipupdate")
public Result updateEquip(@RequestBody Equip equip){
boolean r = equipService.updateEquip(equip);
if(r) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("更新失败");
}
}
@RequestMapping("/equipinsert")
public Result insertEquip(@RequestBody Equip equip){
boolean result =equipService.insertEquip(equip);
if(result) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("添加失败");
}
}
}
5、equip_edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>id</td>
<td><input type="text" v-model="equip.id"> </td>
</tr>
<tr>
<td>器械号</td>
<td><input type="text" v-model="equip.eno"> </td>
</tr>
<tr>
<td>器材名称</td>
<td><input type="text" v-model="equip.ename"> </td>
</tr>
<tr>
<td>课程号</td>
<td><input type="text" v-model="equip.cno"> </td>
</tr>
<tr>
<td></td>
<td><input type="button" @click="updateEquip" value="更新"> </td>
</tr>
</table>
{{equip}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
equip: {}, //详情
},
methods: {
selectByID() {
//${this.id}
var url = `equipfindByID/${this.id}` //注意这里是反引号
//反引号(backticks,也称为模板字符串或模板字面量)是ES6(ECMAScript 2015)中引入的一种新字符串字面量功能,
// 它允许您在字符串中嵌入表达式。反引号用`(键盘上通常位于Tab键上方)来界定字符串的开始和结束。
axios.get(url)
.then(response => {
var baseResult = response.data
if(baseResult.code == 1) {
this.equip = baseResult.data
}
})
.catch( error => {})
},
updateEquip() {
var url = 'equipupdate'
axios.put(url,this.equip)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'equip_findall.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
},
},
/* created() {
// 获得参数id值
this.id = location.href.split("?id=")[1]
// 通过id查询详情
this.selectByID()
},*/
})
</script>
</html>
6、equip_findall
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>equipment</title>
<link rel="stylesheet" href="js/element.css">
<!-- 引入组件库 -->
<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>
</head>
<body>
<h1 align="center">器材表</h1>
<div id="app" align="center">
<a href="equip_insert.html" style="align-content: center">新增</a>
<table border="1" style="width: 100%">
<tr>
<th>id</th>
<th>器材号</th>
<th>器材名称</th>
<th>课程号</th>
<th><el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</th>
</tr>
<tr v-for="equip in equipList">
<td>{{equip.id}}</td>
<td>{{equip.eno}}</td>
<td>{{equip.ename}}</td>
<td>{{equip.cno}}</td>
<td>
<button type="button" @click="deleteID(equip.id)" >删除</button>
<a :href="'equip_edit.html?id='+equip.id">修改</a>
</td>
</tr>
</table>
<p align="center">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[2, 3, 4, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
search: '',
pageSize: 10,
currentPage4: 1,
equipList: []
}
},
//钩子更新equipList的数据
mounted(){
axios.get('/findAllJson').then(res=>{
if(res.data.code){
this.equipList = res.data.data;
}
}
)},
methods:{
handleSizeChange(val) {
this.pageSize = val
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage4 = val
console.log(`当前页: ${val}`);
},
findAll:function () {
var _this = this;
axios.post('/findAllJson', {
})
.then(function (response) {
_this.equipList = response.data.data;//响应数据给tableData赋值
})
.catch(function (error) {
console.log(error);
});
},
deleteID:function (id) {
var _this = this;
if (window.confirm("确定要删除该条数据吗???")){
axios.post('/deleteEquip?id='+id)
.then(function (response) {
alert("删除成功")
_this.findAll();
})
.catch(function (error) {
console.log(error);
});
}
}
}
})
</script>
</html>
7、equip_insert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>id</td>
<td><input type="text" v-model="equip.id"> </td>
</tr>
<tr>
<td>器材号</td>
<td><input type="text" v-model="equip.eno"> </td>
</tr>
<tr>
<td>器材名称</td>
<td><input type="text" v-model="equip.ename"> </td>
</tr>
<tr>
<td>课程号</td>
<td><input type="text" v-model="equip.cno"> </td>
</tr>
<tr>
<td></td>
<td><input type="button" @click="addEquip" value="增加"> </td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
equip: {
"id":"",
"eno":"",
"ename":"",
"cno":""
} //详情
},
methods: {
addEquip() {
var url = 'equipinsert'
axios.post(url,this.equip)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'equip_findall.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
}
},
})</script>
</html>
8、Equip
package com.example.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Equip {
private Integer id;
private String eno;
private String ename;
private String cno;
}
9、操作实现