本人不擅长开发前端,了解到layui一套开源免费的 Web UI 组件库,所以网上下载了一个模板进行直接进行后台开发。这是前端页面的样式展示,下面我们开始配置并做一下增删查改的功能。
这是项目的结构图,把layui的前端放到templates和static静态资源下,同时templates和static放到子应用下,就可以了
接下来要做的就是前后端结合起来。首先配置django的静态目录:
STATIC_URL = '/static/'
DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
接下来我们要进行前后端交互了。url之前介绍了,也就是我们常说的路由层。路由是根据不同的url地址展示不同的内容或页面,一般在【urls.py】中配置访问的URL。
这个博客下的path的函数介绍特别详细:https://www.cnblogs.com/renshaoqi/p/10537279.html
在主应用下新建子应用的url
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('ceshi.urls')),
]
然后子应用下新建合格python文件,urls.py文件;urls中配置的url调用views中的方法
urlpatterns = [
#path(route,view,name=None,kwargs=None)
path('weclome/', views.weclome, name='weclome'),
]
下一步就是配置view,视图层了。Django用“视图”这个概念封装处理用户请求并返回响应的逻辑。
比如返回欢迎页面
def weclome(request):
return render(request, 'welcome.html')
启动django
python manage.py runserver
把http://127.0.0.1:8000/复制到浏览器,就可以看到weclome的前端页面了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
UI自动化测试平台
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">