Project_HouseRenting

Article Directory
  1. 1. House Renting

项目实践:前后端分离的租房系统

目前主流的前端框架中,有ReactJs、Vue.js、angularjs等,都会使用到ES6的新特性。目前最流行的前端框架Vue、Angular、React都属于SPA开发阶段(阶段四,网页其实是一个应用程序,single-page-application)。

ReactJs是一个用于构建用户界面的JavaScript框架,是Facebook开发的一款Js框架。ReactJs圈内还有一些框架(Flux,Redux,Ant Design React)。

UmiJS是一个可拔插的企业级Rect应用框架,umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发。

安装过程中,需要用到①node.js(一个基于ChromeV8的引擎的Javascript运行环境,是一个包管理工具包,类似于后端的maven),然后再装②yarn(因为tyarn用的是npm.taobao.org的源,速度快,可以把yarn看作优化了的npm。也可以说用yarn管理npm依赖),然后用tyarn安装③umi。

参考:umi搭建react的IDEA开发环境

所以此项目中,使用UmiJS作为React的构建工具。(tyarn安装了umi之后,在项目中也需要用tyarn引入nmi依赖的,然后等等一些操作)

react项目打包并在本地运行

1
2
3
# 这个项目 npm run build (项目打包命令)之后,生成的事dist文件夹,而不是build文件夹
# 进入dist文件夹,启动项目
live-server

Apache dubbo是一款高性能的Java RPC框架。对SpringBoot有支持,所以后面项目中会有SpringBoot作为基础框架,使用dubbo。

dubbo支持多种注册中心,推荐使用Zookeeper(即,Zookeeper是dubbo的注册中心实现)。Zookeeper是Apache Hadoop的子项目,是一个树型的目录服务,支持变更推送,适合作为Dubbo服务的注册中心,工业强度较高,可用于生产环境,并推荐使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 服务器上启动
sudo docker run --restart=always --name zk -p 2181:2181 -d zookeeper:3.5

# 安装可视化dubbo admin
git clone https://github.com/apache/dubbo-admin.git
vim /home/ubuntu/dubbo-admin/dubbo-admin-server/src/main/resources/application.properties
cd /home/ubuntu/dubbo-admin
mvn clean package
mvn --projects dubbo-admin-backend spring-boot:run


# 中途装了下maven,如果JDK16的话,maven3.6.3版本太低,此处用了3.8.6
wget https://dlcdn.apache.org/maven/maven-3/3.8.6/binaries/apache-maven-3.8.6-bin.tar.gz
sudo mv apache-maven-3.8.6-bin.tar.gz /opt
cd /opt
sudo tar -zxvf apache-maven-3.8.6-bin.tar.gz
export MAVEN_HOME="/opt/apache-maven-3.8.6/bin"
export PATH="$PATH:$MAVEN_HOME"
mvn --version

# 后面还是用回了jdk1.8和maven3.6.3
sudo apt-get install openjdk-8-jdk
sudo apt-get install maven
# 否则貌似版本问题,会出错

IMG_36C837B2E889-1.jpg

Percona是MySQl的衍生版本。Percona为MySQL数据库服务器进行了改进,在功能和性能上较MySQl有显著的提升。该版本提升了在高负载情况下的InnoDB的性能,为DBA提供了一些非常有用的性能诊断工具;另外有更多的参数和命令来控制服务器行为。

在本课程项目中,ORM这一层的技术选型,采用Mybatis框架作为持久层框架,原因是Mybatis对SQL语句编写更加的灵活。

MybatisPlus是mybatis的插件(MP),是一个Mybatis的增强工具,以提升开发的效率。

lombok提供了简单的注解形式来帮助简化消除一些必须有但显得很臃肿的java代码,特别是针对pojo,在MybatisPlus中使用lombox。

IMG_6F1D644A6030-1.jpg

House Renting

后台服务系统,采用SOA的架构思想(面向服务),使用dubbo作为服务治理框架进行搭建。

增加房源数据

1
2
3
url:http://127.0.0.1:18080/house/resources
数据:
{"title":"东方曼哈顿 3室2厅 16000元", "buildingNum":"2", "buildingUnit":"1", "buildingFloorNum":"1", "rent":"1111", "paymentMethod":"1", "rentMethod":"1", "coveredArea":"2", "useArea":"2", "orientation":"南", "decoration":"1", "facilities":"1,2,3,8,9", "houseDesc":"这个经纪人很懒,没写核心卖点", "contact":"张三", "mobile":"11111111111", "time":"1", "propertyCost":"11", "floor":"1/2", "houseType":" 1室1厅1卫1厨1阳台", "estateId":"1005"}

由于前端系统和后台服务系统的端口不同,会导致跨域问题,通过umi提供的反向代理功能解决这个问题。

使用阿里云的OSS存储服务,来存储图片。其中在api那一层(dubbo消费者),实现了该框架,通过访问restful风格的controller来上传图片

Author: Jcwang

Permalink: http://example.com/2022/06/17/Project-HouseRenting/