前后端分离架构
一、概述
前后端分离
在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。
在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。
在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
对应的数据交互如下图 :
二、演示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:8000api
cd django-login-example/1.0/demo_api
pip3 install -r requirements.txt
python3 manage.py runserver 0.0.0.0:8001nginx配置
安装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
跳转首页
三、演示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:v1api
这里面的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配置即可。
访问页面
同上，效果是一模一样的
本文参考链接：
腾讯云开发者
