《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问各路大神有何指教还请指点一二希望各路大神手下留情，注意维护自己的身份和形象。
拜谢各位上一篇文章 我们已经实现了博客文章功能的前端三个主要页面的设计和编码，并且了解了一些新的知识点，包括元素定位等这篇文章将作为我们整个入门系列文章的终章，完全实现个人博客文章功能模块的实现包括前后端交互、后端数据交互、php简单类封装
等开始之前，我们需要注意几点，第一，我们的前端页面跟上一节课的基本相同，有细微调整，我们不再表，大家可以自行优化和补充，都不是很大的变动，我也尽力在文中提到第二，我们所有的代码定位入门仅为说明相关功能和实现。
，不做或少做安全校验第三，文章中只提供核心代码，希望大家思考完善，有助于学习和提高水巷先生：小白7天入门PHP Web开发 - Day 6[中]（前端）个人博客实例讲解用户数据的存储8 赞同 · 1 评论。
文章一、分析一下我们要做哪些事情万事开头难，思考第一步~！（PHP开头不难）我们知道（我当你们都知道的，毕竟前面这么多课过来了），个人博客文章功能，主要就是涉及了文章的管理，文章要进行发布（增）、删除（删）、查找（查）、修改（改）
等操作，才叫管理那我们就得做到能在前端（页面）去操作文章，提供操作的入口，然后后端接受前端的数据进行相关业务逻辑的处理，处理完把数据存储到数据库中并进行管理，所以我们要做的就是这么几件事情第一件事情，前端提供入口，我们上一篇文章已经把页面基本实现了。
第二件事情，前后端交互，这篇文章我们去实现，但其实我们早在 Day6上 就已经做过示例了，这节课我们不细讲第三件事情，后端php和数据库mysql的交互和数据操作，基础的内容我们在 Day5 就已经有过讲解了。
那么，现在我们要？干！二、万丈高楼平地起，代码生前要先简单“架构”管理一下首先，我们的整个功能有几个东西，前端页面、后端php业务逻辑、数据库操作，所以我们需要先简单的做一个目录来“架构”管理这些代码我们需要一个前端页面的目录，暂且叫 。
views ，届时我们把所有前端的页面移到这里面；然后后端php代码，我们需要一个叫 controllers 的目录来管理一下我们跟前端交互的代码，以及，我们需要php和数据交互的地方，代码放在一个叫
models 的目录里吧；最后我们需要跟数据库进行交互操作，就得连接数据库并单独对此进行管理方便各处都能方便用到，所以放在一个叫 common 的目录下以上就是我们简单的目录结构，你可以发现我们有四个东西，一个common，我们可以称作我们的公共类所在的地方，或者叫类库，你也可以取名叫lib，剩下的三个东西就是大家万年都提的 。
MVC 结构的简易雏形，也就是模型、视图、控制器最简单的模型就是操作数据，处理数据的，控制器是处理业务逻辑和空值输入输出和前端交互的，视图就是我们的页面了我们虽然这么进行代码的管理，但并不能称为严格意义上的MVC模式。
，因为我们采用了ajax前后端完全分离的做法，但是也不能称为非常严格意义上的前后端分离，我做的一切都是为了帮助你们理解这些东西并快速入门。更多相关的东西，大家可以去，嗯，那就百度一下吧。
图 2-1 目录结构图（仅供参考）三、先拿到文章数据再说我们先完成添加文章的功能首先是一个表单页面，通过ajax交互，将表单提交到后端php进行存储页面如下，相比较上一篇文章，我们给每一个表单都新增了placeholder属性，用于提示用户输入的内容应该是什么。
图 3-1 添加文章页面我们直接新建一个js文件，用来写前后端交互以及用户交互的相关功能代码叫 main.js 吧1、首先，我们需要一个ajax请求来提交数据到后端我们把js代码封装成一个函数，方便调用和用户交互事件绑定
，我们定义一个函数名叫 saveArticle，// 保存文章的函数 // isSending用于标识用户是否正在提交数据，初步防止用户连续点击重复提交的问题 varisSending=falsefunction
saveArticle(){// 如果为true，我们判定为用户已经正在提交数据，并且后端还没有返回响应，return false防止再次提交 if(isSending===true){returnfalse
}// 用户开始提交数据，我们改变按钮的文字来提示用户文章在发布过程中 isSending=true$(.submit>button).text(发布中...)// 这个东西是jquery里面的，我们在前面的课中有讲过的哦
$.post(../controllers/addarticle.php,$(form).serialize(),function(ret){// notify是我们在页面上加的一个div用于提示信息的展示
$(.notify).text(ret.msg)$(.submit>button).text(立即发布)setTimeout(function(){$(.notify).text()window.location
.href=detail.html?id=+ret.data.article.idisSending=false},2000)},json)}然后，我们需要绑定一个事件到提交按钮上来触发调用这个函数，才能最终
将数据提交到后端可以直接像下面这样绑定立即发布2、后端接收数据在controllers目录下新建一个addarticle.php。
的文件，用户直接和前端交互，同时在models 下新建一个Article的类文件（还记得类吗？我们的 Day4 讲过的）Article.php之后我们的前端会提交数据到控制器，控制器会讲数据处理后转交给模型来处理，拿到结果后返回给前端使用。
当前端点击按钮，触发数据提交后，我们可以在控制器addarticle.php里面通过全局变量 $_POST 来获取所有的post方式提交上来的数据$post_data=$_POST;3、所有模型都应该自动连接数据库，数据库连接的基本类封装。
为了方便数据库的连接和相关数据库的操作，我们新建一个数据库类，叫Db吧，新建Db.php，因为是公共的类，我们放到common目录下这个类主要处理了数据库的pdo连接和数据库连接单例模式要注意我们的文件路径和。
命名空间
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。