创建模板与关联数据库

时间：2023-06-09 23:48:02 | 来源：网站运营

时间：2023-06-09 23:48:02 来源：网站运营

创建模板与关联数据库：上一篇我把插件与网页模板给放到了public目录与application/index/view/index/index.html下了，网页模板路径倒是比较长，毕竟用的是别人家的框架而不是自己开发的，虽说真要自己开发难度倒不大，最基本的东西也就是数据库IO与目录结构了。

现在的话我已经把首页模板给处理完了，效果如下

我简要说明一下自己的处理方法，也就是把网页模板里的不重要的东西全部删除。

接下来就是比较关键的东西了，思路我是按照以前开发的CMS来搞的，所以看起来可能会比较奇怪吧，根据自己的习惯来就好。

左边的侧边栏我暂时不理会，先把首页的东西搞定，我在AdminLTE里找了个模板

<div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div></div>我个人喜欢把首页的设定为SEO的相关数据，修改了一下变成

<div class="form-group"> <label for="web_name" class="col-sm-2 control-label">网站名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="web_name"> </div></div>重复几个分别变成keywords、description，效果如下

这种布局看起来并不好看，不过目前还是开发效率优先，优化等之后再说，就是旁边的系统监视器有点挡视线。

现在有了三个字段，而且字段必须要与数据库记录绑定才能动态修改数据。

本来我还不想设计SEO部分的，不过出于习惯，并且搞这个数据非常简单所以就从这个开始了。

现在我在数据库里新建了一张系统表（system）：ID、系统字段名、系统字段值

我现在在仨字段下面加一个“保存”按钮

为了测试数据方便，我把服务器上的数据库拷贝到本地，以后写文章就连本地测试数据库就可以了，等最后要上线了再把东西拷贝一份到服务器上就可以了。

现在我再新建一个main.js文件到public目录中，由首页模板文件导入，在JS文件里写“保存”的点击事件，提交数据为了外观的好看，我采用Ajax动态修改数据。

有一件事我现在才发现，AdminLTE是后台管理系统的模板，而我放到了index分组下，我试了一下，如果放到了admin分组下，会出现静态资源的导入问题，我们先把手头上的问题搞定所以先在index分组下开发，等后台管理开发完毕了再移动到admin分组下。

我先在admin分组的admin模块中创建change_seo方法

代码我先这么写了，以后要有问题再改就是了，目前我也是在考虑开发一个什么东西能达到代码0问题的效果。

我想通过Ajax异步获取数据并操作DOM，Ajax用jQuery来实现更方便，jQuery是非常简单的JS框架，Ajax功能我只用三种方法：$.ajax，$.post，$.get，后两种我平时不太用了，现在统一使用$.ajax，功能更健全。现在我把自己的代码贴出来：

seo_save就是那个保存按钮，在点击后禁用以防止重复发起请求引起冲突，这也是我的个人习惯。

由于这个模块是在Admin分组下的，所以我就直接写在了Admin下，以后我还会把后台的模板调整到Admin下，现在的话临时先在Index下调试，Index可以访问Admin的控制器。

由于在数据库中还没有相关记录，所以我就手动建三个，以后就操作这三个了。

现在让我来测试一下“保存”按钮是否可用。

看来没有什么用，那就让我们来看看是什么原因，排错的方法有很多，我个人喜欢查日志，日志文件就在runtime/log/日期下

我们直接看最后一段日志信息，这个日志记录是自上而下的，每次操作都会记录，在开发环境下最好还是开着方便调试。

第一段是执行的文件
第二段是加载文件的信息
第三段是使用的语言包
第四段是路由信息
第五段是请求信息
第六段是参数列表
第七段。。。感觉没啥意义，忽略了

因为在执行的文件里并没有Admin的路由，所以我们可以认为控制器没有执行，我先看看控制台的情况

发现系统没有找到这个文件，好吧这是我的锅，为了结构可读性我把main.js扔到了public/static下了，现在先不用关心可读性的问题，实现功能才是第一步，完美主义倾向还是忍一下吧，把main.js从static目录移到public下刷新没有这个问题了，我再输入表单数据并保存一下。

卡了两分多钟终于活过来了，鬼知道为什么卡成这样的呢。。。

不过。。。又失败了，不过没关系，失败了就等于还需要改进，再看一下日志。

现在的话日志信息感觉有点乱了，我们可以直接把日志文件删除再试一次，日志文件就会重新建立了。

刚要删除文件呢，我好像想起了一些什么事，看了一下main.js，发现自己搞错了，忘了写type: 'POST'了，这请求默认是GET，所以才会卡两分钟还操作失败，我在后端写的时候是取POST参数的，现在我加上了这个参数再看一下。

看来还是不行，不过就这几次失败我已经顺便把一些知识点讲了一下，剩下的我就自己看一下是什么原因，然后再整理出来吧。。。

---

原因已经找到了，果然是好久没用TP5了，已经很手生了，很多地方的东西都没注意到。

在application/database.php里还需要配置数据库，顺便把main.js做了一些修改，我这里贴一下数据库配置信息与修改后的main.js

我这里只讲一下最难理解的部分

$(data.responseText).find('.message').html()首先在Ajax的error里错误信息都是保存到responseText中的，data这个名字倒无所谓，写其他的名字也可以，就是responseText别写错了。

后面的比较难理解，我用的是TP5，如果出现了错误会出现一个错误页面，哪怕是Ajax也会把页面的所有代码全部返回，我们为了更好的观察错误信息所以就查找类为message的元素并将html代码取出来，取出来的就是比较直观的错误信息了。

现在再保存一下，没有卡住，这是个好兆头，然后打开phpMyAdmin看看数据

三条数据全部都更新了，以后的话每点一次保存都会对所有数据进行更新了，当然因为这里只有三条，所以在JS端手写三条也就可以了，还不需要针对性更新。

更新已经完成了，但页面刷新后三个文本框又会为空，这就需要后端在打开页面的时候把数据都取出来扔到文本框中了。我们回到application/index/controller/Index.php，写以下代码：

db是TP5下的助手函数，参数为表名，field是字段函数，写字段用的，select就是操作方式了，与SQL里的SELECT一样，就是查询数据的函数。

assign的意思是分配，这里是要把$data变量赋值到data中，这样前台就可以用$data变量了，这是框架中的机制，利用的是PHP中的extract，很好理解的，我在开发自己的框架的时候也是用的这个方法达到控制器与视图分离的效果的，其中还包括了require关键字。

前端代码我也贴一下，这个就更简单了，直接无脑写value就行了

现在可以上最终的效果了，现在不管刷新多少次，文本框里总是数据库中的对应的数据了

这篇到这里就结束了，下一篇将会讲解文章分类与链表结构转树结构