前端
-
-
整体框架
-
<!--bootstrap-->
<!--代码模板-->
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<!--使用v-for循环-->
<tr v-for="x in xxxxList">
<td>{{x.}}</td>
<td>
<button class="btn btn-danger" @click="">处理</button>
<button class="btn btn-link" @click="">删除</button>
</td>
</tr>
</table>
<!--分页-->
<ul class="pagination" v-for="pg in pageNumber">
<li v-if="pg == pageIndex" class="active" ><a>{{pg}}</a></li>
<li v-else="pg == pageIndex" ><a @click="doGo(pg)">{{pg}}</a></li>
</ul>
</div>
</div>
<script>
new Vue({
data:{
xxxxList: null,
pageNumber: null,
pageIndex:1,
pageTotle:0,
pageSize:5,
},
methods:{
//分页跳转的方法
doGo(pg){
this.pageIndex = pg;
this.requestxList();
},
//请求table数据的方法
requestxList(){
axios.get("http://localhost:8080/").then(res =>{
this.xxxxList = res.data.data; //返回数据类型同意使用HttpResult方便处理数据
this.pageTotle = response.data.pageTotle;
this.pageNumber = Math.ceil(this.pageTotle / this.pageSize);
});
}
},
created: function () {
this.requestxList();
}
});
</script>
-
下拉菜单
-
<label>楼栋</label> <select v-model="xID"> <option v-for="b in xList" :value="b.id">{{b.}}</option> </select>
-
日期选择器 springboot 后台数据类型:date
-
<label>入住日期</label> <input type="date" class="form-control" v-model="checkDate">
-
删除按钮
<button class="btn btn-link" @click="doDelete(r.id)">删除</button> <script> //vue的methods内包裹 doDelete(id){ axios.get("http://localhost:8080/?id="+id).then(response =>{ console.log(response.data.data); if (response.data.code == 200){ this.requestList(this.pageIndex); }else{ alert("failed to delete!") } }); }, </script>
-
新增 / 修改页面 的来源判断(判断是执行“新增”还是执行“修改”)
created: function(){
<!--在页面生成后,取当前页面的url地址,判断是否含有“id”关键字。如果有,说明传id的参了,是‘修改’页面;否则是‘添加’页面-->
var url = window.location.href;
if (url.indexOf("id") != -1) {
//传递的url含id关键字,从=的下标后一位开始取字符串
this.Id = url.substring(url.indexOf("=") + 1);
}
console.log("页面跳转传递的id:" + this.Id);
if (this.Id == null) {
//当前应是“添加”页面
} else {
//当前应是“修改”页面
}
}
-
返回上一页 *数据会回滚
doCancel(){ history.go(-1); },
后端
-
mapper.xml文件中mysql语言
<where> 标签内可以包裹<if>标签,来实现“是否显示”的目的;
<if test="x != null and x != '' and x !='null'">
and
</if>
</where>
-
四层架构中使用的标签和main主类的设置
-
main主类
@SpringBootApplication @MapperScan("com.community.mapper") public class CommunityApplication { public static void main(String[] args) { SpringApplication.run(CommunityApplication.class,args); } }
-
controller类
@RestController @RequestMapping("/building") @CrossOrigin(origins = "*") //允许所有跨界访问 public class BuildingController { @Autowired(required = false) private BuildingServiceImpl service; //注入实体类 @RequestMapping("/select") public HttpResult selectBuilding(int id){return service.selectBuildingById(id);} }
-
serviceimpl类
@Service
-
mapper.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.community.mapper.BuildingMapper (mapper地址"> <resultMap id="buildingMapper" type="com.community.entity.Building (实体类地址"> <result column="mysql数据库中对应属性" property="实体类中对应属性"/> </resultMap> </mapper>
-