先後端分離架構

1、概述

先後端分離

在先後端分離的應用模式中，後端僅返回前端所需的數據，再也不渲染HTML頁面，再也不控制前端的效果。至於前端用戶看到什麼效果，從後端請求的數據如何加載到前端中，都由前端本身決定，網頁有網頁的處理方式，App有App的處理方式，但不管哪一種前端，所需的數據基本相同，後端僅需開發一套邏輯對外提供數據便可。

在先後端分離的應用模式中 ，前端與後端的耦合度相對較低。

在先後端分離的應用模式中，咱們一般將後端開發的每一個視圖都稱爲一個接口，或者API，前端經過訪問接口來對數據進行增刪改查。

對應的數據交互以下圖 :

2、演示1.0

通常來講，在企業中，使用Vue+Java Spring Cloud微服務架構，來作先後端分離。

爲了方便，這裏使用2個django項目，一個是前端demo-login，一個是後端demo-api。

github地址以下：

https://github.com/py3study/django-login-example.git

 

環境說明：

系統	python版本	docker版本	ip	主機名	配置
centos 7.6	3.5.2	19.03.5	192.168.31.229	sh-node1	2核4G

 

 

 

1.0是直接使用python啓動項目的

使用1.0目錄裏面的文件，確保本機已經安裝了python3，本文使用的版本爲Python 3.5.2。

前端

git clone https://github.com/py3study/django-login-example.git
cd django-login-example/1.0/demo_login pip3 install -r requirements.txt python3 manage.py runserver 0.0.0.0:8000

 

api

cd django-login-example/1.0/demo_api pip3 install -r requirements.txt python3 manage.py runserver 0.0.0.0:8001

 

nginx配置

安裝nginx，複製配置文件，並啓動nginx

yum install -y nginx cp django-login-example/1.0/nginx_conf/* /etc/nginx/conf.d # 啓動nginx nginx

 

訪問登陸頁面

配置域名解析，若是沒有dns，請修改windows10的hosts文件，添加2條記錄

192.168.31.229 h5.baidu.com 192.168.31.229 api.baidu.com

 

用戶名：xiao

密碼：1234

 

 跳轉首頁

 

3、演示2.0

環境說明：

系統	python版本	docker版本	ip	主機名	配置
centos 7.6	3.5.2	19.03.5	192.168.31.229	sh-node1	2核4G

 

 

 

使用docker運行

django基礎鏡像

cd django-login-example/2.0/django_dockerfile docker build -t django:2.2.4 .

 

前端

這裏面的demo_login.tar.gz是1.0中django項目進行了壓縮打包。

cd django-login-example/2.0/login_dockerfile docker build -t demo_login:v1 . docker run -it -p 8000:8000 demo_login:v1

 

 api

這裏面的demo_api.tar.gz是1.0中django項目進行了壓縮打包。

cd django-login-example/2.0/api_dockerfile docker build -t demo_api:v1 . docker run -it -p 8001:8001 demo_api:v1

 

 配置nginx

 無需改動，使用1.0配置便可。

 

 訪問頁面

 同上，效果是如出一轍的

 

 

 

本文參考連接：

http://www.javashuo.com/article/p-vzydswwi-dk.html