In this article, I will use an open source HTML page to modify, to meet our use requirements, the ultimate goal is to learn how to use web pages, to meet their own needs.

First, our environment is Python3 and we use Web frameworks: Tornado and Request request pages.

Step 1: Our fixed writing, write a logical processing module

First, we imported tornado module:

from tornado import web,ioloop,httpserver
Copy the code

Then we introduce tornado’s fixed format:

Logic processing module
	class MainPageHandler(web.RequestHandler):
    	def get(self, *args, **kwargs):
        self.write('Welcome to this page')
        
	# routing
	application = web.Application([
          	  (r"/", MainPageHandler),
        		])

	# socket service
	if __name__ == '__main__':

        		http_server = httpserver.HTTPServer(application)
        		http_server.listen(8080)
        		ioloop.IOLoop.current().start()
Copy the code

All of this is tornado’s fixed format, which requires only simple modifications when we use it, which is the charm and efficiency of modular development.

Step 2: Return a page

Here, we introduce Free Bootstrap Admin Template | AdminLTE. IO, such a module

This module is based on Bootstrap In GitHub file, there are two files: index and search. HTML. The index file can be used, but the search. HTML file is used when writing matches in the future We don’t need it yet.

Logic processing module
class MainPageHandler(web.RequestHandler):
    def get(self, *args, **kwargs):
       self.render('index.html')
Copy the code

Step 3: Set the template

1: indicates the path of the standard template. Set the static file path

Since there are a lot of dynamic components in this page, we need to write the static components so that we can reference them later.

# set
settings = {
    'template_path':'template'.'static_path':'static',}Copy the code

Step 4: The front-end submits data to the back-end

In HTML,from is an HTML tag that is used to submit data. In our index.html file

<form class="form-horizontal" method="post" action="/search">
Copy the code

Method is a method, index is a post method

Action is the path, and the path of this index is /search

<input type="text" class="form-control" name="word" id="inputEmail3" placeholder="Please enter the word you want to query.">
Copy the code

This is the input box in the web page, where name is the name of the input box, when we input the word, we should pass it to the background, and then query.

# Handle Word incoming from the front end (corresponding to the page)
class SearchWordHandler(web.RequestHandler):
    def post(self, *args, **kwargs):
        Get front-end parameters
        word = self.get_argument('word')
        print(word)
Copy the code

At this point, we run the code and type the word we want to query on the page, and we can read the data in the background.

The basic idea is:

The final effect is as follows:

Project Code:

yunshizhijian/translation_toolsgithub.com