数据工厂平台重启-2: 创建第一个页面首页

简介: 本节来讲一下,如何创造第一个页面 并且打通链路,让自己和同事可以正常访问:

上节课我们最后创建了一个叫myapp的应用,虽然它在项目下,但是并没有被安装,不安装的话我们后续很多操作都无法进行。安装很简单,打开我们的settings.py,给myapp 写到这里即可。

微信图片_20220705223740.png  首先我们在这个新创建的myapp里,手动创建一个文件夹,叫:templates 注意 必须叫这个名字这里。

微信图片_20220705223748.png微信图片_20220705223805.png

这个文件夹是用来干嘛的呢?它是用来创建和存放我们的 html模版文件的,也就是xxx.html, 一个网页,其实就是 html模版+静态资源+数据 形成的。

然后我们在手动创建一个文件夹叫static 来存放静态资源:必须叫这个名哦

微信图片_20220705223813.png

现在我们来看这个图,它标记出来了 组成页面的三个部分 都分别在哪里:

微信图片_20220705223821.png好我们现在在templates上新建一个html文件,起个名字叫home, 作为我们平台的首页。

微信图片_20220705223829.png微信图片_20220705223856.png

我们在这个home.html模版里 随便写一个标题,标题的标签 dom 是 h1

微信图片_20220705223902.png

输入方法是 输入h1 直接按tab键,就可以自动变成 <h1></h1> 后面的个/ 代表标签收尾。建议大家先自学或看看本公众号的接口测试平台的前几章,熟悉一下html的写法和构成。


那么作为以后的使用者,他要怎么才能进入到这个home首页呢?当然是在浏览器里输入一个url地址进入。


那么为什么url地址 就可以 让浏览器展示这个home首页呢?


链路其实分为三大部分 :

url -> 视图逻辑层/事物层/数据层-> html模版


简单来说就是,用户输入url地址后,我们在urls.py中写好对照关系,让这个url关联到后台的一个函数,这个函数我们就暂时写在views.py中,然后这个函数去拿一些数据还有对应的html模版给 浏览器,浏览器又发现这个html模版需要一些静态资源比如图片之类的,就去static文件夹拿出来,最终组合成页面显示给用户。


所以我们的写法很简答,我们现在已经有了这个home.html,它并不需要任何静态资源,所以我们赶紧去views.py写好对应的那个函数,函数名字随意。

微信图片_20220705223908.png

微信图片_20220705223916.png

如上图,我取名和html模版一致,这样一眼就看出来它是干嘛的了。

它现在也不需要去数据库拿什么数据,就简简单单的返回home.html页面就好,新人写的时候注意格式,引号 等符号。


现在我们还差url和函数的对照关系映射设置。所以我们进入那个urls.py文件:微信图片_20220705223922.png

打开它后,先给它导入我们myapp下views.py内的所有函数,虽然现在只有一个home函数

微信图片_20220705223929.png

这里可能有些小伙伴用的是django 3.x 所以和我这个2.2的会不一样,默认用的是path函数。其实按照那个自带的admin/ 这条的写法,照葫芦画瓢即可。


我这里会用俩种方法都展示下,他们实际作用都一样。

函数需要俩个参数,一个是url,一个是views里的具体函数名。


url方法:

微信图片_20220705223935.png

仿照admin/ 添加了一样格式的新映射关系。我这里叫的也一样的名字home。这样 函数,url,html模版,都叫home, 就不会乱了。之后我们几百个页面的话,打眼也可以看得出来,当然你可以叫别的。url的第一个参数 是一个正则表达,其中home/是必须写,r'' 代表原始字符串,^代表正则表达式中匹配字符串起始。


path方法:

微信图片_20220705223941.png

之后本教程会只是用url方法哦。小伙伴认真记住这个事,不要之后总问了~


现在url.py 三者都创建好并写好了关联。我们要重启服务,然后在浏览器输入:

127.0.0.1:8000/home  看看能不能进去:

微信图片_20220705223946.png

可以看到成功进去了。现在你可以让你的同事 用在一个网段下的其他电脑或手机 输入你电脑ip:8000/home 来进入这个页面了。

比如我的ip是 192.168.43.15,那么 大家输入 192.168.43.15:8000/home 就可以进入了。

相关文章
|
8月前
|
运维 Devops
云效产品使用报错问题之代码域修改配置后,删除了代码组,代码未删除,但是项目现在看不到了,如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
8月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
73 0
|
小程序 JavaScript 数据库
小程序云开发教程三:创建第一个界面
小程序云开发教程三:创建第一个界面
121 0
|
4月前
|
开发框架 .NET C#
C# 一分钟浅谈:第一个 C# 控制台应用程序
【9月更文挑战第1天】C# 是一种现代化的、面向对象的编程语言,广泛应用于桌面应用、Web 应用和游戏开发等领域。本文详细介绍如何创建第一个 C# 控制台应用程序,包括使用 Visual Studio 和 .NET SDK 的步骤,并解析常见问题及其解决方法,如控制台窗口立即关闭、编译错误和运行时错误等。通过实践,你将掌握 C# 控制台应用的基础知识,为进一步学习打下坚实基础。
310 48
|
5月前
|
缓存 前端开发
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
55 1
|
6月前
|
JavaScript
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
|
8月前
|
数据可视化 开发者
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
8月前
|
SQL 前端开发 JavaScript
包含后端的登录与注册页面
包含后端的登录与注册页面
64 0
|
小程序 API
【小程序】案例 - 本地生活(列表页面)
【小程序】案例 - 本地生活(列表页面)
189 0
【小程序】案例 - 本地生活(列表页面)
|
前端开发
前端工作小结68-页面数据不显示
前端工作小结68-页面数据不显示
106 0
前端工作小结68-页面数据不显示