devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术_asp动态网站开发与设计案例及代码

作者：笔触狂放9 | 2024-02-27 18:36:21

赞

踩

asp动态网站开发与设计案例及代码

这是突击一个星期的菜鸡作业，提供给大家进行分享学习，是基于ASP、VBScript的旅客主题动态网站，有登录注册、在线留言功能，连接了本地数据库，需要配置好IIS环境，然后把文件夹放到IIS文件夹中，浏览器输入http://localhost/文件名.asp，即可打开。

网盘链接：https://pan.baidu.com/s/19f5T6h-7thy_3dbiOKyhCg 
提取码：ffbv

基于Ajax技术的旅客主题网页开发

摘要：本报告主要围绕《Traveller旅客网站》作品进行阐述，内容分为作品介绍、作品设计与开发，作品效果展示以及工作分析与总结四部分。

关键词：Ajax技术 ASP程序 jQuery框架 Access数据库 VBScript

一、作品介绍以及效果

《Traveller旅客网站》，一个为旅客提供景点推荐和交流分享平台的旅游网站，在灵活结合与运用自己已有的HTML开发知识，以及在动态网页课程上所学到的新知识后，所开发出来的一个较为完整的网站。

此网站分为五个页面：

1、登录页面

用户可进行登录操作，登录成功后，即可进入网站首页。

2、注册页面

用户可进行注册操作，注册成功后，即可凭新账号及密码登录网站。

3、修改密码页面

用户可进行修改密码操作，修改成功后，即可凭原账号及新密码登录网站。

 

4、首页页面

此页面为用户提供景点的推荐和介绍。点击景点后，用户可以查看最新各个景点的介绍，如果是管理员可以进行景点的后台信息更新。

景点介绍：

 

5、留言页面

此页面是旅客之间交流分享的页面，用户可在此处查看其他旅客的留言记录，用户与用户之间的交流更加便利。

留言板：

 

二、作品设计与开发

1、界面设计

网站配色主题是简约和大气的风格，字体设为灰色或黑色，主要展示景点的信息，提升视觉上的满足感，使网站更加符合旅游主题。

网页的内容均为白底矩形，排版是比较简约现代的形式，条理清晰地向用户展示各项内容。

2、结构设计

 

3、功能设计

此网站功能包括：注册帐号、修改密码、登录帐号、景点推荐、交流分享、联系我们等。在用户的各项操作中，均存在一定的交互性，如注册时帐号密码填写格式不正确，该网页会返回错误提示，提醒用户重新填写。

4、核心开发

  • 注册功能（登录和修改密码的代码都类似）
  1. <% '-----------------------连接数据库---------------------------------
  2. Dim conn
  3. Set conn=Server.CreateObject("ADODB.Connection") 
  4. dp = "data\yh.mdb"  '相对本文件的数据库位置
  5. conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&dp&"") 
  6. <!-- '-----------------------创建记录集--------------------------------- -->
  7. <!-- Set rs = conn.Execute("Select * From yh Order By ID DESC") -->
  8. %>

此功能依赖于一个register.asp（需要引入上面的头文件）。

<!--#include file="conn.asp" -->

在register.asp中，用户在表单中填写基本信息，用户填写完后，用Ajax技术提交表单内容，通过asp程序将注册信息插入到数据库的yhmm表。

填写表单代码（当然可以自行更改样式）：

  1. <form method="post" action="?state=reg" class="a">
  2.         <table align="center" >
  3.             <tr>
  4.                 <td colspan="2">
  5.                     <h1 align="center" style="color:rgb(1, 178, 223)">用户注册</h1>
  6.                 </td>
  7.             </tr>
  8.             <tr>
  9.                 <td>账号/用户名</td>
  10.                 <td><input type="text" name="username" autocomplete="off" id="input" placeholder="4-16个字符"></td>
  11.             </tr>
  12.             <tr>
  13.                 <td>密码</td>
  14.                 <td><input type="password" name="password" id="input" placeholder="6-16位字母或数字组合"></td>
  15.             </tr>
  16.             <tr>
  17.                 <td>再次输入密码</td>
  18.                 <td><input type="password" name="password_again" id="input" placeholder="再次输入密码"></td>
  19.             </tr>
  20.             <!-- <tr>
  21.                 <td>性别</td>
  22.                 <td>
  23.                     <select name="sex" id="selectlist">
  24.                     <option value="男">男</option>
  25.                     <option value="女">女</option>
  26.                     </select>
  27.                 </td>
  28.             </tr>
  29.             <tr>
  30.                 <td>身份</td>
  31.                 <td>
  32.                     <select name="sex" id="selectlist">
  33.                     <option value="男">男</option>
  34.                     <option value="女">女</option>
  35.                     </select>
  36.                 </td>
  37.             </tr> -->
  38.             <tr>
  39.                 <td>手机号码</td>
  40.                 <td><input type="text" name="phone" id="input" placeholder="手机号码"></td>
  41.             </tr>
  42.             <tr>
  43.                 <td>邮箱</td>
  44.                 <td><input type="text" name="mail" id="input" autocomplete="off" placeholder="邮箱"></td>
  45.             </tr>
  46.             <tr>
  47.                 <td></td>
  48.                 <td id="small" ><u><a href="login.asp">已有账号?</a></u></td>
  49.             </tr>
  50.             <tr>
  51.                 <td colspan="2">
  52.                     <div align="center" style="margin: 5px;">
  53.                         <input name="button" id="button" type="submit" value="注册">
  54.                     </div>
  55.                 </td>
  56.             </tr>
  57.         </table>
  58.     </form>

实现注册：

  1. <!---------------------------------- 注册功能 ----------------------------->
  2. <% 
  3.     if Request.QueryString("state")="reg" then  'if Request.ServerVariables("REQUEST_METHOD")="POST" then
  4.     if request.Form("username")="" or request.Form("password")="" or request.Form("phone")="" or request.Form("mail")="" or request.Form("password_again")="" then
  5.     response.Write("<script>alert('都是必填项！!');history.go(-1);</script>") '判断用户名、密码、手机号、邮箱是否为空，任意一项为空则不通过
  6.     <!-- response.Redirect "register.asp"  -->
  7.     else
  8.     if len(request.Form("username")) < 4 then 
  9.     '判断用户名是否小于四位数，如果小于四位数就不能通过
  10.             response.Write("<script>alert(' 用户名不能小于四个字');history.go(-1);</script>")
  11.         else
  12.         if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
  13.             response.Write("<script>alert('密码不能小于5位，不能大于16位'); history.go(-1);</script>")
  14.             else
  15.             if request.Form("password") <> request.Form("password_again")  then              
  16.             '两次输入的密码不同
  17.             response.Write("<script>alert('两次输入的密码不同!'); history.go(-1);</script>")
  18.                 else 
  19.                 set rs = server.CreateObject("adodb.recordset")
  20.                 rs.open "select * from [yhmm]",conn,1,3
  21.                 rs.addnew
  22.                 rs("username")=request.Form("username") 'rs("字段")=值
  23.                 rs("password")=request.Form("password")
  24.                 rs("phone")=request.Form("phone")
  25.                 rs("mail")=request.Form("mail")
  26.                 rs.update
  27.                 response.write "<script>alert('注册成功！！！'); location.href = 'login.asp'</script>"
  28.                 '提示注册成功
  29.                 '        response.end
  30.                 end if
  31.                 end if
  32.                 end if
  33.                 end if
  34.                 end if
  35. %>
  • 修改密码功能（类似注册）

此功能依赖于一个modify.asp。

与注册功能类似，用户在该页面的表单中填写信息，先验证填写格式是否正确，再将表单内容传递至自身处理，先根据用户填写的信息在数据库yhmm表中查找，如有记录集，则表示用户填写的信息均正确，允许修改，修改完成再跳转至Login.asp登录页面。修改失败将返回错误提示。

代码：

  1.     <!-------------------------  修改密码  ---------------------------->
  2.     <% if request.QueryString("state")="mdy" then '判断是否是登录状态
  3.         response.write("modifying...")
  4.         us = trim(request.Form("username"))
  5.         ph = trim(request.Form("phone"))
  6.         em = trim(request.Form("email"))
  7.         pw = trim(request.Form("password"))
  8.         pwa = trim(request.Form("password_again"))
  9.         if us = "" or ph = "" or em = "" then
  10.         response.Write("<script>alert('都是必填项!');history.go(-1);</script>") '提示返回
  11.         else
  12.         '查询是否在数据库里
  13.         set rs = server.CreateObject("adodb.recordset")
  14.         sql = "select * from [yhmm] where username='"&us&"'"
  15.         rs.open sql,conn,1,1 '1,1是只读数据，1,3是插入数据，2,3是修改数据
  16.         if not rs.eof then '非空，就是有该数据
  17.         if rs("phone") = ph then '密码也正确
  18.         session("username") = rs("username")
  19.         '一类用来在客户端和服务器之间保持状态的解决方案 ④。有时候session也用来指这种解决方案的存储结构，如“把xxx保存在session里”
  20.         session("phone")=rs("phone")
  21.         session("mail")=rs("mail")
  22.         session("ident")=rs("ident")
  23.         'response.write "<script>alert('手机正确！！！'); parent.window.history.go(-1);</script>"
  24.         if rs("mail") = em then '邮箱正确
  25.         'response.write "<script>alert('邮箱正确！！！'); parent.window.history.go(-1);</script>"
  26.         if rs("password") = pw then '密码相同
  27.         response.write "<script>alert('密码不能和原密码相同！！！'); parent.window.history.go(-1);</script>"
  28.         else
  29.         if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
  30.         response.write "<script>alert('密码不能小于5位，不能大于16位'); parent.window.history.go(-1);</script>"
  31.         else 
  32.         if pw = pwa then
  33.             set rs = server.CreateObject("adodb.recordset")
  34.             rs.open "select * from [yhmm] where username='"&us&"'",conn,1,3
  35.             rs("password")=request.Form("password")
  36.             rs.update
  37.         response.write "<script>alert('密码修改成功!!');  location.href = 'login.asp';</script>"
  38.         end if
  39.         end if
  40.         end if
  41.         else 
  42.         response.write "<script>alert('邮箱不正确！！！'); parent.window.history.go(-1);</script>"
  43.         end if
  44.         else
  45.         response.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"
  46.         end if '结束判断
  47.         else
  48.         response.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")
  49.         end if
  50.         end if
  51.         end if
  52.         %>
  • 登录功能

此功能依赖于一个login.asp。

同理，与注册和修改密码功能类似，用户在login.asp的表单中填写信息，先验证填写格式是否正确，再将表单内容传递至自身处理，根据用户填写的信息在数据库yhmm表中查找，如有记录集，则表示用户帐号及密码填写正确，asp创建session对象记录帐号信息，再跳转至index.asp登录页面。登录失败将返回错误提示。

代码：

  1.     <!----------------------------- 登录  ------------------------------->
  2.     <% if request.QueryString("state")="login" then '判断是否是登录状态
  3.         response.write("login...")
  4.         us = trim(request.Form("username"))
  5.         pw = trim(request.Form("password"))
  6.         if us = "" or pw = "" then
  7.         response.Write("<script>alert('用户名和密码不能为空!');history.go(-1);</script>") '提示返回
  8.         else
  9.         '查询是否在数据库里
  10.         set rs = server.CreateObject("adodb.recordset")
  11.         sql = "select * from [yhmm] where username='"&us&"'"
  12.         rs.open sql,conn,1,1 '1,1是只读数据，1,3是插入数据，2,3是修改数据
  13.         if not rs.eof then '非空，就是有该数据
  14.         if rs("password") = pw then '密码也正确
  15.         session("username") = rs("username")
  16.         '一类用来在客户端和服务器之间保持状态的解决方案 ④。有时候session也用来指这种解决方案的存储结构，如“把xxx保存在session里”
  17.         session("phone")=rs("phone")'这里的session可以在登录后的首页读取
  18.         session("mail")=rs("mail")
  19.         session("ident")=rs("ident")
  20.         response.write "<script>alert('登录成功！！！'); location.href = 'index.asp?in=1'</script>"
  21.         else
  22.         response.write "<script>alert('密码错误！！！'); parent.window.history.go(-1);</script>"
  23.         end if '结束判断
  24.         else
  25.         response.Write("<script>alert('用户不存在！！！'); parent.window.history.go(-1);</script>")
  26.         end if
  27.         end if
  28.         end if
  29.         %>
  • 景点信息的动态更新

由于景点新的更新需要读取数据库中的图片和其他信息，没有基本信息则无法呈现景点信息。在用户主界面选择景点后，将该景点对应的序号作为参数传递到景点呈现界面，然后在index_intro.asp中获取该参数，并以此查找景点对应的记录集，将其中的文字图片等信息进行读取和显示。管理员可以在后台进行内容更新。

主要难的是读取图片，这里我用access的text来存储图片路径，然后在asp中读取

在用户选择景点后跳转传递参数到这个asp中：

<a href="index_intro.asp?sid=1"></a>

然后这里获取sid的值  ： request("sid")

  1.    <!------------------------- 景点介绍 ----------------------------------->
  2. <%
  3. if IsEmpty(request("sid")) then  
  4. response.write "传递参数为空!"
  5. end if
  6. set rs=server.CreateObject("adodb.recordset")       '创建记录对象
  7. Sql="select * from spots where sid="&request("sid")&""    'Sql
  8. rs.open Sql,conn,1,1
  9.  
  10. if not (rs.eof and rs.bof) then			  
  11. ' response.Write "找到景点sid="&request("sid")&"data"
  12. Name_cn = rs("name_cn")
  13. Name_en = rs("name_en")
  14. spot_content = rs("content")
  15. pic1_src = rs("img1")
  16. pic2_src = rs("img2")
  17. pic3_src = rs("img3")
  18. 'response.write "超链接1为______"&rs("img3")&"_______XXX"
  19. end if
  20. %>
  21.           <div>
  22.             <div class="bg_2">
  23.               <div class="title_cn"><% =Name_cn%></div>
  24.               <div class="title_en"><% =Name_en%></div>
  25.               <div style="text-align: center;font-size: smaller;">[内容可在后台管理]</div>
  26.             </div>
  27.             <div class="content">
  28.               &nbsp;&nbsp;<% =spot_content %>
  29.             </div>
  30.             <div>
  31.               <img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img1")%>" ></div>
  32.               <img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img2")%>" ></div>
  33.               <img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img3")%>" ></div>
  34.           </div>
  35.       </table>

        留言板信息的无刷新显示

留言区的更新需要及时读取数据库中的留言记录和其他信息，没有基本信息则无法进行留言功能。所以留言区要在每次成功提交留言后进行更新回到当前页面，此处的数据加载形式与景点展示区类似，使用Ajax将客户端请求发送到lyb.asp，在lyb.asp中进行表格数据的更新处理。

另外，利用VBscript和Ajax，对记录集进行操作，一个页面只展现优先的留言数，并且实现了翻页的功能，使得可浏览的信息空间更大。

        留言板信息的提交

此处的留言数据加载形式与注册版块类似，将评论内容转化为记录集合形式传递至lyb.asp，并将内容插入数据库，同时对页面进行无刷新更新。        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/155278?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号