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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

没错，这个admin就是后台的路由。

现在启动服务，进入首页。

我们在浏览器中，在host:port 后面加入admin。就进去了：

结果发现需要登陆。

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

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

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

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

创建完后如下：

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

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

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

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

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

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

然后我们 重启服务，刷新页面看看效果：

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

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

效果如下：

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

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

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

那么我们这个for循环 怎么写呢？

有俩种写法，一种是很原始的写法：

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

效果如下：

点击即可进入对应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/

在学习-教程 中，直接看到这个引用代码：

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

这样，我们每次进入这个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的部分。

比如下面这个

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

接下来我们来明白什么是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，修改成如下样子：

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

因篇幅限制，本节内容到此结束