管理系统06(业主列表和功能实现)"/>
智慧社区管理系统06(业主列表和功能实现)
目录
后端代码
实体类
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" ".dtd">
<mapper namespace="com.woniu.community.mapper.OwnerMapper"><!-- Java实体的属性和数据库表字段的映射关系--><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;@Overridepublic 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;}@Overridepublic 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;}@Overridepublic 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;}@Overridepublic 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;}@Overridepublic 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>效果图
更多推荐
智慧社区管理系统06(业主列表和功能实现)
发布评论