智慧社区管理系统06(业主列表和功能实现)

浅浅的花香味﹌ 2023-10-11 20:01 27阅读 0赞

**目录**

后端代码

实体类

mapper层

mappers sql语句

Service层

接口

实现类

Controller层

前端部分

列表显示

增加或修改

效果图

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

##  ##

## 后端代码 ##

### 实体类 ###

package com.woniu.community.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Owner {
        private int id;
        private String userName;//业主姓名
        private String tel;//联系方式
        private String sex;//性别
        private String idEntity;//身份证号
        private String houseId;//关联house表主键
        private String remarks;//备注
        private String password;//密码
        private String houseNumbers;//房屋编号
    }

### mapper层 ###

package com.woniu.community.mapper;
    
    
    
    
    import com.woniu.community.entity.Owner;
    
    import java.util.List;
    
    public interface OwnerMapper {
        List<Owner> selectAll(String tel, String idEntity, int start, int size);
    
        int count(String tel, String idEntity);
    
        int insertOwner(Owner owner);
    
        int deleteOwner(int id);
    
        int updateOwner(Owner owner);
    
        Owner selectById(int id);
    }

### mappers sql语句 ###

<?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.OwnerMapper">
        
        <resultMap id="ownerResult" type="Owner">
            <result column="id" property="id"></result>
            <result column="username" property="userName"></result>
            <result column="tel" property="tel"></result>
            <result column="sex" property="sex"></result>
            <result column="identity" property="idEntity"></result>
            <result column="house_id" property="houseId"></result>
            <result column="remarks" property="remarks"></result>
            <result column="password" property="password"></result>
            <result column="numbers" property="houseNumbers"></result>
        </resultMap>
        <select id="selectAll" resultMap="ownerResult">
        select owner.*,house.numbers from owner left join house on owner.house_id=house.id
        <where>
            <if test="tel!=null and tel != 'null'">
                and tel= #{tel}
            </if>
            <if test="idEntity!=null and idEntity !='null'"></if>
            and identity like '%${idEntity}%'
        </where>
        limit #{start},#{size}
        </select>
        <select id="count" resultType="int">
            select count(owner.id) from owner left join house on owner.house_id=house.id
            <where>
                <if test="tel!=null and tel != 'null'">
                    and tel= #{tel}
                </if>
                <if test="idEntity!=null and idEntity !='null'"></if>
                and identity like '%${idEntity}%'
            </where>
        </select>
        <insert id="insertOwner">
            insert into owner (username,sex,tel,identity,house_id) values (#{userName},#{sex},#{tel},#{idEntity},#{houseId})
        </insert>
        <delete id="deleteOwner">
            delete from owner where id=#{id}
        </delete>
        <update id="updateOwner">
            update owner set username=#{userName},sex=#{sex},tel=#{tel},identity=#{idEntity},house_id=#{houseId}
            where id=#{id}
        </update>
        <select id="selectById" resultMap="ownerResult">
            select * from  owner where id=#{id}
        </select>
    </mapper>

### Service层 ###

####  接口 ####

package com.woniu.community.service;
    
    import com.woniu.community.entity.Owner;
    import com.woniu.community.utils.HttpResult;
    
    
    
    public interface IOwnerService {
        HttpResult selectAll(String tel, String idEntity, int pageIndex, int pageSize);
    
        HttpResult addOwner(Owner owner);
    
        HttpResult removeOwner(int id);
    
        HttpResult updateOwner(Owner owner);
    
        HttpResult getInfo(int id);
    }

#### 实现类 ####

package com.woniu.community.service.Impl;
    
    import com.woniu.community.entity.Owner;
    import com.woniu.community.mapper.OwnerMapper;
    import com.woniu.community.service.IOwnerService;
    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 OwnerServiceImpl implements IOwnerService {
    
        @Autowired(required = false)
        private OwnerMapper ownerMapper;
    
        @Override
        public HttpResult selectAll(String tel, String idEntity, int pageIndex, int pageSize) {
            List<Owner> owners = ownerMapper.selectAll(tel, idEntity, (pageIndex - 1) * pageSize, pageSize);
            int count = ownerMapper.count(tel, idEntity);
            HttpResult result = null;
            if (owners != null && owners.size() > 0) {
                result = new HttpResult(owners, count, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
    
        }
    
        @Override
        public HttpResult addOwner(Owner owner) {
            int count = ownerMapper.insertOwner(owner);
            HttpResult result = null;
            if (count > 0) {
                result = new HttpResult(null, 0, 200, "新增成功");
            } else {
                result = new HttpResult(null, 0, 500, "新增失败");
            }
            return result;
        }
    
        @Override
        public HttpResult removeOwner(int id) {
            int count = ownerMapper.deleteOwner(id);
            HttpResult result = null;
            if (count > 0) {
                result = new HttpResult(null, 0, 200, "删除成功");
            } else {
                result = new HttpResult(null, 0, 500, "删除失败");
            }
            return result;
        }
    
        @Override
        public HttpResult updateOwner(Owner owner) {
            int count = ownerMapper.updateOwner(owner);
            HttpResult result = null;
            if (count > 0) {
                result = new HttpResult(null, 0, 200, "修改成功");
            } else {
                result = new HttpResult(null, 0, 500, "修改失败");
            }
            return result;
        }
    
        @Override
        public HttpResult getInfo(int id) {
            Owner owner = ownerMapper.selectById(id);
            HttpResult result = null;
            if (owner != null) {
                result = new HttpResult(owner, 0, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    
    
    }

### Controller层 ###

package com.woniu.community.controller;
    
    import com.woniu.community.entity.Owner;
    import com.woniu.community.service.IOwnerService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    
    
    @RestController
    @RequestMapping("/owner")
    @CrossOrigin(origins = "*")
    public class OwnerController {
        @Autowired(required = false)
        private IOwnerService ownerService;
    
        @RequestMapping("/list")
        public HttpResult selectAll(String tel, String idEntity, int pageIndex, int pageSize) {
            return ownerService.selectAll(tel, idEntity, pageIndex, pageSize);
        }
    
        @PostMapping("/add")
        public   HttpResult addOwner(@RequestBody Owner owner) {
            return ownerService.addOwner(owner);
        }
    
        @RequestMapping("/delete")
        public HttpResult removeOwner(int id) {
            return ownerService.removeOwner(id);
        }
    
       @PostMapping("/update")
       public HttpResult updateOwner(@RequestBody Owner owner) {
            return ownerService.updateOwner(owner);
        }
    
        @RequestMapping("/info")
        public  HttpResult getInfo(int id) {
            return ownerService.getInfo(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="tel">
            </div>
            <div class="col-md-2 " 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="idEntity">
            </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>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="o in ownerList">
                        <td>{
       {o.userName}}</td>
                        <td>{
       {o.sex}}</td>
                        <td>{
       {o.tel}}</td>
                        <td>{
       {o.idEntity}}</td>
                        <td>{
       {o.houseNumbers}}</td>
                        <td>
                            <button class="btn btn-info" @click="doUpdate(o.id)">编辑</button>
                            <button class="btn btn-danger" @click="doDelete(o.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: {
                ownerList: null,
    
                tel: null,//联系方式
                idEntity: null,//身份证号
    
                pageIndex: 1,//当前页数
                pageSize: 10,//每页显示的条数
                pageTotle: 0,//总条数
                pageNum: 0,//页数(分页器)
            },
    
            methods: {
                requestOwnerList(url) {
                    //通过axios获取列表信息
                    axios.get(url).then(response => {
                        console.log(response.data);
                        this.ownerList = 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/owner/list?pageIndex=" + p + "&pageSize=" + this.pageSize ;
                    this.requestOwnerList(url);
                },
                doQuery() {
                    if (this.tel != null || this.idEntity != null) {
                        var url = " http://localhost:8080/owner/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize + "&idEntity=" + this.idEntity + "&tel=" + this.tel;
                        this.requestOwnerList(url);
                    } else {
                        var url = " http://localhost:8080/owner/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                        this.requestOwnerList(url);
                    }
                },
                doAdd() {
                    window.parent.main_right.location.href = "owner_add_update.html";
                },
                doUpdate(id) {
                    window.parent.main_right.location.href = "owner_add_update.html?id=" + id;
                },
                doDelete(id) {
                    //通过axios发送请求
                    axios.get("http://localhost:8080/owner/delete?id=" + id).then(response => {
                        if (response.data.code == 200) {
                            var url = " http://localhost:8080/owner/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                            this.requestOwnerList(url);
                        } else {
                            alert(response.data.msg);
                        }
                    });
                }
    
    
            },
            created: function () {
                var url = " http://localhost:8080/owner/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                this.requestOwnerList(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>
                        <input type="text" class="form-control" v-model="userName">
                    </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="sex">
                    </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="tel">
                    </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="idEntity">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>房屋编号</label>
                        <select v-model="houseId">
                            <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;">
                        <button class="btn btn-primary" @click="doSave">保存</button>
                        <button class="btn btn-default" @click="doCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                houseList: null,
                title: null,
                ownerId: null,
                userName: null,
                sex: null,
                tel: null,
                idEntity: null,
                houseId: null,
            },
            methods: {
                doSave() {
                    if (this.ownerId == null) {//添加
                        axios.post("http://localhost:8080/owner/add", {
                            userName: this.userName,
                            sex: this.sex,
                            tel: this.tel,
                            idEntity: this.idEntity,
                            houseId: this.houseId,
                        }).then(response => {
                            if (response.data.code == 200) {//成功
                                window.parent.main_right.location.href = "owner_list.html";
                            } else {//失败
                                alert(response.data.msg);
                            }
                        })
                    }
                     else {//修改
                        //通过axios发送请求
                        axios.post("http://localhost:8080/owner/update", {
                            id: this.ownerId,
                            userName: this.userName,
                            sex: this.sex,
                            tel: this.tel,
                            idEntity: this.idEntity,
                            houseId: this.houseId,
                        }).then(response => {
                            if (response.data.code == 200) {//成功
                                window.parent.main_right.location.href = "owner_list.html";
                            } else {//失败
                                alert(response.data.msg);
                            }
                        })
                    }
                },
                //取消按钮
                doCancel() {
                    //返回上一个页面
                    history.go(-1);
                },
                //请求楼栋列表
                requestHouseList() {
                    //通过axios发送请求
                    axios.get("http://localhost:8080/house/list?pageIndex=1&pageSize=10000").then(response => {
                        console.log(response.data);
                        this.houseList = response.data.data;
                    });
                },
                //请求房屋列表信息
                requesetOwner() {
                    axios.get("http://localhost:8080/owner/info?id=" + this.ownerId).then(response => {
                        console.log(response.data);
                        this.userName = response.data.data.userName;
                        this.sex = response.data.data.sex;
                        this.tel = response.data.data.tel;
                        this.idEntity = response.data.data.idEntity;
                        this.houseId = response.data.data.houseId;
                    });
                },
            },
            created: function () {
                this.requestHouseList();
                var url = window.location.href;
                if (url.indexOf("id") != -1) {
                    this.ownerId = url.substring(url.indexOf("=") + 1);
                }
                console.log("页面跳转传递的id:" + this.ownerId);
                if (this.ownerId == null) {//说明添加
                    this.title = '添加业主';
                } else {//说明修改
                    this.title = '修改业主';
                    this.requesetOwner();//调用请求房屋信息的函数
                }
            }
        });
    </script>
    </body>
    </html>

### 效果图 ###

![80ed1fb993ed4b41b2cdbe753c494a1d.png][]

![083c0ef7bb354841b03e571539c6eb71.png][]

![1dc92054d1674968a44e6da42cf7992f.png][]

![83d55c23697e4f759eb0a68d0f3d1330.png][]

[80ed1fb993ed4b41b2cdbe753c494a1d.png]: https://img-blog.csdnimg.cn/80ed1fb993ed4b41b2cdbe753c494a1d.png
[083c0ef7bb354841b03e571539c6eb71.png]: https://img-blog.csdnimg.cn/083c0ef7bb354841b03e571539c6eb71.png
[1dc92054d1674968a44e6da42cf7992f.png]: https://img-blog.csdnimg.cn/1dc92054d1674968a44e6da42cf7992f.png
[83d55c23697e4f759eb0a68d0f3d1330.png]: https://img-blog.csdnimg.cn/83d55c23697e4f759eb0a68d0f3d1330.png