目录
后端代码
实体类
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语句
<?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>
效果图