优美图论文(共17页)

1、基于三层架构的优美图网站课程论文 课程(kchng)论文题 目 基于(jy)三层架构的优美图网站 专 业 班 级 学 号 姓 名 二 一 四 年 九 月 目 录TOC o 1-3 h u HYPERLINK l _Toc6879 一、目的(md)和要求 一、目的(md)和要求优美(yumi)图网站的前台网站(wn zhn)和后台管理的设计与开发 该网站定位为时尚文艺类图片分享社区，帮助爱美图的用户们快速发现喜爱的图片，并在发现和分享中形成开放的社交体系，成为图片发现、创造、传播的图片生态社区。在这里以用户生成内容的形式，用户上传图片，或自行编辑图片信息，实时向用户展现最新、最热、唯美的图片资源

2、。一张图片代表一个时刻的心情，优美图就是为了鼓励用户在收藏美图的过程中，将自己的心情点滴附带着图片记录下来，图文结合，表达自己内心的情感而存在的。本次项目是基于三层架构，采用ASP+JQuery+SQL Server2005开发环境开发的动态web网络优美图网站。其中三层架构的思想，分为表示层（UI）、业务逻辑层（BLL）、数据层（DAL），以及实体层（Model），始终贯彻整个项目，包括了网站的前台用户登录、注册、查看、评论等的操作和后台的管理员管理操作。 二、主要仪器设备Windows 7操作系统、Visual Studio 2010、SQL Server2005 三、设计与制作思路3.1

3、需求分析3.1.1 优美图前台网站和后台管理的需求说明优美图网站在性能功能上应该达到如下要求：网站前台更应注重界面友好，美观大方，操作简单，图片分类等直观明了，便于用户的浏览以及操作，另外也能实现热门图片实时更新置顶的效果。至于后台管理界面，采用完全框架式的页面布局，功能列表详细，使得工作人员在后台的用户管理，以及图片管理等工作更加简便。对常见网站的后台管理的各个方面：修改（用户权限，图片审核情况等的修改）以及删除等方面都大致实现了，实现了网站对即时美图信息的管理要求，满足用户的需求。本次优美图网站应具有以下功能：网站前台能实现新用户的注册；网站前台能实现用户的登录；网站(wn zhn)前台能

4、实现用户密码的找回；网站(wn zhn)前台能实现用户上传图片等的操作；用户能通过(tnggu)网络浏览最新的热门图片或受欢迎的图片，以及该图片相关的详细信息；后台管理能实现管理员记住密码，以便下次快速登录的功能；后台管理能实现用户信息的单个删除，以及批量删除；后台管理能对用户上传的图片进行审核管理；后台管理能实现数据多时的分页操作；3.1.2 优美图网站的可行性分析本网站属于管理系统和前台网站数据信息发布类。用户在功能上的要求不复杂，而且有强大的工具和框架环境支持。优美图系统网站在后台管理的对图片进行审核时，若图片审核通过，前台就能实时更新最新图片，以及图片的详细信息，满足了人们浏览网页时能

5、收藏到或搜索到自己喜爱的图片的需求。优美图系统网站后台由管理员进行管理维护，保证了网站的安全性，所以该系统还是十分具有可行性的。3.2 数据结构数据结构反映了数据之间的组合关系。在优美图网站中的数据结构如下3-1表所示。表 3-1 数据结构说明数据结构名含义说明组成用户信息用户的注册信息，以及权限用户编号、用户昵称、邮箱、用户密码、权限、头像路径图片信息用户上传的图片的基本信息图片编号、用户编号、图片标题、图片路径、上传时间、图片审核用户评论信息用户对图片的评论信息评论内容编号、图片编号、用户编号、评论内容3.3 相关(xinggun)表的设计（1）用户(yngh)信息(xnx)表：Users

6、以上用户信息表（Users）的表项分别为用户编号（id）、用户昵称（nichen）、邮箱（email）、用户密码（userpwd）、权限（role）、头像路径（userimage）。其中用户编号为主键，且是自增长类型。除了在用户登录时需查询此表中是否有该用户的存在，此外，后台管理中的用户管理，也能通过此表对用户进行管理。（2）图片信息表：images以上图片信息表（images）的表项分别为图片编号（imageid）、用户编号（userid）、图片标题（imagetitle）、图片路径（imageurl）、上传时间（uploadtime）、图片审核（checkimage），其中图片编号为主键，

7、且是自增长类型。用户在网站前台上传的图片信息将保存到这里，然后由管理员在后台的图片管理中，对图片进行审核管理，只有图片审核通过，才能显示到网站上。（3）用户评论(pngln)信息表：Comment以上用户评论信息表（Comment）的表项分别是评论内容编号（commid）、图片编号（imageid）、用户编号（userid）、评论内容（comment），其中评论内容编号为主键，且是自增长类型。用户可以(ky)在网站前台对自己感兴趣的图片等进行评论，与别人分享自己的感受等。操作方法和步骤(bzhu)（附图）4.1优美图网站前台注册界面4.1.1 注册界面新建一个aspx界面，并命名为enroll

8、（注册），将找到的html格式的注册界面的网页源代码，一部分一部分的复制到enroll界面的前台中，并在其中的html控件中加上：runat=”server”,修改成服务器控件。用户注册时，昵称、邮箱、密码是必填项，同时在前台编写了JQuery语句，当光标移开文本框时，会有对应的提示，提示不能为空，用户填写好其中一项内容，比如用户填写好邮箱后，当光标离开邮箱对应的文本框时，就会查询数据库，填写的内容数据库中的用户信息表Users，是否已经存在该邮箱，若没有，则提示用户“该邮箱可以注册”，否则则提示“该邮箱已经注册”，确保了网站用户信息的唯一性。注册界面运行时的布局如下图所示：部分(b fen)

9、代码示例：前台关于(guny)邮箱填写的JQuery代码(di m)如下所示： $(#TextBox2).blur(function () if ($(#TextBox2).val().trim() != ) var emails = document.getElementById(TextBox2).value; var reg = new RegExp(/w-+(.w-+)*w-+(.w-+)+$/); if (reg.test(emails) = false) $(#Labelemail).text(邮箱格式不正确); else $.post(enroll.aspx, email: $(

10、#TextBox2).val() , function (result) var pic2 = result.split(|)0; var word2 = result.split(|)1; $(#img2)0.src = pic2; $(#Labelemail).text(word2); ) else $(#Labelemail).text(邮箱不能为空！); )表示层UI关于邮箱查询代码如下所示：if (Request.Formemail != null) um.email = Request.Formemail.ToString(); bool canzhuce = ebll.check

11、Email(um); if (canzhuce = true) Response.Write(x.jpg|该邮箱(yuxing)已被注册); else Response.Write(y.jpg|该邮箱可以(ky)注册); Response.End(); 业务逻辑层BLL关于邮箱查询代码(di m)如下所示：public bool checkEmail(usersModel um) DataTable dt = edal.checkEmail(um); if (dt.Rows.Count = 1) return true; else return false; 数据层DAL关于邮箱查询代码如下所

12、示：public DataTable checkEmail(usersModel um) string sql = string.Format(select * from Users where email=0, um.email); DataTable dt = SqlHelper.helper.ExecuteQuery(sql); return dt; （下面的功能代码也如此用三层架构的思想编写，就不放代码了）4.1.2 登录界面新用户注册成功后，能直接跳转到登录界面。将在登录界面中输入的邮箱和密码在数据库中进行查询，查询到此记录时，用户能成功登录，同时通过Session方式将该用户的ID

13、和昵称，传到用户登录后的界面中，显示在Label上。4.1.3 密码找回界面如果是已经注册了的用户，但是又忘记了密码，不用放弃这个邮箱，我们有密码找回功能。单击“登录”按钮旁边的“忘记密码？”，进入到密码找回界面，输入你的邮箱的正确格式后，单击“找回密码！”，优美图网站将把你的密码发送到你邮箱。4.1.4 图片(tpin)上传界面用户登录成功后，首先进入的是图片上传界面。右侧显示根据用户登录时查询到的昵称，以及(yj)根据查询到的ID，查询并显示出对应的头像。单击“选择(xunz)文件”按钮，从选择自己喜爱的或感兴趣的图片，并编写相对应的标题，然后单击“图片上传”按钮，若选择是图片的图片符合格

14、式或大小要求，则显示上传成功。然后等到管理员在后台对图片进行审核通过后，就能显示到优美图网站上。4.1.5 优美(yumi)图网站首页图片(tpin)界面当单击网站(wn zhn)上的“图片”时，用户将进入网站首页，这里有海量的图片来供你浏览。在首页中我们放置的是Repeater控件绑定数据库，通过查询出数据库中已经审核通过的图片显示到网站上。4.1.6 图片详细情况界面随意单击某张图片，我们可以查看该图片的详细信息，以及该图片对应的评论。单击图片时，即获得图片的imageid，然后进入数据库，根据imageid在images表中查询出相对应的图片路径、图片标题 、上传时间；在Users表中查

15、询出用户昵称；在评论信息表中查询出相关的评论信息，并显示在下面。 4.2优美图网站(wn zhn)后台管理界面4.2.1 后台登录(dn l)界面新建一个(y )aspx界面，并命名为Login（登录），将找到的html格式的后台登录界面的网页源代码，一部分一部分的复制到Login界面的前台中，并在其中的html控件中加上：runat=”server”,修改成服务器控件。同时通过cookies记住用户登录密码，以便下次直接登录到后台首页。登录界面的布局如下图所示：4.2.2 登录(dn l)后首页Main界面(jimin)将在登录界面(jimin)中输入的用户名，通过Session方式传到Ma

16、in界面中，显示在Label上。同时通过编写script语句获取网页的当前时间，并显示到Label上。Main界面的布局如下图所示：4.2.3 后台用户管理界面在优美图后台用户管理界面中，主要也是使用了Repeater控件来显示数据库中已经注册了的用户的信息，同时在后台编写查询语句，绑定到Repeater控件中。管理员可以进行用户的权限修改、删除用户（当该用户上传的图片严重违法，且不服管理的时候）全选/批量删除等操作。后台用户管理的界面如下图所示：4.2.4 后台图片管理(gunl)界面在优美图后台(huti)图片管理(gunl)界面中，主要也是使用了Repeater控件显示数据库中的图片信息

17、。该管理界面主要的功能是对图片信息进行审核，是否符合网络图片发布的标准等。用户上传图片后，只有经过管理员审核通过，显示为合格后，该图片才能显示到网站首页。此外还能进行图片的添加，单击“添加”按钮后，能进入到图片添加界面，管理员添加图片信息，使得网站能保证最新图片资讯的实时更新，以此吸引更多用户的浏览。后台图片管理的界面如下图所示：4.2.5 后台图片添加界面在输入管理员的编号、图片标题，并选择要上传的图片，以及上传时间后，单击保存，若所有信息填写规范，该图片信息就将保存成功，直接回到图片管理界面，管理员添加的图片是直接显示为合格，不用另外审核的。图片添加界面如下图所示：4.2.6 新闻管理(g

18、unl)界面分页本次使用(shyng)的这个分页方法，与之前的高效分页不同，主要是用sql语言实现的，但是它也能显示出数据库中的记录数量，并规范了一个界面显示几条记录，还能显示当前在第几页，并实现了上下页的查看，以及页面的跳转。主要代码(di m)如下所示：表示层代码： public void showusersdata() DataTable dt = bloginbll.showusers(); lbDataCount.Text = dt.Rows.Count.ToString(); string row = lbPageSize.Text; string nowpage = lbNowP

19、age.Text; lbAllPage.Text = Math.Ceiling(Double.Parse(lbDataCount.Text) / Double.Parse(row).ToString(); DataTable dt1 = bloginbll.getPaging(Int32.Parse(row), Int32.Parse(nowpage); Repeater1.DataSource = dt1; Repeater1.DataBind(); 业务逻辑层代码： public DataTable getPaging(int row, int nowpage)/用户管理-分页 retur

20、n blogindal.getPaging(row, nowpage); 数据访问层代码：public DataTable getPaging(int row, int nowpage)/用户分页 string sql = string.Format(select top 0 * from Users where id not in (select top 1 id from Users), row, row * (now 1); DataTable dt = SqlHelper.helper.ExecuteQuery(sql); return dt; 4.2.7 新闻管理(gunl)界面隔行

21、( xn)变色在前台界面(jimin)利用addClass实现新闻数据的隔行变色，效果如下图所示：主要代码为： $(#NewsTable tr:odd:not(.TableHeader).addClass(oddRow); $(#NewsTable tr:even:not(.TableHeader).addClass(evenRow);4.2.8 新闻管理界面鼠标移动到行的颜色变化在前台界面利用hover实现鼠标移动到某一行就改变颜色，效果如下图所示：主要代码为： $(#NewsTable tr:not(.TableHeader).hover(function () $(this).addCl

22、ass(redRow); , function () $(this).removeClass(redRow); )4.2.9 退出系统点击页面顶部或菜单栏个人管理中的“退出系统”，确定后，能退出至登录界面。 五、难点(ndin)、问题(wnt)与解决(jiju)方法问题1：密码找回功能对于密码找回这个功能虽然之前在笔试练习中有做过，但是如果单靠自己编代码去实现它，还是没有这个能力。所以主要就是参考之前的答案，但是自己去看懂，理解它，争取掌握这个方法。问题2：前台网站中的首页绑定数据库在优美图的前台网站中的首页界面里，中间部分主要是图片，刚开始只想着通过放表格，然后用Repeater控件绑定数据库，但是这样却不能实现原网站同一列显示两张图片的效果。后来发现直接在div的基础上就能实现Repeater绑定。问题3：后台登录记住密码 本次后台登录界面中多了一个使用cookies记住密码，虽然老师说这些网上多有的，但是自己在编写时，还是出了点问题，不能实现像老师后来讲的效果。问题4：前台网站中的首页图片从数据库中读取失败进入首页后，昵称什么能读取出来，但是首页中要显示的图片却读取失败，后来查了又查，发现上传图片存到数据库中的路径写法，在读取的时候会出错，修改路径后，图片就能成功读取了。问题5：imageid不存在在这个问题上找了很久，怎么看怎么没错，后来找到原因是因