一后端

1entity

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 int houseId;
    private String remarks;//备注
    private  String password;//密码
    private String houseNumbers;
}

2:OwnerMapper

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);
}

3:IOwnerService

package com.woniu.community.service;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Owner;

import java.util.List;

public interface IOwnerService {
    /**
     * 查询所有
     * @param tel
     * @param identity
     * @param pageIndex
     * @param pageSize
     * @return
     */
   HttpResult selectAll(String tel, String identity, int pageIndex, int pageSize);

    /**
     * 添加
     * @param owner
     * @return
     */
    HttpResult insertOwner(Owner owner);

    /**
     * 删除
     * @param id
     * @return
     */
    HttpResult  deleteOwner(int id);

    /**
     * 修改
     * @param owner
     * @return
     */
    HttpResult  updateOwner(Owner owner);

    /**
     * 根据id查询
     * @param id
     * @return
     */
    HttpResult selectById(int  id);

}

4:OwnerServiceImpl

package com.woniu.community.service.impl;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Owner;
import com.woniu.community.mapper.OwnerMapper;
import com.woniu.community.service.IOwnerService;
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;
    /**
     * 查询所有
     *
     * @param tel
     * @param identity
     * @param pageIndex
     * @param pageSize
     * @return
     */
    @Override
    public HttpResult selectAll(String tel, String identity, int pageIndex, int pageSize) {
        HttpResult result=null;
        List<Owner> owners = ownerMapper.selectAll(tel, identity, (pageIndex - 1) * pageSize, pageSize);
        int count = ownerMapper.count(tel, identity);
        if (owners!=null&&owners.size()>0){
            result=new HttpResult(owners,count,200,null);
        }else{
            result=new HttpResult(null,0,500,"没有更多数据");
        }
        return result;
    }

    /**
     * 添加
     *
     * @param owner
     * @return
     */
    @Override
    public HttpResult insertOwner(Owner owner) {
        HttpResult result=null;
        int count = ownerMapper.insertOwner(owner);
        if (count>0){
            result=new HttpResult(null,0,200,"添加成功");
        }else{
            result=new HttpResult(null,0,500,"添加失败");
        }
        return result;
    }

    /**
     * 删除
     *
     * @param id
     * @return
     */
    @Override
    public HttpResult deleteOwner(int id) {
        HttpResult result=null;
        int count = ownerMapper.deleteOwner(id);
        if (count>0){
            result=new HttpResult(null,0,200,"删除成功");
        }else{
            result=new HttpResult(null,0,500,"删除失败");
        }
        return result;
    }

    /**
     * 修改
     *
     * @param owner
     * @return
     */
    @Override
    public HttpResult updateOwner(Owner owner) {
        HttpResult result=null;
        int count = ownerMapper.updateOwner(owner);
        if (count>0){
            result=new HttpResult(null,0,200,"修改成功");
        }else{
            result=new HttpResult(null,0,500,"修改失败");
        }
        return result;

    }

    /**
     * 根据id查询
     *
     * @param id
     * @return
     */
    @Override
    public HttpResult selectById(int id) {
        HttpResult result=null;
        Owner owner = ownerMapper.selectById(id);
        if (owner!=null){
            result=new HttpResult(owner,0,200,null);
        }else{
            result=new HttpResult(null,0,500,null);
        }
        return result;
    }
}

5:OwnerCOntroller

package com.woniu.community.controller;

import com.woniu.community.entity.HttpResult;
import com.woniu.community.entity.Owner;
import com.woniu.community.service.IOwnerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/owner")
@CrossOrigin(origins = "*")
public class OwnerController {
    @Autowired
    private IOwnerService iOwnerService;
    @RequestMapping("/list")
    HttpResult selectAll(String tel, String identity, int pageIndex, int pageSize){
        return iOwnerService.selectAll(tel,identity,pageIndex,pageSize);
    }

    @RequestMapping("/add")
    HttpResult insertOwner(Owner owner){
        return iOwnerService.insertOwner(owner);
    }

    @RequestMapping("/delete")
    HttpResult  deleteOwner(int id){
        return iOwnerService.deleteOwner(id);
    }

    @RequestMapping("/update")
    HttpResult  updateOwner(Owner owner){
        return iOwnerService.updateOwner(owner);
    }

    @RequestMapping("/info")
    HttpResult selectById(int  id){
        return iOwnerService.selectById(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-12">

                电话:
                <input type="text"  v-model="tel"/>
                身份证号:
                <input type="text"  v-model="identity"/>
                <button class="btn btn-info" @click="doQuery">查询</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;margin-top: 40px">
            <button class="btn btn-info" @click="doAdd">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
            <caption>业主管理</caption>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>身份证号</th>
                    <th>房屋编号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="o in owners">
                    <td>{{o.id}}</td>
                    <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-danger" @click="doUpdate(o.id)">修改</button>
                        <button class="btn btn-primary" @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"><a @click="doGO(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            owners:null,
            pageIndex:1,
            pageSize:3,
            pageTotal:0,
            pageNum:0,
            tel:null,
            identity:'',
        },
        methods: {
            requestOwnerList(url){
            axios.get(url).then(response=>{
                this.owners=response.data.data;
                this.pageTotal = response.data.pageTotal; //给总条数赋值

                this.pageNum = Math.ceil(this.pageTotal / this.pageSize);
            })
            },
            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){
                var  url= "http://localhost:8080/owner/delete?id="+id;
                axios.get(url).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)
                    }
                })
            },

            doQuery(){
               this.doGO(1) ;
            },
            doGO(p){
                this.pageIndex=p;
                var  url="http://localhost:8080/owner/list?pageIndex="+p+"&pageSize="+this.pageSize+"&tel="+this.tel+"&identity="+this.identity;
                this.requestOwnerList(url);
            },
        },
        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: 300px;">
                    <label>姓名</label>
                    <input type="text" class="form-control" v-model="userName">
                    <label>性别</label>
                    <input type="text" class="form-control" v-model="sex">
                    <label>电话</label>
                    <input type="text" class="form-control" v-model="tel">
                    <label>身份证号</label>
                    <input type="text" class="form-control" v-model="identity">
                    房屋编号<select v-model="houseId">
                        <option v-for="o in houseList" :value="o.id">{{o.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: {
            title: null,
            userName:null,
            sex:null,
            tel:null,
            identity:null,
            houseId:null,
            houseList:null,
            ownerId:null,
        },
        methods: {
            //通过获取房屋信息,拿到房屋id
            requestHouse(){
                var  url="http://localhost:8080/house/list?pageIndex=1&pageSize=100";
                axios.get(url).then(response=>{
                    this.houseList=response.data.data;
                })
            },
            doSave(){
                if (this.ownerId==null){//添加
                    this.title="添加业主"
                    var  url="http://localhost:8080/owner/add?userName="+this.userName+"&tel="+this.tel+"&identity="+this.identity+"&houseId="+this.houseId;
                    axios.get(url).then(response=>{
                        if (response.data.code==200){
                            window.parent.main_right.location.href="owner_list.html";
                        }else{
                            alert(response.data.msg);
                        }
                    })
                }else{//修改
                    this.title="修改业主"
                    var  url="http://localhost:8080/owner/update?userName="+this.userName+"&tel="+this.tel+"&identity="+this.identity+"&houseId="+this.houseId+"&id="+this.ownerId;
                    axios.get(url).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);//返回上一界面
            }

        },
        created: function () {
            this.requestHouse();
            var  url=window.location.href;
            if (url.indexOf("id")!=-1){
                this.ownerId=url.substring(url.indexOf("=")+1)
            }
            if (this.ownerId==null){
                this.title="添加业主"
            }else{
                this.title="修改业主"
                var url="http://localhost:8080/owner/info?id="+this.ownerId;
                axios.get(url).then(response=>{
                    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;
                })
            }

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