最近评论
正在载入评论列表...
5.2.2 添加文章
文章的添加和编辑内容都写在了edit.asp网页中，首先看一下添加文章的实际效果，如图5-4所示。
图5-4
前面已经分析了添加文章的具体思路，现在看预览的实际效果。不难发现，在添加文章的表单中包括了两个本文框、一个下拉列表框及一个多行文本框，另外还包括两个按钮，这两个按钮的代码即可以用一个单独的表格来写，也可以写在合并的单元格内（合并表格的列），中间采用空格的形式。根据这样的分析，在没有看代码的情况下，大家可以试着写一下，看看能不能达到实际的运行效果。其实学习的过程就是在这种分析、实践中不断提高的。
在edit.asp文件中，有关添加文章的代码如下。
1．<style>
2．Body{
3．SCROLLBAR-FACE-COLOR:red;
4．SCROLLBAR-HIGHLIGHT-COLOR:blue;
5．SCROLLBAR-SHADOW-COLOR: green;
6．SCROLLBAR-ARROW-COLOR:yellow;
7．SCROLLBAR-BASE-COLOR:black;
8．SCROLLBAR-DARK-SHADOW-COLOR: white；
9．margin-left: 0px;
10．margin-top: 0px;
11．background-color: #003300;
12．}
13．textarea {
14．background-color: #006633;
15．}
16．.jt2 {
17．background-color: #9999FF;
18．color: #006633;
19．font-weight: bold;
20．}
21．option {
22．background-color: #9999FF;
23．border:#006699;
24．border-style:double;
25．}
26．td {
27．font-size: 12px;
28．font-weight: bold;
29．color: #FF3300;
30．}
31．a:link {
32．text-decoration: none;
33．color: #0033FF;
34．}
35．.cys {
36．border: thin dotted #00CCFF;
37．}
38．a:visited {
39．text-decoration: none;
40．color: #0000FF;
41．}
42．a:hover {
43．text-decoration: none;
44．color: #CCFF00;
45．}
46．a:active {
47．text-decoration: none;
48．color: #CCFF00;
49．}
50．-->
51．</style>
52．<!--#include file＝"include/conn.asp"-->
53．<%
54．dim jhf
55．jhf＝request.QueryString("jhf")
56．if jhf＝"" then
57．%>
58．<table width＝"500" height＝"300" cellpadding＝"0" cellspacing＝"0" align＝
"center">
59．<tr>
60．<td align＝"center"><b><font face＝"华文彩云" size＝"6"> 欢迎进入后台管理系
61．统！ </font></b></td>
62．</tr>
63．</table>
64．<%
65．elseif jhf＝"add" then
66．%>
67．<table cellspacing＝0 width＝"500" height＝"260" cellpadding＝4 align＝"center">
68．<form action＝"add.asp?jhf＝add" method＝"post" name＝"aticle">
69．<tr>
70．<td >文章标题:</td>
71．<td><input type＝"text" class＝"jt2" name＝"t_topic" size＝20 /></td>
72．</tr>
73．<tr>
74．<td>文章作者:</td>
75．<td><input type＝"text" class＝"jt2" name＝"t_writer" size＝20/></td>
76．</tr>
77．<tr>
78．<td>文章类别:</td>
79．<td><select name＝"t_leibie">
80．<option value＝"青春诗行">青春诗行</option>
81．<option value＝"星光灿烂">星光灿烂</option>
82．<option value＝"事事关心">事事关心</option>
83．</select></td>
84．</tr>
85．<tr>
86．<td >文章内容:</td>
87．<td><textarea name＝"t_content" class＝"jt2" rows＝"10"
88．cols＝"35"></textarea></td>
89．</tr>
90．<tr>
91．<td colspan＝2 align＝"center" ><input type＝"submit" class＝"jt2" value＝" 提交">
92．
93．<input type＝"reset" class＝"jt2" value＝"重置"></td>
94．</tr>
95．</form>
96．</table>
代码释义：
这是一个在内部框架中嵌入的网页，所以对网页无用的代码可全部删除，否则容易造成页面出现错误。这段代码整体上很长，根据传递的变量值不同，可以将它分成几个部分，这样再分析每一部分的代码就相对容易些。下面分别进行解释。
第1～51行，定义的样式表，在CSS中完成的。每部分的具体作用如下。
l 第3～8行，定义滚动条的颜色。
l 第3行，立体滚动条凸出部分的颜色。
l 第4行，滚动条空白部分的颜色。
l 第5行，立体滚动条阴影的颜色。
l 第6行，按钮上箭头的颜色。
l 第7行，滚动条的基本颜色。
l 第8行，立体滚动条强阴影的颜色。
关于这些颜色的设定及其实际效果，只有在制作过程中具体设置和浏览以后才能感知，不经过实践是很难想象其结果的。
第13～15行，定义文本框的背景。
第16～20行，定义了一个类，可以在任何标签中引用。
第38～48行，定义的链接效果，包括是否有下画线，以及链接的颜色等。
第54～59行，定义变量，并从上个网页中获取变量的值，这个值就是上一个网页问号后边的jhf的值。根据不同的值才能确定链接的是哪种处理文章的方式。如果是空，则说明刚进入登录文章管理页面，或者还没有单击过任何链接，这时就会显示一句话“欢迎进入后台管理系统”，即第60行的效果。
第65行的效果为当变量不为空时的几种情况。
第67～96行，文章的添加功能，其实就是一个嵌入在表格中的表单，具体内容如下。
l 第67行，定义一个表格，设置了表格的宽、高值，边框与内部空间的距离，对齐方式。
l 第68行，表单标记，设置了传递数据的方式，表单的提交网页及表单的名称。
l 第71行，定义文章标题输入框。
l 第75行，定义文章作者输入框。
l 第79～83行，定义下拉列表框。
l 第87～88行，定义文章内容输入框。
l 第91～93行，合并表格的列，并把表单的两个按钮放在合并的列中，这样的好处是，可以把它们放在表格的中间，如果它们之间的距离较近，可以采用添加空格的方法使它们隔开。
当与添加文章的有关内容填写完毕后，单击【提交】按钮，则将链接到add.asp页面（网页代码第68行）。add.asp页面要处理的工作是把刚刚写好的内容存入数据库中，因此要用到Insert into…values…where…语句。其代码构成如下。
1．<body>
2．<!--#include file＝"include/conn.asp"-->
3．<%
4．dim jhf,t_topic,t_writer,t_leibie,t_content
5．jhf＝request.QueryString("jhf")
6．t_topic＝request.form("t_topic")
7．t_writer＝request.form("t_writer")
8．t_leibie＝request.form("t_leibie")
9．t_content＝request.form("t_content")
10．if jhf＝"add" then
11．sql＝"INSER TINTO mody
12．(t_topic,t_writer,t_leibie,t_content)
13．VALUES('"&t_topic&"','"&t_12writer&"','"&t_leibie&"','13"&t_content&"')"
14．conn.execute sql
15．%>
16．<script>
17．alert("操作成功！")
18．location.href＝"edit.asp?jhf＝add";
19．</script>
20．<%end if%>
21．</body>
代码释义：
第2行，包含数据库连接页面。
第4行，定义几个变量，用来获取表单中的信息。
第5～9行，变量分别获得由表单所传递过来的值。
第11～14行，向数据库中添加数据。添加数据时，要注意单、双引号及连接符的使用，其规则是字符型的变量一定要加定界符。
第16～19行，当数据存入数据库后，弹出一个窗口，这个窗口是用JavaScript写的，显示的是“操作成功!”。当单击【确定】按钮时，网页将返回到添加文章时的页面。
至此，文章的添加功能全部完成。
图书导读
