前端访问服务器

摘要:
前端访问服务器PS的本地部署:此系列的进度将缓慢,每次知识点的数量将尽可能少。这样,人们的知识点会更少,也更容易理解,因为少就是多。由于前端和后端完全分离,因此需要在本地环境中部署nginx服务器。配置后,前端和后端将不会出现跨域访问问题。
本地部署前端访问服务器
 

  PS:本系列内容进度节奏会放的很慢,每次知识点都尽量少一点,这样大家接触的知识点少了,会更容易理解,因为少即是多。另外,对于后面代码部分,虽然尽量不用那些复杂的封装和类,但它并不表示看了就能全部记住,并懂得每个函数的用法,在什么时候去调用,清楚它输入的参数类型、能处理的参数类型和输出的结果是什么。它需要动手去调用,去大量的测试,这样才能真正掌握。对于初学者,最好将这些函数和测试用例全都照着录入一次,你会有不一样的体会,我自己去学习一个新框架时,都会尽量将底层的代码亲手录入一次,而不是用复制粘贴。

  由于要实现前后端完全分离,所以需要在本地环境部署一个nginx服务器,配置后前后端访问时就不会出现跨域的问题。当然也可以将前端文件放到python项目中,然后使用路由的方式访问,但这样访问时一般都会多出一层目录出来,对于追求完美有强迫症的人来说还是很别扭的,所以还是学多一样技能,话说要配置这个服务还是挺简单的。

  1.安装nginx服务

  首先下载nginx的windows运行版和Windows Service Wrapper(将nginx安装到系统服务的程序, 这样就不用每次都要手动运行了)

  点击下载

  解压后有两个文件

  前端访问服务器第1张

  将nginx-1.11.5解压到 E:Service 目录下

  前端访问服务器第2张

  解压Windows Service Wrapper,将里面的winsw-1.9-bin.exe复制到 E:Service ginx-1.11.5 下,并改名为nginx-service.exe

  然后在 E:Service ginx-1.11.5 目录下创建一个xml文件,命名为nginx-service.xml,并粘贴下面内容(如果你的路径不是在E:Service下,要注意修改配置文件中的路径)

复制代码
<?xml version="1.0" encoding="UTF-8" ?>
<service>
  <id>nginx</id>
  <name>Nginx Service</name>
  <description>High Performance Nginx Service</description>
  <executable>E:Service
ginx-1.11.5
ginx.exe</executable>
  <logpath>E:Service
ginx-1.11.5</logpath>
  <logmode>roll</logmode>
  <depend></depend>
  <startargument>-p E:Service
ginx-1.11.5</startargument>
  <stopargument>-p E:Service
ginx-1.11.5
ginx.exe -s stop</stopargument>
</service>
复制代码

  前端访问服务器第5张

  运行cmd,输入命令:E:Service ginx-1.11.5 ginx-service.exe install ,将nginx安装成Windows服务

  前端访问服务器第6张

  点击我的电脑 右键 -> 管理 -> 服务 -> 看看是否有 Nginx Service 这个服务,有的话就表示安装成功了

  前端访问服务器第7张

  如果路径写错了,也可以在停止服务后,输入 E:Service ginx-1.11.5 ginx-service.exe uninstall进行卸载

  如果想停止服务,直接点停止好像停不了,可以打开Windows任务管理器,找到nginx-service.exe点右键,在弹出的菜单中点击结束进程树就可以了

  2.修改nginx.conf配置信息

  在 E:Service ginx-1.11.5conf 文件夹找到nginx.conf文件,可以用Uedit或Notepad打开进行编辑,不要用系统自带的记事本,用记事本编辑后可能因为编码问题,nginx服务会启动不了

  将nginx.conf修改为下面内容

复制代码
worker_processes  1; #工作进程的个数,建议设置为等于CPU总核心数

events {
    worker_connections  1024; #单个进程最大连接数(最大连接数=单个连接数*进程数)
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;

    keepalive_timeout  30;

    #gzip  on;

    #服务器的集群配置
    upstream myweb {
        #fair;
        ip_hash;
        # 设置后端接口服务器地址
        server 127.0.0.1:9090 weight=1 max_fails=5 fail_timeout=5s; 
    }

    server {
        listen      81;         # 监听80端口,如果被占用了,可以改成其他端口
        charset     utf-8;
        root        E:\Python\simple\html; # 前端html路径,这里可以修改为你放置前端html的路径
        server_name 127.0.0.1;     # 当前服务的域名,可以有多个,用空格隔开
        
        location / {
                index  Index.html index.html;
        }
        
        # 设置后端接口跳转地址,访问括号中的地址时会自动跳转到后端接口服务上
        location ~* ^/(index|api)/ { # 这里设置
            #请求转向自定义的的负载均衡服务器列表
            proxy_pass                    http://myweb;
            proxy_cache_key            $host$uri$is_args$args;
            proxy_set_header           Host $host; 
            proxy_set_header           X-Real-IP $remote_addr; 
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;  #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
            proxy_connect_timeout      3; #nginx跟后端服务器连接超时时间(代理连接超时)
            proxy_send_timeout         5; #后端服务器数据回传时间(代理发送超时)
            proxy_read_timeout         5; #连接成功后,后端服务器响应时间(代理接收超时)
        }
    }

}
复制代码

  然后到系统服务中,启动 Nginx Service 这个服务就可以了

  打开浏览器输入:http://127.0.0.1:81/ 就可以看到前端页面了(由于前端比较菜,所以直接用H-ui前端自带的图片,没有专门处理)

  前端访问服务器第10张

  打开浏览器输入:http://127.0.0.1:81/login.html就可以看到后端登录页面了

  前端访问服务器第11张

  打开浏览器输入:http://127.0.0.1:81/index/ 就可以看到上一篇中访问 http://127.0.0.1:9090/index/ 的Hello World了(PS:要记得运行PyCharm,打开上一章的main.py文件,然后运行Debug,不然会无法访问)

  前端访问服务器第12张

  如果 Nginx Service 启动不了,可以查看nginx的logs文件夹里的error.log日志,看看提示什么出错了,对应进行修改,很多时候启动不了,都是conf ginx.conf配置文件没有设置好,比如说80端口被占用了,需要修改端口等;或者里面的路径设置错了,windows下的路径都必须是E:\xxx\xxx 这种方式,用linux的路径或少了都会出错,其他出错的话可以查看error.log日志后,将错误复制到百度进行找看解决方案

作者:AllEmpty
出处:http://www.cnblogs.com/EmptyFS/
有兴趣的朋友可以加加python开发QQ群:669058475,大家一起探讨。大家有问题的话可以在群里发问,当然我平时工作也非常繁忙不一定会及时回复。

本文为AllEmpty原创,欢迎转载,但未经同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

只有将自己置空,才能装进更多的东西 

 

免责声明:文章转载自《前端访问服务器》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Notepad++ 自动补全,括号自动完成插件,主题和字体设置Web在线报表设计器使用指南下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

前后端项目对接流程梳理

  课程目标 掌握一个电商网站从设计到上线的整个过程所涉及的流程 具备独立开发一个前端项目的能力 架构设计 前后端完全分离 分层架构 模块化 技术选型 HTMl CSS JS jQery 辅助工具 Webpack NodeJs NPM Shell 效率工具 Sublime Chrome Charles Git 课程安排 //基础框架的搭建 双平台的...

Nginx实现多域名证书HTTPS

目前公司有2个域名,其中这次涉及到3个子域名需要更改为HTTPS传输,分别为: passport.abc.com www.test.com admin.test.com 那么就涉及到购买ssl证书的问题,由于价格问题使用3个不同的证书(每个域名一个)。 由于实验环境,我们就手动生成3个ssl证书 建立目录,及进入目录 [root@gz122haproxy9...

前端工程师必须要知道的SEO技巧(1):rel=nofollow的使用

前提:最近我在找工作,想面试一些关于前端的工作,被问到了一些关于SEO优化的问题.我深深的感觉我所回答的太过于表面,没有深入.所以,又把SEO的内容看了一遍.自己总结如下:有的是看的其他博友的贴子,发现了很多自己不知道东西. rel=nofollow标签的使用方法 noflollow的意思是告诉搜索引擎(百度爬虫),不要追踪此网页上的链接或者不要追踪此特定...

vue项目中,不需前端编译打包,随时修改维护数据

项目中遇到一个需求,基于某些原因,需要后端手动上传图片,然后给出图片地址,然后替换vue项目里的图片地址。打算让后端人员来维护,但是不可能让他们去项目里找到想要的模块,然后替换相应的地址;于是想到的解决办法就是,前端提供一个静态文件(config.js),里面是所有需要替换的图片地址。 一开始是在.vue文件里import该文件,但是每次build打包后,...

Bootstrap开发漂亮的前端界面之实现原理

引:Bootstrap采用的是一个“响应式”设计。响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕 尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设...

nginx使用多端口监听多个服务

###### nginx监听多个端口并转发给不同的服务 ### 第一个监听: upstream odoo { server localhost:8067; } upstream odoochat{ server localhost:8072; } server { listen 8070default_server; listen [::]:80...