第八次课后作业

1、我们组课程设计的题目是:超市系统管理, 我认领的功能模块是:  销售管理

2、新建一个该功能模块的表。

3、查询 分页 增删改查 源代码

controller:SellController


@RestController

public class SellController {


    @Autowired
    SellService sellService;

    @RequestMapping("/show")
    public Result Select() {
        return Result.success(sellService.SelectService());
    }

    @RequestMapping("/page/{PageSize}/{PageNumber}")
    public Result page(@PathVariable Integer PageSize, @PathVariable Integer PageNumber) {
        PageBean page = sellService.page(PageNumber, PageSize);
        return Result.success(page);
    }
    //查询所有+分页
    @RequestMapping("/page1/{page}/{pageSize}")
    public Result findAllSelect(@PathVariable Integer page, @PathVariable Integer pageSize, Integer saleID, String merChID){
        PageBean pageBean = sellService.selectList(page,pageSize,saleID,merChID);
        return Result.success(pageBean);
    }


    @RequestMapping("/showpart/{saleID}")
    public Result selectPart(@PathVariable("saleID") String saleID) {
        return Result.success(sellService.SelectPartService(saleID));
    }

    @RequestMapping("/update")  //更新
    public  Result update(@RequestBody Sell sell){
        boolean r = sellService.UpdateService(sell);

        if(r) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.erro();
        }
    }
    @RequestMapping("/insert")  //插入
    public Result insert(@RequestBody Sell sell) {
        boolean result = sellService.InsertService(sell);
        if (result) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.erro();

        }


    }
    @RequestMapping("/delete") //删除
    public void delete(String saleID){

        sellService.DeleteService(saleID);
    }
}

mapper:SellMapper

@Mapper
public interface SellMapper {


    @Select("select * from sale")
    public List<Sell> Select();

    @Select("select * from sale where SaleID=#{saleID}")
    public List<Sell> selectPart(String saleID);

    @Update("update sale set SaleID=#{saleID},MerChID=#{merChID},SaleDate=#{saleDate},SaleNum=#{saleNum} ,SalePrice=#{salePrice} where SaleID=#{saleID}")
    public boolean Update(Sell sell);

    @Insert("insert into sale values (#{saleID},#{merChID},#{saleDate},#{saleNum},#{salePrice})")
    public boolean Insert(Sell sell);

    @Delete("delete from sale where SaleID=#{saleID}")
    public boolean Delete(String saleID);

    @Select("SELECT * FROM sale WHERE SaleID like concat('%',#{saleID},'%')AND MerChID like concat('%',#{merChID},'%')")
    public List<Sell> listSelect(@Param("saleID") Integer saleID, @Param("merChID") String merChID);


}

pojo: Sell

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Sell {
    private Integer saleID;
    private String merChID;
    private Date saleDate;
    private Integer saleNum;
    private Integer salePrice;


}

service:


public interface SellService {

    public List<Sell> SelectService();

    public PageBean page(Integer pageNumber, Integer pageSize);

    public List<Sell> SelectPartService(String saleID);

    public boolean UpdateService(Sell sell);

    public boolean InsertService(Sell sell);

    public boolean DeleteService(String saleID);

    public PageBean selectList(Integer page, Integer pageSize, Integer saleID, String merChID);

}

@Service
public class SellServiceA implements SellService {

    @Autowired
    SellMapper sellMapper;

    @Override
    public List<Sell> SelectService() {
        return sellMapper.Select();
    }

    @Override
    public PageBean page(Integer pageNumber, Integer pageSize) {
        PageHelper.startPage(pageNumber, pageSize);
        List<Sell> com = sellMapper.Select();
        PageInfo<Sell> p = new PageInfo<>(com);
        PageBean pageBean = new PageBean(p.getTotal(), p.getPages(), p.getPageNum(), p.getPageSize(), p.getList());
        return pageBean;
    }
    @Override
//查询
    public PageBean selectList(Integer page, Integer pageSize, Integer saleID, String merChID) {
        //设置分页参数
        PageHelper.startPage(page, pageSize);
        //执行分页查询
        List<Sell> sellList = sellMapper.listSelect(saleID,merChID);
        //获取分页结果
        PageInfo<Sell> p = new PageInfo<>(sellList);
        //封装pageBean
        PageBean pageBean = new PageBean(p.getTotal(), p.getPages(), p.getPageNum(), p.getPageSize(), p.getList());

        return pageBean;
    }


    @Override
    public List<Sell> SelectPartService(String saleID) {
        return sellMapper.selectPart(saleID);
    }

    @Override
    public boolean UpdateService(Sell sell) {
        return sellMapper.Update(sell);
    }

    @Override
    public boolean InsertService(Sell sell) {
        return sellMapper.Insert(sell);
    }

    @Override
    public boolean DeleteService(String saleID) {
        return sellMapper.Delete(saleID);
    }


}

 前端页面:index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市管理</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 style="margin: 0">
<div id="app" style="width: 100%;height: 100%">

    <!--头导航栏-->
    <el-container>
        <el-header style="height: 60px;width: 100%;margin-top: 0;background-color: #545c64 ">
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1" style="float: left">
                    <template slot="title">超市管理</template>
                </el-menu-item>
                <el-menu-item index="1" style="float: right">处理中心</el-menu-item>
                <el-submenu index="2" style="float: right">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled style="float: right">消息中心</el-menu-item>
                <el-menu-item index="4" style="float: right"><a href="https://www.ele.me" target="_blank">订单管理</a>
                </el-menu-item>
            </el-menu>
        </el-header>

        <!--左导航栏-->
        <el-container style="height: 900px;">
            <el-aside width="300px" height="900px" style="background-color:#545c64">
                <el-col style="height: 100%;width: 300px;color:#545c64">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>功能管理</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">核心功能</template>
                                <el-menu-item index="1-1">商品信息管理</el-menu-item>
                                <el-menu-item index="1-2">厂商管理</el-menu-item>
                                <el-menu-item index="1-3">供货商管理</el-menu-item>
                                <el-menu-item index="1-4">销售管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>统计分析</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">图表统计</template>
                                <el-menu-item index="2-1">统计分析</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                    </el-menu>
                </el-col>
            </el-aside>

            <!--主表格页面-->
            <el-main height="900px">
                <!--查询栏-->
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="font-size: 15px">
                    <el-form-item label="销售编号">
                        <el-input v-model="formInline.saleID" placeholder="销售编号" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号">
                        <el-input v-model="formInline.merChID" placeholder="商品编号" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
                    </el-form-item>

<!--                    <el-form-item>-->
<!--                        <el-button type="success" @click="gotoInsert" size="mini" icon="el-icon-circle-plus-outline">-->
<!--                            新增-->
<!--                        </el-button>-->
<!--                    </el-form-item>-->
                </el-form>
                <a href="insert.html" style="text-align: center">新增信息</a>
                <!--表格-->
                <el-table
                        :data="tableList.filter(data => !search || data.saleID.toLowerCase().includes(search.toLowerCase()))">
                    <el-table-column align="center"
                                     label="销售编号"
                                     prop="saleID">
                    </el-table-column>

                    <el-table-column align="center"
                                     label="商品编号"
                                     prop="merChID">
                    </el-table-column>

                    <el-table-column align="center"
                                     label="价格"
                                     prop="saleDate">
                    </el-table-column>

                    <el-table-column align="center"
                                     label="库存数量"
                                     prop="saleNum">
                    </el-table-column>

                    <el-table-column align="center"
                                     label="厂商编号"
                                     prop="salePrice">
                    </el-table-column>


                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">

<el-button  size="mini"
            type="danger"
><a :href="'update.html?saleID='+scope.row.saleID">Edit</a></el-button>
<!--                            <a :href="'update.html?saleID='+scope.row.saleID">Edit</a>-->
<!--                            <el-button-->
<!--                                    size="mini"-->
<!--                                    type="danger"-->

<!--                                    @click="handleEdit(scope.row.saleID)">Edit-->
<!--                            </el-button>-->
                            <el-button
                                    size="mini"
                                    type="danger"

                                    @click="handleDelete(scope.row.saleID)">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="[2, 3, 4, 10]"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </p>
            </el-main>
        </el-container>
    </el-container>
</div>


<script>

    new Vue({
        el: "#app",
        data: {
            activeIndex: '1',
            search: '',
            currentPage: 1,
            pageSize: 100,
            total: null,
            formInline: {
                saleID: '',
                merChID: '',
            },
            tableList: [],
            formLabelWidth: '120px'

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },

            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(row) {
                window.location.href="update.html?saleID="+row.saleID;
            },

            //根据id删除操作


            //根据id删除操作
            // deleteById: function (id) {
            //     var _this = this;
            //     if (window.confirm("确定要删除该条数据吗???")) {
            //         axios.delete('/delete/' + id)
            //             .then(function (response) {
            //                 alert("删除成功!!!")
            //                 _this.findAll();
            //             })
            //             .catch(function (error) {
            //                 console.log(error);
            //             });
            //     }
            // },
            handleSizeChange(val) {
                this.pageSize=val;
                this.show();
            },
            handleCurrentChange(val) {
                this.currentPage =val;
                this.show();
            },
            onSubmit() {

                var url = `/page1/${this.currentPage}/${this.pageSize}?saleID=${encodeURIComponent(this.formInline.saleID)}&merChID=${encodeURIComponent(this.formInline.merChID)}`

                console.log(this.formInline.saleID);
                console.log(this.formInline.merChID);


                axios.get(url)
                    .then(res =>{
                        this.tableList = res.data.data.rows;
                        this.total=res.data.data.total;
                        console.log(this.tableList);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            },
            handleDelete: function (saleID) {
                var _this = this;
                if (window.confirm("确定要删除该条数据吗???")) {
                    axios.post('/delete?saleID=' + saleID)
                        .then(function (response) {
                            alert("删除成功!!!")
                            _this.show();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },


            show(){
                axios(`/page/${this.pageSize}/${this.currentPage}`).then(r=>{
                    if(r.data.statusCode==1){
                        this.tableList=r.data.data.rows;
                        this.total=r.data.data.total;
                    }
                }).catch(error=>{
                    console.error(error);
                })
            }
        },

        mounted(){
            this.show();
        }
    })

</script>
</body>
</html>

 insert.html

<!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>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
  <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>

<div id="app">
  <h1 align="center">新增销售信息</h1>

  <el-form label-width="80px">
    <el-form-item label="销售编号">
      <el-input v-model="tableList.saleID"></el-input>
    </el-form-item>

    <el-form-item label="商品编号">
      <el-input v-model="tableList.merChID" size="medium"></el-input>
    </el-form-item>


    <el-form-item label="销售时间">
      <el-input v-model="tableList.saleDate" size="medium"></el-input>
    </el-form-item>

    <el-form-item label="销售数量">
      <el-input v-model="tableList.saleNum" size="medium"></el-input>
    </el-form-item>

    <el-form-item label="销售价格">
      <el-input v-model="tableList.salePrice" size="medium"></el-input>
    </el-form-item>



    <el-button>取 消</el-button>
    <el-button type="success" v-on:click="addP">提交</el-button>

  </el-form>


<!--<div id="app" style="width: 500px">-->
<!--  <ul style="list-style: none ">-->
<!--    <li>-->
<!--      <el-input v-model="tableList.saleID" placeholder="销售编号"></el-input>-->
<!--    </li>-->
<!--    <li>-->
<!--      <el-input v-model="tableList.merChID" placeholder="商品编号"></el-input>-->
<!--    </li>-->
<!--    <li>-->
<!--      <el-input v-model="tableList.saleDate" placeholder="销售日期"></el-input>-->
<!--    </li>-->
<!--    <li>-->
<!--      <el-input v-model="tableList.saleNum" placeholder="销售数量"></el-input>-->
<!--    </li>-->
<!--    <li>-->
<!--      <el-input v-model="tableList.salePrice" placeholder="销售单价"></el-input>-->
<!--    </li>-->
<!--    <li>-->
<!--      <br>-->
<!--      <el-button type="success" v-on:click="addP">提交</el-button>-->
<!--    </li>-->
<!--  </ul>-->


</div>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        tableList:{}
      }
    },
    methods:{
      addP(){
        axios.post("/insert",this.tableList).then(r=>{
          if(r.data.statusCode==1){
            location.href='index1.html';
          }
          else{
            console.log(r.data.message);
          }
        }).catch(error=>{
          console.error(error);
        })
      }
    },
    created(){

    }
  })
</script>
</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>update</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
  <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 style="text-align: center">修改销售数据</h1>-->

<div id="app">
  <h1 align="center">修改销售信息</h1>

  <el-form label-width="80px">
    <el-form-item label="销售编号">
      <el-input v-model="tableList.saleID"></el-input>
    </el-form-item>

    <el-form-item label="商品编号">
      <el-input v-model="tableList.merChID" size="medium"></el-input>
    </el-form-item>


    <el-form-item label="销售时间">
      <el-input v-model="tableList.saleDate" size="medium"></el-input>
    </el-form-item>

    <el-form-item label="销售数量">
      <el-input v-model="tableList.saleNum" size="medium"></el-input>
    </el-form-item>

    <el-form-item label="销售价格">
      <el-input v-model="tableList.salePrice" size="medium"></el-input>
    </el-form-item>



    <el-button>取 消</el-button>
    <el-button type="success" v-on:click="update">提交</el-button>

  </el-form>

<!--<div id="app">-->
<!--  <ul style="list-style: center ">-->
<!--    <li>-->
<!--      销售编号:<input type="text" v-model="this.saleID">-->
<!--    </li>-->
<!--    <li>-->
<!--      商品编号:<input type="text" v-model="tableList.merChID">-->
<!--    </li>-->
<!--    <li>-->
<!--      销售时间:<input type="text" v-model="tableList.saleDate">-->
<!--    </li>-->
<!--    <li>-->
<!--      销售数量:<input type="text" v-model="tableList.saleNum">-->
<!--    </li>-->
<!--    <li>-->
<!--      销售单价:<input type="text" v-model="tableList.salePrice">-->
<!--    </li>-->

<!--    <li>-->
<!--      <input type="button" @click="update" value="提交">-->
<!--    </li>-->
<!--  </ul>-->
</div>


<script>

  new Vue({
    el:"#app",
    data(){
      return{
        tableList:{},
        saleID:''
      }
    },
    methods: {
      // getSaleID(){
      //   var search = window.location.search;
      //   search = search.substring(5);
      //   this.saleID=search;
      // },
      selectPart:function() {
        axios.get(`/showpart/${this.saleID}`).then(r => {
          if (r.data.statusCode == 1) {
            if (Array.isArray(r.data.data) && r.data.data.length > 0) {
              this.tableList = r.data.data[0];
              //console.log(this.tableList);
            } else {
              this.tableList = {};
            }
          } else {
            console.log(r.data.message);
          }
        }).catch(error => {
          console.error(error);
        })
      },

      // update(){
      //     axios.post("/update",JSON.stringify(this.tableList),{headers: {
      //         'Content-Type': 'application/json'
      //       }}).then((r)=>{
      //       if(r.data.statusCode==1){
      //         location.href='index1.html';
      //         console.log(JSON.stringify(this.tableList))
      //       }
      //       else{
      //         console.log(r.data.message);
      //       }
      //     }).catch(error=>{
      //       console.error(error);
      //     })
      //   }
      // },
      update: function () {

        axios({
          method: 'put',
          url: '/update',
          data: JSON.stringify(this.tableList),
          headers: {
            'Content-Type': 'application/json'
          }
        })
                .then(res => {
                  if (res.data.statusCode == 1) {
                    // 成功
                    location.href = 'index1.html';
                  } else {
                    // 失败
                    alert(res.data.message);
                  }
                })
                .catch(err => {
                  console.error(err);
                })
      },
      //   selectPart() {
      //     var url = `showpart/${this.saleID}`
      //     axios.get(url)
      //             .then(response => {
      //               var baseResult = response.data
      //               if (baseResult.statusCode == 1) {
      //                 this.tableList = baseResult.data
      //               }
      //             })
      //             .catch(error => {
      //             })
      //   },
      //   update() {
      //     var url = `update`
      //     axios.put(url, this.tableList)
      //             .then(res => {
      //               var baseResult = res.data
      //               if (baseResult.statusCode == 1) {
      //                 //成功
      //                 location.href = 'index1.html.html'
      //               } else {
      //                 //失败
      //                 alert(baseResult.message)
      //               }
      //             })
      //             .catch(err => {
      //               console.error(err);
      //             })
      //   }
      // },


      },


  created() {
    // this.getSaleID();
    this.saleID = location.href.split("?saleID=")[1]
    this.selectPart();
  }
  })

</script>
</body>
</html>

 4、页面实现

 1.主页面

2.分页功能

3.搜索功能

 

4.增

 

添加成功

5.删

 已成功删除销售编号为4 的销售信息

6.改

 

将销售编号为5的销售价格改为888888

 修改成功

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值