用html、jquery、php编写新闻后台管理页面，动态添加新闻数据并实现数据的增删改查功能

写在前面：

我刚开始接触大前端这个行业，在刚开始接触前后台交互的时候相当头疼，不知道怎么下手，现在终于完成了一个小demo，写这个博客的目的就是让自己加深映象，对这个内容巩固巩固。这里模拟的是新闻后台的管理系统，新闻的展示内容我模拟的是百度新闻的内容。作用是和数据库交互，实现数据的增删改查功能。可能有的地方的代码是用比较笨的办法写的，但是我觉得这种更能让我们这种初来乍到的小白理解并应用。

重点知识：1 数据库的连接，以及实现增删改查功能。

      2 ajax的使用，用ajax和后台交互并实现局部刷新功能。

我是用xampp创建的数据库。xampp是一个建站集成软件包，它里面就包含了 MySQL、PHP 和 Perl 的 Apache ，我感觉比较方便，也很好用，所以就先用这个。xampp也是下载下来就可以用。可以百度一下xampp的安装使用教程，网上都说的很清楚，有什么问题，根据人家的步骤就没问题了。

在开始写代码之前先看一下最后的效果：（所有的新闻都是动态添加的，不是手动一条一条添加的）

下面就来具体实现吧：

 我们先做一些准备工作

一、创建数据库，数据表

1.打开xampp，打开apache和mysql，让他们处于开启的状态

2.点击mysql的admin，会打开phpMyAdmin这个的网页.

3.创建数据库，数据表

点击上图左侧的新建，这里是新建数据库。写好数据库名称这里叫mynewsql，排序规则选择utf8_general_ci,然后点击创建就可以了。      

然后创建数据表，这里叫newslist（根据自己的项目起名，最好语义话一点）.在创建数据表时会要求选择字段数，最好提前规划一下，算一算自己大概需要几个字段，也可以先添加几个，然后等到后面根据自己的需要再进行修改添加。

现在开始创建数据表：因为我是参照百度新闻的展示内容来制定的字段，所以我们确定的字段有：

①id，这是最重要的，能更好的统计新闻的条数，所以它要是自增长，为主索引。

②newstype，新闻有很多类别，不同的新闻类展示不同的新闻类别。我们可以用数字来表示不同的新闻类。所以在数据类型上我们可以选择int，也可以选择verchar（字符串），长度随便写就可以，一个汉字的长度是2，我们随便设置成100，也就是50个汉字的长度。我们也可以根据新闻类别创建数据表，有多少个新闻类就创建多少个数据表。但不建议这样做，在目前只是达到可以动态加载新闻列表的情况下，这样没有问题，但是如果以后再工作中，一个很大的项目中也这样用，会造成很多不必要的麻烦。

③newstitle，新闻标题，新闻标题一般都是比较简洁的，字数比较少。我们同样选择verchar 长度100。

④newscontent，文章内容，内容一般比较多，我们数据类型选择text，text不用设置长度。

⑤content_url，新闻链接，一个链接地址，我们可以选择verchar，长度200。

⑥imgurl，图片的链接，同上。

⑦newsfrom，新闻的发布平台，同样是varcha 长度50。

⑧date，时间。这里我们是模仿的百度新闻，他们显示的是1小时前，一天前等。所以这里我们可以手动添加。也可以不管他的，直接写为当前的时间，如果手动添加，类型长度就可第七个一样。如果要显示当前时间，类型就可以选择成date。具体的根据自己的要求写。

然后点击执行，这样就创建好了数据表。

二、用php连接数据库

创建好了数据表，我们现在就要连接数据库了。连接数据库以及数据的增删改查我们这里都要写在php的页面里，但是php一定要在本地环境下才能运行，所以首先要把你项目的文件夹放在xampp的 Explorer的htdocs文件下，然后在浏览器的地址栏里输入你的文件的本地地址 （localhost:端口号/文件夹名称/页面名称）才能打开，否则是打不开的。

现在我们在编辑器里创建一个connect.php页面，用来连接数据库（需要注意的是php的书写格式，他要写在这样的标签里。）。