《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问。各路大神有何指教还请指点一二。希望各路大神手下留情，注意维护自己的身份和形象。拜谢各位。

上一篇文章 我们已经实现了博客文章功能的前端三个主要页面的设计和编码，并且了解了一些新的知识点，包括元素定位等。这篇文章将作为我们整个入门系列文章的终章，完全实现个人博客文章功能模块的实现。包括前后端交互、后端数据交互、php简单类封装等。开始之前，我们需要注意几点，第一，我们的前端页面跟上一节课的基本相同，有细微调整，我们不再表，大家可以自行优化和补充，都不是很大的变动，我也尽力在文中提到。第二，我们所有的代码定位入门仅为说明相关功能和实现，不做或少做安全校验。第三，文章中只提供核心代码，希望大家思考完善，有助于学习和提高。

水巷先生：小白7天入门PHP Web开发 - Day 6[中]（前端）个人博客实例讲解用户数据的存储​zhuanlan.zhihu.com

一、分析一下我们要做哪些事情

万事开头难，思考第一步~！（PHP开头不难）

我们知道（我当你们都知道的，毕竟前面这么多课过来了），个人博客文章功能，主要就是涉及了文章的管理，文章要进行发布（增）、删除（删）、查找（查）、修改（改）等操作，才叫管理。那我们就得做到能在前端（页面）去操作文章，提供操作的入口，然后后端接受前端的数据进行相关业务逻辑的处理，处理完把数据存储到数据库中并进行管理，所以我们要做的就是这么几件事情。

第一件事情，前端提供入口，我们上一篇文章已经把页面基本实现了

第二件事情，前后端交互，这篇文章我们去实现，但其实我们早在 Day6上 就已经做过示例了，这节课我们不细讲

第三件事情，后端php和数据库mysql的交互和数据操作，基础的内容我们在 Day5 就已经有过讲解了。

那么，现在我们要？干！

二、万丈高楼平地起，代码生前要先简单“架构”管理一下

首先，我们的整个功能有几个东西，前端页面、后端php业务逻辑、数据库操作，所以我们需要先简单的做一个目录来“架构”管理这些代码。我们需要一个前端页面的目录，暂且叫 views ，届时我们把所有前端的页面移到这里面；然后后端php代码，我们需要一个叫 controllers 的目录来管理一下我们跟前端交互的代码，以及，我们需要php和数据交互的地方，代码放在一个叫 models 的目录里吧；最后我们需要跟数据库进行交互操作，就得连接数据库并单独对此进行管理方便各处都能方便用到，所以放在一个叫 common 的目录下。

以上就是我们简单的目录结构，你可以发现我们有四个东西，一个common，我们可以称作我们的公共类所在的地方，或者叫类库，你也可以取名叫lib，剩下的三个东西就是大家万年都提的 MVC 结构的简易雏形，也就是模型、视图、控制器。最简单的模型就是操作数据，处理数据的，控制器是处理业务逻辑和空值输入输出和前端交互的，视图就是我们的页面了。我们虽然这么进行代码的管理，但并不能称为严格意义上的MVC模式，因为我们采用了ajax前后端完全分离的做法，但是也不能称为非常严格意义上的前后端分离，我做的一切都是为了帮助你们理解这些东西并快速入门。更多相关的东西，大家可以去，嗯，那就百度一下吧。

三、先拿到文章数据再说

我们先完成添加文章的功能。首先是一个表单页面，通过ajax交互，将表单提交到后端php进行存储。

页面如下，相比较上一篇文章，我们给每一个表单都新增了placeholder属性，用于提示用户输入的内容应该是什么

我们直接新建一个js文件，用来写前后端交互以及用户交互的相关功能代码。叫 main.js 吧。

1、首先，我们需要一个ajax请求来提交数据到后端

我们把js代码封装成一个函数，方便调用和用户交互事件绑定，我们定义一个函数名叫 saveArticle，

// 保存文章的函数

然后，我们需要绑定一个事件到提交按钮上来触发调用这个函数，才能最终将数据提交到后端。可以直接像下面这样绑定

<

2、后端接收数据

在controllers目录下新建一个addarticle.php 的文件，用户直接和前端交互，同时在models 下新建一个Article的类文件（还记得类吗？我们的 Day4 讲过的。）Article.php。之后我们的前端会提交数据到控制器，控制器会讲数据处理后转交给模型来处理，拿到结果后返回给前端使用。

当前端点击按钮，触发数据提交后，我们可以在控制器addarticle.php里面通过全局变量 $_POST 来获取所有的post方式提交上来的数据。

$post_data 

3、所有模型都应该自动连接数据库，数据库连接的基本类封装

为了方便数据库的连接和相关数据库的操作，我们新建一个数据库类，叫Db吧，新建Db.php，因为是公共的类，我们放到common目录下。这个类主要处理了数据库的pdo连接和数据库连接单例模式。要注意我们的文件路径和命名空间。

<?

然后我们要所有模型去调用Db::getInstance()，并传进去参数就可以连接数据库了，但是我们不想每一个模型（毕竟我们会有多个模型，比如这里的文章模型和评论模型）都要去连接一次，那怎么办呢？让他们都继承一个父类，在父类里面完成数据库的连接。

我们在 models 目录下建一个父类文件 Base.php ，然后文章模型继承他就可以了。

<?

4、在模型中实现数据的插入

在 models 下新建文章模型 Article.php，并且实现文章的保存，我们需要继承 基础模型类 Base，所以我们的代码如下

<?

实现文章的保存到数据库，主要是我们在之前的文章也讲到过的，数据插入到数据库的sql。

INSERT INTO table_name (column1, column2) VALUES (value1, value2);

所以我们定义一个用来写入数据的方法，save

// 这里我们用类属性的方式来接收数据

5、第二步中的后端接收数据完善

接收数据我们用$_POST即可，这时我们要把数据交给模型处理，并获得处理结果，然后响应给前端。

<?

此时我们已经完成了整个文章的发布过程了。你清楚了吗？你可以试试你能正常运行吗？

接下来为了能够看到我们写入的文章是否成功了，除了看响应结果，那么我们需要写一个详情的功能来获取文章详情。

四、既已写入，是时候取出来了，获取文章详情

基本过程和上面的文章保存发布是一样的。

1、ajax提交请求说我要拿文章详情

拿文章详情就像在超市到储物柜拿自己的东西一样，需要知道柜子的号码，不然路都找不到~！所以我们要拿文章详情，也就需要知道文章id是多少，文章id在上一步中我们其实已经有返回了。所以我们的js很简单，如下。

// 获取文章详情

2、后端控制器处理，并请求模型查询数据返回

<?

3、模型查询文章详情

这里使用的是查询的sql语句，也是当然的我们之前的文章讲过的。

SELECT * FROM table_name WHERE column=val LIMIT 1

因为我们只取一篇文章也就是一条数据，所以可以使用 limit 1 来提高查询效率，模型方法同样写在模型Article.php文件中

/**

就这样，我们就完成了获取文章详情的内容。文章写到这里，我们已经进行了文章的发布、文章的查询了，那如果需要编辑文章的话，怎么办呢？

我们想一下，我们要编辑文章，是不是得先拿到文章呢。没错，这就是查询的过程，跟上面的获取文章详情一毛一样。然后呢？保存到数据库，交互过程跟发布文章几乎一样，唯一的不同就是，sql语句不太一样。插入用 INSERT INTO，而更新用的是 UPDATE 。

UPDATE table_name SET column1=value1, column2=value2 WHERE column=value

那么我们更新文章和新增文章差不多，区别的sql语句，所以我们的模型方法 save 就改成了这样

/**

当我们需要更新文章的时候需要给后端传一个id值，跟获取文章详情一个样子的。请学会举一反三。

咳咳，说了这么多，其实也不多，都是大同小异的，这里有几个地方需要大家注意一下

关于PDO数据库连接和查询我一直没提，大家可以直接在官方文档查看一下具体用法。我们这里主要理解sql语句的使用。

五、我们现在还差什么？

文章发布有了、详情有了、编辑更新有了，从页面来看，我们是不是还差首页文章列表和文章评论了？对不起，我要留给你们作业来实现这一部分的功能了。给几个重要的方向提示。

1、多条数据查询，pdo使用的是 fetchAll，相对的单条数据的话，使用的是fetch

// 多条

2、数据过多时我们需要使用分页，分页的本质就是sql中的limit和offset，参数就是需要当前页码和每页的数量

// 其中 offset表示数据库查询从第几条数据开始拿数据，limit表示从offset条开始拿limit跳数据

鉴于这个简单的功能，已经没有什么别的东西了。我把 代码 也统一放出来了。大家先看完上面再去看看代码对比一下吧。有什么问题可以留言或者私信我哦。

六、作业和任务

经过上面和前面文章的所有东西，我觉得你们已经完全有能力独立实现一个个人简单的博客了。恭喜你读到这里的时候，已经完成了PHP web开发的全部入门学习。这篇文章我们留了两个东西，一个文章列表、一个文章评论，希望你们能去搞一搞试一试。我提供的代码已经完成了文章评论列表和分页。希望你们能够学习临摹或者创新，完成文章列表首页的数据交互和处理。