基于BS的校园网信息交流平台.doc

《基于BS的校园网信息交流平台.doc》由会员分享，可在线阅读，更多相关《基于BS的校园网信息交流平台.doc（32页珍藏版）》请在三一办公上搜索。

1、基于B/S的校园网信息交流平台的设计与实现摘要建立具有创新性，互动性，友好性的校园网信息网站，为同学们提供一个综合性的校园网交流平台，以方便同学们全方位了解校内各学院的新闻资讯，自主建立生活讨论圈子，共同参与话题的讨论，促进同学们互动交流的兴趣；同时，支持自由发布校内交易信息，可对交易信息发表评价或留言，采用记录IP来确保信息的有效性、文明性；另外，无限制人数的在线聊天室，可提供一个很好的在线交流平台。最终实现校园网内“信息共享、互动交流”的目的。关键词：信息共享；互动交流；JS+CSS+DIV；ASP+SQLThe design and implementation of Campus ne

2、t communication platform based on B/SABSTRACT stablish a Campus-Wide information Network with innovation, interaction and amity so as to provide an communication flat of comprehensive Campus-Wide information Network. this network is convenient to make students to know the news about all academies. s

3、tudents are self-moving to establish the circles of life discussion. join in together to discuss topics, promote the interesting for interactive communication among them; at the same time, it gives support to the free campus-wide trading messages .could publish comments and leave words to trading me

4、ssages. use registered ID to ensure the validity, civilization of messages; in addition, chat room on line without limit about member number, could offer a wonderful flat that use to communicate on line. achieving the goal of share information, interactive communication within Campus-Wide informatio

5、n Network finally.Key words: Information sharing；Interactive exchange；JS+CSS+DIV；ASP+SQL目 录1概述11.1项目背景11.2项目分析21.2.1校园网同类网站对比分析21.2.2项目可行性分析21.3研究的目的及意义22项目策划32.1站点规划32.2网站界面设计32.3网站亮点42.4设计目标52.5技术指标53网站架构及栏目说明63.1首页界面63.2栏目说明73.3网站架构94网站管理系统说明104.1新闻发布系统104.2分类管理系统134.3会员中心管理144.4信息管理系统154.5在线调查管理

6、系统164.6系统管理员设置165相关技术说明175.1JS滑动门技术175.2图片翻页效果175.3手机模拟上网说明185.4Sub语句应用185.5计算剩余时间195.6网站安全技术195.6.1MD5加密195.6.2验证码技术195.7获取客户端IP205.8CSS+DIV技术205.9SQL数据库连接215.10FLASH倒计时器215.11ASP+FLASH聊天系统226数据库说明236.1数据库表设计236.2数据库表关系236.3数据库ER图24结束语25参考文献26致谢271 概述1.1 项目背景从交互性看，WEB1.0是网站对用户为主；WEB2.0是以P2P为主。与Web1

7、.0最大的不同就是Web2.0所提倡的个性化，在其中，个人不是作为被动的客体而是作为一种主体参与到了互联网中，个人在作为互联网的使用者之外，还同时成为了互联网主动的传播者、作者和生产者。WEB2.0的任务是，将这些知识，通过每个用户的浏览求知的力量，协作工作，把知识有机的组织起来，在这个过程中继续将知识深化，并产生新的思想火花。如果说web1.0是以数据（信息）为核心，那web2.0是以人为核心，旨在为用户提供更人性化的服务，是一次从核心内容到外部应用的革命。“Web1.0到Web2.0的转变，具体的说，从模式上是单纯的读向写、共同建设发展；由被动地接收互联网信息向主动创造互联网信息迈进；从基

8、本构成单元上，是由网页向发表/记录的信息发展；从工具上，是由互联网浏览器向各类浏览器、RSS阅读器等内容发展；运行机制上，由Client Server向Web Services转变；作者由程序员等专业人士向全部普通用户发展” web2.0中用户可读写。在web1.0阶段，大多数用户只是信息的读者，而不是作者，一个普通的用户只能浏览新浪网的信息而不能进行编辑；在web2.0阶段人人都可以成为信息的提供者，每个人都可以在自己的BLOG上发表言论而无须经过审核，从而完成了从单纯阅读者到信息提供者角色的转变。 Web2.0实现人的互联。在web1.0中实质上是数据（信息）的互联，是以数据（信息）为中心

9、的；而web2.0中最终联接的是用户，如以用户为核心来组织内容的Blog就是个典型代表，每个人在网络上都可以是一个节点，Blog的互联本质上是人的互联，通过人的互联会形成一个一个的群体，即学习共同体。1.2 项目分析1.2.1 校园网同类网站对比分析目前，学校的新闻（包括学校及各二级学院的新闻）分布都比较分散，暂时没有一个校内新闻信息网将其很好的汇聚起来。这样，同学们在浏览学校相关新闻资讯时，只能登录到一个一个学院主页去看，这无疑要花费大量的时间，同时也使得浏览的信息面变小。同时，现在的大学生都比较喜欢一些互动性强的网站，比如发布一些校内交易信息、兼职招聘信息、或想组织一次活动、查找有共同爱好

10、的人或话题。虽然校园网有BBS这样的讨论平台，但显然也没有做到详细的分类，且其信息的真实性缺乏有效的监督。很显然，现在校园网还没有出现一个很好的信息共享、互动交流的平台。1.2.2 项目可行性分析现在很多的学校和社会其他部门都已经建立了网站，通过计算机网络实现宣传、交流及资源的整合。建立学校网站的意义：学校网站是实现教育资源分配的桥梁网络有巨大的教育资源库，它使每一位教师和学生都能均等的得到培训和受教育的机会。极大的提高教学效率。学校网站能提供教学互动的全新方式学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学校同处一室，共同讨论

11、，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。就这样，我们的目标是要建设一个用于面向校园网用户，达到信息共享、互动交流的平台WEB2.0网站，整合了学校各学院的新闻版块、校园生活讨论圈子、校内交易信息、会员控制板面中心、仿Q群在线聊天系统。1.3 研究的目的及意义校园网共享信息资源建设是院校进行现代化教学、科研和管理活动的重要基础，是校园网信息资源建设的主体内容。把握网络信息资源建设中的关键要点，采取必要的可行措施，以此加强校园网信息资源建设，特别是加强校园网共享信息资源建设，对于推进院校教育观念的转变、优化教学、改善教与学的环境，加快教育现代化步伐，培养更多的高素

12、质创新型人才有着十分重要的作用。2 项目策划2.1 站点规划建立具有创新性，互动性，友好性的校园网信息网站，为同学们提供一个综合性的校园网交流平台，以方便同学们全方位了解校内各学院的新闻资讯，自主建立生活讨论圈子，共同参与话题的讨论，促进同学们互动交流的兴趣；同时，支持自由发布校内交易信息，可对交易信息发表评价或留言，采用记录IP来确保信息的有效性、文明性；另外，无限制人数的在线聊天室，可提供一个很好的在线交流平台。最终实现校园网内“信息共享、互动交流”的目的。2.2 网站界面设计网站在设计风格上力求整体形象保持一致，在色彩搭配、图片动画的应用及版面规划上保持网页的整体一致性，符合大多数人的审

13、美习惯，给浏览者带来良好的视觉享受和精神愉悦感。在新技术的运用上充分考虑目标访问群体的年龄阶层、网络速度、阅读习惯。 网站UI（用户界面）设计不仅包括网站的平面设计，还包括整个网站的框架设计，让浏览者花最少的时间找到自己需要的东西，同时还要注重用户的使用习惯，保证资料的排列有序。网站色彩和Logo、Gif、Flash动画制作；图片制作；Banner横幅制作；Button按钮制作。根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配构成和谐美观的页面。2.3 网站亮点l IP地址自动获取 由于校园网用户每台PC机都有固定的IP地址，网站系统能够自动获取注册会员的IP地址，以监督其在发布交易

14、信息或进行圈内话题讨论时，语言的文明性和信息的安全性。l 栏目自定义设计 后台管理操作中，所有二级栏目都可以进行增加、修改及删除，如：新闻版块中，我要增加一个二级学院的名称，“计科”，然后可以在发布新闻时选择对应的二级学院名称发布该学院的新闻。此功能在圈子和交易系统管理中同样应用到，大大方便了网站的版块增删及管理。l 信息管理系统后台操作中，可以对圈子话题及其回复、交易信息及其回复进行管理，以确保信息的可操作性和安全性。同时增加了信息“推荐”功能，使有价值的信息方便快速地被浏览者所获取。l 验证码及MD5加密技术在生成验证码图片的时候，同时生成了一个Session，其值就是验证码图片中的数字值

15、。同时，提供输入框让用户输入，提交输入值后，与已有的Session值进行比较，根据判断结果做相应判断。MD5加密则应用于对密码的加密，不以明码在数据库中显视，确保会员及管理者密码的安全性。l JS滑动门技术以新闻这一块来说，由于考虑到学校目前有十四个二级学院，而又要将各学院的最新新闻分类地在网站首页中显视，以方便广大师生快速阅读浏览，如果按照传统的设计理念将会使得版面过于繁重，且和严重影响整个信息平台的排版布置，于是采用了当前比较流行的JS滑动门技术，这样很好地解决了这一问题。l ASP+FLASH聊天群系统 结合了传统聊天室的技术和当前新兴的QQ群聊设计理念，在线聊天系统采用无数据保留，为广

16、大师生提供在线即时交流的平台。尽管只有简单的输入发送等常规的聊天模式，不过已经可以满足在线聊天的目的。l “圈子”概念的应用 让有共同兴趣爱好、同一集体等人群，在网络虚拟的空间里，聚集在一起，组织成为一个校园生活圈子，共同讨论圈内的话题，达到互动交流的目的。注册会员可以创建新的圈子，或加入自己感兴趣的圈子，结识圈内朋友，讨论圈内的话题。2.4 设计目标页面实现技术目标/网站的设计原则1) 系统栏目易于增加、修改、删除和维护；2) 确保资源的安全，能够有效地防止资源外部流失；3) 确保相关数据在网上的应用速度；4） 系统具有充分灵活的扩展能力，以满足不断发展的需要：美工目标：1） 整体设计风格能

17、体现当代大学生的时代元素，以蓝色调为主线，各子栏目页面可根据不同功能的特点，并结合网站整体的设计理念；2） 色彩饱和、线条流畅和充分的空间留白；3） 对页面进行优化，保证浏览者能快速地查找到目标信息；4） 优化页面代码，极大减少页面的无效、沉余代码；5） 页面采用开放式结构设计，具有较大的可扩展性。2.5 技术指标l 采用校园网网内的数据库服务器、WEB服务器、应用程序服务器。l 采用浏览器/服务器（B/S）体系结构，使用方便；l 网页开发语言：ASP；数据库使用 SQL Server2000l 充分考虑网站功能、开发过程、系统运行效率、稳定性和安全性。l 分析在系统设计和实施过程中，对于应用

18、程序开发、网页设计、数据库设计、技术难点提供可行的解决办。l 适合在多种常用的软硬件平台环境中运行，并具备强大的技术升级能力。 l 具备全面严格的安全机制，确保网上商务活动的安全进行。3 网站架构及栏目说明3.1 首页界面在内容上，首页以图片及文字为主，主要以平面图和FLASH的形式来给网站浏览者以第一视觉冲击力，并且管理员在后台可以动态更新首页的内容，使整个网站时时充满生机和活力。在设计上，注重协调各区域的主次关系，以营造高易用性与视觉舒适性的人机交互界面为终极目标。充分体现网站首页的导航功能，对于网站的各部分内容展现又有侧重点。3.2 栏目说明面向校园网用户，达到信息共享、互动交流的平台，

19、整合了学校各学院的新闻版块、校园生活讨论圈子、校内交易信息、会员控制板面中心、仿Q群在线聊天系统。1、新闻各二级学院的新闻，由后台管理员从各学院主面新闻中转载，使之前较为分散的学校新闻能够汇集在一起，方便校内学生浏览。 功能：以新闻分类（以二级学院名称分类，如：计科）等一些常见的新闻发布系统的功能为主，后台支持在线增加、修改、删除新闻。同时，图片新闻以当今流行的动态图片FLASH演示为表现形式在网站首页展示，可以在后台更新，方便管理。2、圈子受当今流行的博客圈子文化的启发，让有共同爱好或不同班级专业的同学具有一个很好的交流平台，本网站特别建立一个校园生活讨论圈子，下设十多种分类属性：班级讨论、

20、社团协会、广师同乡、兼职就业、兴趣爱好、郊游活动、我型我秀、人在广师、原创文学等。举个例子：IT圈（爱好电脑的同学可以进来该圈子发表言论或看法）；04计本网本圈（本班的同学进来，用于班内交流，或班务通知、调查讨论等）；K歌之王圈（喜欢唱K的同学，周末可以一起组织去唱K）；NBA圈（喜欢篮球的同学，可以加入该圈子一起交谈）功能：圈子界面比较人性化，自定义LOGO、圈子描述、圈内会员、圈子讨论的话题及相册等，圈内成员能够发表话题贴子和相片，对应的管理操作由圈主管理。3、交易校内交易，出售、求购、转让、二手.学生/老师可以发布需求信息 举个例子：需要买卖二手电脑硬件、 转让演唱会门票、手机充值卡优惠

21、活动的都可以将信息发布在这一版块上。 功能：注册会员可以浏览、发布校内交易信息，信息可以自行设定有效期，会员具有参与评价及询问等权限，所有的信息发布及回复操作者，系统都会获取其IP地址，这样就可以保证信息的有效性，及追究其责任的证据。4、会员包含会员的控制面板，一个很完整的会员操作中心 功能：会员注册资料及密码修改，交易信息发布及管理，自己所建或加入的圈子管理。5、聊天界面仿QQ群，可在线即时聊天asp+flash。 功能：不限人数，只需输入名称就可以在线聊天，以最简单的群聊形式表现，聊天数据不被保存在数据库，减少数据库的容量压力。3.3 网站架构首页新 闻图片新闻二级学院新闻圈 子圈子信息讨

22、论圈页面交 易交易信息详细信息页会 员会员注册会员控制面板聊 天手机模拟上网网上投票调查本站公告会员信息信息评论话题讨论本站信息WAP导航站内信息搜索4 网站管理系统说明4.1 新闻发布系统 前台页面： 后台管理：u 图片新闻管理1、 发布网站首页图片新闻相关信息及上传图片；2、 后台管理操作支持修改及删除操作；3、 增加成功后，需管理员审核并发布后，图片新闻才能在网站首页显视，这增强了网站信息的安全性；4、 “撤消”则图片不在前台显视，图片需在审核通过后才能“发布”到前台。u 新闻管理1、 后台可以增加新闻信息：填写新闻标题、选择新闻所属学院及填写新闻内容；2、 支持新闻信息的修改及删除操作

23、，管理方便。采用eWebSoft开发的多功能信息编辑器：1、 可以对新闻文字内容进行常规的字体字号、段落对齐、复制粘贴等操作；2、 支持在新闻内容中插入图片、视频或FLASH，提供本地上传及网址引用方式；3、 可以在编辑器中插入表格、链接或表情等；4、 其它功能在此不再详细说明，详见编辑器中“？”帮助文件。 u 公告信息管理1、 后台可添加公告信息，选择是否在首页公告栏中，显视为红色标题；2、 支持对公告信息的删除操作。4.2 分类管理系统 前台页面： 后台操作界面：本网站的“新闻”、“圈子”、“交易”的子栏目全部采用方便的分类管理系统控制，大大提高了网站自主管理的快捷性。全部栏目实现可控性，

24、如：添加一个二级学院的新闻栏目，则在栏目管理界面的操作面板上，添加“计科”，则在新闻的编辑器的“新闻所属类别”上，系统自动加入“计科”。并且本系统支持对栏目的名称及排序进行修改和删除操作，管理方便。4.3 会员中心管理 会员注册：输入会员的注册用户名、密码，其中邮箱用于在会员忘记密码时，取回注册密码。 会员控制面板：1、 修改会员基本资料填写真实姓名或昵称，所在的学院和班级，QQ号码或手机等联系方式。2、 密码修改 用于修改会员登录密码。3、 建立图子 支持会员自主建立新的校园生活讨论圈子，输入圈子名称、所属分类、及圈子的简要介绍和圈子的LOGO图标，用于更好地进行交流。 举个例子：IT圈（爱

25、好电脑的同学可以进来该圈子发表言论或看法）；04计本网本圈（本班的同学进来，用于班内交流，或班务通知、调查讨论等）； NBA圈（喜欢篮球的同学，可以加入该圈子一起交谈）4、 圈子管理 会员可以查看自己所加入的圈子及其简要信息。5、 发布交易信息 填写交易信息的名称、选择是类别（出售、求购等），选择交易信息的有效期，输入交易的简要描述，如有需要，可上传相关图片。6、 管理交易信息 发布者可以对所发布的交易信息进行修改和删除信息操作。4.4 信息管理系统 交易信息管理 系统管理员可以在网站后台对网站会员所发布的校内交易信息进行信息推荐或无效信息的删除操作。 圈子话题管理系统管理员可以在网站后台对网

26、站会员所发布的圈子话题信息进行信息推荐或无效信息的删除操作。 信息回复管理网站注册会员在前台对校内交易信息和圈子话题进行回复，系统自动记录会员的IP地址，同时，网站管理员可在后台对回复内容进行管理。4.5 在线调查管理系统网站提供在线调查功能，管理员可在网站后台设置调查的主题，选项的内容，同时，后台可修改调查的得票数。4.6 系统管理员设置 增加网站管理员，并可修改管理员的密码及删除管理员帐号。5 相关技术说明5.1 JS滑动门技术考虑到网站的排版及栏目内容过多的问题，采用了目前最为流行的JS滑动门技术，很好地解决了这问题，用最小的板块展示更多的内容。关键代码如下：!-function g(o

27、)return document.getElementById(o);function HoverLi(n) /如果有N个标签,就将i=N;CSS中的滑动门技术 for(var i=1;i5.2 图片翻页效果本图片翻页效果的展示（图片新闻）也是目前较为流行的技术，我们知道，如果直接将上传的图片从服务器中调用，将加重浏览的缓冲时间，本翻页效果展示直接将图片转成二进制数值，图片直接从数据库中调用，大大加快了图片的调用速度。核心代码： imgUrl1=admin/picturenews/showimg0.asp?imgid=;imgtext1= ;imgLink1=escape(view.asp?i

28、d=);src=pixviewer.swfFlashVars=pics=+pics+&links=+links+&texts=+texts+&borderwidth=+focus_width+&borderheight= +focus_height+&textheight=+text_height+ menu=false bgcolor=#F0F0F0 quality=high width =+ focus_width + height=+ focus_height +5.3 手机模拟上网说明我们知道，用普通的IE浏览器是访问不了WAP网站的，但由于在浏览器上要实现访问WAP网站有极大的难度，

29、而且需要有专门的服务器作支持，所以本网站的手机模拟上网只是借用3G的服务器，并没有真正意义上实现手机模拟上网的功能，只是作为一个页面设计的创意版块。 5.4 Sub语句应用在相关页面调用CONFIG.ASP中的代码，使页面代码大大节省，加快页面的运行速动，真正的做到了SEO的优化处理：CONFIG.ASP中的“最新圈内话题”代码：5.5 计算剩余时间在网站会员发布校内交易信息时，我们将对交易信息有效期作出限制，如果信息过了有效期，将作相应的提示。其核心代码如下：i=pxrs(fbsj) 取出发布时间j=pxrs(yxq) 取出有效天数dqsj=dateadd(d,j,i) 得出到期时间m=da

30、tediff(n,now(),dqsj)t=int(m/60/24)h=int(m-t*24*60)/60)f=m-t*24*60-h*60if t0 thenstr=信息已经过期!elsestr=还有&t&天&h&小时&f&分结束!5.6 网站安全技术5.6.1 MD5加密本网站对会员及网站管理员的密码采用16位的MD5加密方法。（代码略）grs(pwd)=md5(replace(trim(request(pwd),)5.6.2 验证码技术在生成验证码图片的时候，同时生成了一个Session，其值就是验证码图片中的数字值。同时，提供输入框让用户输入，提交输入值后，与已有的Session值进行

31、比较，根据判断结果做相应判断。session控制。session控制与第1种的不同之处在于，对照码放在一个session变量里，提交时会将你输入的验证码与这个session变量或其函数值做比较，由于session变量是取不到的，所以破解的难度也大大增加。（代码略）5.7 获取客户端IP本网站中，校内交易信息和圈子话题讨论都涉及到信息文明性及安全性问题，由于校园网用户的IP为局域网内的固定IP，所以我们可以通过记录发言者的IP地址来约束其所发布的信息有效性和文明性，保留追究其责任的权利。Function Userip()Dim GetClientIP如果客户端用了代理服务器，则应该用Server

32、Variables(HTTP_X_FORWARDED_FOR)方法GetClientIP = Request.ServerVariables(HTTP_X_FORWARDED_FOR)If GetClientIP = or isnull(GetClientIP) or isempty(GetClientIP) Then如果客户端没用代理，应该用Request.ServerVariables(REMOTE_ADDR)方法GetClientIP = Request.ServerVariables(REMOTE_ADDR)end ifUserip = GetClientIPEnd function5

33、.8 CSS+DIV技术为使网站各页面的设计一致，在各页面中都调用了同一个CSS文件：（详细代码略） 在DIV的运用上，本网站也多处可以体现，最明显的就是网站LOGO的DIV层处理。关于DIV的详细说明在些省略。5.9 SQL数据库连接5.10 FLASH倒计时器 设定倒计时目标时间：function Timer() var _loc11 = new Date(2008, 5, 18, 9, 0, 0); 定义秒钟跳动状态及其坐标位置：var SSbar = attachMovie(timebar, SSbar, 15, color: 0, TotalVar: 60, _x: 5, _y: 8

34、2, per: 秒);5.11 ASP+FLASH聊天系统 登录窗口代码： on (release, keyPress ) if (user eq ) user = 访客;gotoAndStop(2); 聊天内容输入框，采用无数据记录处理，代码如下： on (release, keyPress ) loadVariables(chat.asp?action=send, , POST);msg = ;6 数据库说明6.1 数据库表设计6.2 数据库表关系6.3 数据库ER图n n m n m n n m n m n n m 会员发言聊天室回复管理员公告栏发布浏览学院新闻管理圈子交易ID姓名内容I

35、D密码验证码主题出处内容图片内容名称描述成员会员商品日期ID密码验证码主题 交易m m n 结束语课题所研究的是基于B/S的校园网信息交流平台的设计与实现，是一个具有网上信息交换系统基本框架的校园网系统。通过对本课题的研究、分析与设计，对设计网站的一般流程及对SQL数据库的认识有了相当程度的提高，不再局限于书本知识和相关资料。而在往后的学习工作中，随着认识的不断加深，本系统将得到进一步的完善。在将近两个月的设计时间里，我克服了重重障碍，并加之不断的推敲钻研，在这段日子里，我学到了很多东西，重新巩固了原来的知识，甚至学到了那些没有在大学课堂里学到的知识，为今后的工作和再学习指明了方向。能有现在这

36、样的成果，离不开老师和同学们的鼓励和帮助。参考文献1 小志编著ASP入门与实例演练薄：中国青年出版社 2 韩国峰，杨力学，王景春网络系统开发实例精粹(ASP版)：北京电子工业出版社，20063 龙马工作室ASP+SQL Server 组建动态网站实例精讲企业网站篇：北京人民邮电出版社，20054程秉辉解决网页设计一定会遇到的210个问题：北京希望电子出版社，20065李世杰Active Server Pages(ASP)3.0 网页设计手册：北京清华大学出版社，19996前沿电脑图像工作室巧学巧用Dreamweaver、Fireworks、Flash制作网页：北京：人民邮电出版社7 王健南AS

37、P数据库管理项目方案精解：北京航空工业出版社，20068于淼网页设计与制作：中国人民大学出版社，20069朱如龙SQL Server 2005数据库应用系统开发技术：机械工业出版社，200610韩国峰，柯华珅，王磊ASP网站开发典型模块与实例精讲：电子工业出版社，2006.811刘亚姝，许小荣，张玉梅ASP动态网站开发技术与实践： 电子工业出版社，2007.0412汤代禄，韩建俊ASP案例开发集锦：电子工业出版社，2005.8致谢衷心感谢老师在选题，实验方法设计和设计过程中给予的大力支持和无私教诲！在论文成文之际，衷心感谢学校及学院的领导，感谢江朝勇老师的指导和同组成员的合作。感谢一些同学在整个毕设过程中给予的热心的帮助和协作配合，使得本次毕业设计过程得以顺利完成！感谢四年来所有与我共同经历，共同进步，共同成长的可爱的同学们！