基于PHP与HTML5的内容管理系统

所有的发明与创造的灵感都来自于借鉴了这个世界的本质。编程的世界向人类乃至整个世界习得许多本质的东西,比如“继承”“原型链”“粒子群优化算法”,“遗传算法”,“神经网络算法”,“人工智能”等等这些思想,无一不是人类对真实世界本质的探索后的提炼与升华。在完成个站后台管理的功能后,将指尖从键盘上移开,惯性发作,所有编程术语,语法,数据类型在脑中久久挥散不去。

目前后台管理系统仅有目录及文件的创建与删除,新建文章同时创建相应目录与文件等基本的功能。我发现原来增加和删除是最简单粗暴的事情,而修改(以防误删,删除操作其实最好只是修改状态)和查询才是较复杂的数据库操作。把这件事情和人生做比:**想来一个人的出生(增加)与死亡(删除)也不过是一瞬间的事情,很简单粗暴,而从出生到死亡之间的所有人生境界的变化,能力的习得,自我的不断完善甚至新生命的创建(修改)与自我反省审视与经验的积累与回顾(查询)却要花费我们一生的时间来完成。**而有些人也许一辈子也只使用了一次增加(出生)和一次删除(死亡)的操作,他的一生中碌碌无为,不求上进,随波逐流,自我麻痹,不知三省汝身。你和我想如何精彩的度过这一生呢?

登录验证

首先要讲,登录的录不是登陆的陆!初次登录需要输入密码,采用的是SESSION验证,每次打开该网址时启动一次会话,关闭浏览器后结束会话,这期间刷新页面不需要再次输入密码。下次再打开浏览器进入该网址后需要再次输入密码。

鉴于需求提到的从打开网址到关闭浏览器期间永远是登录状态,所以采用session来实现记忆登录状态的功能。

当我进入该页面后,首先启动session会话。

session_start();   //PHP中的函数,用于启动一次会话

下面是关于$_SESSION的部分常用函数与操作方法

$_SESSION[''user] = 'leo';  //在本次会话上存储信息
session_destroy();  //清楚所有会话信息
unset($_SESSION['user']);  //清楚某一个已存储的会话信息

查询文章

进入后台后需要列出所有数据库中的文章,至于返回哪些信息根据需求而定,这里需要前端与后端的交互,我才用的是原生的Ajax来实现,

function getArticle(start, step){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
      console.log(xhr.response);
    }
  }
  xhr.open('GET', './getArticle.php?start='+start+'&step='+step, true);  //该请求地址为虚构地址。
  xhr.send(null);
}

我写了一个函数用来获取文章,传入的参数有两个,分别为从第几个开始(start)和每次返回多少数据的步长(step);对于查询我永昌采用GET请求,比较危险的操作我会采用POST请求,比如增、删、改。

保存文章

查询到文章之后可能需要对文章进行修改与完善,点击文章标题打开侧边的编辑器,编辑完毕后保存文章,后台PHP程序将文章写入相应的 .md 的文件中,编辑器是自己写的,采用Markdown的语法,网站的所有article页面在用户请求时后台PHP程序会将.md文件转换成html标签。

function saveArticle(title,tag,.......){ //其他参数省略
  var _formData = new FormData();
  _formData.append('title',title);
  _formData.append('tag',tag);
  //........省略传入的其他参数

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
      console.log(xhr.response);
    }
  }
  xhr.open('POST', './saveArticle.php', true);  //该请求地址为虚构地址。
  xhr.send(_formData);
}

同样创建一个saveArticle函数,采用POST请求向后台发送文章的数据。这里用到了一个新的API:FormData,用法很简单。只需要调用实例化后的对象的append()方法,传入两个参数,一个是键名一个是对应的值,然后传入Ajax的send方法即可在后台接收到POST的数据。

新建文章

弹出界面采用Material Design 原质化设置风格。

文件系统ICON

查询到返回的文件与目录结构信息,需要可视化的形式区分不同的文件类型,我采用纯CSS设计了几个最常用到的图标。


最近有一句话一直在脑子里盘绕,忘了是在哪里听说过还是自己杜撰的:每个人的能力都是无限的,但每个人的精力是极有限的,了解了这些,去挖掘你的潜能,遇见更好的自己吧,但是,如果累了,就停下来歇一歇脚。

上一篇《理解Javascript中的闭包概念》

下一篇《Javascript Web Notification API 译文》

永久链接 http://www.shuaihua.cc/article/content-manage-service-system-based-on-php-and-html5

快速跳转 心头好文 - ux - 《基于PHP与HTML5的内容管理系统》

发布日期 2017-6-28 0:31:49 周三

版权声明 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证