19. Python from beginner to proficient - Web programming

Enterprise 2023-09-08 23:34:22 views: null

Table of contents

HTTP protocol

Common methods of the HTTP protocol

HTTP status code meaning

Front-end basics 

html

Introduction to CSS

There are three ways to add css styles 

The priority of three ways to use css

bootstrap

javaScript

CGI、FastCGI

CGI

FastCGI

WSGI

How WSGI works

Define WSGI interface

grammar:

Run WSGI service

web framework

HTTP protocol

Common methods of the HTTP protocol

method

describe

GET

Requests the specified page information and returns the entity body.

POST

Submit data to the specified resource to process the request (such as submitting a form or uploading a file). The data is included in the request body. POST requests may result in the creation of new resources and/or modification of existing resources.

HEAD

Similar to a GET request, except that there is no specific content in the returned response, used to obtain headers

PUT

The data transferred from the client to the server replaces the contents of the specified document.

DELETE

Requests the server to delete the specified page.

OPTIONS

Allows clients to view server performance.

HTTP status code meaning

code

meaning

1**

 Information, request received, continue processing

2**

Success, the behavior is successfully accepted, understood and adopted

3**

Redirect, the further action that must be performed in order to complete the request

4**

Client error, the request contains a syntax error or the request cannot be fulfilled

5**

Server error, the server cannot fulfill an obviously invalid request

Front-end basics 

Main front-end languages: Html, Css, JavaScript

html

Html: Hypertext markup language, so it is not a programming language but a markup language. The browser can read the html document and display it in the form of a web page

Markup language: It is a set of markup tags. HTML tags are keywords surrounded by angle brackets and usually consist of two, the first is a start tag and the second is an end tag.

        For example: <html> </html>

                   <p>     </p>

                   <div> </div> #As a box tag, use the content inside as the content inside the box

Example:

 The result shows: Open in web page

Introduction to CSS

CSS: It is the abbreviation of Cascading Style Sheets (cascading style sheets). CSS is a markup language used to define the layout for HTML documents. For example, css involves fonts, colors, margins, heights, widths, background colors, etc.

There are three ways to add css styles 

1. Add directly after the label

Example:

2. You can write all css styles in the head tag and set a class, and then call the class

Example

3. Create a css file, and then call the class name set in the file after loading the css file

Example:

        css file:

        Import the css file and call:

The priority of three ways to use css

The three methods can be mixed at the same time

Priority: from high to low from inside to outside, so the first of the above three is the highest and the third is the lowest

bootstrap

bootstrap: is one of the very good front-end frameworks

Chinese website address: Bootstrap Chinese website

Example:

javaScript

Note: javaScript has nothing to do with java

JavaScript: is a scripting language that can be embedded in HTML code and run by the client browser. Using JavaScript code in web pages can not only achieve web page special effects, but also implement dynamic interactive functions in response to user requests.

Example: Click button popup event

 

static server

Example: Implement a static server and access different web pages based on the client access path

Implementation process

Create a Views directory locally and store two web pages in the directory

contact.html  

<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>明日科技</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Documentation extras -->
<style>
body {
    position: relative; /* For scrollspy */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
  background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: transparent;
  border-color: #563d7c;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}

/* Bootstrap "B" icon */
.bs-docs-booticon {
  display: block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: #563d7c;
  border-radius: 15%;
}
.bs-docs-booticon-sm {
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px;
}
.bs-docs-booticon-lg {
  width: 144px;
  height: 144px;
  font-size: 90px;
  line-height: 140px;
}
.bs-docs-booticon-inverse {
  color: #563d7c;
  background-color: #fff;
}
.bs-docs-booticon-outline {
  background-color: transparent;
  border: 1px solid #cdbfe3;
}

/*
 * Main navigation
 *
 * Turn the `.navbar` at the top of the docs purple.
 */

.bs-docs-nav {
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0;
}
.bs-home-nav .bs-nav-b {
  display: none;
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
  font-weight: 500;
  color: #563d7c;
}
.bs-docs-nav .navbar-nav > li > a:hover,
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #463265;
  background-color: #f9f9f9;
}
.bs-docs-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}
.bs-docs-nav .navbar-header .navbar-toggle {
  border-color: #fff;
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
}

/*
 * Homepage
 *
 * Tweaks to the custom homepage and the masthead (main jumbotron).
 */

/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
  position: relative;
  padding: 30px 0;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
  background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:      -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:         linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
  margin: 0 auto 30px;
}
.bs-docs-masthead h1 {
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.bs-docs-masthead .lead {
  margin: 0 auto 30px;
  font-size: 20px;
  color: #fff;
}
.bs-docs-masthead .version {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #9783b9;
}
.bs-docs-masthead .btn {
  width: 100%;
  padding: 15px 30px;
  font-size: 20px;
}

@media (min-width: 480px) {
  .bs-docs-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
  .bs-docs-masthead h1 {
    font-size: 60px;
  }
  .bs-docs-masthead .lead {
    font-size: 24px;
  }
}
</style>

<!-- Analytics
================================================== -->
</head>
  <body class="bs-docs-home">
    <a id="skippy" class="sr-only sr-only-focusable" href="https://v3.bootcss.com/#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

    <!-- Docs master nav -->
  <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">明日学院</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/course.html" >课程</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/book.html">读书</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/bbs.html">社区</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/servicecenter.html">服务</a>
        </li>
        <li>
          <a href="/contact.html">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
    <!-- Page content of course! -->
<div class="bs-docs-header" id="content" tabindex="-1">
    <div class="container">
      <h1> 联系我们 </h1>
        <div class="lead">
         <address>
             电子邮件：<strong>[email protected]</strong>
             <br>地址：吉林省长春市宽城区北湖科技园
             <br>邮政编码：<strong>130000</strong>
             <br><abbr title="Phone">联系电话:</abbr> 0431-84978981
         </address>
       </div>
      </div>
    </div>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
    明日科技
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
<!-- Documentation extras -->
<style>
body {
    position: relative; /* For scrollspy */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
  background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: transparent;
  border-color: #563d7c;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}

/* Bootstrap "B" icon */
.bs-docs-booticon {
  display: block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: #563d7c;
  border-radius: 15%;
}
.bs-docs-booticon-sm {
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px;
}
.bs-docs-booticon-lg {
  width: 144px;
  height: 144px;
  font-size: 90px;
  line-height: 140px;
}
.bs-docs-booticon-inverse {
  color: #563d7c;
  background-color: #fff;
}
.bs-docs-booticon-outline {
  background-color: transparent;
  border: 1px solid #cdbfe3;
}

/*
 * Main navigation
 *
 * Turn the `.navbar` at the top of the docs purple.
 */

.bs-docs-nav {
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0;
}
.bs-home-nav .bs-nav-b {
  display: none;
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
  font-weight: 500;
  color: #563d7c;
}
.bs-docs-nav .navbar-nav > li > a:hover,
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #463265;
  background-color: #f9f9f9;
}
.bs-docs-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}
.bs-docs-nav .navbar-header .navbar-toggle {
  border-color: #fff;
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
}

/*
 * Homepage
 *
 * Tweaks to the custom homepage and the masthead (main jumbotron).
 */

/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
  position: relative;
  padding: 30px 0;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
  background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:      -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:         linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
  margin: 0 auto 30px;
}
.bs-docs-masthead h1 {
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.bs-docs-masthead .lead {
  margin: 0 auto 30px;
  font-size: 20px;
  color: #fff;
}
.bs-docs-masthead .version {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #9783b9;
}
.bs-docs-masthead .btn {
  width: 100%;
  padding: 15px 30px;
  font-size: 20px;
}

@media (min-width: 480px) {
  .bs-docs-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
  .bs-docs-masthead h1 {
    font-size: 60px;
  }
  .bs-docs-masthead .lead {
    font-size: 24px;
  }
}
</style>

<!-- Analytics
================================================== -->
</head>
  <body class="bs-docs-home">
    <!-- Docs master nav -->
  <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">明日学院</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="http://www.mingrisoft.com/selfCourse.html" >课程</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/book.html">读书</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/bbs.html">社区</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/servicecenter.html">服务</a>
        </li>
        <li>
          <a href="/contact.html">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
    <!-- Page content of course! -->
    <main class="bs-docs-masthead" id="content" tabindex="-1">
  <div class="container">
    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">MR</span>
    <p class="lead">明日学院，是吉林省明日科技有限公司倾力打造的在线实用技能学习平台，该平台于2016年正式上线，主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服务，培养用户的编程思维。</p>
    <p class="lead">
      <a href="/contact.html" class="btn btn-outline-inverse btn-lg">联系我们</a>
    </p>
  </div>
</main>
</body>
</html>

Server python code

# coding:utf-8

import socket  # 导入Socket模块
import re       # 导入re正则模块
from multiprocessing import Process  # 导入Process多线程模块

HTML_ROOT_DIR = "./Views"   # 设置静态文件根目录

class HTTPServer(object):
    def __init__(self):
        """初始化方法"""
        self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM) # 创建Socket对象
    def start(self):
        """开始方法"""
        self.server_socket.listen(128) #设置最多连接数
        print ('服务器等待客户端连接...')
        # 执行死循环
        while True:
            client_socket, client_address = self.server_socket.accept() #建立客户端连接
            print("[%s, %s]用户连接上了" % client_address)
            handle_client_process = Process(target=self.handle_client, args=(client_socket,)) #实例化线程类
            handle_client_process.start() # 开启线程
            client_socket.close()           # 关闭客户端Socket

    def handle_client(self, client_socket):
        """处理客户端请求"""
        # 获取客户端请求数据
        request_data = client_socket.recv(1024) #获取客户端请求数据
        print("request data:", request_data)
        request_lines = request_data.splitlines() # 按照行('\r', '\r\n', \n')分隔
        # 输出每行新型
        for line in request_lines:
            print(line)
        request_start_line = request_lines[0]  # 解析请求报文
        print("*" * 10)
        print(request_start_line.decode("utf-8"))
        # 使用正则表达式，提取用户请求的文件名
        file_name = re.match(r"\w+ +(/[^ ]*) ", request_start_line.decode("utf-8")).group(1)
        # 如果文件名是根目录，设置文件名为file_name
        if "/" == file_name:
            file_name = "/index.html"
        # 打开文件，读取内容
        try:
            file = open(HTML_ROOT_DIR + file_name, "rb")
        except IOError:
            # 如果异常，返回404
            response_start_line = "HTTP/1.1 404 Not Found\r\n"
            response_headers = "Server: My server\r\n"
            response_body = "The file is not found!"
        else:
            # 读取文件内容
            file_data = file.read()
            file.close()
            # 构造响应数据
            response_start_line = "HTTP/1.1 200 OK\r\n"
            response_headers = "Server: My server\r\n"
            response_body = file_data.decode("utf-8")

        response = response_start_line + response_headers + "\r\n" + response_body # 拼接返回数据
        print("response data:", response)
        client_socket.send(bytes(response, "utf-8")) # 向客户端返回响应数据
        client_socket.close()   # 关闭客户端连接

    def bind(self, port):
        """绑定端口"""
        self.server_socket.bind(("", port))

def main():
    """主函数"""
    http_server = HTTPServer()  # 实例化HTTPServer()类
    http_server.bind(8000)      # 绑定端口
    http_server.start()         # 调用start()方法

if __name__ == "__main__":
    main()                    # 执行main()函数

Verification: Run python and then access 127.0.0.1:8000 with the browser

CGI、FastCGI

CGI

CGI (Common Gateway Interface): Common Gateway Interface, which is a program that runs on the server.

How CGI works:

        The client logs into a system and submits the data to the web server through post. The web server itself does not process it. It calls the CGI application to process and return the results. The web server finally returns the results to the client and finally generates a dynamic html page.

CGI limitations: 

        When a user logs in to the website, a CGI request needs to be created and discarded after use. If there are many users, many processes will be created and the server will crash.

Solution: FastCGI

FastCGI

FastCGI：

        An enhanced version of CGI. It uses a process thread pool to handle a series of requests. These process threads are managed by the FastCGI server itself rather than by the web server itself, so FastCGI can enable the server to handle more requests at the same time.

Disadvantage: Inconvenient when writing programs

Solution: WSGI     

WSGI

WSGI (Server Gateway Interface):

        It is a simple and general interface between a web server and a web application or framework defined for the Python language, and it is designed based on FastCGI.

How WSGI works

The client initiates a request to the web server. The bottom layer of WSGI communicates through FastCGI. When the server receives the request, it can pass the environment variables and a callback function to the back-end Application through the socket socket, and then complete it in the application. The page is assembled and then returned to the server through the callback function. Finally, the server responds        

Replenish:

        callback function: A callback function is a function that will be executed immediately after another function finishes executing. A callback function is a function passed as a parameter to another function, and the callback function will be executed inside the passed function.

Define WSGI interface

grammar:

 (The two parameters of this function need to be obtained from the server, so this function must be called by the WSGI server.)

def application(environ,start_response):
    start_response(status,response_headers)
    return [response_body]

        #application: custom function name

        #environ: This is a dict object containing all HTTP request information

        # start_response: a function to send http response

Example:

def application(environ,start_response):
    start_response('200 OK',[('Content-Type,'text/html')])
    return [b'<h1>Hello,World!</h1>']

Example: implement a simple hello, word through wsgiref module

At present, web servers such as apache and nginx conform to the specification of WSGI interface, and a WSGI server is also built in python: wsgiref module

from wsgiref.simple_server  import make_server

#回调函数
def sayHi(environ,start_response):
                                #以元组的方式添加响应头
    start_response("200 OK", [('Content-Type', 'text/html; charset=utf-8')])
    #body部分
    return [b'Hello World']
if __name__=='__main__':
    #三个参数：IP地址默认为127.0.0.1，端口号，回调函数
    ser = make_server('',8000,sayHi)
    #启动程序
    ser.serve_forever()

Verification: The terminal runs this program, and then the browser accesses 127.0.0.1

Run WSGI service

Example: Create a website course page and access different HTML pages based on the access address

Three web pages:

contact.html

<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
    明日科技
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Documentation extras -->
<style>
body {
    position: relative; /* For scrollspy */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
  background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: transparent;
  border-color: #563d7c;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}

/* Bootstrap "B" icon */
.bs-docs-booticon {
  display: block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: #563d7c;
  border-radius: 15%;
}
.bs-docs-booticon-sm {
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px;
}
.bs-docs-booticon-lg {
  width: 144px;
  height: 144px;
  font-size: 90px;
  line-height: 140px;
}
.bs-docs-booticon-inverse {
  color: #563d7c;
  background-color: #fff;
}
.bs-docs-booticon-outline {
  background-color: transparent;
  border: 1px solid #cdbfe3;
}

/*
 * Main navigation
 *
 * Turn the `.navbar` at the top of the docs purple.
 */

.bs-docs-nav {
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0;
}
.bs-home-nav .bs-nav-b {
  display: none;
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
  font-weight: 500;
  color: #563d7c;
}
.bs-docs-nav .navbar-nav > li > a:hover,
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #463265;
  background-color: #f9f9f9;
}
.bs-docs-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}
.bs-docs-nav .navbar-header .navbar-toggle {
  border-color: #fff;
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
}

/*
 * Homepage
 *
 * Tweaks to the custom homepage and the masthead (main jumbotron).
 */

/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
  position: relative;
  padding: 30px 0;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
  background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:      -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:         linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
  margin: 0 auto 30px;
}
.bs-docs-masthead h1 {
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.bs-docs-masthead .lead {
  margin: 0 auto 30px;
  font-size: 20px;
  color: #fff;
}
.bs-docs-masthead .version {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #9783b9;
}
.bs-docs-masthead .btn {
  width: 100%;
  padding: 15px 30px;
  font-size: 20px;
}

@media (min-width: 480px) {
  .bs-docs-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
  .bs-docs-masthead h1 {
    font-size: 60px;
  }
  .bs-docs-masthead .lead {
    font-size: 24px;
  }
}
</style>

<!-- Analytics
================================================== -->
</head>
  <body class="bs-docs-home">
    <a id="skippy" class="sr-only sr-only-focusable" href="https://v3.bootcss.com/#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

    <!-- Docs master nav -->
  <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">明日学院</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/course.html" >课程</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/book.html">读书</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/bbs.html">社区</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/servicecenter.html">服务</a>
        </li>
        <li>
          <a href="/contact.html">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
    <!-- Page content of course! -->
<div class="bs-docs-header" id="content" tabindex="-1">
    <div class="container">
      <h1> 联系我们 </h1>
        <div class="lead">
         <address>
             电子邮件：<strong>[email protected]</strong>
             <br>地址：吉林省长春市南关区财富领域
             <br>邮政编码：<strong>131200</strong>
             <br><abbr title="Phone">联系电话:</abbr> 0431-84978981
         </address>
       </div>
      </div>
    </div>
</body>
</html>

course.html

<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
    明日科技
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
<!-- Documentation extras -->
<style>
body {
    position: relative; /* For scrollspy */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
  background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: transparent;
  border-color: #563d7c;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}

/* Bootstrap "B" icon */
.bs-docs-booticon {
  display: block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: #563d7c;
  border-radius: 15%;
}
.bs-docs-booticon-sm {
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px;
}
.bs-docs-booticon-lg {
  width: 144px;
  height: 144px;
  font-size: 90px;
  line-height: 140px;
}
.bs-docs-booticon-inverse {
  color: #563d7c;
  background-color: #fff;
}
.bs-docs-booticon-outline {
  background-color: transparent;
  border: 1px solid #cdbfe3;
}

/*
 * Main navigation
 *
 * Turn the `.navbar` at the top of the docs purple.
 */

.bs-docs-nav {
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0;
}
.bs-home-nav .bs-nav-b {
  display: none;
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
  font-weight: 500;
  color: #563d7c;
}
.bs-docs-nav .navbar-nav > li > a:hover,
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #463265;
  background-color: #f9f9f9;
}
.bs-docs-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}
.bs-docs-nav .navbar-header .navbar-toggle {
  border-color: #fff;
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
}

/*
 * Homepage
 *
 * Tweaks to the custom homepage and the masthead (main jumbotron).
 */

/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
  position: relative;
  padding: 30px 0;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
  background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:      -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:         linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
  margin: 0 auto 30px;
}
.bs-docs-masthead h1 {
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.bs-docs-masthead .lead {
  margin: 0 auto 30px;
  font-size: 20px;
  color: #fff;
}
.bs-docs-masthead .version {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #9783b9;
}
.bs-docs-masthead .btn {
  width: 100%;
  padding: 15px 30px;
  font-size: 20px;
}

@media (min-width: 480px) {
  .bs-docs-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
  .bs-docs-masthead h1 {
    font-size: 60px;
  }
  .bs-docs-masthead .lead {
    font-size: 24px;
  }
}
</style>

<!-- Analytics
================================================== -->
</head>
  <body class="bs-docs-home">
    <!-- Docs master nav -->
  <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">明日学院</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/course.html" >课程</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/book.html">读书</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/bbs.html">社区</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/servicecenter.html">服务</a>
        </li>
        <li>
          <a href="/contact.html">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
      <!-- Page content of course! -->
      <main class="bs-docs-masthead" id="content" tabindex="-1">
    <div class="container">
      <div class="jumbotron">
        <h1 style="color: #573e7d">明日课程</h1>
        <p style="color: #573e7d">海量课程，随时随地，想学就学。有多名专业讲师精心打造精品课程，让学习创造属于你的生活</p>
        <p><a class="btn btn-primary btn-lg" href="http://www.mingrisoft.com/selfCourse.html" role="button">开始学习</a></p>
      </div>
    </div>
</main>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
    明日科技
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
<!-- Documentation extras -->
<style>
body {
    position: relative; /* For scrollspy */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
  background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: transparent;
  border-color: #563d7c;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}

/* Bootstrap "B" icon */
.bs-docs-booticon {
  display: block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: #563d7c;
  border-radius: 15%;
}
.bs-docs-booticon-sm {
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px;
}
.bs-docs-booticon-lg {
  width: 144px;
  height: 144px;
  font-size: 90px;
  line-height: 140px;
}
.bs-docs-booticon-inverse {
  color: #563d7c;
  background-color: #fff;
}
.bs-docs-booticon-outline {
  background-color: transparent;
  border: 1px solid #cdbfe3;
}

/*
 * Main navigation
 *
 * Turn the `.navbar` at the top of the docs purple.
 */

.bs-docs-nav {
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0;
}
.bs-home-nav .bs-nav-b {
  display: none;
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
  font-weight: 500;
  color: #563d7c;
}
.bs-docs-nav .navbar-nav > li > a:hover,
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #463265;
  background-color: #f9f9f9;
}
.bs-docs-nav .navbar-toggle .icon-bar {
  background-color: #563d7c;
}
.bs-docs-nav .navbar-header .navbar-toggle {
  border-color: #fff;
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
}

/*
 * Homepage
 *
 * Tweaks to the custom homepage and the masthead (main jumbotron).
 */

/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
  position: relative;
  padding: 30px 0;
  color: #cdbfe3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
  background-color: #6f5499;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
  background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:      -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
  background-image:         linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
  background-repeat: repeat-x;
}

/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
  margin: 0 auto 30px;
}
.bs-docs-masthead h1 {
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.bs-docs-masthead .lead {
  margin: 0 auto 30px;
  font-size: 20px;
  color: #fff;
}
.bs-docs-masthead .version {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #9783b9;
}
.bs-docs-masthead .btn {
  width: 100%;
  padding: 15px 30px;
  font-size: 20px;
}

@media (min-width: 480px) {
  .bs-docs-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bs-docs-masthead {
    padding: 80px 0;
  }
  .bs-docs-masthead h1 {
    font-size: 60px;
  }
  .bs-docs-masthead .lead {
    font-size: 24px;
  }
}
</style>

<!-- Analytics
================================================== -->
</head>
  <body class="bs-docs-home">
    <!-- Docs master nav -->
  <header class="navbar navbar-static-top bs-docs-nav" id="top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">明日学院</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/course.html" >课程</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/book.html">读书</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/bbs.html">社区</a>
        </li>
        <li>
          <a href="http://www.mingrisoft.com/servicecenter.html">服务</a>
        </li>
        <li>
          <a href="/contact.html">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
      <!-- Page content of course! -->
      <main class="bs-docs-masthead" id="content" tabindex="-1">
    <div class="container">
      <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">MR</span>
      <p class="lead">明日学院，是吉林省明日科技有限公司倾力打造的在线实用技能学习平台，该平台于2016年正式上线，主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服务，培养用户的编程思维。</p>
      <p class="lead">
        <a href="/contact.html" class="btn btn-outline-inverse btn-lg">联系我们</a>
      </p>
    </div>
</main>
</body>
</html>

python code:

# 从wsgiref模块导入:
from wsgiref.simple_server import make_server
# 导入我们自己编写的application函数:
def app(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])     # 响应信息
    #environ['PATH_INFO']：通过环境变量加一个键值就能获取到请求URL后缀的文件名
    file_name = environ['PATH_INFO'][1:] or 'index.html'        # 获取url参数
    HTML_ROOT_DIR = './Views/'  # 设置HTML文件目录
    try:
        file = open(HTML_ROOT_DIR + file_name, "rb")  # 以二进制方式打开文件
    except IOError:
        response = "The file is not found!"     # 如果异常，返回404
    else:
        file_data = file.read() # 读取文件内容
        file.close()            # 关闭文件
        response = file_data.decode("utf-8") # 构造响应数据

    return [response.encode('utf-8')] # 返回数据

# 创建一个服务器，IP地址为空，端口是8000，处理函数是application:
httpd = make_server('', 8000, app)
print('Serving HTTP on port 8000...')
# 开始监听HTTP请求:
httpd.serve_forever()

Verification: run the python code, and then access the browser

web framework

Web framework: It is a bunch of codes that implement some basic functions and can be understood as a general semi-finished product. By using web framework developers can focus more energy on implementing specific businesses. Web frameworks can be written in any language. These frameworks usually provide some commonly used functions. As long as we follow the WSGI specification, we can also write our own web framework, because the WSGI interface is a simple and universal interface between the server and the framework.

Common functions of web frameworks:

        Management routing

        access database

        Manage sessions and cookies

        Create a template to display Html

        Promote code reuse

Commonly used python web frameworks

        Flask framework: a lightweight web framework, which is based on WSGI and Jinja2 template engine implemented by Werkzeug. Its design philosophy is to keep only the core, and others to enhance its functionality through extension mechanisms

        Django framework: It provides a very complete set of official documents and one-stop solutions, including caching, orm management background, validation, form processing, etc. These features make it easier to develop complex database-driven websites. But it will lead to too high system coupling, if we want to replace some functions inside django, it will be very troublesome

        Bottle Framework: A lightweight web framework. It has only one file, and the code only uses the Python standard library but comes with web framework components such as routing mapping, templates, simple data access, etc., without relying on additional third-party libraries, so it is a true micro-framework. Its syntax is simple and easy to deploy

        Tornado framework: It is a non-blocking web server so it is very fast and can handle thousands of connections per second. This means that Tornado is an ideal web server for constant polling, web sockets and other services. frame

Guess you like

Origin blog.csdn.net/weixin_43812198/article/details/132064017
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com