NET简单个人日志课程设计.docx

1、NET简单个人日志课程设计Web应用开发考核报告 课题名称：_个人日志 专业班级： 12软件1 学 号： 姓 名：_ 成 绩：_ 2015年6月一、课题名称 1二、课题需求分析 12.1功能需求分析： 12.2用户需求分析： 2三、课题的设计 33.1界面设计： 33.2 输入/输出设计： 33.3 功能模块设计 43.4 数据库设计： 4四、运行示例及结果分析 6五、测试、调试、运行程序过程中产生的问题及采取的措施 11六、总结 12七、参考文献 12一、课题名称 个人日志二、课题需求分析图1 功能概述图2.1功能需求分析：1、系统在游客或日志主人需要浏览时，将数据库中数据提取并显示到相应页

2、面2、系统在日志主人登录时，将输入的账号密码和数据库信息比较，并返回结果3、系统在日志主人添加日志时，将输入的新日志信息插入数据库，并返回结果4、系统在日志主人修改日志时，将要修改日志原信息从数据库中提取并显示到相应页面，将修改后的日志信息更新到数据库，并返回结果5、系统在日志主人删除日志时，将欲删除的日志从数据库删除，并返回结果2.2用户需求分析：本网站有两类用户，分别是游客和日志主人。1、游客可以直接浏览日志信息2、日志主人可以登录3、日志主人可以浏览日志信息4、日志主人可以添加新日志5、日志主人可以修改某条日志6、日志主人可以删除某条日志三、课题的设计3.1界面设计： 系统共有七个界面，

3、分别是登录界面，游客浏览日志界面，日志主人主界面，日志主人浏览日志界面，日志主人添加新日志界面，日志主人操作日志界面，日志主人进行修改界面。1、登录界面：在此界面使用者可以选择使用日志方式。游客不需输账号密码可直接浏览；日志主人需要输入账号密码才能使用。2、游客浏览日志界面：在此界面游客可以浏览日志，可以回到登录界面。3、日志主人主界面：在此界面日志主人可以选择浏览日志，可以选择添加新日志，可以选择操作日志，可以回到登录界面。4、日志主人浏览日志界面：在此界面日志主人可以浏览日志，可以回到主界面。5、日志主人添加新日志界面：在此界面日志主人可以输入新日志信息并添加，也可以选择放弃添加，回到主界

4、面。6、日志主人操作日志界面：在此界面日志主人可以选择修改或删除某一条日志，可以回到主界面。当选择删除某一条日志时，会直接删除；当选择修改某一条日志时，会跳转到修改界面。7、日志主人进行修改界面在此界面日志主人可以查看到所选的要修改的那条日志原信息。并且可以输入新的信息并修改；也可以选择放弃修改，回到主界面。3.2 输入/输出设计：1、在登录界面，选择日志主人登录时需要输入账号密码。2、在游客浏览日志界面，系统需要输出所有日志信息。3、在日志主人浏览日志界面，系统需要输出所有日志信息。4、在日志主人添加新日志界面，日志主人需要输入新日志的信息。5、在日志主人操作日志界面，系统需要输出所有日志信

5、息以及操作选择。6、在日志主人进行修改界面，日志主人需要输入新的日志信息。3.3 功能模块设计1、在登录模块，若使用者选择日志主人登录时，系统将其输入的账号密码和数据库提取的信息比较，判断是否可以登录，若可以，则跳转到日志主人主界面，否则，提示失败；若使用者选择游客登录，则直接跳转到游客浏览日志界面。2、在游客浏览日志模块，系统会输出所有日志信息到界面，也提供了退出选项。3、在日志主人主界面模块，系统会提供四个选项，分别是添加新日志，浏览日志，操作日志，退出。4、在日志主人浏览日志模块，系统会输出所有日志信息到界面，也提供了退出选项。5、在日志主人添加新日志模块，系统会接收新日志信息并插入到数

6、据库；也提供了放弃添加选项。6、在日志主人操作日志模块，系统会输出所有日志信息以及操作选择。当选择删除某一条日志时，系统会直接删除相应数据库信息；当选择修改某一条日志时，系统会跳转到修改界面，并将要修改信息唯一标识传递过去；也提供了退回主界面选项。7、在日志主人进行修改模块，系统会打印出要修改那条日志原信息；系统可以接收日志主人输入的新的信息，并更新到数据库中；也提供了放弃修改并退回主界面选项。3.4 数据库设计：有名为JavaScript的数据库，其中共有两张表：表1 用户信息表字段名数据类型说明usernameVarchar(15)账号passwordint密码 1、在日志主人登录时需要查

7、询此表，进行登录判断。表2 日志信息表字段名数据类型说明idint主码titleVarchar(50)标题timeVarchar(50)时间skyVarchar(50)天气mindVarchar(50)心情detailVarchar(50)细节totalVarchar(50)总结 1、在游客和日志主人浏览日志，操作日志界面以及修改界面显示原日志信息时，需要查询此表。 2、在日志主人添加新日志时，需要插入到此表。 3、在日志主人修改日志时，需要更新到此表。 4、在日志主人删除日志时，需要删除此表中信息。四、运行示例及结果分析图2 游客登录图游客可以不输账号密码直接浏览。图3 游客浏览日志图游客可

8、以浏览所有日志，可以选择返回登录界面。图4 日志主人登录图 选择日志主人登录，账号密码输入框会变亮并且可用，当输入不完整时会提示XX不能为空，当账号密码错误时会提示有错误，当正确时会提示输入正确。图5 主界面图 在此界面日志主人可以选择相应功能。图6 主人浏览日志图 日志主人浏览日志。图7 主人添加新日志图 这里日志主人可以添加新日志，为空时会提示XX不能为空，成功是会提示成功。图8 主人操作日志图 这是在添加测试用日志后情况，可以看到多了一条日志。每一条日志后都有相应的修改以及删除操作选项。图9 主人修改日志图 当选择了修改某一条日志时，在修改页面，会在左侧显示此条日志原本的信息，让后日志主

9、人可以在右侧输入新信息，若是输入不完整，会提示XX为空，若是修改成功，也会提示。图10 主人修改日志后图 修改了测试条目后，可以看到测试条目相应信息变更了。图11 主人删除日志后图 当删除测试条目后，可以看到测试那条日志消失。五、测试、调试、运行程序过程中产生的问题及采取的措施本次大作业我选择的题目是个人日志，在完成这个大作业中遇到了很多问题。在浏览界面，因为一进去就要实现数据库信息动态打印，所以应该在显示界面的cs页的Page_Load方法中连接数据库并查询所有信息，但是不知道如何显示到前台，查了一些资料后，先是试了数据绑定，但发现在操作界面也要显示信息，而且更进一步要在每条日志后打印操作选

10、项，就最后查到并使用了从后台直接打印HTML语句的方法，巧妙地用while和HTML语句打印以及变量打印组合的方法，可以在前台拥有一个div，之中有一个表格，表格中时所有信息。在要使用数据库操作的添加，修改以及删除时，本来想直接在javascript中调用后台方法进行操作，但是在调用方法时传递多值报找不到变量的错，后来就换用ajax传值，一般处理程序进行数据库操作的模式。在添加界面，使用ajax向处理添加的一般处理程序传值，在一般处理程序中进行数据库添加，失败了，然后从上往下测试，将ajax的success后欲打印语句放到上方，打印接收到的变量成功，那就是下面数据库有问题，之后发现是字符串拼接

11、写错了。在操作界面，在Page_Load方法中直接用打印HTML语句的方法打印相应修改和删除的超链接，直接在超链接传值时失败。后来在前台使用超链接的点击事件，在javascript中用jquery获取被点击超链接的父亲即本条li的第一个td即id号，然后用ajax向相应一般处理程序传值。在一个页面出现两个或三个div时，div会乱跑，样式一时间无法调整，后来配合使用float才解决。另外，关于页面跳转，也试了5到6种不同方法，终于可以了。六、总结针对本次大作业，在提交课题之后，我发现关于页面布局和样式调整之类的，基本不用担心，因为本门课程是JavaScript和jQuery，主要是关于样式和动

12、态页面的，基本的操作使用在课上都已经跟着老师做过，就算是有些遗忘，也可以找出课上所做的程序复习一下，可以参考着仿照着使用。但是正因为本门课主要讲JavaScript和jQuery，就算是讲解的平台是网站，但也只是讲了一个用ajax向一般处理程序传值并插入的例子，并未涉及到更多数据库操作，这就需要我们自己解决。另外还要解决后台取出数据后如何显示到前台的问题，页面如何跳转以及后台操作成功后如何反馈到前台之类的问题，都要自己查资料解决。在这里，十分感谢二班一个同学，将如何使用动软并讲解了在一般处理程序中进行数据库的查询以及插入录制了视频，让我可以摸索着完成关于数据库的增删查改的操作。关于其它一些问题

13、的解决，这里也说明一下。关于后台取出数据后如何显示到前台的问题，先是尝试数据绑定，但发现不是很符合课题HTML+DIV+CSS+JavaScript+Ajax+JQuery+EasyUI的要求，就又在网上查询，采用了在后台使用Response.Write()直接打印HTML语句的方法。关于页面如何跳转的问题，本来是准备在数据库操作成功后直接在后台跳转，但是没反应，退而其次选择在前台跳转，网上查询了好几种方法一一尝试，可以直接跳转了，但是在跳转前还要接收到后台数据库操作成功的消息，这就要解决后台操作成功后如何反馈到前台的问题，仔细研究了一下ajax，发现其中就有传值成功接收后台消息的部分，这样就

14、可以用context.Response.Write()输出数据库操作成功的标识位解决。当然，本次大作业也有很多不足，最大的问题是不会使用内置对象session的问题。本来准备在主页中根据登陆后设置的session的不同，来使用JavaScript和jQuery控制有选择地显示功能，但对于session的使用失败了，为了区分不同用户的可使用功能，只能在最前面加一个登录界面。还有，关于显示界面的图片自动切换，最后一张图片不知为何无法显示，网上也查不到，这个没有解决。另外，我实在不知道怎么用EasyUI。对于本次大作业，虽然勉强完成了，但还是有一些遗憾，这些遗憾主要是因为实现手段的匮乏所造成的。希望以后能学会更多的东西，想如何实现就如何实现，能精简页面达到相同甚至更好的结果。七、参考文献 1 曾顺著.精通JavaScript+jQueryM.人民邮电出版社，2014