近年来,Web应用程序已经摆脱了“HTML表单+刷新整个页面”的简单模式。 这种传统方案仍然运行良好,但用户已习惯于不刷新整个页面的Web应用程序。 从广义上讲,Web应用程序携带客户端执行的代码,可以与后端通信,而无需刷新整个页面。
这次教程将涉及更多代码。 首先,让我们看一下位于public/css/style.css中的CSS样式表。
body {
background-color: blue;
}
#the-string {
display: none;
}
我们正在添加一个关于将显示生成的字符串的元素的简单规则。 默认情况下,我们不会显示它。 将以下HTML代码保存到名为index.html的文件中。
我们将简单地使用jQuery框架,但可以随意用您喜欢的工具替换它。 该页面由简单的HTML元素组成,以获取用户输入并显示生成的字符串。 它还包含客户端代码,用于与实际执行艰苦工作的后端API进行通信。
最后,这是应用程序的代码,它为上面的HTML页面提供服务并响应生成字符串的请求。 两者都由同一个应用程序服务器托管。
import os, os.path
import random
import string
import cherrypy
class StringGenerator(object):
@cherrypy.expose
def index(self):
return open('index.html')
@cherrypy.expose
class StringGeneratorWebService(object):
@cherrypy.tools.accept(media='text/plain')
def GET(self):
return cherrypy.session['mystring']
def POST(self, length=8):
some_string = ''.join(random.sample(string.hexdigits, int(length)))
cherrypy.session['mystring'] = some_string
return some_string
def PUT(self, another_string):
cherrypy.session['mystring'] = another_string
def DELETE(self):
cherrypy.session.pop('mystring', None)
if __name__ == '__main__':
conf = {
'/': {
'tools.sessions.on': True,
'tools.staticdir.root': os.path.abspath(os.getcwd())
},
'/generator': {
'request.dispatch': cherrypy.dispatch.MethodDispatcher(),
'tools.response_headers.on': True,
'tools.response_headers.headers': [('Content-Type', 'text/plain')]
},
'/static': {
'tools.staticdir.on': True,
'tools.staticdir.dir': './public'
}
}
webapp = StringGenerator()
webapp.generator = StringGeneratorWebService()
cherrypy.quickstart(webapp, '/', conf)
将其保存到名为tut08.py的文件中,并按如下方式运行:
$ python tut08.py
转到http://127.0.0.1:8080/并使用输入和按钮来生成,替换或删除字符串。 请注意页面是如何刷新的,只是其内容的一部分。
还要注意您的前端如何使用直接但干净的Web服务API与后端进行交互。 非HTML客户端可以轻松使用相同的API。