基于Python构建前后端分离服务架构实践，其中Web服务为Nginx，前端采用VUE组件，后端Web服务采用Tornado，数据库使用文档型MongoDB，服务协议主要为restfull。

1. Nginx Web服务

Nginx是俄罗斯人Igor Sysoev编写的轻量级Web服务器，它的发音为 [ˈendʒɪnks] ，它不仅是一个高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。

根据Netcraft的数据，截至2020年9月，Nginx在为25.76%的最繁忙站点提供服务或代理服务。例如一些成功案例：Dropbox, Netflix, Wordpress.com, FastMail.FM。

1.1. 安装部署Nginx服务

Windows环境下安装简明过程如下：
下载Nginx最新Windows操作系统下的稳定版本，http://nginx.org/en/download.html。
例如：http://nginx.org/download/nginx-1.18.0.zip
直接解压到D盘下，修改文件夹名为Niginx，在如下命令行窗口中输入nginx运行启动服务。

1.2. 目录结构说明

在Windows环境下，安装后目录结构说明如下：

文件名称	说明
fastcgi.conf	#fastcgi程序相关配置文件
fastcgi_params	#fastcgi程序参数文件
koi-utf	#编码映射文件
koi-win	#编码映射文件
mime.types	#当 Web 服务器收到静态的资源文件请求时，依据请求文件的后缀名在服务器的 MIME 配置文件中找到对应的 MIME Type，再根据 MIME Type 设置 HTTP Response 的Content-Type，然后浏览器根据 Content-Type 的值处理文件
nginx.conf	#Nginx 服务配置文件
scgi_params	#scgi程序相关配置文件
uwsgi_params	#uwsgi程序相关配置文件
win-utf	#编码映射文件

html 默认解析的静态文件目录，静态网页
logs 日志目录

文件名称	说明
access.log	访问日志，包含所有访问记录
error.log	错误日志，包含访问出错的记录
nginx.pid	Nginx 运行的进程号，同ps -ef

1.3. 配置Nginx服务

配置Nginx服务主要是通过nginx.conf文件来完成的，默认配置如下：

    server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;#try_files $uri $uri/ @router; }

1.4. 启停Nginx服务

Nginx服务默认端口是80，在浏览器中输入http://localhost，看到如下提示，服务安装启动成功。

停止nginx，命令行进入nginx根目录，执行如下命令，停止服务器：

# 启动nginx服务
D:/nginx>start nginx
# 或
D:/nginx>nginx
#注：建议使用第一种，第二种会使你的cmd窗口一直处于执行中，不能进行其他命令操作。# 强制停止nginx服务器，如果有未处理的数据，丢弃
D:/nginx> nginx -s stop# 优雅的停止nginx服务器，如果有未处理的数据，等待处理完成之后停止
D:/nginx> nginx -s quit

2. Vue 部署

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

下载VUE包，VUE下载地址：https://codeload.github.com/vuejs/vue/zip/2.6。
可以单独下载开发版：https://cn.vuejs.org/js/vue.js，文件体积大，提供错误提示等，包含完整的警告和调试模式。
可以单独下载运行版：https://cn.vuejs.org/js/vue.min.js，删除了警告，33.30KB min+gzip。

2.1. 部署Vue到Niginx服务器上

手动部署VUE，只需把下载Vue包中的dist目录整体拷贝到html文件夹下，再把相关例子examples文件也拷贝到html文件夹下，这样，就可以查看Vue例子。

注意代码中引用js文件的路径，例如<script src="../../dist/vue.min.js"></script>，“dist”目录层次及名称要与样例的保持一致，默认是在html，也就是根目录下。

例如：输入http://localhost/examples/grid/

2.2. 我自己的网页

假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

下面是我自己试验网页，多个复选框，绑定到同一个数组。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>我自己的网页</title><link rel="stylesheet" href="style.css"><!-- Delete ".min" for console warnings in development --><script src="../../dist/vue.min.js"></script></head><body><div id="app">{{ message }}</div><div id='example-3'><input type="checkbox" id="jack" value="汽油" v-model="checkedNames"><label for="jack">汽油</label><input type="checkbox" id="john" value="柴油" v-model="checkedNames"><label for="john">柴油</label><input type="checkbox" id="mike" value="乙醇" v-model="checkedNames"><label for="mike">乙醇</label><br><span>Checked names: {{ checkedNames }}</span></div><script >new Vue({el:'#app',data: {message:'您好！这是我演示VUE使用的!'}});new Vue({el: '#example-3',data: {checkedNames: []}})        </script></body>
</html>

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值

把这个网页命名为index.html，放在Nginx服务器根目录html下。浏览器输入：http://localhost/

2.3. 部署vue-echarts/demo

vue-echarts是基于echarts封装实现的一个组件库，直接按照正常的组件引用方式，安装引用即可。

vue-echarts下载地址，https://github.com/ecomfe/vue-echarts/archive/master.zip

拷贝vue-echarts-master文件包下，dist文件夹下的vue-echarts.js文件到Nginx服务器html/dist文件夹下；拷贝demo文件目录到html。在浏览器上输入http://localhost/demo/

3. Tornado Web框架

Tornado是一个Python web框架和异步网络库，最初是在FriendFeed开发的。通过使用无阻塞网络I/O，Tornado可以扩展到数万个开放连接，使其成为长时间轮询、WebSocket和其他需要与每个用户建立长期连接的应用程序的理想选择。

D:\Python>pip install -i https://pypi.tuna.tsinghua.edu.cn/simple tornado

参考：
《Tornado》简书，JunChow520 ， 2019年7月
Tornado Web Server
《Nginx安装及配置详解包括windows环境》博客园，霞光里，2018年5月
《Vue 之 Nginx 部署》博客园， DreamTestEngineer ，2019年10月
《Vue项目部署–nginx配置》吴惟刚个人博客网站，吴惟刚，2020年5月
Vue-ECharts

Nginx+Vue.js+Tornado前后端分离架构环境实践（1）相关推荐

vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
Spring Boot + Vue.js 实现前后端分离（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者: 梁小生0101 链接:juejin.im/post/5c6 ...
ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建我使用的是springboot1.5.10+jdk8+ide ...
Node.js + Express + Springboot实现前后端分离架构
2019独角兽企业重金招聘Python工程师标准>>> 架构说明前后端分离架构,很多团队都是通过"代理转发"浏览器发往后端的rest请求来解决跨域问题,可以用n ...
前后端分离架构一直没机会实战？1周完成Vue+Core WebApi移动商城实战(含源码)！...
疫情让企业受到重创! 就业形势更加严峻! 前后端分离架构成了当下最高频的招聘需求还没实战过前后端分离? 花3分钟阅读本文, 带你全面了解前后端分离,轻松面试拿高薪! Web发展至今技术非常成熟,主流 ...
用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目前言由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
spring boot+iview 前后端分离架构之文件上传的实现（三十一）
spring boot 与 iview 前后端分离架构之文件上传的实现(三十一) 公众号文件上传前端改造 main.js引入配置的全局变量编写baseImgUpload图片上传组件 baseIm ...
JavaWeb前后端分离架构
目录 JavaWeb前后端分离架构前后分离的优势在本机中部署项目关于验证 Cookie & Session Token & JWT token验证流程 JWT的构成 JWT搭建使 ...

Nginx+Vue.js+Tornado前后端分离架构环境实践（1）