开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

数据工厂平台-3:首页超链接

简介: 上一节我们成功搞定了首页的展示。但是其中并没有加入任何数据,也就是仅仅展示了html模版而已,本节课我们要加入数据,那么具体是什么数据呢?按照比较成功的经验,首页放入公司内的各种超链接比较好,容易让使用者产生依赖和粘性。
+关注继续查看

  那么这些超链接我们从哪拿呢?当然是从数据库拿了。既然我们如此设计,那么第一步,就是去数据层设计数据表的结构。django默认自带sqlite3 数据库,它和sql数据库基本一致,只是轻量级,无需部署启动数据库服务等。

    但是django操作这个数据库的时候,把各种sql语句都封装成了一些功能函数,这个过程就是传说中的orm,不清楚的小伙伴可以自行百度。

    也就是说,我们之后无论是建表改表,新增数据,查询数据等,都并不是用传统的sql语句,而是简单的运用orm的内置方法即可,这样的好处是简单高效 又安全。

    好,我们来进行第一步,建表,这个表就是用来存放首页超链接的。那么去拿操作orm来创建表呢?很简单,去myapp下的models.py就可以了,它里面写的就会被orm当作表结构了。

    初次打开,我们发现,这个文件下什么都没有,所以要靠我们自己创建。我们怎么创建呢?其实每张表,在这个文件下,都是一个class类,类变量就是表的字段。

微信图片_20220705225055.png

如图,我创建的这个叫DB_links的类,就是一张表,其中俩个参数 名字和url, CharField意思是字段是字符串格式,括号内写的约束,比如最大长度,是否可以为空,是否可以为空字符串。最后__str__ 方法是在django后台管理这张表的时候,每行数据所展示给你的标志类似于视图,这里用链接名字作为展示。


写完这个设置后,我们如果想在django后台直接管理它,就必须再去admin.py中进行注册这张表,方法很简单:

微信图片_20220705225120.png

admin.site.register方法 传入类名 即 表名,即可成功注册。


再然后我们还需要 执行俩个命令,同步表结构和生效命令。如果不执行,那么django 并不会去让你models.py中的设置去让sqlite3数据库中发生改变。

命令如下,我们直接在pycharm的终端执行这俩个命令。

微信图片_20220705225126.png

现在我们已经成功创建了这个超链接的表,那么就去django后台给它增加俩三条数据,以便我们后续开发用。


那么现在的问题是django后台是什么?怎么进?

django后台是django自带的控制管理 平台用户和数据的 一个页面。进入的路是什么呢?还记得我们urls.py中抄的那个人家自己生成的例子么?

微信图片_20220705225132.png

没错,这个admin就是后台的路由。现在启动服务,进入首页。我们在浏览器中,在host:port 后面加入admin。就进去了:

微信图片_20220705225139.png

结果发现需要登陆。

微信图片_20220705225145.png

这里需要的很明显,是一个管理员账号,普通用户肯定无法登陆。我们作为程序开发者,当然可以创建一个超级管理员账号了。创建是通过命令创建,命令如下:python3 manage.pycreatesuperuser微信图片_20220705225525.png

然后我们重启服务 去后台试试登陆:

登陆成功了,我们看到了 用户 和 组 这俩个自带表。还有我们自己设置的myapp下的这个 DB_links 表,它会默认首字母大写并在最后加s,不用管它。

微信图片_20220705225530.png

我们点击进入Db_linkss ,现在是0个数据,我们点击右上角按钮,增加一条

微信图片_20220705225535.png

微信图片_20220705225540.png微信图片_20220705225546.png

创建完后如下:

微信图片_20220705225552.png

到此,我们俩条超链接创建成功了。


然后我们要去views.py中,找到进入首页的那个函数(现在也只有这个函数) ,给所有的超链接 加入到返回给前端的render函数。

微信图片_20220705225557.png


请新学者,仔细记住这几个地方,怎么从数据表中拿出数据,并加入到render里,作为一个字典中一个key的value。


那么我们现在已经成功给前端html带去了要展示的数据。要怎么显示呢?

当然就去html模版里去 写显示的代码啊。 记住,现在所有的超链接都被塞入了这个叫all_links的变量中。


我们打开home.html,在里面初次显示这个all_links:

微信图片_20220705225603.png

然后我们 重启服务,刷新页面看看效果:

微信图片_20220705225610.png

可以看到,这俩个超链接已经成功显示了,上面的文案就是我在models.py中设置的def __str__ 的返回,即link_name。


不过这样的显示效果,并不是我们想要的。我们要的是超链接。超链接是什么样的呢?它是用a 作为标签头  包裹的。比如我写死一个看看:

微信图片_20220705225617.png

效果如下:

微信图片_20220705225623.png

点击它就会跳转到那个url:

微信图片_20220705225628.png

好,我们现在删除这个例子超链接,想办法让我们的all_links中的数据全部变成这样a标签包裹的 格式。


最简单的办法就是用for循环,遍历all_links,循环体就是把每一个超链接都放在一个a标签模版里。


那么我们这个for循环 怎么写呢?有俩种写法,一种是很原始的写法:

微信图片_20220705225634.png

其中的 i就是每一个超链接数据,i.link_url就是超链接的url, i.link_name就是名字,这些都属于变量,所以必须用{{ }} 包裹起来。

效果如下:

微信图片_20220705225640.png

点击即可进入对应url。

不过这种写法比较古老,博主答应大家采用新的vue框架进行开发前端页面,使用vue写法之前,我们需要先下载vue,这里有俩种方案:

第一种:轻量级的使用,去官网下载vue.js 然后放入我们django项目的/static/静态资源目录下,然后在html模版中引用即可使用vue。

第二种:用npm下载vue和其组建,然后用vue创建一个前端项目,此项目和django项目基本同级,可进行前后端分离的大型方案。


    那么本教程,为减少初学者的坑和部署问题,考虑到数据工厂的应用和开发者基本只有一人的情况下,采用了第一种轻量级的方案。这样新读者可以更快速简单的了解和使用vue,而不是90%都卡在了部署和理解上,毕竟学习要一步一步来,0基础的同学第一次就打造企业级的大型项目,估计一个部署就被打击的体无完肤了。

    而如果已经有一定基础的读者,那么可以自行去使用第二种方案打造一个企业级的平台,这样同样可以在本教程中得到设计的灵感和其他细节等技术知识,因为本教程的整个重后台轻前端的设计中,vue占总技术含量的比并不多。

    

    现在我们开始打开vue的官网https://cn.vuejs.org/v2/guide/在学习-教程 中,直接看到这个引用代码:

微信图片_20220705225645.png

  这是一个引用链接,用的是cdn加速的。当然我们后续也可以把它下载到本地使用,不过我们前期还是简单点,直接复制这句 到我们的home.html中的head标签里。

微信图片_20220705225650.png

这样,我们每次进入这个home页面,都会去这个网址去请求到vue的完整资源,所以要保证电脑网络哦~


在具体开始vue使用之前,我们先来了解下下面 的土话解释html基本构成)

( 什么是script呢?其实你可以理解为在html模版里写的js动作脚本代码的标签,里面的内容和python差不多但不是python。比如你写一句类似python的代码在home.html中,你为了不让这句代码显示到网页,而能真实的运行实现作用,所以要用script标签包裹起来。这属于前端开发的基础,大家不明白的可以自行查阅。 

一个网页,有俩大部分,head和body,head处理各种引用,全局,表头设置等。body是网页具体内容。

那么什么是dom 和 bom 呢?

你可以理解为 除了script标签外,在body标签内的其他各种如超链接,按钮,输入框等等标签。dom 其实就是document的简称,即文档对象


而script标签内的就是可运行的实际js/jq/vue脚本了,我们叫做bom。其实就是browser object model的简称,就是浏览器对象,意思是操作浏览器和浏览器互通api的部分。


比如下面这个

微信图片_20220705225656.png

之后我会常用这个概念 进行阐述。请牢记。


接下来我们来明白什么是vue:

为什么都喜欢用?其实就是前端的数据和展示等绑定处理上非常方便简单,本质是对复杂麻烦的js/jq进行封装的一个框架。所以一个vue元素,基本都包含着具体文档标签dom 和 对应的script即bom。


    而根据其数据双向绑定的优点,所以我们从后端拿来的数据,是要放在bom中使用的。而刚刚写的传统方式,是把后台来的数据放到了dom层直接用{{ }} 来使用的。

    既然vue的数据是要放在bom 也就是script内进行使用,那么整个数据从后端起就要更改格式!为什么呢?因为我们目前的数据直接从数据库拿出来的是一个查询集,又叫queryset格式,它并不是传统代码认识的格式,不是list列表,里面的也不是dict字典,只是看起来像,并且可以和列表一样遍历,和字典一样拿值罢了。在html模版的bom即script里,直接用queryset格式,肯定是不行的,它无法解析出来。

    

    那么怎么解决呢?有俩种方案:

  1.  虽然bom无法解读,但是dom可以,我们可以弄一个隐藏的input输入框dom,把数据放在其中,经过这么一洗,bom层就可以直接拿出来使用了。但是这个方法很low,会被别人笑话,属于博主之前自己摸索出来的曲线救国的套路。
  2. 在后台加入数据给html模版时候,就不要加入queryset格式的,加入一个正常的列表套字典 最好,然后html模版的bom层就可以直接使用这个列表了。


综上我们选择,第二种方案:

打开views.py,修改成如下样子:

微信图片_20220705225702.png

 修改成list列表后,我们正式回到html模版,可以放心的开始vue的循环体超链接写法了

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
数据工厂平台12:首页统计的数据关联(上)
数据工厂平台12:首页统计的数据关联(上)
8 0
数据工厂平台12:首页统计的数据关联(下)
数据工厂平台12:首页统计的数据关联(下)
11 0
数据工厂平台-4:首页vue之初体验
数据工厂平台-4:首页vue之初体验
15 0
指令系统——数据寻址
指令系统——数据寻址
10 0
数据结构-链表的那些事(下)(二)
双链表的优点:对于链表中一个节点来说,都可以从两个方向操作。当然这个问题自然就带了另外一个缺点,因为前节点的存在导致更多的内存开销,另外在插入和删除的时候会更加的麻烦,需要更多时间,所以说这个世界就是这样有利就有弊
43 0
IoT平台云端通用数据解析脚本实践
在物联网平台云端,将设备原始数据转换成结构化的JSON格式,方便云上业务系统存储和展示。
2937 0
用Sql生成数据插入Sql脚本
CREATE PROCEDURE dbo.UspOutputData @tablename sysname AS declare @column varchar(1000) declare @columndata varchar(1000) declare @sql varcha...
536 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载