智慧社区管理系统09(抄表管理列表和功能实现)

忘是亡心i 2023-10-11 20:04 47阅读 0赞

**目录**

后端代码

实体类

mapper层

mappers sql语句

Service层

接口

实现类

Controller层

前端部分

列表显示

增加或修改

效果图

--------------------

## 后端代码 ##

### 实体类 ###

![a8cb04c397c74dfb80bb344c89153225.png][]

package com.woniu.community.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Records {
        private int id;
        private int typeId; //关联property_type
        private double num;//上次度数
        private double num2;//本次度数
        private int houseId;//关联house表主键
        private String upTime;
        private String onTime;
        private String checkTime;//登记时间
        private String meter;//抄表员
        private String remarks;//备注
        private String  numbers;//门牌号
        private String userName;//户主
        private String name;//费用类型
    }

> 我们发现数据表中并没有**numbers**,**name,userName** 这三个属性,这三个属性是因为我们第一个列表显示功能需要显示,通过mapper.xml文件里面的sql外连接实现

### mapper层 ###

package com.woniu.community.mapper;
    
    import com.woniu.community.entity.Records;
    
    import java.util.List;
    
    public interface RecordsMapper {
        List<Records> selectAll(String numbers, String name, int start, int size);
    
        int count(String numbers, String name);
    
        int insertRecords(Records records);
    
        int deleteRecords(int id);
    }

### mappers sql语句 ###

![af61474a43b946f59f3acc734aea63a2.png][]

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.woniu.community.mapper.RecordsMapper">
        <resultMap id="recordsResult" type="Records">
            <result column="id" property="id"></result>
            <result column="type_id" property="typeId"></result>
            <result column="num" property="num"></result>
            <result column="num2" property="num2"></result>
            <result column="house_id" property="houseId"></result>
            <result column="up_time" property="upTime"></result>
            <result column="on_time" property="onTime"></result>
            <result column="check_time" property="checkTime"></result>
            <result column="meter" property="meter"></result>
            <result column="remarks" property="remarks"></result>
            <result column="numbers" property="numbers"></result>
            <result column="username" property="userName"></result>
            <result column="name" property="name"></result>
        </resultMap>
        <select id="selectAll" resultMap="recordsResult">
            select records.* ,house.numbers,owner.username,property_type.name from records
            left join house on records.house_id=house.id
            left join owner on owner.house_id=house.id
            left join property_type on records.type_id=property_type.id
            <where>
                <if test="numbers!=null and numbers !='null'">
                and house.numbers like '%${numbers}%'
                </if>
                <if test="name!=null and name!='null'">
                    and property_type.name = #{name}
                </if>
            </where>
            limit #{start},#{size}
        </select>
        <select id="count" resultType="int">
            select count(records.id) from records
            left join house on records.house_id=house.id
            left join owner on owner.house_id=house.id
            left join property_type on records.type_id=property_type.id
            <where>
                <if test="numbers!=null and numbers !='null'">
                and house.numbers like '%${numbers}%'
                </if>
                <if test="name!=null and name!='null'">
                    and property_type.name = #{name}
                </if>
            </where>
        </select>
        <insert id="insertRecords">
            insert into records(type_id,num,num2,house_id,check_time,meter) values (#{typeId},#{num},#{num2},#{houseId},#{checkTime},#{meter})
        </insert>
        <delete id="deleteRecords">
            delete from records where id=#{id}
        </delete>
    </mapper>

> 注意这个mapper,可先在sql编译工具中进行查询,以确保代码准确性,
> 
> 模糊查询那里的$符号和\#符号分别代表不同意思在具体博客里有讲这两者区别

### Service层 ###

####  接口 ####

package com.woniu.community.service;
    
    import com.woniu.community.entity.Records;
    import com.woniu.community.utils.HttpResult;
    
    public interface IRecordsService {
        HttpResult selectAll(String numbers,String name,int pageIndex,int pageSize);
        HttpResult addRecords(Records records);
        HttpResult removeRecords(int id);
    }

#### 实现类 ####

package com.woniu.community.service.Impl;
    
    import com.woniu.community.entity.Records;
    import com.woniu.community.mapper.RecordsMapper;
    import com.woniu.community.service.IRecordsService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class RecordsServiceImpl implements IRecordsService {
        @Autowired(required = false)
        private RecordsMapper recordsMapper;
        @Override
        public HttpResult selectAll(String numbers, String name, int pageIndex, int pageSize) {
            List<Records> records = recordsMapper.selectAll(numbers, name, (pageIndex - 1) * pageSize, pageSize);
            int count = recordsMapper.count(numbers, name);
            HttpResult result = null;
            if (records != null && records.size() > 0) {
                result = new HttpResult(records, count, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    
        @Override
        public HttpResult addRecords(Records records) {
            int count = recordsMapper.insertRecords(records);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "新增成功");
            } else {
                result = new HttpResult(null, 0, 500, "新增失败");
            }
            return result;
        }
    
        @Override
        public HttpResult removeRecords(int id) {
            int count = recordsMapper.deleteRecords(id);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "删除成功");
            } else {
                result = new HttpResult(null, 0, 500, "删除失败");
            }
            return result;
        }
    }

> 我们是将数据封装成HttpResult.每次数据返回都是返回HttpResult数据类型

### Controller层 ###

package com.woniu.community.controller;
    
    import com.woniu.community.entity.Records;
    import com.woniu.community.service.IRecordsService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    @RestController
    @CrossOrigin(origins = "*")
    @RequestMapping("/records")
    public class RecordsController {
        @Autowired
        private IRecordsService recordsService;
    
        @RequestMapping("/list")
        public HttpResult selectAll(String numbers, String name, int pageIndex, int pageSize){
            return recordsService.selectAll(numbers, name, pageIndex, pageSize);
        }
        @PostMapping("/add")
        HttpResult addRecords(@RequestBody Records records){
            return recordsService.addRecords(records);
        }
        @RequestMapping("/delete")
        HttpResult removeRecords(int id){
            return recordsService.removeRecords(id);
        }
    }

## 前端部分 ##

### 列表显示 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/right.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="assets/vue.min-v2.5.16.js"></script>
        <script src="assets/vue-router.min-2.7.0.js"></script>
        <script src="assets/axios.min.js"></script>
    </head>
    <body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-1" style="height: 50px; line-height: 50px;">
                <label>门牌号:</label>
            </div>
            <div class="col-md-2" style="height: 50px; line-height: 50px;">
                <input type="text" class="form-control"v-model="numbers" >
            </div>
            <div class="col-md-2" style="height: 50px; line-height: 50px;">
                <label>费用类型:</label>
            </div>
            <div class="col-md-3" style="height: 50px; line-height: 50px;">
                <select class="form-control" v-model="name">
                   <option>物业费</option>
                   <option>水费</option>
                   <option>电费</option>
                   <option>车位费</option>
                </select>
            </div>
            <div class="col-md-1 " style="height: 50px; line-height: 50px;">
                <button class="btn btn-default" @click="doQuery" >搜索</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="height: 50px; line-height: 50px;">
                <button class="btn btn-default" @click="doAdd">添加</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                <caption>抄表管理</caption>
                    <thead>
                    <tr >
                        <th>门牌号</th>
                        <th>户主</th>
                        <th>费用类型</th>
                        <th>上次度数</th>
                        <th>本次度数</th>
                        <th>登记时间</th>
                        <th>抄表员</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="r in recordsList">
                        <td>{
       {r.numbers}}</td>
                        <td>{
       {r.userName}}</td>
                        <td>{
       {r.name}}</td>
                        <td>{
       {r.num}}</td>
                        <td>{
       {r.num2}}</td>
                        <td>{
       {r.checkTime}}</td>
                        <td>{
       {r.meter}}</td>
                        <td>
                            <button class="btn btn-danger" @click="doDelete(r.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" v-for="p in pageNum">
                    <li v-if="p==pageIndex" class="active"><a @click="doGo(p)">{
       {p}}</a></li>
                    <li v-else="p==pageIndex" @click="doGo(p)"><a>{
       {p}}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                recordsList:null,
                name:null,
                numbers:null,//门牌号
                pageIndex: 1,//当前页数
                pageSize: 10,//每页显示的条数
                pageTotle: 0,//总条数
                pageNum: 0,//页数(分页器)
            },
            methods: {
                    requestRecordsList(url){
                        axios.get(url).then(response=>{
                            console.log(response.data);
                            this.recordsList = response.data.data;
                            this.pageTotle = response.data.pageTotle;
                            this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
                        });
                    },
                doGo(p){
                    this.pageIndex = p;
                    var url = " http://localhost:8080/records/list?pageIndex=" + p + "&pageSize=" + this.pageSize;
                    this.requestRecordsList(url);
                },
    
                doQuery(){
                    var url = " http://localhost:8080/records/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize+"&numbers="+this.numbers+"&name="+this.name;
                    this.requestRecordsList(url);
                },
                doDelete(id){
                    //通过axios发送请求
                    axios.get("http://localhost:8080/records/delete?id=" + id).then(response => {
                        if (response.data.code == 200) {
                            var url = " http://localhost:8080/records/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                            this.requestRecordsList(url);
                        } else {
                            alert(response.data.msg);
                        }
                    });
                },
                doAdd(){
                    window.parent.main_right.location.href = "records_add_update.html";
                }
            },
            created: function () {
    
                var url="http://localhost:8080/records/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                this.requestRecordsList(url);
            }
        });
    </script>
    </body>
    </html>

### 增加或修改 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/right.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="assets/vue.min-v2.5.16.js"></script>
        <script src="assets/vue-router.min-2.7.0.js"></script>
        <script src="assets/axios.min.js"></script>
        <script src="assets/date_picker.js"></script>
    </head>
    <body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="row">
                    <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                        {
       {title}}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>门牌号</label>
                        <select v-model="houseId" class="form-control">
                            <option v-for="h in houseList" :value="h.id">{
       {h.numbers}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>费用类型</label>
                        <select v-model="typeId" class="form-control">
                            <option value="1">物业费</option>
                            <option value="2">水费</option>
                            <option value="3">电费</option>
                            <option value="4">车位费</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>上次度数</label>
                        <input type="text" class="form-control" v-model="num">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>本次度数</label>
                        <input type="text" class="form-control" v-model="num2">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>登记时间</label>
                        <input type="date" class="form-control"v-model="checkTime">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>抄表员</label>
                        <input type="text" class="form-control" v-model="meter">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <button class="btn btn-primary"@click="doSave">保存</button>
                        <button class="btn btn-default">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: "添加抄表",
                houseList:null,
                houseId:null,
                typeId:null,
                num:null,
                num2:null,
                checkTime:null,
                meter:null,
            },
            methods: {
                doSave(){
                axios.post("http://localhost:8080/records/add",{
                    houseId:this.houseId,
                    typeId:this.typeId,
                    num:this.num,
                    num2:this.num2,
                    checkTime:this.checkTime,
                    meter:this.meter,
                }).then(response=>{
                    if (response.data.code==200){//成功
                        console.log(response.data);
                        window.parent.main_right.location.href = "records_list.html";
                    }else{
                        alert(response.data.msg);
                    }
                });
                },
                requestHouseList() {
                    //通过axios发送请求
                    axios.get("http://localhost:8080/house/list?pageIndex=1&pageSize=10000").then(response => {
                        console.log(response.data);
                        this.houseList = response.data.data;
                    });
                },
            },
            created: function () {
                this.requestHouseList();
            }
        });
    </script>
    </body>
    </html>

### 效果图 ###

![95ca354fcdee4859883fcd589d10b7ce.png][]

![9686f22285b1436eb20c623b353b3366.png][]

###  ###

[a8cb04c397c74dfb80bb344c89153225.png]: https://img-blog.csdnimg.cn/a8cb04c397c74dfb80bb344c89153225.png
[af61474a43b946f59f3acc734aea63a2.png]: https://img-blog.csdnimg.cn/af61474a43b946f59f3acc734aea63a2.png
[95ca354fcdee4859883fcd589d10b7ce.png]: https://img-blog.csdnimg.cn/95ca354fcdee4859883fcd589d10b7ce.png
[9686f22285b1436eb20c623b353b3366.png]: https://img-blog.csdnimg.cn/9686f22285b1436eb20c623b353b3366.png