• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

前后端分离架构

开发技术 开发技术 3小时前 2次浏览

前后端分离架构

一、概述

前后端分离

在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染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: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

前后端分离架构

 

 跳转首页

前后端分离架构

 

三、演示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配置即可。

 

 访问页面

 同上,效果是一模一样的

 

 

 

本文参考链接:

https://www.cnblogs.com/skaarl/p/9658114.html

分类: python 运维开发
标签: docker

一、概述

前后端分离

在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染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: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

前后端分离架构

 

 跳转首页

前后端分离架构

 

三、演示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配置即可。

 

 访问页面

 同上,效果是一模一样的

 

 

 

本文参考链接:

https://www.cnblogs.com/skaarl/p/9658114.html


程序员灯塔
转载请注明原文链接:前后端分离架构
喜欢 (0)