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

目前主流的前端框架中，有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服务的注册中心，工业强度较高，可用于生产环境，并推荐使用。

# 服务器上启动
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
# 否则貌似版本问题，会出错

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

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

MybatisPlus是mybatis的插件（MP），是一个Mybatis的增强工具，以提升开发的效率。

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

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/21/%E9%A1%B9%E7%9B%AEHouseRenting/

updated at 2022-10-15

项目HouseRenting

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

House Renting