写在前面:
我刚开始接触大前端这个行业,在刚开始接触前后台交互的时候相当头疼,不知道怎么下手,现在终于完成了一个小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</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>);</span><span class="comment">//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)</span><span> </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,$con) or die(“error”);//连接数据库,第一个参数是数据库名
- mysql_query(”set names ‘utf8’”);//设置编码格式,以防乱码
- ?>
<?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</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>);</span><span class="comment">//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)</span><span> </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,con</span><span>) </span><span class="keyword">or</span><span> </span><span class="keyword">die</span><span>(</span><span class="string">"error"</span><span>);</span><span class="comment">//连接数据库,第一个参数是数据库名</span><span> </span></span></li><li class=""><span>mysql_query(<span class="string">"set names 'utf8'"</span><span>);</span><span class="comment">//设置编码格式,以防乱码</span><span> </span></span></li><li class="alt"><span><span class="vars">sql = “SELECT * FROM `newslist`”;//查询
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);//执行sql语句
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }else if(mysql_num_rows(query</span><span>)==0){ </span></span></li><li class=""><span> <span class="vars">$data</span><span>=</span><span class="string">'{content:"blank"}'</span><span>; </span></span></li><li class="alt"><span> <span class="func">echo</span><span> </span><span class="vars">$data</span><span>; </span></span></li><li class=""><span> <span class="keyword">return</span><span>; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="vars">jsondata=json_encode(data</span><span>,JSON_UNESCAPED_UNICODE);</span><span class="comment">//以json格式输出</span><span> </span></span></li><li class=""><span> <span class="func">echo</span><span> </span><span class="vars">jsondata;//打印出结果
- ?>
<?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”);
include_once("bg.php");
l调整后connect.php和list.php页面的代码分别如下:
- <?php
- con</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>); </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,$con) or die(“error”);
- mysql_query(”set names ‘utf8’”);
- ?>
<?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</span><span>=</span><spanclass="vars"> _GET[‘newstype’];
- sql</span><span> = </span><span class="string">"SELECT * FROM `newslist` WHERE `newstype`='newstype’”;
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }else if(mysql_num_rows(query</span><span>)==0){ </span></span></li><li class=""><span> <span class="vars">$data</span><span>=</span><span class="string">'{content:"blank"}'</span><span>; </span></span></li><li class="alt"><span> <span class="func">echo</span><span> </span><span class="vars">$data</span><span>; </span></span></li><li class=""><span> <span class="keyword">return</span><span>; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="vars">jsondata=json_encode(data</span><span>,JSON_UNESCAPED_UNICODE); </span></span></li><li class=""><span> <span class="func">echo</span><span> </span><span class="vars">jsondata;
- ?>
<?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() {
- (<span class="string">".text-content-list tr"</span><span>).each(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> (<span class="keyword">this</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> type = (</span><span class="keyword">this</span><span>).children(</span><span class="string">"td"</span><span>).attr(</span><span class="string">"name"</span><span>); </span></span></li><li class=""><span> <span class="keyword">var</span><span> text = (</span><span class="keyword">this</span><span>).children().text(); </span></span></li><li class="alt"><span> (<span class="keyword">this</span><span>).css(</span><span class="string">"background"</span><span>, </span><span class="string">"cadetblue"</span><span>).siblings().css(</span><span class="string">"background"</span><span>, </span><span class="string">"darkcyan"</span><span>); </span></span></li><li class=""><span> (”.news-title h2 span”).text(text);
- showcontent(type);
- });
- });
- }
// 获得新闻的类型
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>
<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();
- })();
(function() {
showcontent("recommend");//是用来显示新闻的,下面会写到
choosenewstype();
})();
写完简单的点击事件以后,我们先试着动态的显示一下数据库里的那条新闻。这里就需要用到ajax了,ajax是一种用于创建快速动态网页的技术。
ajax获取数据的方法有两种:get和post。
get会把获取到的信息都显示在地址栏上,好处是一眼就可以看到获取到的内容,缺点是不安全,容易泄露信息。
post刚好相反,他不会显示在地址栏上。所以要根据自己的需求来选择。
- function showcontent(newstype) {
- .ajax({ </span></li><li class="alt"><span> type: <span class="string">"GET"</span><span>, </span><span class="comment">//这里要显示新闻的类型,所以选用了get方法</span><span> </span></span></li><li class=""><span> url: <span class="string">'list.php'</span><span>, </span><span class="comment">//要和谁建立连接,来获取信息</span><span> </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: newstype <span class="comment">//把recommend这个新闻类型传给list.php</span><span> </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span><span class="comment">//获取json格式的数据</span><span> </span></span></li><li class="alt"><span> success: <span class="keyword">function</span><span>(data) { </span><span class="comment">//成功以后要执行什么</span><span> </span></span></li><li class=""><span> console.log(data); </span></li><li class="alt"><span> (<span class="string">"#news-content"</span><span>).html(</span><span class="string">""</span><span>); </span><span class="comment">//先清空显示新闻的这个板块的内容,来防止每次刷新以后都添加一次</span><span> </span></span></li><li class=""><span> .each(data, <span class="keyword">function</span><span>(index, value) { </span><span class="comment">//遍历查询到的新闻</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> newsid = value.newsid; </span><span class="comment">//获取每条新闻的id。</span><span> </span></span></li><li class=""><span> <span class="keyword">var</span><span> tr = (</span><span class="string">"<tr>"</span><span>).appendTo(</span><span class="string">"#news-content"</span><span>); </span><span class="comment">//动态创建每一列,并往里面添加内容</span><span> </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newsid).css(</span><span class="string">"text-align"</span><span>, </span><span class="string">"center"</span><span>); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newstitle); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newscontent); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.content_url); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.imgurl); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newsfrom); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.date); </span></span></li><li class=""><span> <span class="keyword">var</span><span> button = (“<td>”).appendTo(tr);
- });
- }
- });
- }
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’];)。
我们现在也显示成功了,开始进行下一步。
五.做增、删、改、查功能
增:要实现添加新闻的功能,我们就先要有可以来放置新闻的一个板块。所以我们要添加一个按钮,我在写页面的时候就已经写好了,现在只需要实现功能就可以了。点击添加按钮,就会出现一个空白的没有内容的版面来让我们添加新闻。如下:
- //点击添加按钮
- (<span class="string">"#add"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> (<span class="string">".hidden"</span><span>).html(</span><span class="string">""</span><span>); </span></span></li><li class=""><span> (<span class="string">"#newstitle"</span><span>).focus(); </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).show(); </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).hide(); </span></span></li><li class="alt"><span> (<span class="string">"#goback"</span><span>).css(</span><span class="string">"display"</span><span>,</span><span class="string">"block"</span><span>); </span></span></li><li class=""><span> (<span class="string">"#newstitle"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#newscontent"</span><span>).val(); </span></span></li><li class=""><span> (<span class="string">"#content_url"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#imgurl"</span><span>).val(); </span></span></li><li class=""><span> (<span class="string">"#newsfrom"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#date"</span><span>).val(); </span></span></li><li class=""><span> $(”<input type=’text’>”).appendTo(“.hidden”).addClass(“hide2”).val(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);
});
这个页面还需要添加两个点击事件,一个是点击返回按钮,返回到最初的页面。二,点击提交按钮,跳转到最初的页面。
- // 返回到原来的页面
- (<span class="string">"#goback"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).hide();</span><span class="comment">//页面一个隐藏一个显示</span><span> </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> (”#goback”).css(“display”,“none”);
- });
// 返回到原来的页面
$("#goback").click(function() {
$(".news-update").hide();//页面一个隐藏一个显示
$(".news-content-list").show();
$("#goback").css("display","none");
});
点击提交按钮
- (</span><span class="string">"#submit"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="comment">// 判断关键信息是否为空</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ($(</span><span class="string">"#newstitle"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#content_url"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#newscontent"</span><span>).val() == </span><span class="string">""</span><span>) { </span></span></li><li class=""><span> alert(<span class="string">"请完善新闻信息!"</span><span>); </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> </span></li><li class="alt"><span> $.ajax({ </span></li><li class=""><span> url: <span class="string">'php/add.php'</span><span>, </span></span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: $(<span class="string">".hide2"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/add.php"</span><span>, { newstype: data.newstype }, </span><span class="keyword">function</span><span>(data) { </span><span class="comment">//ajax的局部刷新</span><span> </span></span></li><li class=""><span> alert(<span class="string">"添加成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> </span></li><li class=""><span> }); </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="javascript" style="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</span><span>=</span><spanclass="vars"> _POST[‘newstype’];
- newstitle</span><span>=</span><spanclass="vars"> _POST[‘newstitle’];
- newscontent</span><span>=</span><spanclass="vars"> _POST[‘newscontent’];
- contenturl</span><span>=</span><spanclass="vars"> _POST[‘content_url’];
- imgurl</span><span>=</span><spanclass="vars"> _POST[‘imgurl’];
- newsfrom</span><span>=</span><spanclass="vars"> _POST[‘newsfrom’];
- date</span><span>=</span><spanclass="vars"> _POST[‘date’];
- sql</span><span>="insert into newslist (`newstype`,`newstitle`,`newscontent`,`content_url`,`imgurl`,`newsfrom`, </span></span></li><li class=""><span> `<span class="func">date</span><span>`) values (</span><span class="string">'newstype’,‘ newstitle′</span><span>,</span><spanclass="string">′ newscontent’,‘ contenturl′</span><span>,</span><spanclass="string">′ imgurl’,‘ newsfrom′</span><span>,</span><spanclass="string">′ date’)”;
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);
- echo $query;
- ?>
增删改查的点击事件应该分别对应单独的一个php页面,这样方便达到我们想要的效果。然后测试一下,看看是否可以添加成功。<?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; ?>
添加成功,现在我们就可以把所有的新闻都添加进去了。
改:改和增的方法有一点小类似,点击修改按钮,弹出修改框,和添加不同的是,我们需要给每个相对应的输入框里赋值。要赋值我们就要先查到被我们点击的这条新闻的内容,所以改和查是联系在一起的。查:建立select.php页面,用来查询新闻。
- <?php
- header(”Content-type: application/json;charset=utf-8”);
- include_once(“bg.php”);
- newsid</span><span>=</span><spanclass="vars"> _POST[‘newsid’];
- sel</span><span>=</span><span class="string">"SELECT * FROM `newslist` WHERE `newsid` ='newsid’”;
- query</span><span> = mysql_query(</span><span class="vars">sel);
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }
- jsondata</span><span>=jsonencode(</span><spanclass="vars"> data,JSON_UNESCAPED_UNICODE);
- echo $jsondata;
- ?>
继续进行修改新闻的功能,<?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; ?>
- // 点击修改按钮
- (<span class="string">"<a>"</span><span>).appendTo(button).text(</span><span class="string">"修改"</span><span>).addClass(</span><span class="string">"modify"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> .ajax({ </span></li><li class=""><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class="alt"><span> url: <span class="string">'./php/select.php'</span><span>, </span></span></li><li class=""><span> data: { </span></li><li class="alt"><span> newsid: newsid </span></li><li class=""><span> }, </span></li><li class="alt"><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> <span class="comment">// 显示旧信息</span><span> </span></span></li><li class=""><span> (<span class="string">"#goback"</span><span>).css(</span><span class="string">"display"</span><span>,</span><span class="string">"block"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).show(); </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).hide(); </span></span></li><li class="alt"><span> (<span class="string">"#newstitle"</span><span>).val(data[0].newstitle); </span></span></li><li class=""><span> (<span class="string">"#newscontent"</span><span>).val(data[0].newscontent); </span></span></li><li class="alt"><span> (<span class="string">"#content_url"</span><span>).val(data[0].content_url); </span></span></li><li class=""><span> (<span class="string">"#imgurl"</span><span>).val(data[0].imgurl); </span></span></li><li class="alt"><span> (<span class="string">"#newsfrom"</span><span>).val(data[0].newsfrom); </span></span></li><li class=""><span> (<span class="string">"#date"</span><span>).val(data[0].date); </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> parent = (</span><span class="string">"#newscontent"</span><span>).parent(</span><span class="string">"p"</span><span>); </span></span></li><li class=""><span> (<span class="string">"<input type='text'>"</span><span>).appendTo(parent).addClass(</span><span class="string">"hide"</span><span>).val(newsid); </span></span></li><li class="alt"><span> (”<input type=’text’>”).appendTo(“.hidden”).addClass(“hide2”).val(newstype);
- }
- });
- });
// 点击修改按钮 $("<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,所以我们就要修改一下前面的提交按钮的代码。- (</span><span class="string">"#submit"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="comment">// 判断关键信息是否为空</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ($(</span><span class="string">"#newstitle"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#content_url"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#newscontent"</span><span>).val() == </span><span class="string">""</span><span>) { </span></span></li><li class=""><span> alert(<span class="string">"请完善新闻信息!"</span><span>); </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> <span class="keyword">if</span><span> (code == 1) { </span></span></li><li class="alt"><span> $.ajax({ </span></li><li class=""><span> url: <span class="string">'php/add.php'</span><span>, </span></span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: $(<span class="string">".hide2"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/add.php"</span><span>,{newstype:data.newstype},</span><span class="keyword">function</span><span>(data){ </span></span></li><li class=""><span> alert(<span class="string">"添加成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span> } <span class="keyword">else</span><span> </span><span class="keyword">if</span><span> (code == 2) { </span></span></li><li class=""><span> $.ajax({ </span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> url: <span class="string">'php/modify.php'</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newsid: $(<span class="string">".hide"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/select.php"</span><span>,{newsid:$(</span><span class="string">".hide"</span><span>).val()},</span><span class="keyword">function</span><span>(data){ </span></span></li><li class=""><span> alert(<span class="string">"修改成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span> </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> }); </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="javascript" style="display: none;">(“#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()); }); } }); } } }); 最后一个就是删除新闻了,这个相比增、改来说相对简单一点。删:点击删除按钮,删除新闻。
- // 删除新闻
- (<span class="string">"<a>"</span><span>).appendTo(button).text(</span><span class="string">"删除"</span><span>).addClass(</span><span class="string">"delete"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> .ajax({ </span></li><li class=""><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class="alt"><span> url: <span class="string">'php/delete.php'</span><span>, </span></span></li><li class=""><span> data: { </span></li><li class="alt"><span> newsid: newsid, </span></li><li class=""><span> }, </span></li><li class="alt"><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class=""><span> $.post(”php/delete.php”, { newsid: newsid }, function(data) {
- alert(”删除成功”);
- showcontent(newstype);
- });
- }
- });
- });
// 删除新闻 $("<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
写在前面:
我刚开始接触大前端这个行业,在刚开始接触前后台交互的时候相当头疼,不知道怎么下手,现在终于完成了一个小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</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>);</span><span class="comment">//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)</span><span> </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,$con) or die(“error”);//连接数据库,第一个参数是数据库名
- mysql_query(”set names ‘utf8’”);//设置编码格式,以防乱码
- ?>
<?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</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>);</span><span class="comment">//连接本地数据库 root是默认的用户名 密码为空(前提是没用设置用户名 密码)</span><span> </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,con</span><span>) </span><span class="keyword">or</span><span> </span><span class="keyword">die</span><span>(</span><span class="string">"error"</span><span>);</span><span class="comment">//连接数据库,第一个参数是数据库名</span><span> </span></span></li><li class=""><span>mysql_query(<span class="string">"set names 'utf8'"</span><span>);</span><span class="comment">//设置编码格式,以防乱码</span><span> </span></span></li><li class="alt"><span><span class="vars">sql = “SELECT * FROM `newslist`”;//查询
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);//执行sql语句
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }else if(mysql_num_rows(query</span><span>)==0){ </span></span></li><li class=""><span> <span class="vars">$data</span><span>=</span><span class="string">'{content:"blank"}'</span><span>; </span></span></li><li class="alt"><span> <span class="func">echo</span><span> </span><span class="vars">$data</span><span>; </span></span></li><li class=""><span> <span class="keyword">return</span><span>; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="vars">jsondata=json_encode(data</span><span>,JSON_UNESCAPED_UNICODE);</span><span class="comment">//以json格式输出</span><span> </span></span></li><li class=""><span> <span class="func">echo</span><span> </span><span class="vars">jsondata;//打印出结果
- ?>
打开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;//打印出结果 ?>
我们现在把连接数据库的代码和查询的sql语句分开来写,避免以后和前端交互时产生不必要的麻烦。
我们再创建一个list.php文件用来查询数据库,只需在文件的开头写一句代码,即可引用连接数据库的php页面。
- include_once(“bg.php”);
l调整后connect.php和list.php页面的代码分别如下:include_once("bg.php");
- <?php
- con</span><span>=mysql_connect(</span><span class="string">"localhost"</span><span>,</span><span class="string">"root"</span><span>,</span><span class="string">""</span><span>); </span></span></li><li class="alt"><span><span class="vars">my_db=mysql_select_db(“mynewsql”,$con) or die(“error”);
- mysql_query(”set names ‘utf8’”);
- ?>
<?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</span><span>=</span><spanclass="vars"> _GET[‘newstype’];
- sql</span><span> = </span><span class="string">"SELECT * FROM `newslist` WHERE `newstype`='newstype’”;
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }else if(mysql_num_rows(query</span><span>)==0){ </span></span></li><li class=""><span> <span class="vars">$data</span><span>=</span><span class="string">'{content:"blank"}'</span><span>; </span></span></li><li class="alt"><span> <span class="func">echo</span><span> </span><span class="vars">$data</span><span>; </span></span></li><li class=""><span> <span class="keyword">return</span><span>; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="vars">jsondata=json_encode(data</span><span>,JSON_UNESCAPED_UNICODE); </span></span></li><li class=""><span> <span class="func">echo</span><span> </span><span class="vars">jsondata;
- ?>
<?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() {
- (<span class="string">".text-content-list tr"</span><span>).each(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> (<span class="keyword">this</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> type = (</span><span class="keyword">this</span><span>).children(</span><span class="string">"td"</span><span>).attr(</span><span class="string">"name"</span><span>); </span></span></li><li class=""><span> <span class="keyword">var</span><span> text = (</span><span class="keyword">this</span><span>).children().text(); </span></span></li><li class="alt"><span> (<span class="keyword">this</span><span>).css(</span><span class="string">"background"</span><span>, </span><span class="string">"cadetblue"</span><span>).siblings().css(</span><span class="string">"background"</span><span>, </span><span class="string">"darkcyan"</span><span>); </span></span></li><li class=""><span> (”.news-title h2 span”).text(text);
- showcontent(type);
- });
- });
- }
// 获得新闻的类型 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>
<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();
- })();
(function() { showcontent("recommend");//是用来显示新闻的,下面会写到 choosenewstype(); })();
写完简单的点击事件以后,我们先试着动态的显示一下数据库里的那条新闻。这里就需要用到ajax了,ajax是一种用于创建快速动态网页的技术。ajax获取数据的方法有两种:get和post。
get会把获取到的信息都显示在地址栏上,好处是一眼就可以看到获取到的内容,缺点是不安全,容易泄露信息。
post刚好相反,他不会显示在地址栏上。所以要根据自己的需求来选择。
- function showcontent(newstype) {
- .ajax({ </span></li><li class="alt"><span> type: <span class="string">"GET"</span><span>, </span><span class="comment">//这里要显示新闻的类型,所以选用了get方法</span><span> </span></span></li><li class=""><span> url: <span class="string">'list.php'</span><span>, </span><span class="comment">//要和谁建立连接,来获取信息</span><span> </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: newstype <span class="comment">//把recommend这个新闻类型传给list.php</span><span> </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span><span class="comment">//获取json格式的数据</span><span> </span></span></li><li class="alt"><span> success: <span class="keyword">function</span><span>(data) { </span><span class="comment">//成功以后要执行什么</span><span> </span></span></li><li class=""><span> console.log(data); </span></li><li class="alt"><span> (<span class="string">"#news-content"</span><span>).html(</span><span class="string">""</span><span>); </span><span class="comment">//先清空显示新闻的这个板块的内容,来防止每次刷新以后都添加一次</span><span> </span></span></li><li class=""><span> .each(data, <span class="keyword">function</span><span>(index, value) { </span><span class="comment">//遍历查询到的新闻</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> newsid = value.newsid; </span><span class="comment">//获取每条新闻的id。</span><span> </span></span></li><li class=""><span> <span class="keyword">var</span><span> tr = (</span><span class="string">"<tr>"</span><span>).appendTo(</span><span class="string">"#news-content"</span><span>); </span><span class="comment">//动态创建每一列,并往里面添加内容</span><span> </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newsid).css(</span><span class="string">"text-align"</span><span>, </span><span class="string">"center"</span><span>); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newstitle); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newscontent); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.content_url); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.imgurl); </span></span></li><li class=""><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.newsfrom); </span></span></li><li class="alt"><span> (<span class="string">"<td>"</span><span>).appendTo(tr).text(value.date); </span></span></li><li class=""><span> <span class="keyword">var</span><span> button = (“<td>”).appendTo(tr);
- });
- }
- });
- }
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’];)。
我们现在也显示成功了,开始进行下一步。
五.做增、删、改、查功能
增:要实现添加新闻的功能,我们就先要有可以来放置新闻的一个板块。所以我们要添加一个按钮,我在写页面的时候就已经写好了,现在只需要实现功能就可以了。点击添加按钮,就会出现一个空白的没有内容的版面来让我们添加新闻。如下:
- //点击添加按钮
- (<span class="string">"#add"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> (<span class="string">".hidden"</span><span>).html(</span><span class="string">""</span><span>); </span></span></li><li class=""><span> (<span class="string">"#newstitle"</span><span>).focus(); </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).show(); </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).hide(); </span></span></li><li class="alt"><span> (<span class="string">"#goback"</span><span>).css(</span><span class="string">"display"</span><span>,</span><span class="string">"block"</span><span>); </span></span></li><li class=""><span> (<span class="string">"#newstitle"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#newscontent"</span><span>).val(); </span></span></li><li class=""><span> (<span class="string">"#content_url"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#imgurl"</span><span>).val(); </span></span></li><li class=""><span> (<span class="string">"#newsfrom"</span><span>).val(); </span></span></li><li class="alt"><span> (<span class="string">"#date"</span><span>).val(); </span></span></li><li class=""><span> $(”<input type=’text’>”).appendTo(“.hidden”).addClass(“hide2”).val(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); });
这个页面还需要添加两个点击事件,一个是点击返回按钮,返回到最初的页面。二,点击提交按钮,跳转到最初的页面。
- // 返回到原来的页面
- (<span class="string">"#goback"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).hide();</span><span class="comment">//页面一个隐藏一个显示</span><span> </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> (”#goback”).css(“display”,“none”);
- });
点击提交按钮// 返回到原来的页面 $("#goback").click(function() { $(".news-update").hide();//页面一个隐藏一个显示 $(".news-content-list").show(); $("#goback").css("display","none"); });
- (</span><span class="string">"#submit"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="comment">// 判断关键信息是否为空</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ($(</span><span class="string">"#newstitle"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#content_url"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#newscontent"</span><span>).val() == </span><span class="string">""</span><span>) { </span></span></li><li class=""><span> alert(<span class="string">"请完善新闻信息!"</span><span>); </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> </span></li><li class="alt"><span> $.ajax({ </span></li><li class=""><span> url: <span class="string">'php/add.php'</span><span>, </span></span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: $(<span class="string">".hide2"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/add.php"</span><span>, { newstype: data.newstype }, </span><span class="keyword">function</span><span>(data) { </span><span class="comment">//ajax的局部刷新</span><span> </span></span></li><li class=""><span> alert(<span class="string">"添加成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> </span></li><li class=""><span> }); </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="javascript" style="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</span><span>=</span><spanclass="vars"> _POST[‘newstype’];
- newstitle</span><span>=</span><spanclass="vars"> _POST[‘newstitle’];
- newscontent</span><span>=</span><spanclass="vars"> _POST[‘newscontent’];
- contenturl</span><span>=</span><spanclass="vars"> _POST[‘content_url’];
- imgurl</span><span>=</span><spanclass="vars"> _POST[‘imgurl’];
- newsfrom</span><span>=</span><spanclass="vars"> _POST[‘newsfrom’];
- date</span><span>=</span><spanclass="vars"> _POST[‘date’];
- sql</span><span>="insert into newslist (`newstype`,`newstitle`,`newscontent`,`content_url`,`imgurl`,`newsfrom`, </span></span></li><li class=""><span> `<span class="func">date</span><span>`) values (</span><span class="string">'newstype’,‘ newstitle′</span><span>,</span><spanclass="string">′ newscontent’,‘ contenturl′</span><span>,</span><spanclass="string">′ imgurl’,‘ newsfrom′</span><span>,</span><spanclass="string">′ date’)”;
- query</span><span>=mysqlquery(</span><spanclass="vars"> sql);
- echo $query;
- ?>
增删改查的点击事件应该分别对应单独的一个php页面,这样方便达到我们想要的效果。然后测试一下,看看是否可以添加成功。<?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; ?>
添加成功,现在我们就可以把所有的新闻都添加进去了。
改:改和增的方法有一点小类似,点击修改按钮,弹出修改框,和添加不同的是,我们需要给每个相对应的输入框里赋值。要赋值我们就要先查到被我们点击的这条新闻的内容,所以改和查是联系在一起的。查:建立select.php页面,用来查询新闻。
- <?php
- header(”Content-type: application/json;charset=utf-8”);
- include_once(“bg.php”);
- newsid</span><span>=</span><spanclass="vars"> _POST[‘newsid’];
- sel</span><span>=</span><span class="string">"SELECT * FROM `newslist` WHERE `newsid` ='newsid’”;
- query</span><span> = mysql_query(</span><span class="vars">sel);
- if (query</span><span> && mysql_num_rows(</span><span class="vars">query)) {
- while (row</span><span> = mysql_fetch_assoc(</span><span class="vars">query))
- {
- data</span><span>[]=</span><spanclass="vars"> row;
- }
- }
- jsondata</span><span>=jsonencode(</span><spanclass="vars"> data,JSON_UNESCAPED_UNICODE);
- echo $jsondata;
- ?>
继续进行修改新闻的功能,<?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; ?>
- // 点击修改按钮
- (<span class="string">"<a>"</span><span>).appendTo(button).text(</span><span class="string">"修改"</span><span>).addClass(</span><span class="string">"modify"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> .ajax({ </span></li><li class=""><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class="alt"><span> url: <span class="string">'./php/select.php'</span><span>, </span></span></li><li class=""><span> data: { </span></li><li class="alt"><span> newsid: newsid </span></li><li class=""><span> }, </span></li><li class="alt"><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> <span class="comment">// 显示旧信息</span><span> </span></span></li><li class=""><span> (<span class="string">"#goback"</span><span>).css(</span><span class="string">"display"</span><span>,</span><span class="string">"block"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">".news-update"</span><span>).show(); </span></span></li><li class=""><span> (<span class="string">".news-content-list"</span><span>).hide(); </span></span></li><li class="alt"><span> (<span class="string">"#newstitle"</span><span>).val(data[0].newstitle); </span></span></li><li class=""><span> (<span class="string">"#newscontent"</span><span>).val(data[0].newscontent); </span></span></li><li class="alt"><span> (<span class="string">"#content_url"</span><span>).val(data[0].content_url); </span></span></li><li class=""><span> (<span class="string">"#imgurl"</span><span>).val(data[0].imgurl); </span></span></li><li class="alt"><span> (<span class="string">"#newsfrom"</span><span>).val(data[0].newsfrom); </span></span></li><li class=""><span> (<span class="string">"#date"</span><span>).val(data[0].date); </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> parent = (</span><span class="string">"#newscontent"</span><span>).parent(</span><span class="string">"p"</span><span>); </span></span></li><li class=""><span> (<span class="string">"<input type='text'>"</span><span>).appendTo(parent).addClass(</span><span class="string">"hide"</span><span>).val(newsid); </span></span></li><li class="alt"><span> (”<input type=’text’>”).appendTo(“.hidden”).addClass(“hide2”).val(newstype);
- }
- });
- });
// 点击修改按钮 $("<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,所以我们就要修改一下前面的提交按钮的代码。- (</span><span class="string">"#submit"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="comment">// 判断关键信息是否为空</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ($(</span><span class="string">"#newstitle"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#content_url"</span><span>).val() == </span><span class="string">""</span><span> || $(</span><span class="string">"#newscontent"</span><span>).val() == </span><span class="string">""</span><span>) { </span></span></li><li class=""><span> alert(<span class="string">"请完善新闻信息!"</span><span>); </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> <span class="keyword">if</span><span> (code == 1) { </span></span></li><li class="alt"><span> $.ajax({ </span></li><li class=""><span> url: <span class="string">'php/add.php'</span><span>, </span></span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> datatype: <span class="string">"json"</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newstype: $(<span class="string">".hide2"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/add.php"</span><span>,{newstype:data.newstype},</span><span class="keyword">function</span><span>(data){ </span></span></li><li class=""><span> alert(<span class="string">"添加成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> } </span></li><li class=""><span> }); </span></li><li class="alt"><span> } <span class="keyword">else</span><span> </span><span class="keyword">if</span><span> (code == 2) { </span></span></li><li class=""><span> $.ajax({ </span></li><li class="alt"><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class=""><span> url: <span class="string">'php/modify.php'</span><span>, </span></span></li><li class="alt"><span> data: { </span></li><li class=""><span> newsid: $(<span class="string">".hide"</span><span>).val(), </span></span></li><li class="alt"><span> newstitle: $(<span class="string">"#newstitle"</span><span>).val(), </span></span></li><li class=""><span> newscontent: $(<span class="string">"#newscontent"</span><span>).val(), </span></span></li><li class="alt"><span> content_url: $(<span class="string">"#content_url"</span><span>).val(), </span></span></li><li class=""><span> imgurl: $(<span class="string">"#imgurl"</span><span>).val(), </span></span></li><li class="alt"><span> newsfrom: $(<span class="string">"#newsfrom"</span><span>).val(), </span></span></li><li class=""><span> date: $(<span class="string">"#date"</span><span>).val() </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class="alt"><span> $.post(<span class="string">"php/select.php"</span><span>,{newsid:$(</span><span class="string">".hide"</span><span>).val()},</span><span class="keyword">function</span><span>(data){ </span></span></li><li class=""><span> alert(<span class="string">"修改成功"</span><span>); </span></span></li><li class="alt"><span> $(<span class="string">".news-update"</span><span>).hide(); </span></span></li><li class=""><span> $(<span class="string">".news-content-list"</span><span>).show(); </span></span></li><li class="alt"><span> showcontent($(<span class="string">".hide2"</span><span>).val()); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> }); </span></li><li class=""><span> </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> }); </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="javascript" style="display: none;">(“#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()); }); } }); } } }); 最后一个就是删除新闻了,这个相比增、改来说相对简单一点。删:点击删除按钮,删除新闻。
- // 删除新闻
- (<span class="string">"<a>"</span><span>).appendTo(button).text(</span><span class="string">"删除"</span><span>).addClass(</span><span class="string">"delete"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> .ajax({ </span></li><li class=""><span> type: <span class="string">"POST"</span><span>, </span></span></li><li class="alt"><span> url: <span class="string">'php/delete.php'</span><span>, </span></span></li><li class=""><span> data: { </span></li><li class="alt"><span> newsid: newsid, </span></li><li class=""><span> }, </span></li><li class="alt"><span> success: <span class="keyword">function</span><span>(data) { </span></span></li><li class=""><span> $.post(”php/delete.php”, { newsid: newsid }, function(data) {
- alert(”删除成功”);
- showcontent(newstype);
- });
- }
- });
- });
// 删除新闻 $("<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