项目总结：小区物业管理项目--阶段项目

前端

• 表格数据显示

  • 整体框架

​​​​​​​<!--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>