【开源免费】Vue+SpringBoot打造房屋租售信息系统，初学者入门实战项目

浅浅的花香味﹌ 2023-09-24 13:56 56阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN学院、蓝桥云课认证讲师。

--------------------

<table> 
 <thead> 
  <tr> 
   <th>标题</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>项目类型</td> 
   <td><strong>开源项目</strong></td> 
  </tr> 
  <tr> 
   <td>项目名称</td> 
   <td><strong><span><span><span> 房屋租售信息系统 \color{red}{房屋租售信息系统} </span><span><span><span style="height: 0.6833em;"></span><span style="color: red;"><span style="color: red;">房屋租售信息系统</span></span></span></span></span></span></strong></td> 
  </tr> 
  <tr> 
   <td>Git 仓库</td> 
   <td><strong><a href="https://gitee.com/yyzwz/house-sell" rel="nofollow">https://gitee.com/yyzwz/house-sell</a></strong></td> 
  </tr> 
  <tr> 
   <td>增值服务</td> 
   <td>【<span><span><span> 文档、部署、讲解 \color{red}{文档、部署、讲解} </span><span><span><span style="height: 0.6833em;"></span><span style="color: red;"><span style="color: red;">文档、部署、讲解</span></span></span></span></span></span>】 <strong><a href="https://bbs.csdn.net/topics/617132402" rel="nofollow">https://bbs.csdn.net/topics/617132402</a></strong></td> 
  </tr> 
  <tr> 
   <td>项目编码</td> 
   <td><strong>ky013</strong></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][50de48c7f1aa411fb8cac1312f69afb6.png_pic_center]

--------------------

#### 目录 ####

*   *  软件简介
     *  软件技术选型
     *   *  前端
         *  后端
         *  数据库
         *  开发环境
         *  图表(Antv)
     *  软件架构分析
     *  登陆注册
     *  房源发布
     *  买家预定
     *  卖家确认
     *  买家付款
     *  其他模块
     *  样例代码
     *   *  查询买家的房屋求购单
         *  新增房屋出售单
         *  房屋租赁单审核
         *  前端房屋录入表单
     *  免责声明

--------------------

### 软件简介 ###

本软件是**基于 Vue 和 SpringBoot 的房屋出租出售信息系统**，主要包含了**房屋租赁、房屋出售、房屋交易**这三条业务线，开发者可以在这个项目上进行二次开发，以满足自己的需要。

![在这里插入图片描述][dd39cdcd15bf4b3baf2d578c3d533904.png_pic_center]

本系统采用了**基于角色的访问控制**，角色和菜单关联，一个角色可以配置多个菜单权限；然后再将用户和角色关联，一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限，更方便管理者进行权限管控。

本系统还**封装了文件管理功能**，在其他模块如若要实现图片/文件上传预览时，前端只需导入现成的 Vue 组件即可实现（使用 viewerjs 依赖实现），后端只需定义 String 类型的实体类变量即可，无需再去研究文件上传预览的相关功能，简化了开发者的工作量。

本系统还自带**基于 beetl 代码生成器**功能，开发者只需要输入类名（如 Student）和类备注（如学生），运行 main 函数即可自动生成后端的所有 MVC 结构代码，无需开发增删改查的 API 接口。对于前端，开发者只需输入后端实体类的完整路径，利用 Java 的反射原理，拿到后端实体类的字段，即可自动生成前端所有代码，生成的模块代码包含基础的增删改查功能，简化开发者的工作量。

![在这里插入图片描述][74bfc101e5cf41ce89bb5f57fcfc9a61.png_pic_center]  
![在这里插入图片描述][2832950053164a54a579f05b9d7493e2.png_pic_center]  
![在这里插入图片描述][bed02f5b1cdb40debb7e3d6f1d8a31b8.png_pic_center]

### 软件技术选型 ###

#### 前端 ####

Vue：Vue 是构建前端界面的核心框架，本系统采用 2.6.14 版本。

View UI：基于 Vue.js 2 的组件库，本系统采用 4.7.0 版本。

#### 后端 ####

*  Spring Boot：构建系统核心逻辑的后端框架，本系统采用 2.7.4 版本。
 *  MyBatis Plus：后端连接数据库的框架，本系统采用 3.5.2 版本。

#### 数据库 ####

*  MySQL：本项目的主数据库，本系统采用 8.0.30 版本。
 *  Redis：本系统采用基于 Windows 版本的 Redis，用于图形验证码和用户菜单权限的临时存储，采用了 5.0.14.1 版本。

#### 开发环境 ####

*  VsCode：项目前端的开发工具，使用版本为 1.68.0。
 *  IntelliJ IDEA ：项目后端的开发工具，使用版本为 2022.2.2。
 *  JDK：Java 的开发环境，使用版本为 17.0.5。
 *  Maven：后端项目的打包工具，使用版本为 3.6.2。
 *  NodeJs：前端项目的开发环境，使用版本为 16.13.0。

#### 图表(Antv) ####

![在这里插入图片描述][2b8f02d280074a6e9d9a1fe72ea5dad1.png_pic_center]  
![在这里插入图片描述][5a2d894a382346c2ac6efc76198184dc.png_pic_center]  
![在这里插入图片描述][588e00634a1742e1b37ca978814f1b92.png_pic_center]

![在这里插入图片描述][2f9c1743bc5646f2a3bc92f2fbb967db.png_pic_center]

--------------------

### 软件架构分析 ###

基于 Vue 和 SpringBoot 的房屋出租出售信息系统包括了**房屋租赁、房屋出售、房屋交易**这三条业务线，**给房屋购买人、出售人和平台管理员使用**，其架构如下图所示。

![在这里插入图片描述][008389893f654c6993f446389c4ee83c.png_pic_center]

接下来，分别对业务流程进行详细介绍。

--------------------

### 登陆注册 ###

登陆注册用于实现用户的登陆功能和注册功能，用户在登陆时需要输入登陆账号、密码和图形验证码，系统效验无误后即可进入系统，如如下所示。

![在这里插入图片描述][50de48c7f1aa411fb8cac1312f69afb6.png_pic_center]

可以用企业微信扫码登录。

![在这里插入图片描述][1ec22f112cb6419b93d9356107774544.png_pic_center]

当然允许新用户注册，如下图所示。

![在这里插入图片描述][2169a3087e514376bc871060a993934b.png_pic_center]

登录成功后进入首页，如下图所示。

![在这里插入图片描述][3f335bb03d2349dd980b1fba8ebac503.png_pic_center]

--------------------

### 房源发布 ###

卖家/管理员首先发布房屋销售信息，如下图所示。

![在这里插入图片描述][cf49034fb9b541ce9cc2a6d35ea1beb9.png_pic_center]

卖家/管理员也可以发布房屋出租信息，如下图所示。

![在这里插入图片描述][61429c3be2404dd0a4f2e1a4e486c1f3.png_pic_center]

--------------------

### 买家预定 ###

买家进入系统后，可以浏览到公开的房屋销售信息，如下图所示。

![在这里插入图片描述][ece5eb707ed7439180d6d7f9fa0b1745.png_pic_center]

买家挑选满意的房屋后，可以下预订单，如下图所示。

![在这里插入图片描述][30f107e3f4c648c192875a86c8751db9.png_pic_center]

预定完成后，买家可以看到自己申请的房屋销售数据，如下图所示。

![在这里插入图片描述][96885491509040648cd3773fbf192632.png_pic_center]

当然也可以看到公开的房屋租赁信息，如下图所示。

![在这里插入图片描述][bee8b5187dd648a8b072dfbef0b9ad24.png_pic_center]

同理，买家可以完成出租预定，如下图所示。

![在这里插入图片描述][4f0a5f59a0024a928fcfb7399d350e36.png_pic_center]

预定完成后，买家可以看到自己申请的房屋租赁数据，如下图所示。

![在这里插入图片描述][4e525dd63c20449d8951c19cb228ceff.png_pic_center]

--------------------

### 卖家确认 ###

买家下完房屋销售预订单后，需要卖家再次确认，如下图所示。

![在这里插入图片描述][e3ed42869ed14e71b19d5843245d6cd2.png_pic_center]

卖家点击每一行订单的同意即可完成确认，如下图所示。

![在这里插入图片描述][9e284a57436f4cae98422c7f5487f0d0.png_pic_center]

同理，买家下完房屋租赁预订单后，也需要卖家再次确认，如下图所示。

![在这里插入图片描述][c88713ac5be446d8ba2a3b4275865f99.png_pic_center]

卖家也点击每一行订单的同意即可完成确认，如下图所示。

![在这里插入图片描述][fe636dbdf9eb4ae6832f8f2dec5a5000.png_pic_center]

--------------------

### 买家付款 ###

卖家再次确认后，交易成功定了下来，接下来买家就可以查到房屋销售交易单，如下图所示。

![在这里插入图片描述][0cc391cfe5a34ed08753e094e241b3b4.png_pic_center]

同理买家也可以查到房屋租赁的交易单，如下图所示。

![在这里插入图片描述][df5525d8cda14b6faf0324a939e219b4.png_pic_center]

记下来就可以进行付款了，如下图所示。

![在这里插入图片描述][9d01c7b97cbb4fc8ae4bd7a3a2662495.png_pic_center]  
![在这里插入图片描述][1a4ce216306a40f59d8a0593b0ffd5ec.png_pic_center]

交易完成后，买家可查询自己的历史交易记录。

![在这里插入图片描述][fb12b4d82b864315afe22217cf71a186.png_pic_center]

--------------------

### 其他模块 ###

系统支持维护用户，如下图所示。

![在这里插入图片描述][59e296742d634b24b2ed8c8cf8a39969.png_pic_center]

系统支持维护组织架构，如下图所示。

![在这里插入图片描述][ddbbd9d600e54c7bbd4440aebeb02db8.png_pic_center]

系统支持维护文件，如下图所示。

![在这里插入图片描述][6f136ed9b76e4566b589b9c96fe6a0d5.png_pic_center]

系统支持维护日志，如下图所示。

![在这里插入图片描述][a3712b55c115449f8af66a421da8a08c.png_pic_center]

系统支持维护数据字典，如下图所示。

![在这里插入图片描述][e386ee46677140ca96228a70c60932a7.png_pic_center]

--------------------

### 样例代码 ###

#### 查询买家的房屋求购单 ####

@RequestMapping(value = "/getByMyPage", method = RequestMethod.GET)
    @ApiOperation(value = "查询买家的房屋求购单")
    public Result<IPage<CustomerSell>> getByMyPage(@ModelAttribute CustomerSell customerSell ,@ModelAttribute PageVo page){
        
        QueryWrapper<CustomerSell> qw = new QueryWrapper<>();
        qw.eq("user_id",securityUtil.getCurrUser().getId());
        if(customerSell.getStatus() > -1) {
        
            qw.eq("status",customerSell.getStatus());
        }
        if(!ZwzNullUtils.isNull(customerSell.getHouseType())) {
        
            qw.inSql("id","select id from t_customer_sell where house_id in (select id from t_house_sell where house_type like '%" + customerSell.getHouseType() + "%')");
        }
        if(!ZwzNullUtils.isNull(customerSell.getAddress())) {
        
            qw.inSql("id","select id from t_customer_sell where house_id in (select id from t_house_sell where address like '%" + customerSell.getAddress() + "%')");
        }
        if(!ZwzNullUtils.isNull(customerSell.getUserName())) {
        
            qw.inSql("id","select id from t_customer_sell where user_id in (select id from a_user where nickname like '%" + customerSell.getUserName() + "%')");
        }
        IPage<CustomerSell> data = iCustomerSellService.page(PageUtil.initMpPage(page),qw);
        for (CustomerSell sell : data.getRecords()) {
        
            HouseSell houseSell = iHouseSellService.getById(sell.getHouseId());
            sell = HouseVoChangeUtils.fillCustomerSellByHouseSell(sell,houseSell);
            User user = iUserService.getById(sell.getUserId());
            sell = HouseVoChangeUtils.fillCustomerSellByUser(sell,user);
        }
        return new ResultUtil<IPage<CustomerSell>>().setData(data);
    }

--------------------

#### 新增房屋出售单 ####

@RequestMapping(value = "/insert", method = RequestMethod.POST)
    @ApiOperation(value = "新增房屋出售单")
    public Result<HouseSell> insert(HouseSell houseSell) {
        
        houseSell.setSellerId(securityUtil.getCurrUser().getId());
        String mobile = houseSell.getMobile();
        if(!ZwzNullUtils.isNull(mobile)) {
        
            QueryWrapper<User> qw = new QueryWrapper<>();
            qw.eq("mobile",mobile);
            List<User> userList = iUserService.list(qw);
            if(userList.size() > 0) {
        
                houseSell.setSellerId(userList.get(0).getId());
            }
        }
        iHouseSellService.saveOrUpdate(houseSell);
        return new ResultUtil<HouseSell>().setData(houseSell);
    }

--------------------

#### 房屋租赁单审核 ####

@RequestMapping(value = "/pass", method = RequestMethod.POST)
    @ApiOperation(value = "审核")
    public Result<Object> pass(@RequestParam String id){
        
        HouseLease se = iHouseLeaseService.getById(id);
        if(se == null) {
        
            return ResultUtil.error("不存在");
        }
        se.setStatus(0);
        iHouseLeaseService.saveOrUpdate(se);
        return ResultUtil.success();
    }

--------------------

#### 前端房屋录入表单 ####

<Form ref="form" :model="form" :label-width="100" :rules="formValidate" label-position="left">
        <FormItem label="户型" prop="houseType">
            <Select v-model="form.houseType" clearable style="width:570px">
                <Option value="单身公寓">单身公寓</Option>
                <Option value="三室一厅">三室一厅</Option>
                <Option value="四室一厅">四室一厅</Option>
                <Option value="五室两厅">五室两厅</Option>
                <Option value="其他">其他</Option>
            </Select>
        </FormItem>
        <FormItem label="面积（平方）" prop="houseSize">
            <InputNumber v-model="form.houseSize" min="0" max="5000000" style="width:570px"></InputNumber>
        </FormItem>
        <FormItem label="价格（万元）" prop="houseMoney">
            <InputNumber v-model="form.houseMoney" min="0" max="5000000" style="width:570px"></InputNumber>
        </FormItem>
        <FormItem label="房屋图片" prop="imageUrl">
            <upload-pic-input v-model="form.imageUrl" style="width:570px"></upload-pic-input>
        </FormItem>
        <FormItem label="电话" prop="mobile">
            <Input v-model="form.mobile" clearable style="width:570px" />
        </FormItem>
        <FormItem label="联系人" prop="houseOwner">
            <Input v-model="form.houseOwner" clearable style="width:570px" />
        </FormItem>
        <FormItem label="地址" prop="address">
            <Input v-model="form.address" clearable style="width:570px" />
        </FormItem>
        <FormItem label="备注" prop="remark">
            <Input v-model="form.remark" type="textarea" :rows="4" clearable style="width:570px" />
        </FormItem>
        <Form-item class="br">
            <Button @click="handleSubmit" :loading="submitLoading" type="primary">提交并保存</Button>
            <Button @click="handleReset">重置</Button>
            <Button type="dashed" @click="close">关闭</Button>
        </Form-item>
    </Form>

--------------------

### 免责声明 ###

*  本项目开源，仅供个人学习使用，遵循 GPL-3.0 开源协议，**转发 / 商用授权请联系作者，否则后果自负**。
 *  作者拥有本软件构建后的应用系统全部内容所有权及独立的知识产权。
 *  如有问题，欢迎在仓库 Issue 留言，看到后会第一时间回复。相关意见会酌情考虑，但没有一定被采纳的承诺或保证。

下载本系统代码的用户，**必须同意以下内容，否则请勿下载**！

1.  出于自愿而使用/开发本软件，了解使用本软件的风险，且同意自己承担使用本软件的风险。
2.  利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关，作者对此不承担任何责任。
3.  在任何情况下，对于因使用或无法使用本软件而导致的任何难以合理预估的损失（包括但不仅限于商业利润损失、业务中断与业务信息丢失），作者概不承担任何责任。
4.  必须了解使用本软件的风险，作者不承诺提供一对一的技术支持、使用担保，也不承担任何因本软件而产生的难以预料的问题的相关责任。

--------------------

源代码地址：
    GitEE：https://gitee.com/yyzwz/house-sell
    GitHub：https://github.com/yyzwz/house-sell
    CSDN：https://gitcode.net/qq_41464123/house-sell

![在这里插入图片描述][37e492cfae4a4091b8f00b1b506f9559.png_pic_center]

[Designer]: https://blog.csdn.net/qq_41464123
[50de48c7f1aa411fb8cac1312f69afb6.png_pic_center]: https://img-blog.csdnimg.cn/50de48c7f1aa411fb8cac1312f69afb6.png#pic_center
[dd39cdcd15bf4b3baf2d578c3d533904.png_pic_center]: https://img-blog.csdnimg.cn/dd39cdcd15bf4b3baf2d578c3d533904.png#pic_center
[74bfc101e5cf41ce89bb5f57fcfc9a61.png_pic_center]: https://img-blog.csdnimg.cn/74bfc101e5cf41ce89bb5f57fcfc9a61.png#pic_center
[2832950053164a54a579f05b9d7493e2.png_pic_center]: https://img-blog.csdnimg.cn/2832950053164a54a579f05b9d7493e2.png#pic_center
[bed02f5b1cdb40debb7e3d6f1d8a31b8.png_pic_center]: https://img-blog.csdnimg.cn/bed02f5b1cdb40debb7e3d6f1d8a31b8.png#pic_center
[2b8f02d280074a6e9d9a1fe72ea5dad1.png_pic_center]: https://img-blog.csdnimg.cn/2b8f02d280074a6e9d9a1fe72ea5dad1.png#pic_center
[5a2d894a382346c2ac6efc76198184dc.png_pic_center]: https://img-blog.csdnimg.cn/5a2d894a382346c2ac6efc76198184dc.png#pic_center
[588e00634a1742e1b37ca978814f1b92.png_pic_center]: https://img-blog.csdnimg.cn/588e00634a1742e1b37ca978814f1b92.png#pic_center
[2f9c1743bc5646f2a3bc92f2fbb967db.png_pic_center]: https://img-blog.csdnimg.cn/2f9c1743bc5646f2a3bc92f2fbb967db.png#pic_center
[008389893f654c6993f446389c4ee83c.png_pic_center]: https://img-blog.csdnimg.cn/008389893f654c6993f446389c4ee83c.png#pic_center
[1ec22f112cb6419b93d9356107774544.png_pic_center]: https://img-blog.csdnimg.cn/1ec22f112cb6419b93d9356107774544.png#pic_center
[2169a3087e514376bc871060a993934b.png_pic_center]: https://img-blog.csdnimg.cn/2169a3087e514376bc871060a993934b.png#pic_center
[3f335bb03d2349dd980b1fba8ebac503.png_pic_center]: https://img-blog.csdnimg.cn/3f335bb03d2349dd980b1fba8ebac503.png#pic_center
[cf49034fb9b541ce9cc2a6d35ea1beb9.png_pic_center]: https://img-blog.csdnimg.cn/cf49034fb9b541ce9cc2a6d35ea1beb9.png#pic_center
[61429c3be2404dd0a4f2e1a4e486c1f3.png_pic_center]: https://img-blog.csdnimg.cn/61429c3be2404dd0a4f2e1a4e486c1f3.png#pic_center
[ece5eb707ed7439180d6d7f9fa0b1745.png_pic_center]: https://img-blog.csdnimg.cn/ece5eb707ed7439180d6d7f9fa0b1745.png#pic_center
[30f107e3f4c648c192875a86c8751db9.png_pic_center]: https://img-blog.csdnimg.cn/30f107e3f4c648c192875a86c8751db9.png#pic_center
[96885491509040648cd3773fbf192632.png_pic_center]: https://img-blog.csdnimg.cn/96885491509040648cd3773fbf192632.png#pic_center
[bee8b5187dd648a8b072dfbef0b9ad24.png_pic_center]: https://img-blog.csdnimg.cn/bee8b5187dd648a8b072dfbef0b9ad24.png#pic_center
[4f0a5f59a0024a928fcfb7399d350e36.png_pic_center]: https://img-blog.csdnimg.cn/4f0a5f59a0024a928fcfb7399d350e36.png#pic_center
[4e525dd63c20449d8951c19cb228ceff.png_pic_center]: https://img-blog.csdnimg.cn/4e525dd63c20449d8951c19cb228ceff.png#pic_center
[e3ed42869ed14e71b19d5843245d6cd2.png_pic_center]: https://img-blog.csdnimg.cn/e3ed42869ed14e71b19d5843245d6cd2.png#pic_center
[9e284a57436f4cae98422c7f5487f0d0.png_pic_center]: https://img-blog.csdnimg.cn/9e284a57436f4cae98422c7f5487f0d0.png#pic_center
[c88713ac5be446d8ba2a3b4275865f99.png_pic_center]: https://img-blog.csdnimg.cn/c88713ac5be446d8ba2a3b4275865f99.png#pic_center
[fe636dbdf9eb4ae6832f8f2dec5a5000.png_pic_center]: https://img-blog.csdnimg.cn/fe636dbdf9eb4ae6832f8f2dec5a5000.png#pic_center
[0cc391cfe5a34ed08753e094e241b3b4.png_pic_center]: https://img-blog.csdnimg.cn/0cc391cfe5a34ed08753e094e241b3b4.png#pic_center
[df5525d8cda14b6faf0324a939e219b4.png_pic_center]: https://img-blog.csdnimg.cn/df5525d8cda14b6faf0324a939e219b4.png#pic_center
[9d01c7b97cbb4fc8ae4bd7a3a2662495.png_pic_center]: https://img-blog.csdnimg.cn/9d01c7b97cbb4fc8ae4bd7a3a2662495.png#pic_center
[1a4ce216306a40f59d8a0593b0ffd5ec.png_pic_center]: https://img-blog.csdnimg.cn/1a4ce216306a40f59d8a0593b0ffd5ec.png#pic_center
[fb12b4d82b864315afe22217cf71a186.png_pic_center]: https://img-blog.csdnimg.cn/fb12b4d82b864315afe22217cf71a186.png#pic_center
[59e296742d634b24b2ed8c8cf8a39969.png_pic_center]: https://img-blog.csdnimg.cn/59e296742d634b24b2ed8c8cf8a39969.png#pic_center
[ddbbd9d600e54c7bbd4440aebeb02db8.png_pic_center]: https://img-blog.csdnimg.cn/ddbbd9d600e54c7bbd4440aebeb02db8.png#pic_center
[6f136ed9b76e4566b589b9c96fe6a0d5.png_pic_center]: https://img-blog.csdnimg.cn/6f136ed9b76e4566b589b9c96fe6a0d5.png#pic_center
[a3712b55c115449f8af66a421da8a08c.png_pic_center]: https://img-blog.csdnimg.cn/a3712b55c115449f8af66a421da8a08c.png#pic_center
[e386ee46677140ca96228a70c60932a7.png_pic_center]: https://img-blog.csdnimg.cn/e386ee46677140ca96228a70c60932a7.png#pic_center
[37e492cfae4a4091b8f00b1b506f9559.png_pic_center]: https://img-blog.csdnimg.cn/37e492cfae4a4091b8f00b1b506f9559.png#pic_center