前后端分离架构

末蓝、 2023-06-30 10:43 70阅读 0赞

# 一、概述 #

## 前后端分离 ##

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。

在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

对应的数据交互如下图 :

![1341090-20200115111911741-1620492673.png][]

# 二、演示1.0 #

一般来说，在企业中，使用Vue+Java Spring Cloud微服务架构，来做前后端分离。

为了方便，这里使用2个django项目，一个是前端demo-login，一个是后端demo-api。

github地址如下：

[https://github.com/py3study/django-login-example.git][https_github.com_py3study_django-login-example.git]

环境说明：

<table> 
 <thead> 
  <tr> 
   <th>系统</th> 
   <th>python版本</th> 
   <th>docker版本</th> 
   <th>ip</th> 
   <th>主机名</th> 
   <th>配置</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>centos 7.6</td> 
   <td>3.5.2</td> 
   <td>19.03.5</td> 
   <td>192.168.31.229</td> 
   <td>sh-node1</td> 
   <td>2核4G</td> 
  </tr> 
 </tbody> 
</table>

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

![1341090-20200115133024407-1928967671.png][]

跳转首页

![1341090-20200115133047735-764387460.png][]

# 三、演示2.0 #

环境说明：

## 使用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][https_www.cnblogs.com_skaarl_p_9658114.html]

[1341090-20200115111911741-1620492673.png]: https://img2018.cnblogs.com/common/1341090/202001/1341090-20200115111911741-1620492673.png
[https_github.com_py3study_django-login-example.git]: https://github.com/py3study/django-login-example.git
[1341090-20200115133024407-1928967671.png]: https://img2018.cnblogs.com/i-beta/1341090/202001/1341090-20200115133024407-1928967671.png
[1341090-20200115133047735-764387460.png]: https://img2018.cnblogs.com/i-beta/1341090/202001/1341090-20200115133047735-764387460.png
[https_www.cnblogs.com_skaarl_p_9658114.html]: https://www.cnblogs.com/skaarl/p/9658114.html