第八次课后练习

一、小组设计

我的小组长是      胡旭明      ,我们组课程设计的题目是:    健身房管理系统         ,我认领的功能模块是:         器材管理

二、器材管理模块

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、操作实现

三、分页查询

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值