一后端
1:entuty
package com. woniu. community. entity ;
import lombok. AllArgsConstructor ;
import lombok. Data ;
import lombok. NoArgsConstructor ;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Parking {
private int id;
private String numbers;
private int status;
private int ownerId;
private String remarks;
private String userName;
private String tel;
}
2:ParkingMapper
package com. woniu. community. mapper ;
import com. woniu. community. entity. Parking ;
import java. util. List ;
public interface ParkingMapper {
List < Parking > selectAll ( String numbers , int start, int size ) ;
int count ( String numbers) ;
int insertParking ( Parking parking) ;
int deleteById ( int id) ;
int updateParking ( Parking parking) ;
Parking getById ( int id) ;
}
3:IParlingservice
package com. woniu. community. service ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Parking ;
public interface IParkingService {
HttpResult selectAll ( String numbers , int pageIndex, int pageSize ) ;
HttpResult insertParking ( Parking parking) ;
HttpResult deleteById ( int id) ;
HttpResult updateParking ( Parking parking) ;
HttpResult getById ( int id) ;
}
4:ParkingServiceImpl
package com. woniu. community. service. impl ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Parking ;
import com. woniu. community. mapper. ParkingMapper ;
import com. woniu. community. service. IParkingService ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. stereotype. Service ;
import java. util. List ;
@Service
public class ParkingServiceImpl implements IParkingService {
@Autowired ( required = false )
private ParkingMapper parkingMapper;
@Override
public HttpResult selectAll ( String numbers, int pageIndex, int pageSize) {
HttpResult result= null ;
List < Parking > parkings = parkingMapper. selectAll ( numbers, ( pageIndex - 1 ) * pageSize, pageSize) ;
int count = parkingMapper. count ( numbers) ;
if ( parkings!= null && parkings. size ( ) > 0 ) {
result= new HttpResult ( parkings, count, 200 , null ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "没有更多数据" ) ;
}
return result;
}
@Override
public HttpResult insertParking ( Parking parking) {
HttpResult result= null ;
int count = parkingMapper. insertParking ( parking) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "添加成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "添加失败" ) ;
}
return result;
}
@Override
public HttpResult deleteById ( int id) {
HttpResult result= null ;
int count = parkingMapper. deleteById ( id) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "删除成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "删除失败" ) ;
}
return result;
}
@Override
public HttpResult updateParking ( Parking parking) {
HttpResult result= null ;
int count = parkingMapper. updateParking ( parking) ;
if ( count> 0 ) {
result= new HttpResult ( null , 0 , 200 , "修改成功" ) ;
} else {
result= new HttpResult ( null , 0 , 500 , "修改失败" ) ;
}
return result;
}
@Override
public HttpResult getById ( int id) {
HttpResult result= null ;
Parking parking = parkingMapper. getById ( id) ;
if ( parking!= null ) {
result= new HttpResult ( parking, 0 , 200 , null ) ;
} else {
result= new HttpResult ( null , 0 , 500 , null ) ;
}
return result;
}
}
5:ParkingController
package com. woniu. community. controller ;
import com. woniu. community. entity. HttpResult ;
import com. woniu. community. entity. Parking ;
import com. woniu. community. service. IParkingService ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. web. bind. annotation. * ;
@RestController
@RequestMapping ( "/parking" )
@CrossOrigin ( origins = "*" )
public class ParkingController {
@Autowired
private IParkingService iParkingService;
@RequestMapping ( "/list" )
HttpResult selectAll ( String numbers , int pageIndex, int pageSize ) {
return iParkingService. selectAll ( numbers, pageIndex, pageSize) ;
}
@PostMapping ( "/add" )
HttpResult insertParking ( @RequestBody Parking parking) {
return iParkingService. insertParking ( parking) ;
}
@RequestMapping ( "/delete" )
HttpResult deleteById ( int id) {
return iParkingService. deleteById ( id) ;
}
@PostMapping ( "/update" )
HttpResult updateParking ( @RequestBody Parking parking) {
return iParkingService. updateParking ( parking) ;
}
@RequestMapping ( "/info" )
HttpResult getById ( int id) {
return iParkingService. getById ( id) ;
}
}
6:parkingMapper.xml
< ? 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.ParkingMapper" >
< resultMap id= "packMap" type= "Parking" >
< result column= "id" property= "id" / >
< result column= "numbers" property= "numbers" / >
< result column= "status" property= "status" / >
< result column= "owner_id" property= "ownerId" / >
< result column= "remarks" property= "remarks" / >
< result column= "username" property= "userName" / >
< result column= "tel" property= "tel" / >
< / resultMap>
< select id= "selectAll" resultMap= "packMap" >
select
p. id, p. numbers, o. username, o. tel, p. status
from
parking as p left join owner as o on
p. owner_id= o. id
< where>
< if test= "numbers!=null and numbers!='null'" >
and numbers= #{ numbers}
< / if >
< / where>
limit #{ start} , #{ size}
< / select>
< select id= "count" resultType= "int" >
select
count ( p. id)
from
parking as p left join owner as o on
p. owner_id= o. id
< where>
< if test= "numbers!=null and numbers!='null'" >
and numbers= #{ numbers}
< / if >
< / where>
< / select>
< insert id= "insertParking" >
insert into
parking ( numbers, status, owner_id)
values
( #{ numbers} , #{ status} , #{ ownerId} )
< / insert>
< delete id= "deleteById" >
delete from parking where id= #{ id}
< / delete>
< update id= "updateParking" >
update parking
set numbers= #{ numbers} , status= #{ status} , owner_id= #{ ownerId} where id= #{ id}
< / update>
< select id= "getById" resultMap= "packMap" >
select * from parking where id= #{ id}
< / select>
< / mapper>
二 前端代码
<! 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" style = " height : 30px; line-height : 30px; " >
< input type = " text" v-model = " numbers" >
< button class = " btn btn-danger" @click = " doLikeQuery()" > 查询</ button>
< 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> 车位号</ th>
< th> 业主姓名</ th>
< th> 业主电话</ th>
< th> 状态</ th>
< th> 操作</ th>
</ tr>
</ thead>
< tbody>
< tr v-for = " p in parkings" >
< td> {{p.numbers}}</ td>
< td> {{p.userName}}</ td>
< td> {{p.tel}}</ td>
< td> {{p.status==1?"使用":"未使用"}}</ td>
< td>
< button class = " btn btn-danger" @click = " doUpdate(p.id)" > 修改</ button>
< button class = " btn btn-primary" @click = " doDelete(p.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 : {
parkings : null ,
pageIndex : 1 ,
pageSize : 5 ,
pageTotal : 0 ,
pageNum : 0 ,
numbers : null ,
} ,
methods : {
requestParkingList ( url ) {
axios. get ( url) . then ( response => {
console. log ( response. data) ;
this . parkings= response. data. data;
this . pageTotal= response. data. pageTotal;
this . pageNum= Math. ceil ( this . pageTotal / this . pageSize) ;
} )
} ,
doUpdate ( id ) {
window. parent. main_right. location. href= "parking_add_update.html?id=" + id;
} ,
doDelete ( id ) {
var url= "http://localhost:8080/parking/delete?id=" + id;
axios. get ( url) . then ( response => {
if ( response. data. code== 200 ) {
this . doGO ( 1 ) ;
} else {
alert ( response. data. msg)
}
} )
} ,
doGO ( p ) {
this . pageIndex= p;
var url= "http://localhost:8080/parking/list?pageIndex=" + this . pageIndex+ "&pageSize=" + this . pageSize+ "&numbers=" + this . numbers;
this . requestParkingList ( url) ;
} ,
doLikeQuery ( ) {
if ( this . numbers!= null ) {
this . doGO ( 1 ) ;
}
} ,
doAdd ( ) {
window. parent. main_right. location. href= "parking_add_update.html" ;
} ,
} ,
created : function ( ) {
var url= "http://localhost:8080/parking/list?pageIndex=" + this . pageIndex+ "&pageSize=" + this . pageSize;
this . requestParkingList ( 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 = " numbers" >
< div style = " margin-top : 30px; margin-bottom : 20px" >
业主姓名< select v-model = " ownerId" >
< option v-for = " o in ownerListParking" :value = " o.id" > {{o.userName}}</ option>
</ select>
</ div>
< div style = " margin-top : 30px; " >
状态< select v-model = " status" >
< option value = " 1" > 使用</ option>
< option value = " 0" > 未使用</ option>
</ select>
</ div>
</ div>
< div class = " row" >
< div class = " col-md-6 col-md-offset-3" style = " height : 40px; " >
< button class = " btn btn-primary" @click = " doSave" > 保存</ button>
< button class = " btn btn-default" @click = " doCancel" > 取消</ button>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
< script>
new Vue ( {
el : '#app' ,
data : {
title : null ,
parkingId : null ,
status : null ,
numbers : null ,
ownerListParking : null ,
phone : null ,
ownerId : null ,
} ,
methods : {
ownerList ( ) {
var url= "http://localhost:8080/owner/list?pageIndex=1&pageSize=100" ;
axios. get ( url) . then ( response => {
this . ownerListParking= response. data. data;
} )
} ,
getInfo ( ) {
var url= "http://localhost:8080/parking/info?id=" + this . parkingId;
axios. get ( url) . then ( response => {
console. log ( response. data)
this . numbers= response. data. data. numbers;
this . status-= response. data. data. status;
this . ownerId= response. data. data. ownerId;
} ) ;
} ,
doSave ( ) {
if ( this . parkingId== null ) {
this . title= "添加车位" ;
var url= "http://localhost:8080/parking/add" ;
axios. post ( url, {
numbers : this . numbers,
status : this . status,
ownerId : this . ownerId,
} ) . then ( response => {
if ( response. data. code== 200 ) {
window. parent. main_right. location. href= "parking_list.html" ;
} else {
alert ( response. data. msg)
}
} )
} else {
this . title= "修改车位" ;
var url= "http://localhost:8080/parking/update" ;
axios. post ( url, {
id : this . parkingId,
numbers : this . numbers,
status : this . status,
ownerId : this . ownerId,
} ) . then ( response => {
if ( response. data. code== 200 ) {
window. parent. main_right. location. href= "parking_list.html" ;
} else {
alert ( response. data. msg)
}
} )
}
} ,
doCancel ( ) {
history. go ( - 1 ) ;
} ,
} ,
created : function ( ) {
this . ownerList ( ) ;
var url= window. location. href;
console. log ( url+ "**************" )
if ( url. indexOf ( "id" ) != - 1 ) {
this . parkingId= url. substring ( url. indexOf ( "=" ) + 1 )
console. log ( this . parkingId)
}
if ( this . parkingId== null ) {
this . title= "添加车位"
} else {
this . title= "修改车位"
this . getInfo ( ) ;
}
}
} ) ;
</ script>
</ body>
</ html>
三 效果图