目录

前言

一、项目介绍

1、目的和背景

2、项目主要内容 

 3、技术介绍

二、功能模块

1、重要文件结构

2、功能实现（部分个人负责模块功能）

2.1 展示房源信息页面

2.2 房屋详情页面

2.3  房源信息管理

三、功能模块页面

1、前台模块

2、后台模块 

四、总结

---

前言

经过前段时间对于Ajax、springboot、vue3以及若依框架的学习，我们进行了一个小组项目，项目的内容是物业管理系统（物业管理系统主要是实现对小区内建筑物、公共设施、业主信息以及各项服务的高效、便捷管理），其中我们小组还添加了关于租房的功能业务。

下面是关于我们这次项目的内容介绍。

一、项目介绍

1、目的和背景

提升物业管理效率：

通过引入信息化管理系统,提高物业管理的效率和准确性,降低人力成本。

推动智慧型社区建设：

作为智慧型社区的重要组成部分，小区物业管理系统有助于实现社区智能化、便捷化和安全化。

加强业主满意度：

通过优化服务流程，提高服务质量，增强业主对物业管理的满意度。

2、项目主要内容 

前台：

1. 登录注册
2. 显示租房信息
3. 查看房源详情信息
4. 查看个人中心
5. 收藏感兴趣的房源
6. 历史浏览记录
7. 租房下单
8. 缴费

后台： 

1. 登录
2. 系统管理
3. 租赁管理
4. 房屋管理
5. 服务请求管理
6. 收费管理
7. 缴费管理

 3、技术介绍

前台内容主要是使用html和Ajax完成

后台内容主要是依靠若依框架使用vue3完成

•  Ajax：AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，可以在不重新加载整个页面的情况下，实现网页的局部更新和快速响应。
• Spring Boot：SpringBoot是一个由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。
• Vue3：Vue3是一个轻量、高效、响应式的现代前端框架，用于构建用户界面。引入了许多新功能和性能改进。
• 若依框架：若依框架是基于JAVA语言的开源Web应用程序框架,采用了Spring Boot、SpringCloud等核心技术，同时也支持多种安全框架和持久层框架。

二、功能模块

1、重要文件结构

2、功能实现（部分个人负责模块功能）

2.1 展示房源信息页面

(1)关联表:

(2)主要sql语句

<resultMap id="houseResources" type="House">
        <id column="id" property="id"></id>
        <result column="lease_time" property="leaseTime"></result>
        <result column="status" property="status"></result>
        <result column="room_id" property="roomId"></result>
        <result column="facilities" property="facilities"></result>
        <result column="img" property="img"></result>
        <result column="description" property="description"></result>
        <result column="price" property="price"></result>
        <result column="rental_methods" property="rentalMethods"></result>
        <result column="room_num" property="roomNum"></result>
        <result column="floor" property="floor"></result>
        <result column="room_type" property="roomType"></result>
        <result column="area" property="area"></result>
        <result column="user_id" property="userId"></result>
        <result column="unit_id" property="unitId"></result>
        <result column="toward" property="toward"></result>
        <result column="unit_name" property="unitName"></result>
        <result column="type" property="type"></result>
        <result column="name" property="name"></result>
        <result column="completion_time" property="completionTime"></result>
        <result column="mobile" property="mobile"></result>
        <result column="nick_name" property="nickName"></result>
    </resultMap>

    <select id="queryByStatus" resultMap="houseResources">
        SELECT h.*,
               r.*,
               hu.unit_name,
               hb.*,
               u.mobile,
               u.nick_name
        FROM house_resources h
                 JOIN room r ON h.room_id = r.id
                 JOIN house_unit hu ON r.unit_id = hu.id
                 JOIN house_building hb ON hu.build_id = hb.id
                 left JOIN `sys_user` u ON u.user_id = r.user_id
        WHERE h.STATUS = "0"
    </select>

    <select id="queryByPage" parameterType="HouseConditionVO" resultMap="houseResources">
        SELECT
        h.*,
        r.*,
        hu.unit_name,
        hb.*,
        u.mobile,
        u.nick_name
        FROM
        house_resources h
        JOIN room r ON h.room_id = r.id
        JOIN house_unit hu ON r.unit_id = hu.id
        JOIN house_building hb ON hu.build_id = hb.id
        left JOIN `sys_user` u ON u.user_id = r.user_id
        <where>
            h.STATUS = "0"
            <if test="roomType != ''">
                and room_type like '%${roomType}%'
            </if>
        </where>
        limit ${(pageIndex - 1) * pageCount},#{pageCount}
    </select>

(3)控制层 (查询与分页)

    @GetMapping(value = {"/index","/8080/index"})
    @ResponseBody
    public Map show() throws Exception {
        Map map = new HashMap<>();
        List<House> house = houseService.queryByStatus();
        map.put("code","200");
        map.put("msg","查询成功");
        map.put("data",house);
        return map;
    }

    @GetMapping(value = {"/queryByPage","/8080/queryByPage"})
    @ResponseBody
    public PageBean queryByPage(HouseConditionVO houseConditionVO){
        //调用分页条件查询，响应分页模型对象
        PageBean<House> house = houseService.queryByPage(houseConditionVO);
        return house;
    }

(4)页面显示(Ajax代码) 

包含点击图片时跳转到详情页面

<script type="text/javascript">
    var tId;

    $(function () {
      loadbypage(pageindex);

      $("#TypeSearch").click(function () {
        loadbypage(1);
      })

    });

    var pageindex = 1;
    var pagecount = 6;
    var totalpage = 0;

    function loadbypage(index) {
      pageindex = index;
      $.ajax({
        url: "/house/8080/queryByPage",
        type: "get",
        data: {
          roomType: $("#roomType").val(),
          pageIndex: pageindex,
          pageCount: pagecount
        },
        dataType: "json",
        success: function (result) {
          //获取分页的属性值
          pageindex = result.currentPage;
          pagecount = result.rows;
          totalpage = result.totalPage;

          var jsons = result.list;

          //清空表格主体内容
          $("#pro").empty();
          //循环json数组将值绑定到表格中
          var str = "";
          for (let i = 0; i < jsons.length; i++) {
            //获取循环的某一个json对象  {}
            var pro = jsons[i];

            str = "<div id='room' class=\"list-item\" style='width: 100%;'  >\n" +
                    "<a href='javascript:void(0)' onclick='detailsProduct(" + pro.id + ")'>\n" +
                    "        <img class=\"item-image\" src='" + pro.img + "' alt=\"图片1\" display='inline-block'  width='270px'  />\n" +
                    "        <div class=\"item-description\" style='display:inline-block;vertical-align: top' >\n" +
                    "          <h3 class=\"item-title\">幸福里" + pro.name + pro.unitName + "</h3>\n" +
                    "          <p class=\"item-text\">" + pro.roomType + " | " + pro.area + "平米</p>\n" +
                    "          <div class=\"item-actions\">\n" +
                    "            <button class=\"item-button\">" + pro.rentalMethods + "</button>\n" +
                    "            <span class=\"item-span\">" + pro.price + "元/月</span>\n" +
                    "          </div>\n" +
                    "        </div>\n" +
                    "      </div>";

            //循环向指定标签对象中追加元素内容
            $("#pro").append(str);
          }

          //绑定分页链接
          var pageStr = '<span><b style="margin-left: 110px">总计：' + result.totalCount + '条</b></span>';

          //当前页面不等于1时
          if (pageindex != 1) {
            pageStr += '<a href = "javascript:void(0)" style="color:#000000";style="margin-left: 186px;" onclick="loadbypage(pageindex - 1)"><button class="page-link">上一页</button></a>';
          }

          for (let i = 1; i <= totalpage; i++) {
            if (i == pageindex) {
              pageStr += '<span>[' + i + ']</span>';
            } else {
              pageStr += '<a href="javascript:void(0)" style="color:black";style="margin-left: 186px;" onclick="loadbypage(' + i + ')"><button class="page-link active">' + i + '</button></a>';
            }
          }

          //当前页面不等于最后一页时
          if (pageindex != totalpage) {
            pageStr += '<a href = "javascript:void(0)" style="color:black";style="margin-left: 186px;" onclick="loadbypage(pageindex + 1)"><button class="page-link">下一页</button></a>';
          }

          $("#pageDiv").empty();
          $("#pageDiv").append(pageStr);
        }
      });
    }

    //内容的跳转
    function detailsProduct(id) {
      tId = localStorage.getItem("tId"); // 获取租户的id

      $.ajax({
        url: "/history/8080/add",
        type: "post",
        //contentType: "application/json",
        data: {
          hrId: id,
          tId: tId
        },
        dataType: "json",
        success:function (){
          localStorage.setItem("id", id);
          location.href = "details.html";
        }
      });
    }
  </script>

2.2 房屋详情页面

(1)关联表(同房源信息展示)

(2)主要sql语句

    <select id="queryAllById" parameterType="Long" resultMap="houseResources">
        SELECT h.*,
               r.*,
               hu.unit_name,
               hb.*,
               u.mobile,
               u.nick_name
        FROM house_resources h
                 JOIN room r ON h.room_id = r.id
                 JOIN house_unit hu ON r.unit_id = hu.id
                 JOIN house_building hb ON hu.build_id = hb.id
                 left JOIN `sys_user` u ON u.user_id = r.user_id
        WHERE h.STATUS = "0"
          and h.id = #{id}
    </select>

(3)控制层

@GetMapping(value = {"/{id}","/8080/{id}"})
    @ResponseBody
    public ResponseData<House> getById(@PathVariable Long id) throws Exception {
        return ResponseDataUtil.buildOk(houseService.queryAllById(id));
    }

(4)页面显示(主要Ajax代码) 

    $(function() {
        //获取路径地址中的编号
        id = localStorage.getItem("id");
      });

    function loadPage(id) {
        $.get("/house/8080/"+id,{
          id:id
        },function (result) {
          if (result.meta.status == 200) {
            var pro = result.data;

            $("#img").attr("src",pro.img);
            $("#name").html("幸福里"+pro.name+pro.unitName);
            $("#roomNum").html(pro.roomNum);
            $("#roomType").html(pro.roomType);
            $("#area").html(pro.area);
            $("#price").html(pro.price+"/月");
            $("#mobile").html(pro.mobile);

          }
        },"json");

      }

2.3  房源信息管理

(1) 页面显示

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="租赁时间" prop="leaseTime">
        <el-input
          v-model="queryParams.leaseTime"
          placeholder="请输入租赁时间"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="房间号" prop="roomNum">
        <el-input
          v-model="queryParams.roomNum"
          placeholder="请输入房间号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="卧室设施" prop="facilities">
        <el-input
          v-model="queryParams.facilities"
          placeholder="请输入卧室设施"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入描述"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input
          v-model="queryParams.price"
          placeholder="请输入价格"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:resources:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:resources:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:resources:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:resources:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="resourcesList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="房源编号" align="center" prop="id" />
      <el-table-column label="租赁时间" align="center" prop="leaseTime" />
        <el-table-column label="是否出租" align="center" prop="status">
            <template #default="scope">
                <span>{{ getStatusText(scope.row) }}</span>
            </template>
        </el-table-column>
      <el-table-column label="房间号" align="center" prop="roomNum" />
      <el-table-column label="楼栋" align="center" prop="name" />
      <el-table-column label="单元" align="center" prop="unitName" />
      <el-table-column label="卧室设施" align="center" prop="facilities" />
      <el-table-column label="图片" align="center" prop="img" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.img" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="价格" align="center" prop="price" />
      <el-table-column label="租房方式" align="center" prop="rentalMethods" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:resources:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:resources:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改房源对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="resourcesRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="租赁时间" prop="leaseTime">
          <el-input v-model="form.leaseTime" placeholder="请输入租赁时间" />
        </el-form-item>
        <el-form-item label="房间ID" prop="roomId">
          <el-input v-model="form.roomId" placeholder="请输入房间ID" />
        </el-form-item>
        <el-form-item label="卧室设施" prop="facilities">
          <el-input v-model="form.facilities" placeholder="请输入卧室设施" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <image-upload v-model="form.img"/>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="租房方式" prop="rentalMethods">
              <el-input v-model="form.rentalMethods" placeholder="请输入租房方式" />
        </el-form-item>
        <el-form-item label="是否出租" prop="status">
              <el-radio-group v-model="form.status">
                  <el-radio :label="1">已出租</el-radio>
                  <el-radio :label="0">未出租</el-radio>
              </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Resources">
import { listResources, getResources, delResources, addResources, updateResources } from "@/api/rent/resources";

const { proxy } = getCurrentInstance();

const resourcesList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    leaseTime: null,
    status: null,
    roomNum: null,
    facilities: null,
    img: null,
    description: null,
    price: null,
    rentalMethods: null
  },
  rules: {
    roomId: [
      { required: true, message: "外键列不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询房源列表 */
function getList() {
  loading.value = true;
  listResources(queryParams.value).then(response => {
    resourcesList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

//0:未出租 1:已出租
function getStatusText(row) {

    return row.status == 1 ? '已出租' : '未出租';
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    leaseTime: null,
    status: null,
    roomId: null,
    facilities: null,
    img: null,
    description: null,
    price: null,
    rentalMethods: null
  };
  proxy.resetForm("resourcesRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加房源";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getResources(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改房源";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["resourcesRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateResources(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addResources(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除房源编号为"' + _ids + '"的数据项？').then(function() {
    return delResources(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('system/resources/export', {
    ...queryParams.value
  }, `resources_${new Date().getTime()}.xlsx`)
}

getList();
</script>

 (2)api方法

import request from '@/utils/request'

// 查询房源列表
export function listResources(query) {
  return request({
    url: 'house/list',
    method: 'get',
    params: query
  })
}

// 查询房源详细
export function getResources(id) {
  return request({
    url: 'house/room/' + id,
    method: 'get'
  })
}

// 新增房源
export function addResources(data) {
  return request({
    url: 'house',
    method: 'post',
    data: data
  })
}

// 修改房源
export function updateResources(data) {
  return request({
    url: 'house',
    method: 'put',
    data: data
  })
}

// 删除房源
export function delResources(id) {
  return request({
    url: 'house/' + id,
    method: 'delete'
  })
}

(3)增加修改页面 

三、功能模块页面

1、前台模块

（1）登录注册

（2）显示租房信息

（3）查看房源详情信息

（4）个人中心（用户登录后在个人中心可以显示个人信息）

（5）收藏感兴趣的房源

（6）历史浏览记录

（7）租房下单

（8）缴费

2、后台模块 

（1）登录

（2）系统管理（包含用户管理、角色管理、菜单管理、字典管理）

如：用户管理

（3）租赁管理（包含租赁订单管理、房源信息管理）

如：房源信息管理

（4）房屋管理（包含楼栋管理、单元管理、房间管理）

如：房间管理

（5）服务请求管理（包含报修信息管理、投诉信息管理）

如：报修信息管理

（6）收费管理（包含水费余额、电费余额）

如：水费余额

（7）缴费管理（包含电费缴费记录、水费缴费记录）

 如： 电费缴费记录

四、总结

• 深刻体会到了团队协作与项目管理的重要性，及时与团队成员的交流和讨论还是很重要的，只有这样问题才能快速解决项目中遇到的问题
• 经过这次的项目又重新的让我熟练使用Ajax技术
• 熟悉了若依框架，能够快速的写出若依框架的一些简单功能