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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sxy654125878/article/details/51896130

写在前面:

我刚开始接触大前端这个行业,在刚开始接触前后台交互的时候相当头疼,不知道怎么下手,现在终于完成了一个小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的书写格式,他要写在<?php ?>这样的标签里。)。

<?php
$con=mysql_connect("localhost","root","");//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)
$my_db=mysql_select_db("mynewsql",$con) or die("error");//连接数据库,第一个参数是数据库名
mysql_query("set names 'utf8'");//设置编码格式,以防乱码
?>

我们要测试一下看看我们到底连接成功没有(注意xampp的apache,mysql必须是start状态)。我们可以随便添加一条新闻,用来测试。


然后在connect.php页面里写一个查询语句

<?php
$con=mysql_connect("localhost","root","");//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)
$my_db=mysql_select_db("mynewsql",$con) or die("error");//连接数据库,第一个参数是数据库名
mysql_query("set names 'utf8'");//设置编码格式,以防乱码
$sql = "SELECT * FROM `newslist`";//查询
$query=mysql_query($sql);//执行sql语句
if ($query && mysql_num_rows($query)) {
 	while ($row = mysql_fetch_assoc($query))
   {
   	$data[]=$row;
   }  

 }else if(mysql_num_rows($query)==0){
     $data='{content:"blank"}';
     echo $data;
     return;
 }
 
    $jsondata=json_encode($data,JSON_UNESCAPED_UNICODE);//以json格式输出
   	echo $jsondata;//打印出结果
?>

打开connect.php页面后会看到查询到的新闻,说明现在数据库连接成功了。


我们现在把连接数据库的代码和查询的sql语句分开来写,避免以后和前端交互时产生不必要的麻烦。

我们再创建一个list.php文件用来查询数据库,只需在文件的开头写一句代码,即可引用连接数据库的php页面。

include_once("bg.php");
l调整后connect.php和list.php页面的代码分别如下:

<?php
$con=mysql_connect("localhost","root","");
$my_db=mysql_select_db("mynewsql",$con) or die("error");
mysql_query("set names 'utf8'");
?>
<?php
header("Content-type: application/json;charset=utf-8");
include_once ('bg.php');
$newstype=$_GET['newstype'];
 $sql = "SELECT * FROM `newslist` WHERE `newstype`='$newstype'";
 $query=mysql_query($sql);
 if ($query && mysql_num_rows($query)) {
 	while ($row = mysql_fetch_assoc($query))
   {
   	$data[]=$row;
   }  

 }else if(mysql_num_rows($query)==0){
     $data='{content:"blank"}';
     echo $data;
     return;
 }
 
    $jsondata=json_encode($data,JSON_UNESCAPED_UNICODE);
   	echo $jsondata;
 
    
?>

现在准备工作就已经做好了,我们开始绘制新闻后台的页面。

三、编写页面的整体样式

打开sublime ->创建一个html页面 ->根据自己想要的效果编写代码。要把整个框架轮廓写出来,才好往里面继续添加内容,事件。

这是我创建的一个静态页面:

四:添加简单的点击事件

创建一个js文件。这里命名bgmanage.js,我们用jquery编写。下面我们先写最左边新闻类别的点击事件,我们要达到的目的是点击不同的类型的新闻显示不同的新闻。

点击什么类型的新闻,右边显示什么新闻。例如,我点击百家,右边就显示百家新闻页面。

// 获得新闻的类型
    function choosenewstype() {
        $(".text-content-list tr").each(function() {
            $(this).click(function() {
                var type = $(this).children("td").attr("name");
                var text = $(this).children().text();
                $(this).css("background", "cadetblue").siblings().css("background", "darkcyan");
                $(".news-title h2 span").text(text);
                showcontent(type);
            });

        });
    }

在html页面里,我们给每个新闻类型设置一个只属于他们的“身份证号”,便于以后分辨是什么类型的新闻。

 <table>
                    <tr>
                        <td id="recommend" name="recommend">推荐</td>
                    </tr>
                    <tr>
                        <td id="baijia" name="baijia">百家</td>
                    </tr>
                    <tr>
                        <td id="bendi" name="bendi">本地</td>
                    </tr>
                    <tr>
                        <td id="picture" name="picture">图片</td>
                    </tr>
                    <tr>
                        <td id="yule" name='yule'>娱乐</td>
                    </tr>
                    <tr>
                        <td id="society" name="society">社会</td>
                    </tr>
                    <tr>
                        <td id="junshi" name="junshi">军事</td>
                    </tr>
                    <tr>
                        <td id="woman" name="woman">女人</td>
                    </tr>
                    <tr>
                        <td id="funny" name="funny">搞笑</td>
                    </tr>
                    <tr>
                        <td id="keji" name="keji">科技</td>
                    </tr>
                </table>

我们默认每次打开页面以后都显示推荐这个页面,所以我们需要在js文件的最上面设置一下。

(function() {
        showcontent("recommend");//是用来显示新闻的,下面会写到
        choosenewstype();
    })();

写完简单的点击事件以后,我们先试着动态的显示一下数据库里的那条新闻。这里就需要用到ajax了,ajax是一种用于创建快速动态网页的技术。

ajax获取数据的方法有两种:get和post。

get会把获取到的信息都显示在地址栏上,好处是一眼就可以看到获取到的内容,缺点是不安全,容易泄露信息。

post刚好相反,他不会显示在地址栏上。所以要根据自己的需求来选择。

function showcontent(newstype) {
        $.ajax({
            type: "GET", //这里要显示新闻的类型,所以选用了get方法
            url: 'list.php', //要和谁建立连接,来获取信息
            data: {
                newstype: newstype //把recommend这个新闻类型传给list.php
            },
            datatype: "json", //获取json格式的数据
            success: function(data) { //成功以后要执行什么
            	console.log(data);
                $("#news-content").html(""); //先清空显示新闻的这个板块的内容,来防止每次刷新以后都添加一次
                $.each(data, function(index, value) { //遍历查询到的新闻
                    var newsid = value.newsid; //获取每条新闻的id。
                    var tr = $("<tr>").appendTo("#news-content"); //动态创建每一列,并往里面添加内容
                    $("<td>").appendTo(tr).text(value.newsid).css("text-align", "center");
                    $("<td>").appendTo(tr).text(value.newstitle);
                    $("<td>").appendTo(tr).text(value.newscontent);
                    $("<td>").appendTo(tr).text(value.content_url);
                    $("<td>").appendTo(tr).text(value.imgurl);
                    $("<td>").appendTo(tr).text(value.newsfrom);
                    $("<td>").appendTo(tr).text(value.date);
                    var button = $("<td>").appendTo(tr);
                });
            }
        });
    }

ajax用了什么方法获取数据,连接的php也需要用什么方法获取值(比如,在上面的代码中list.php也应该用get方式获取:$newstype=$_GET['newstype'];)。

我们现在也显示成功了,开始进行下一步。


五.做增、删、改、查功能

:要实现添加新闻的功能,我们就先要有可以来放置新闻的一个板块。所以我们要添加一个按钮,我在写页面的时候就已经写好了,现在只需要实现功能就可以了。点击添加按钮,就会出现一个空白的没有内容的版面来让我们添加新闻。如下:

//点击添加按钮
        $("#add").click(function() {
            $(".hidden").html("");
            $("#newstitle").focus();
            $(".news-update").show();
            $(".news-content-list").hide();
            $("#goback").css("display","block");
            $("#newstitle").val();
            $("#newscontent").val();
            $("#content_url").val();
            $("#imgurl").val();
            $("#newsfrom").val();
            $("#date").val();
            $("<input type='text'>").appendTo(".hidden").addClass("hide2").val(newstype);
            
        });


这个页面还需要添加两个点击事件,一个是点击返回按钮,返回到最初的页面。二,点击提交按钮,跳转到最初的页面。

// 返回到原来的页面
    $("#goback").click(function() {
        $(".news-update").hide();//页面一个隐藏一个显示
        $(".news-content-list").show();
        $("#goback").css("display","none");
    });
点击提交按钮

 $("#submit").click(function() {
        // 判断关键信息是否为空
        if ($("#newstitle").val() == "" || $("#content_url").val() == "" || $("#newscontent").val() == "") {
            alert("请完善新闻信息!");
        } else {

            $.ajax({
                url: 'php/add.php',
                type: "POST",
                datatype: "json",
                data: {
                    newstype: $(".hide2").val(),
                    newstitle: $("#newstitle").val(),
                    newscontent: $("#newscontent").val(),
                    content_url: $("#content_url").val(),
                    imgurl: $("#imgurl").val(),
                    newsfrom: $("#newsfrom").val(),
                    date: $("#date").val()
                },
                success: function(data) {
                    $.post("php/add.php", { newstype: data.newstype }, function(data) { //ajax的局部刷新
                        alert("添加成功");
                        $(".news-update").hide();
                        $(".news-content-list").show();
                        showcontent($(".hide2").val());
                    });
                }
            });

        }

    });

这里有一个小点说明一下,我的添加框并没有新闻类型这一栏,但是要给add.php页面传值时,却有新闻类型这个值。所以我在这个添加框写了一个隐藏的input,把获取到的新闻类型放在这个input里。在前面我们就已经可以获取到新闻类型值了,所以只要点击添加就可以自动知道了,然后只要获取input里的值就可以了。


我们再来创建一个add.php页面,用来写添加新闻的sql语句

<?php
include_once("bg.php");
$newstype=$_POST['newstype'];
$newstitle=$_POST['newstitle'];
$newscontent=$_POST['newscontent'];
$content_url=$_POST['content_url'];
$imgurl=$_POST['imgurl'];
$newsfrom=$_POST['newsfrom'];
$date=$_POST['date'];

$sql="insert into newslist (`newstype`,`newstitle`,`newscontent`,`content_url`,`imgurl`,`newsfrom`,
	`date`) values ('$newstype','$newstitle','$newscontent','$content_url','$imgurl','$newsfrom','$date')";
$query=mysql_query($sql);
echo $query;
?>
增删改查的点击事件应该分别对应单独的一个php页面,这样方便达到我们想要的效果。然后测试一下,看看是否可以添加成功。



添加成功,现在我们就可以把所有的新闻都添加进去了。
      改:改和增的方法有一点小类似,点击修改按钮,弹出修改框,和添加不同的是,我们需要给每个相对应的输入框里赋值。要赋值我们就要先查到被我们点击的这条新闻的内容,所以改和查是联系在一起的。

:建立select.php页面,用来查询新闻。

<?php
header("Content-type: application/json;charset=utf-8");
include_once("bg.php");
$newsid=$_POST['newsid'];

	$sel="SELECT * FROM `newslist` WHERE `newsid` ='$newsid'";
	$query = mysql_query($sel);
	if ($query && mysql_num_rows($query)) {
 	while ($row = mysql_fetch_assoc($query))
   {
   	$data[]=$row;
   }  

 }
    $jsondata=json_encode($data,JSON_UNESCAPED_UNICODE);
   	echo $jsondata;

?>
继续进行修改新闻的功能,

// 点击修改按钮
                    $("<a>").appendTo(button).text("修改").addClass("modify").click(function() {
                        $.ajax({
                            type: "POST",
                            url: './php/select.php',
                            data: {
                                newsid: newsid
                            },
                            datatype: "json",
                            success: function(data) {
                                // 显示旧信息
                                $("#goback").css("display","block");
                                $(".news-update").show();
                                $(".news-content-list").hide();
                                $("#newstitle").val(data[0].newstitle);
                                $("#newscontent").val(data[0].newscontent);
                                $("#content_url").val(data[0].content_url);
                                $("#imgurl").val(data[0].imgurl);
                                $("#newsfrom").val(data[0].newsfrom);
                                $("#date").val(data[0].date);
                                var parent = $("#newscontent").parent("p");
                                $("<input type='text'>").appendTo(parent).addClass("hide").val(newsid);
                                $("<input type='text'>").appendTo(".hidden").addClass("hide2").val(newstype);
                                

                            }

                        });

                    });

弹出修改框后,就可以修改内容,然后点保存。这里有一个点,因为添加和修改以后都是点击提交按钮,那么系统怎么知道我是添加新闻,还是修改新闻呢?所以在这里我们需要给添加和修改函数的尾部写一个变量,让添加新闻时code=1,修改新闻时code=2,所以我们就要修改一下前面的提交按钮的代码。

$("#submit").click(function() {
        // 判断关键信息是否为空
        if ($("#newstitle").val() == "" || $("#content_url").val() == "" || $("#newscontent").val() == "") {
            alert("请完善新闻信息!");
        } else {
            if (code == 1) {
                $.ajax({
                    url: 'php/add.php',
                    type: "POST",
                    datatype: "json",
                    data: {
                        newstype: $(".hide2").val(),
                        newstitle: $("#newstitle").val(),
                        newscontent: $("#newscontent").val(),
                        content_url: $("#content_url").val(),
                        imgurl: $("#imgurl").val(),
                        newsfrom: $("#newsfrom").val(),
                        date: $("#date").val()
                    },
                    success: function(data) {
                        $.post("php/add.php",{newstype:data.newstype},function(data){
                            alert("添加成功");
                            $(".news-update").hide();
                            $(".news-content-list").show();
                            showcontent($(".hide2").val());
                        });
                    }
                });
            } else if (code == 2) {
                $.ajax({
                    type: "POST",
                    url: 'php/modify.php',
                    data: {
                        newsid: $(".hide").val(),
                        newstitle: $("#newstitle").val(),
                        newscontent: $("#newscontent").val(),
                        content_url: $("#content_url").val(),
                        imgurl: $("#imgurl").val(),
                        newsfrom: $("#newsfrom").val(),
                        date: $("#date").val()
                    },
                    success: function(data) {
                        $.post("php/select.php",{newsid:$(".hide").val()},function(data){
                            alert("修改成功");
                            $(".news-update").hide();
                            $(".news-content-list").show();
                            showcontent($(".hide2").val());
                        });
                        
                    }
                });


            }
        }

    });
最后一个就是删除新闻了,这个相比增、改来说相对简单一点。

删:点击删除按钮,删除新闻。

// 删除新闻
                    $("<a>").appendTo(button).text("删除").addClass("delete").click(function() {
                        $.ajax({
                            type: "POST",
                            url: 'php/delete.php',
                            data: {
                                newsid: newsid,
                            },
                            success: function(data) {
                               $.post("php/delete.php", { newsid: newsid }, function(data) {
                                    alert("删除成功");
                                    showcontent(newstype);
                                });
                            }
                        });

                    });

到这,我们就基本上写完了,像html和css的代码我没有粘,这个都是根据不同的需求来做的,只要把这些难得会做了,那些也都是小问题了。第一次写博客,很多地方可能写的不是很好,以后会慢慢改进的害羞,哪里有问题还希望各位大神提出来,让我赶快进步吧。


完整代码:http://pan.baidu.com/s/1kVPLquV





展开阅读全文

没有更多推荐了,返回首页