基于NodeJS的开发者交流社区

摘要本论文旨在解决现有的技术交流社区网站的不完善问题，以现有的各类社区作为主要研究对象。基于主流的开发语言和工具，包括React、Antd、NodeJS、MongoDB等框架和数据库，设计并实现一款运行于PC端浏览器上的技术交流社区，给程序员等其他技术人员提供一个全面的交流平台。本系统基于MVVM设计模式，在前后端架构上选取流行的模式（分离前后台），选用React作为前台的主要技术栈，而后端则选用Node.js，数据库则选取非关系型数据库MongoDB，各类编程语言结合VSCode编辑器使得本系统具有较高的实用性、拓展性。系统主要功能包含发表技术文章、发表沸点动态、在线加好友、在线聊天等。关键词：React；NodeJS；MongoDB；SPA；技术社区；开发者AbstractThisthesisaimstosolvetheimperfectproblemoftheexistingtechnicalcommunicationcommunitywebsite,andtakesvariousexistingcommunitiesasthemainresearchobject.Thetechnologyusedisbasedonmainstreamdevelopmentlanguagesandtools,includingReact,Antd,NodeJS,MongoDBandotherframeworks.Anddatabase,designandimplementaPC-basedbrowsertechnologycommunicationcommunity，provideprogrammersandothertechnicalpersonnelwithacomprehensivecommunicationplatform.MVVMisthecornerstoneofthissystem,usingacompletelyseparatefrontandbackendform,thefrontendusesFiberReactisanarchitecture.ThebackendusesNodeJStobuildasingleapplication.Thedatabaseusesanon-relationaldatabaseMongoDB.Variousprogramminglanguages​​combinedwiththeVSCodeeditormakethissystemhighlypracticalandscalable.Themainfunctionsofthesystemincludepublishingtechnicalarticles,publishingboilingpointdynamics,addingfriendsonline,onlinechat,etc.Keywords：React;NodeJS;MongoDB;SPA;Technologycommunity;Developer

目录第一章绪论 第一章绪论1.1研究背景目的和意义近几年，互联网产业飞速磅礴发展，计算机作为互联网的主要载体，发挥了重要的作用，正因为如此，计算机软件开发行业也快速崛起，从而催生出了软件开发工程师这个职业，并且程序员数量日益增多，众所周知，知识是没有国界的，那么众多的程序员如何互相交流，分享知识呢?博客（Blog），以用户联系为基础，用户可以在其上发布各种内容，包括但不限于随笔、感想、技术交流等，它是一个网络平台，用户可以在该平台上建立自己的圈子和社区，借此来分享信息。博客（Blog）是网络发展的潮流下催生的优秀产物，它的分享性强，快速传播，有效地将“你”、“我”、“他”三者结合。特别是对于软件开发人员来说，需要一个能将自己的想法、开发经验、开发心得分享给其他开发者、能汲取到其他开发者的知识的平台。博客类似于一个社交网络，每一个用户不仅仅只是一个观众（Visitor），观阅自己有兴趣的信息，同时也是一个分享者（Sharer），将自己的知识分享给他人。用一句话来概括：“人皆可听，人皆可言，人皆可写”[1]。但是，对于开发者这一专业的群体来说，仅仅依靠博客来单纯地发表文章、评论是远远不够的。进而，需要一个功能更为完善的平台，姑且称它为——社区。目前，市面上已经有很多技术交流社区，诸如CSDN、掘金、思否、开发者头条等……以上这些都是比较知名的平台。它们都在博客的基础上，添加了发表动态、发表想法等功能，这让众多开发者可以在闲暇时间去舒缓自己的心情。诸如掘金、思否、CSDN等社区，基本功能是很完善的，但是仍然存在一些欠缺的点，比如缺少私信功能。因为开发者对于代码、各类文件、图片的需求是很大的，仅仅依靠文章评论作为运输载体肯定是不够的，所以需要“私信”。什么是私信?简单来说就是在线聊天，两个开发者可以在交流平台上进行远程的在线聊天，利用本系统在线聊天室提供的发送文件、发送代码、发送图片等辅助型功能进行更深层级的交流。以下为本系统的主要特点：高交流性：在保持博客的基本功能前提下，增加的在线聊天室，使得开发者可以通过实时添加、删除好友，来进行高质量、随时随地的在线聊天。高性能：采用Redis作为缓存数据库，解决点赞、统计在线情况的需求。1.2论文总体结构本系统前端采用React，后端采用NodeJS，数据存储则选用MongoDB。React作为前端三大框架之一，以其“组件化”的思想收获了一大批开发者；NodeJS则是一个后起之秀；MongoDB作为一个非关系型数据库，其优质的特性可以与NodeJS完美融合；Redis作为数据缓存数据库，有效的解决点赞时产生的性能问题。以下为本论文的大致框架：第一章：论文绪论，简要概述本论文的研究背景、研究目的、技术架构等。第二章：介绍本系统采用的各种技术栈，包括前端、后端、数据库，以及各技术的特点。第三章：需求分析模块，以功能导向为基础，提前规划整个系统，包括需求是否可行，需求是否合理等。第四章：系统设计板块，着重对整个系统的数据库加以设计，包括字段可行性、字段拓展性等。第五章：系统实现和测试，利用编程技术，结合需求分析的结果，对系统加以实现和完善；并最终进行自测，对于明显的BUG加以解决。第六章：论文总结部分，也是整篇论文的收尾工作，包括系统的结构优化、功能优化、代码优化，以及对于整篇论文的总结和展望。

第二章系统有关技术2.1ReactJSReact.js是一个帮助前端开发者构建页面UI的库，与Vue、Angular同属前端的优秀框架之一。React会在数据流发生变化的情况下，利用内部的调和、调度机制更新组件（声明式）；声明式使得React代码更加健壮，利于开发者们去调试糅合，并且可维护性大大提高；此外，React将界面分成了独立的小块，每一块就是一个组件，这些组件之间可以相互嵌套、组合，借此可以轻松地在应用中传递数据，并使得状态与DOM分离，这就是组件化[4]。本系统前端采用React，后端采用NodeJS，数据存储则选用MongoDB。React作为前端三大框架之一，以其“组件化”的思想收获了一大批开发者，React的声明式特性，使得创建交互式的UI视图变得轻而易举，配合redux，当数据改变时能有效地更新并且正确渲染组件，通过声明式编写的UI，可以让代码更加可靠，方便调试，并且可维护性大大提高[3]。本系统采用目前主流的前后端分离的开发模式，利用SPA架构，结合较为前沿的主流编程技术栈进行开发。前后端分离模式利用其可维护性强、用户体验友好等特点，解决传统的不分离模式下存在的前后端开发人员工作不合理、代码健壮性差的问题；SPA架构则是近几年较为流行的，中文又称“单页应用”，随着用户体验标准的提高，传统的多页应用（MPA）已经无法满足用户的审美，SPA架构下，B/S类型的网站可以在不刷新页面的情况下获取后端数据，所有的路由由前端统一管理，据此可以实现各种过度动画效果，提升用户体验[2]。2.2NodeJSNode.js是一个基于ChromeV8引擎的JavaScript运行时[5]。他的目标是帮助开发者构建可伸缩且高度化的应用程序，编写能够处理上万条同时连接在一个物理机的高并发代码[6]。Node.js有很多内置的模块，比如文件（fs）、网络（http）、process（进程）等，使得开发者可以对计算机底层进行更深层次的操作；并且它的语法是以JavaScript为基础的，使得前端开发者可以快速上手；Node.js是以事件做为驱动的，这使得开发者可在不借助线程的情况下开发出一个高并发的服务器，相较于其它编程语言来说，Node.js在高并发下的性能是极好的。Node.js提出了模块化的概念，每个文件都属于一个模块，各个模块之间互不影响，这解决了遗留很久的变量重复等问题；其通过npm来进行包管理，开发者只需执行相应的命令，便可在npm包市场下载所需要的工具包。2.3SPA架构传统的B/S（Broswer/Server，浏览器/服务器）模式下的web开发存在很多问题，比如前后端工作冗杂，分工不明确，所有的工作几乎由后端独自完成，并且产出的代码无法复用，重构困难[2]。这种情况下，多页应用（MPA，multiplepagewebapplication）极为流行。但是，随着互联网的不断发展，用户对于视觉和感官体验的要求越来越高，多页应用由于要频繁的刷新整个页面，用户体验极为不好，所以应允的出现了SPA，它提倡单个html文件，也就是说所有的模块都在同一个html文件里面来展现，浏览器在首次渲染时加载所需的HTML、CSS、JavaScript资源，所有的操作都在该html中进行。单页应用具有以下特点：速度快：可以在不刷新页面的情况下发送并接收后端数据，并且可以按需请求数据，避免页面刷新之后再次请求造成的性能问题。用户体验友好：前端开发者可以控制路由，来实现各种过渡动画效果。路由：路由由前端统一控制,并且在锚点跳转之后，不会重新刷新页面。业务逻辑：偏向前端，前端利用AJAX获取数据，并负责渲染到页面。2.4模块化在Node.js时期，涌现出了“模块化”这个词汇，每个JavaScript文件都属于一个小模块，里面包含了自己的变量、自己的方法，各个模块之间互不影响，只需要将该模块想分享给其它模块的变量或者方法暴露出去就可，这解决了遗留很久的变量重复等问题；此外，一个个小的模块，通过组合的方式，可以形成npm包，npm理所当然的成为了Node.js最受喜爱的包管理，开发者只需执行相应的命令，便可在npm包市场下载所需要的工具包。现在Web3.0时代已经到来，Web2.0也早已渗透到互联网各处，前端的整个生态链深受Node.js影响，目前前端各种构建工具都基于Node.js，随着前端代码结构上的不断增大、可维护性要求越来越高，模块化会变得愈发重要。2.5MongoDBMongoDB是非关系型数据库的一种，存储的数据格式是JSON形式的，易学易用，对于本系统是非常合适的。MongoDB广泛应用于不同规模的公司和多个行业，它的数据模式不是一尘不变的，也就是说，当你的应用迭代时，它也可以很灵敏的升级更新，另外，像MySql提供的多级索引，n表查询等功能，MongoDB也有提供，由此可见，它非常适合项目周期短，快速上手的项目。同时，MongoDB具有较强的可拓展性、高性能等特点，可以部署多服务器集群，并完美解决多服务器互相依赖的情况下，机器故障的问题；再者，得益于内存计算，MongoDB可以进行高性能的数据读取与写入[7]。2.6Webpack随着大前端的兴起，以及Web、H5等应用的体积不断增大，开发难度大大提高，说明前端已经不可或缺。从复杂庞大的管理后台，到对性能要求苛刻的移动网页，再到类似于ReactNative的原生应用开发方案，通过直接编写JavaScript、CSS、HTML开发Web应用的方式已经无法应对当前Web应用的发展[8]。Webpack作为一款优秀的打包工具，可以将JavaScript、CSS代码以及各种图片，打包在一起，可以在浏览器中使用。并且，由于SPA模式的盛行，网站的功能和源代码变得愈发复杂、庞大，进而Web开发向模块化演进。同时，Webpack可以在众多的打包工具中脱颖而出，成为构建工具的首选，原因如下：一体化：Webpack将一系列能做的工作，包括打包、压缩、性能优化，统统处理了，留给开发者的只剩下专心的处理业务逻辑。生态圈：Webpack具有强大的生态圈和维护团队，以及众多的使用者，可以提供良好的保障能力。健壮性：Webpack被大量团队所使用，容错性和BUG大幅度减少，可以很轻松的于互联网上找到教程和开发经验。2.7AntDesign原始的网站开发，只需编写简单的CSS样式，但是随着Web3.0时代的到来，以及Web2.0时代的大量普及，为了保持良好的重构性，以提供最好的性能，有时多个模块，或者多个项目都需要使用同一块样式，这时候传统的方式，就会变得难以复用，捉襟见肘了。所以，为了更有效、更快速地编写健壮地CSS样式代码，就需要将样式和脚本封装起来，使用的时候直接调用其提供的接口即可，这就是UI框架。AntDesign是一款优秀的UI框架，可以与React.js完美搭配，开发出美观实用的站点，随着商业化的趋势，愈来愈多的企业级产品对更好的用户体验要求有了现象级的提升，AntDesign以自然性、确定性、意义感、生长性为基础，提供给开发者一套完美的CSS模块化解决方案，让开发者专注于更好的用户体验。2.8RedisRedis是一个以键值对作存储的缓存数据库，提供了多种数据结构，比如字符串、集合、散列等，使得开发者可以选用合适的形式进行存储。Redis基于内存，这就使得它可以进行更快速的读写操作，据此可以实现点赞等较为频繁的数据库读写操作。同时，Redis基于它优秀的拓展性以及强大的并发性，可以存储大批量的数据，并且在高并发的情景下，也能高质量的读写，这一点，相对于MySql等其它数据库来说，可以说是最大的优势所在，因此，对于开发社区这种中小站点来说，是极为合适的。第三章系统分析3.1系统市场可行性分析目前已存在的众多技术交流社区，诸如掘金、思否等并没有为众多开发者提供一个功能完善、体验优良的在线聊天系统，当开发者需要私聊或者分享资料时，就不得不去添加其它好友，是极为不便利的。因此，本系统有必要站出来，通过内置的聊天室模块，抓准市面上众多的技术社区共同的痛点，有针对性地提出一整套地解决方案。本站点实现可持续运行地道路就是与其它平台进行积极的沟通和合作，据此为众多开发者提供一个优质地交流社区，提升用户体验。3.2系统可操作性分析 本系统基于传统的B/S（Browser/Server，浏览器端/服务端）架构，旨在为广大开发者提供一个优质的社区平台，系统整体操作简洁明了，与已存在的各类平台类似。本系统设计的原则就是不仅要功能实用，更要操作方便，也要界面优美，吸引用户，本系统采用“绿色”作为主色调，绿色象征和平宁静，意义在于让开发者可以在社区内得到更大的技术提升，以及得到充分的身心放松。3.3系统MVVM架构设计分析3.3.1传统MVC架构实现视图层（View）业务逻辑层（Controller）数据层（Model）视图层（View）业务逻辑层（Controller）数据层（Model）数据库图3-1MVC3.3.2增强型MVVM结构实现本系统采用增强型MVVM架构，如图3-2所示：图3-2MVVM架构MVVM模式相较于传统的MVC模式，消除了Controller之间的耦合性；可测试性；可移植性，由VM层则替代了传统的Controller层。View代表视图层，也就是DOM树，ViewModel代表前端的数据流管理，比如Redux，Model就是数据库层。View层的所有改变只能由ViewModel层来直接控制。3.3.3MVVM架构处理业务逻辑MVVM将业务逻辑统一放置于VM层中管理，每个系统根据功能进行区分，每个功能点又拆分为独立的子系统，各个系统互相协同，配合完成整套的业务流程，前端部分如图3-3所示：登录注册模块逻辑登录注册模块逻辑文章管理模块逻辑动态管理模块逻辑VM（ViewModel）聊天系统逻辑好友系统逻辑足迹系统逻辑图3-3MVVM架构处理业务逻辑图3-4为整套的业务流程：把一个整体的系统拆分为多个子模块，以功能作为划分的的主要依据，各子模块之间互相不干扰，各自处理逻辑功能：登录注册模块登录注册模块文章管理模块动态模块聊天模块ViewModel业务逻辑层Redis缓存数据库MongoDB数据库后端用户路由后端文章路由后端动态&足迹路由后端聊天路由图3-4整体业务流程3.4系统主要功能需求分析登陆注册功能：登录之后的权限认证，采用目前流行的JWT（jsonwebtoken）技术，jwt验证可以有效的解决传统的Cookie认证存在的可拓展性差、XSRF（跨站请求伪造）的问题。Token和Cookie尽不相同，服务端不用保存用户的登录信息，而是在每次HTTP请求的Header部分添加Authorization字段即可，并且Token还支持携带其它有用的数据。在线人数统计功能：为了更好的统计网站流量，需要对网站在线访客加以统计，由于传统的HTTP协议无法实时收发数据，属于半双工通信，故采用Websocket，用户登录本系统之后，系统自动websocket请求，后端将当前用户的ID保存至Redis缓存中。Websocket基于HTTP，是全双工通信的，也就是说，客户端和服务端分别可以接收和主动发送数据。后端采用Redis存储用户的在线状态，因为在线状态是随时变化的，此时为了服务端的性能，减少数据库的读写操作，故采用Redis。加好友功能：用户A可以在网站内添加用户B为好友，进行更近一步的私聊。用户B可以实时的接收到用户A发出的加好友请求，不需要重载页面，如何实时的接收数据呢?就需要Websocket，基于Webscoket的全双工通信机制，服务端在接收到用户A发出的加好友请求之后，可以主动的推送该消息给用户B，无需用户B主动请求。具体的流程如图3-5所示：单聊功能：如果用户A和用户B互为好友，那么在双方的好友列表中对方都是存在的。本系统采用自定义的ID作为每个单聊的唯一标识，该ID通过组合用户A和用户B的userId来实现。加好友加好友44444好友请求图STYLEREF3\s0SEQ图\*ARABIC\s31图STYLEREF3\s0SEQ图\*ARABIC\s32用户A用户B互为好友同意ss拒绝图3-5好友申请流程3.5系统流程设计由于本系统采用前后端完全分离的开发模式，所以将主要的逻辑都交予前端处理，后端部分只需要负责数据存储和读取。前端界面采用组件化的React和高度可定制的UI框架AntDesign，旨在为用户呈现出精美的网站；前端脚本采用TypeScript，TypeScript（TS）是JavaScript（JS）的超集，它可以在众多的平台上运行，TypeScript提供了一系列强大的类型声明，比如接口（Interface）、类（Class）、命名空间（Namespace）、泛型等，TypeScript始于JavaScript，归于JavaScript，并且具有强大的工具用来构建大型应用程序。本系统采用Axios作为HTTP请求的工具，用来与后端进行数据交互，Axios是一款非常优秀的Ajax请求框架，它基于Promise，可以同时在前端和后端使用，它提供了一套拦截方案，可以针对符合特定要求的HTTP请求和HTTP响应，进行拦截处理，并且在数据过滤方面，还可自行将文本转换为JSON格式的数据，非常适合本项目。本系统的总体流程，如图3-6所示：用户社区首页注册成功注册功能用户社区首页注册成功注册功能登录功能登录成功功能模块沸点个人中心话题聊天室写文章文章详情图3-6系统大体流程第四章系统设计4.1系统体系结构设计浏览器（Browser）服务端（Server）数据存储（Database）系统的主要面向用户群体，用户通过系统提供的UI界面，进行发表文章、聊天等各种操作浏览器（Browser）服务端（Server）数据存储（Database）系统的主要面向用户群体，用户通过系统提供的UI界面，进行发表文章、聊天等各种操作，通过Ajax将数据发送给后端处理浏览器发送的HTTP请求，对数据库进行增删改查后，将数据返回给浏览器持久化保存用户数据，其中包括缓存数据库和持久化数据库两个部分图4-1系统构思图B/S（浏览器/服务器，Browser/Server）架构，相对于C/S（客户端/服务器，Client/Server）架构，有几个比较突出的优点：B/S架构下，用户只需操作浏览器，极大的降低了使用门槛，开发者不需要关注用户操作系统的差异性，因此开发者在开发过程中把所有精力投入到业务逻辑的开发而不是项目的最终部署。B/S架构下，可以在一定程度减少客户端上的资源消耗和投入，对于用户来说，他们更倾向于一个节省资源的访问方式，而不是大费周章的下载客户端安装包。B/S架构下，大大的节省了开发人员的开发周期，并且后续的可维护性也比C/S架构下的系统高。4.2系统数据关系设计（1）文章实体，如图4-2所示：文章信息已阅用户文章标题创建时间文章模式文章类型文章信息已阅用户文章标题创建时间文章模式文章类型文章ID文章评论更新时间文章描述文章内容沸点ID图片内容沸点评论创建时间文本内容话题ID沸点项（沸点ID图片内容沸点评论创建时间文本内容话题ID沸点项图4-3沸点项实体图话题ID沸点列表关注用户发表用户话题描述创建时间话题名称话题项话题ID沸点列表关注用户发表用户话题描述创建时间话题名称话题项图4-4话题项实体图（4）足迹实体，如图4-5所示：关注用户关注用户关注话题发表文章收藏文章点赞沸点发表沸点点赞文章足迹图4-5足迹实体图评论ID评论人ID图片内容文章ID文本内容回复列表评论ID评论人ID图片内容文章ID文本内容回复列表创建时间文章评论图4-6文章评论实体图单聊标识ID最后会话更新时间创建时间最后会话时间消息总数消息列表接收方发起方单聊标识ID最后会话更新时间创建时间最后会话时间消息总数消息列表接收方发起方单聊图4-7单聊实体图消息ID更新时间单聊ID未读消息创建时间消息内容消息类型接收方消息ID更新时间单聊ID未读消息创建时间消息内容消息类型接收方发送方单聊图4-8单聊消息实体图4.3系统数据表设计开发者交流社区系统为了保证多个子模块的可行性以及彼此之间的互相协同配合，就需要基于实体的属性关系，制定相对完善的数据库表，如下多表为其中的几个数据表展示：（1）用户数据表，如表4-1所示。表4-1用户表名称类型空默认值其他备注_idString否auto_increment标识IDusernameString否空用户名userpwdString否空密码，加密usergenderString否空性别useravatarString是‘’头像create_timeNumber是Date.now()注册时间update_timeNumber是Date.now()更新时间articlesArray是[]文章列表attentionObject是[]关注followersArray是[]关注者列表friendsArray是[]好友列表chat_memoryArray是[]聊天历史列表notificationsArray是[]通知列表activitiesArray是[]动态列表tracksArray是[]足迹列表pinsArray是[]沸点列表collectionsArray是[]收藏夹列表profile_cover_imgString是‘’封面图片addressString是‘’地址websiteString是‘’个人站点introductionString是‘’个人介绍jobString是‘’职业educationString是‘’学历bind_third_partyObject是{}第三方绑定（2）单聊消息数据表，如表4-2所示。表4-2单聊消息表名称类型空默认值其他备注chat_idString否空所属单聊ID_idObject否空auto_increment自增IDfrom_member_idObject否空发送人IDto_member_idObject否空接收人IDcontent_typeString否空消息类型(image|files|plain|contentString否空消息内容create_timeNumber是空Date.now()创建时间update_timeNumber是空Date.now()更新时间（3）沸点数据表，如表4-3所示。表4-3沸点表名称类型空默认值其他备注_idObject否auto_increment自增IDauthor_idObject否空发布者IDtopic_idObject否空所属话题IDcontent_plainString是‘’文本内容content_imageString是‘’图片内容content_linkString是‘’链接内容commentsArray是[]评论列表create_timeNumber是Date.now()创建时间update_timeNumber是Date.now()更新时间第五章系统实现与测试5.1项目整体结构本项目整体偏向前端，由于前端利用Node.js来进行项目搭建，所以将前后端项目源码一起放置于同个项目文件夹内部，如图5-1所示：图5-1项目整体结构图前端源代码目录如图5-2所示：图5-2前端源码结构图后端源代码目录如图5-3所示：图5-3后端整体结构图5.2登录模块登录模块主要采用jwt（jsonwebtoken）技术做权限认证，并且集成了Github第三方登录，因为开发人员对于Github是很熟悉的，所以新老用户可以使用Github账号直接登录，Github登录的流程如图5-4所示：图5-4Github登录流程图前端主要逻辑：登录时，将用户输入的用户名和密码通过Ajax发送到后端，再根据后端返回的JSON信息进行路由跳转以及持久化存放用户ID等操作后端主要逻辑：后端接收到前端传递过来的用户登录数据，在判断用户信息是否合理的同时,也要进行token的更新，以及用户状态读取5.3文章模块在本系统内部，用户可以创建并发表不同类型的文章，包括但不仅仅局限于前端、后端、数据库、运维等，同时，发表文章是有明确的权限控制的，也就是说，未登录的用户不能发表文章。后端接收到前端提供的文章信息，进行数据库的读写操作，主要针对文章数据表（Posts）来进行，同时需要更新用户数据表（User），将该文章ID同步添加至用户创建的文章列表内，后端部分逻辑如图5-5所示：图5-5发表文章后端逻辑图5.4沸点模块用户可以在沸点分享自己的感想和心情，沸点可以说是一个小型的社交平台，沸点模块的前端主要代码如图5-6所示：图5-6沸点布局图沸点模块的后端逻辑,主要是进行常规的沸点增删改查,以及创建用户足迹等。5.5话题模块话题模块也是本系统的一个内置亮点功能，本系统内置了20多种话题，比如报offer、今日最佳、内推招聘等，用户可以将自己的沸点发表到对应的话题下。话题模块的后端主要工作,同样是话题的添加,但是本系统目前的设定是：暂时只能由系统管理员来创建新的话题，后续可能会开放给普通用户。5.6聊天模块这是本系统最大的亮点模块，也是本系统对于市面上已知的同类型网站的功能上的补充，用户可以在通过好友申请，添加对方为好友，进而进行私聊，并且在私聊中可以发送图片、文件、代码等，聊天模块的前端路由设计，如图5-7所示：图5-7聊天页前端路由设计图前后端的数据交互采用Websocket来传输，包括好友申请、聊天消息发送和接收等。当接收方同意好友申请方的请求时，后端的主要处理逻辑如图5-8所示：图5-8同意好友申请后端逻辑图5.7足迹模块足迹系统记录了每个用户的行为，包括用户点赞、好友申请、发表文章、收藏文章等，但是足迹功能有很多需要注意的点，以点赞文章为例，后端的主要逻辑如图5-9所示：图5-9创建足迹后端主要逻辑图5.8收藏模块收藏模块包括收藏文章和收藏沸点两部分，用户浏览到自己喜欢的文章，可以将其添加至收藏夹，以供后续阅读，后端的主要代码如图5-10所示：图5-10创建收藏夹后端逻辑图5.9各模块测试结果登录界面，前端对用户输入的账户名以及密码作是否为空和字段合理性校验，符合规范则跳转至首页部分，如图5-11所示：图5-11登录页图系统主页，如图5-12所示：图5-12系统主页图沸点主页，进入沸点首页，默认展示一个话题，并且发布沸点框位于中央,利于吸引用户的眼球，激发用户的创作欲望，此外，发布沸点时，可以选择上传图片和选择一个对应的话题，但是上传图片的数量是有限制的，前端已经做了判断处理，同时发布沸点时必须选择一个话题，便于后端作分类处理，如图5-13所示：图5-13沸点主页图话题主页，包括我关注的话题，和全部话题，用户可以在此处关注自己感兴趣地话题，当完成关注话题后，该话题图标会出现在“我关注地话题”下，如图5-14所示：图5-14话题主页图话题详情页，对于每个话题，进行详细的介绍，并展示该话题内部的沸点列表。整个话题页的布局思想与沸点页一致，采取左中右的布局形式，同时将沸点发布框置于相对中央的位置，右侧则介绍该话题并展示了该话题包括的沸点数以及关注的用户数，同时，也会将在该话题下发表过沸点的用户一一列出，如图5-15所示：图5-15话题详情页图点击关注按钮，会关注该话题，该话题会出现在“我关注的话题”列表内部，如图5-16所示：图5-16关注话题图发表沸点，创建新的沸点，并发表到对应的话题下面，前端已经做了相应的数据验证，当点击发布按钮时，前端会分别验证沸点内容是否为空、上传的图片数量是否超出限制、上传的图片大小是否符合规范、图片格式是否支持，最重要的是是否已经选择了话题，如图5-17所示：图5-17发表沸点图发表文章页，可以使用富文本编辑器来编辑文章，因为本系统主要面向的用户群体都是开发者，所以就采用了富文本作为主要语言，由于文章的数据表定义了文章类型、文章形式、文章头图、文章标签等多个字段，所以前端也根据这种思路来进行页面布局，如图5-18所示：图5-18发表文章图通知系统，当用户点击我的沸点或者文章、申请好友、好友申请状态改变、文章被收藏时，都会有实时的通知提醒，这是通过Websocket实现的，当用户进行如上操作时，前端会实时的通知后端，旨在提供更好的用户体验，如图5-19所示：图5-19点赞通知图文章控制，在文章详情页，主人和访客都可以进行点赞文章、收藏文章等操作，当看到自己喜欢的文章时，可以将其添加到自定义的文件夹里面，方面日后阅读，如图5-20所示：图5-20收藏文章图在个人中心内部，可以编辑用户的个人信息等，这里是有权限区分的，如果是主人访问，则前端控制并暴露出“编辑个人信息”和“上传头像”按钮入口，用户可以访问特定的页面；如果是访客访问，那么就隐藏上述两个入口。另外，在上传头像时，也进行了图片的格式、大小等判断，如图5-21所示：图5-21上传头像图个人中心的足迹模块，记录了当前用户所有的行为，包括发表文章、发表沸点、点赞文章、点赞沸点、收藏文章、添加好友、关注话题、关注用户等，这是本系统的附加功能，可以有效地提升用户体验，如图5-22所示：图5-22个人足迹图个人中心的文章区块，可以很清晰的查看到自己发表的文章，并且这些文章会按照时间由近到远的顺序依次排列，方便用户搜寻，其实，此处还可以添加一个搜索功能，当用户创作的文章过多时，可以很便捷的检索到想要的文章，如图5-23所示：图5-23个人文章图个人中心的收藏区块，可以很清楚的看到用户创建的收藏夹，提供了两个入口，入口一为进入该收藏夹详情页，收藏夹详情页详尽的列出了用户已收藏的文章信息、并且可以编辑收藏夹，比如添加图片等；入口二为删除收藏夹，如图5-24所示：图5-24个人收藏图如果用户想查看自己关注了哪些人和话题，可以在个人中心的关注选项卡中找到，并且还可以进行关注操作，极大的方便了用户，如图5-25所示：图5-25个人关注图在设置模块的账号管理区块，用户可以自行绑定或者解绑第三方账号，包括微信、微博、Github、邮箱、手机号等，由于开发者重度依赖Github，所以提供一个Github登录入口非常重要，如图5-26所示：图5-26账号关联区块图于文章详情页，除了正常地评论，用户还可以进行加好友和关注操作，这也是本系统设计的唯一地加好友入口，当申请好友时，也可以附带备注信息，好友申请的界面如图5-27所示：图5-27申请好友弹窗图当用户接收到好友申请时，首页通知栏会实时的提示，此时用户可以自行选择同意或者拒绝，如图5-28所示：图5-28好友申请通知图当好友申请被同意或拒绝时，发送方也会收到一条提示消息，如图5-29所示：图5-29同意好友申请通知图聊天时，支持发送普通文本消息、图片、代码以及文件，并且可以在线预览，单聊的主界面如图5-30所示：图5-30聊天主界面图第六章总结与展望6.1总结随着互联网的不断快速发展，未来肯定会有更多的同类产品参与竞争，竞争的同时意味着会有胜者和败者，哪个平台吸引的用户多，那么它肯定有自己的过人之处，但是大量的同类产品，必定会产生一系列问题，比如功能繁多、使用复杂，必要功能缺失等。因此，一个取其糟粕，取其精华的技术交流平台，是非常有必要的。回顾一下本论文，本论文阐述的关于开发者交流社区的种种，包括技术要求、需求分析、代码实现、架构分析、前后端代码撰写、前后端联调等，都由本人独立实现。同时，由于功能较多，所以开发周期很长，其中衍生出了很多问题，比如代码质量、组件复用、逻辑重构等，对整个系统的完成起到了强大的阻力。目前，经过多次重构，已经基本形成了一个中等质量的项目结构，但是依然存在着一些问题，比如浏览器的兼容度不全面等，还需要花更多的时间和精力去解决。6.2展望随着软件开发行业的不断渗透，市面上肯定会涌现出更多的开发者技术交流社区，这说明此类产品的前景是很广阔的。但是，本系统依然存在一些问题，比如后台管理能力，一个强大完善的社区，必然需要稳定的后台管理支持，包括日常的文章管理、沸点管理、各种消息管理等，目前本系统的后台管理操作仍然需要直接查看数据库，这是极为不方便的；再者比如浏览器兼容范围，目前本系统只兼容主流浏览器（Chrome、Firefox、Safari）等，对于一些大众化的浏览器，比如QQ浏览器、360浏览器的支持度并不完善，由于项目的开发周期有限，只能选取最通用的方案，这一问题也是需要等待未来去解决的；再比如设备兼容性，目前本系统只支持PC端浏览器访问，不支持移动端浏览器，这也是一个急需解决的问题，因为目前的手机网民还是占据了很大一部分，解决这个问题，对于本系统的用户群推广是至关重要的。参考文献[1]铁建文.基于Node.js搭建多人博客系统[D].内蒙古:内蒙古大学,2016.[2]杜艳美,黄晓芳.面向企业级web应用的前后端分离开发模式及实践[D].四川绵阳:西南科技大学计算机科学与技术学院,2017.[3]Facebook.React中文文档[Z].中国:React.js开发团队,2017.[4]胡子大哈.React.js小书[Z].中国,2017.[5]nodejs.Node.js中文文档[Z].中国:印记中文,2014.[6]邹竞莹.Node.JS博客系统的设计与实现[D].黑龙江:黑龙江大学计算机科学与技术学院,2016.[7]KristinaChodorow.深入学习MongoDB[M].巨成,程显峰,译.北京:人民邮电出版社,2012.[8]吴浩麟.深入浅出Webpack[M].北京:电子工业出版社,2018.[9]上野宣.图解HTTP[M].于均良,译.北京:人民邮电出版社,2014.[10]DavidFlanagan.JavaScript权威指南(第6版)[M].淘宝前端团队,译.北京:机械工业出版社,2012.[11]AddyOsmani.JavaScript设计模式[M].徐涛,译.北京:人民邮电出版社,2013.[12]NicholasC.Zakas.JavaScript高级程序设计(第3版)[M].李松峰,曹力,译.北京:人民邮电出版社,2012.[13]LeaVerou.CSS揭秘[M].CSS魔法,译.北京:人民邮电出版社,2016.致谢转眼间写到了致谢这一章节，这也意味着整篇论文的即将技术，同时意味着整个大学生活的接近尾声，心中既有欢喜，又有些揣揣不安，就像一位十月怀胎的妇女。欢喜，意味着终于结束自己的论文写作和毕业设计，心中的顾虑一下减轻了许多；不安，意味着大学生活即将结束，即将与陪伴自己四年的同学、老师诀别。岁月蹉跎，白驹过隙，时间转瞬即逝。在撰写毕业论文的过程中，我的导师周老师，一直很有耐心地辅导，论文的格式、论文的排版，甚至一个小小的标点符号，她都会一一指出，这与她的细致入微和对工作的认真负责密不可分。她给我的感觉，就像是冬天里的一把火，又或者说是沙漠里的一片绿洲，每当我没写作思路的时候，请教她，她都会一一解答，周老师治学严谨的态度和勤勉的工作态度深深感动了我，给我巨大的启迪、鼓舞和鞭挞，这种精神将成为我的人生中一笔重要的财富。同时，也要感谢大学四年所有的老师们，在你们的授业解惑下，对于计算机、操作系统、网络、政治等多种门类的知识都有涉猎，极大的丰富了我的大脑知识体系，在课堂上每一笔、每一话、每一言、每一行，都充斥着大学问、大道理，让我受益匪浅；感谢所有的老师们，本论文的技术支撑，离不开你们的知识输送。再者，感谢学校，提供给我学习的机会，学校精致的管理和细微至极的贴心服务，特别是学校可口的饭菜，也是我孜孜不倦的坚持学习的动力所在。岁月如梭，时光荏苒，记忆的那片雪花随风飘舞，迟迟不肯落下，思绪停留在那四年前的金秋九月，充满朝气的面庞，在校园里，挥洒过汗水，也挥洒过泪花，那里的一切，都是我所喜欢、我所热爱的，正是在美丽的校园、有干劲的校园氛围熏陶下，我度过了人生中最美的瞬间，凤凰涅槃需要经历烈火的煎熬和考验，并在最终，我完成了毕业论文，给自己的大学四年画上了一个相对完美的句号。

PowerPoint课件制作实用技巧PowerPoint是微软公司生产的制作幻灯片和简报的软件（以下简称PPT）。在我们许多人看来,它只不过是一个简单地对文字、图形、图片进行演示的软件，教学中的课件制作软件当属Authorware、Flash。Authorware和Flash制作的动画效果的确很好，而且它们的功能也很强大。不过这些软件在制作课件的过程中往往非常耗时，用这些专业软件来制作课件用于平时的教学往往效率很低。PPT就是一个非常简单、实用的制作课件的软件，只要你用好它,同样能做非常棒的课件来。一、掌握基本，知道“插入”。（一）知道从“插入”菜单进入，会给PPT课件添加文字、图片、影片和声音等，也就会做一般的课件了。（二）图片插入与处理1.插入图片具体方法：a)插入剪贴画或文件中的图片；b)添加图片做背景；c)给自选图形做填充。2.处理图片具体方法：我们用PPT制作课件时，经常从网上下载图片来用，而网络中的图片往往含有超链接和网站名称痕迹，我们需要删除其中超链接，并对图片进行裁剪处理。在Powerpoint中，我们一般可以利用“图片”工具栏上的“裁剪”工具进行裁剪处理，但是，这里的工具只能对图片进行矩形裁剪，若想裁剪成圆形、多边形等其他形状，通常方法就无能为力了。其实这个问题在PPT中是可以解决的。我们用给自选图形做填充图片的方法就可以实现我们需要的效果。具体步骤：a)首先利用“绘图”工具栏画一个想要裁剪的图形，如椭圆。b)选中椭圆后单击“绘图”工具栏上“填充颜色”按钮右侧黑三角，从列表菜单中单击“填充效果”命令。c)打开选择“图片”选项卡，单击〔选择图片〕按钮，从“选择图片”对话框中找到合适的图片，单击〔插入〕按钮后返回到“填充效果”对话框最后单击〔确定〕按钮后退出。此图片当作椭圆图形的背景出现，改变了原来的矩形形状，获得了满意的裁剪图片效果。图片在插入PPT之前，我们可以用ACDSEE软件进行加工，如改变大小，裁剪等操作。二、学会下载，查找方法。在制作课件过程中，我们时常需要从网络上下载各种资源用以丰富课件内容，提升课堂效果。但有许多网站的flash动画都不提供下载；还有网站为我们提供了许多视频素材，这些视频素材都是FLV流媒体格式。FLV流媒体格式是一种新的视频格式，全称为FlashVideo。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现也有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。目前各在线视频网站均采用此视频格式。如新浪播客、56、优酷、土豆、酷6等，无一例外。FLV已经成为当前视频文件的主流格式。这些网站一般都不提供下载。我们想要这些素材，怎样办？1.寻找下载方法：a)在百度网站搜索栏中输入下载的内容，搜索下载方法。b)弄清格式，再搜索方法。2.具体方法推荐①flasah动画的下载方法一：IE缓存中寻找在网上看过一个flash后，一般情况下都会保存在IE缓存里。右击桌面上的IE图标，选“属性”命令，单击中间的“设置”按钮，弹出“Internet临时文件和历史记录设置”面板，单击“查看文件”，可以打开临时文件夹，按时间排序，找到刚才打开的flash动画文件。优点：不需要安装其它软件。缺点：操作相对烦琐。方法二：借助Flashsaver等软件下载，这些软件都可以快速、方便的下载你所需要的flash文件。优点：简单、方便、快速。缺点：需要安装使用。②FLV视频的获取方法一：IE缓存中寻找，方法同flasah。方法二：flv视频解析下载/三、学用控件，转化应用1.flash动画的插入方法一：安装flash插件，再插入flash。步骤：a)安装“ppt插flash软件”插件；b)单击“插入”→“flashmovie”→打开要播放的flash文件→确定。方法二：利用控件插入flash动画。步骤：a)插入“ShockwaveFlashObject”控件对象：右击“工具栏”→选“控件工具箱”（或点“视图→工具栏→控件工具箱”）；点“其他控件”（控件工具箱中最后一个形似锤子斧头的按钮），拖动滚动条或在英文输入法状态下按键盘上“s”键，快速定位到以s开头的控件，选择“ShockwaveFlashObject”控件。将鼠标移到幻灯片工作区，鼠标指针变成“十”字型，拖动鼠标绘制出一个形似信封的矩形。b)打开控件对象“属性”对话框：右击矩形控件对象，在弹出的快捷菜单中选“属性”命令。c)正确设置控件对象属性：主要是在“Movie”空白文本域中正确输入演示文稿要播放的.swf动画的完整名称。d)将控件对象适当缩放：为了获得比较好的播放效果，拖动控件对象的缩放点使它几乎覆盖整个幻灯片工作区，但要在幻灯片工作区底部保留少许空白区域。这样既可以享受.swf动画大屏幕播放的好处，又能够保证幻灯片能够顺利地切换。e)一般情况下，幻灯片应显示出动画的第一帧图形。如果控件对象仍是空白的，可保存演示文稿，关闭后再打开它，按F5放映幻灯片，应该能够正确播放动画。2.FLV视频的插入FLV视频与FLASH不一样的。全称是flashvideo，所用的播放器也不一样。①利用控件插入PPT的方法也是有区别的。不同点：先要下载pptflv.swf文件，此文件是类似于网页中FLV视频播放器的一个Flash文件(可用百度搜索下载下来后记着要改文件名，保留扩展名)；例如改成：pptflv1.swf“Movie”参数值填入方法不一样，参数值示例：pptflv.swf?file=视频.FLV“pptflv.swf”即为步骤一下载下来的Flash文件的完整文件，“视频.FLV”即为需要播放的FLV视频的文件名，大家只要将pptflv.swf换成自己下载后起的文件名，将“视频.FLV”换成自己的FLV视频文件名，则此FLV文件就可以在PowerPoint中播放了。如播放2.flv视频参数填法：示例：pptflv1.swf?file=2.FLV②方法二：将flv转换成swf再插入转换软件：UltraFlashVideoFLVConverter3.2.0软件说明：该软件又叫全格式FLV转换器，支持将几乎所有主流视频格式转换为FLV或者SWF且对用户较为关心的RealMedia(RM/RMVB...)和QuickTime(MOV/QT...)支持良好。三大特色功能：既可输出FLV格式，也可输出SWF格式，甚至同时输出FLV+SWF格式。此软件也支持创建调用播放的网页支持导入所有的主流字幕格式。srt,*.sub,*.idx,*.ssa,*.ass,*.psb,*.smi)有字幕合成功能，你现在无需再使用那些繁琐的专业软件来合成字幕到视频中去，字幕合成与格式转换一气呵成！支持视频分割，右键点击列表中的源文件，选择[编辑视频]，自己设置下起点终点即可对视频进行去粗取精处理！③方法三：将flv转换成其他格式视频文件再插入工具：FLV转AVI（FreeFLVtoAVIConverter1.5）作用：一个免费的将FLV转换成AVI的软件，简单好用，自带解码器。四、学做交互，理解运用。1.利用母版进行交互母版≠模版母版和模版可以使课件统一整体风格，展现自己的个性和特点；模版是对同一类课件所做的整体风格统一设置，母版则是对某一部课件内部所做的个性化统一设置。母版设置得好，就可以存为模版，供别人在制作同类题材时使用。修改幻灯片母板的方法和技巧。如果我们希望为每一张幻灯片添加上一项固定的内容，并做超链接，可以通过修改“母板”来实现。a)执行“视图→母板→幻灯片母板”命令，进入“幻灯片母板”编辑状态。b)插入固定内容。例如：将图片插入到幻灯片中，调整好大小、定位到合适的位置上。c)给这张图片插入超链接，就可以进行交互了。d)单击“关闭母板视图”按钮退出“幻灯片母板”编辑状态。以后添加幻灯片时，该幻灯片上自动添加上该图片。如果说一个PPT有它的灵魂的话，那就是PPT的母板，它的作用犹如摩天大厦的根基一般。2.在PPT演示文稿中插入PowerPoint演示文稿对象实现交互具体效果：①导航目录内容展示效果②单击小图片就可看到该图片的放大图自动缩效果《画家乡》一课五个画面交互的具体操作方法：a)单击“插入→对象”，在出现的选择页中选择“MicrosoftPowerPoint演示文稿”，单击确定。此时就会在当前幻灯片中插入一个“PowerPoint演示文稿”的编辑区域。b)在此编辑区域中我们就可以对插入的演示文稿对象进行编辑了，编辑方法与PowerPoint演示文稿的编辑方法一样。c)在插入的演示文稿对象中创建所需的幻灯片。可将图片设置为幻灯片相同大小，退出编辑后，就可发现图片以缩小方式显示了（其实是整个插入的演示文稿对象被缩小显示了）。d)最后，我们只需对剩余的图片进行插入。为了提高效率，可将这个插入的演示文稿对象进行复制，并按照上面的方法对图片进行替换即可。e)完毕后，单击“观看放映”命令进行演示，单击小图片马上会放大，再单击放大的图片马上又返回到了浏览小图片的幻灯片中了。原理：这里的小图片实际上是插入的演示文稿对象，它们的“动作设置”属性中的“单击鼠标”中的“对象动作”被设为了“演示”（这是默认值）。因此我们在演示时，单击小图片，就是等于对插入的演示文稿对象进行“演示观看”。而演示文稿对象在播放时就会自动全屏幕显示。所以我们看到的图片就好像被放大了一样，而我们单击放大图片时，插入的演示文稿对象实际上已被播放完了（因为只有一张），它就会自动退出，所以就回到了主幻灯片中了。3.用触发器控制自定义动画进行交互以前我们在使用PowerPoint制作课件时，常常发现制作人机交互性的课件非常麻烦。其实在PowerPoint2003里，用触发器控制自定义动画可以轻松地制作出交互性很强的课件。触发器功能可以将画面中的任一对象设置为触发器，单击它，该触发器下的所有对象就能根据预先设定的动画效果开始运动，并且设定好的触发器可以多次重复使用。类似于Authorware、Flash等软件中的热对象、按钮、热文字等，单击后会引发一个或者的一系列动作。例1：单击“棱台”后，“小球”开始按一定路径运动。例2：分别单击“变色一”和“变色二”，让“笑脸”颜色。例3：单击下面一段话的关键词，让词语变红色读下面一段话，说说从哪些词语中可以看出侵略者采用了各种野蛮手段掠夺、毁灭圆明园的？他们把园内凡是能拿走的东西，统统掠走，拿不动的，就用大车或牲口搬运。实在运不走的，就任意破坏、毁掉。步骤：a)将原来段落中的重点词消去；（将词语颜色变成和背景色一样）b)将重点词作为单独文本覆盖到原来位置；c)设置重点词自定义动画为“添加效果→强调→更改字体颜色→红色”d)右击重点词自定义动画，选择“效果选项”，选择“计时”，选择“触发器”，选“单击下列对象时启动效果”，再选重点词，按确定。五、学会截取，合理选用。（一）视频的截取加工1.工具：万能转换器（英文名TotalVideoConverter）作用：可以帮助你快速的分割,修整大的AVI、MPEG、ASF或者WMV文件为一个个小的视频文件,内置视频播放器,你可以很方便的按照所选择的播放时间进行切割操作,不需要另外具备高深的技术知识,简单容易使用!2.绘声绘影会声会影是一套操作最简单，功能最强悍的DV、HDV影片剪辑软件。不仅完全符合家庭或个人所需的影片剪辑功能，甚至可以挑战专业级的影片剪辑软件。（二）flash的片段截取有时候，在网络上下载了一个课件，对自己的课堂教学有帮助，但是又不想全部应用这个课件，只想取出其中一部分，应该则么办呢？先用硕思闪客精灵将.swf文件和.exe文件转换成fla文件，再用flash8打开进行编辑，截取自己所需的片段，然后插入到ppt里面为我所用。1.硕思闪客精灵：它是一款用于浏览和解析Flash动画（.swf文件和.exe文件）的工具。最新版本有着强大的功能，可以将swf文件导出成FLA文件。它还能够将flash动画中的图片、矢量图、声音、视频（*.flv）、文字、按钮、影片片段、帧等基本元素完全分解，最重要的是可以对动作的脚本(Actionscript)进行解析，清楚的显示其动作的代码，让对Flash动画的构造一目了然。支持将SWF文件导出成FLA文件，帮助丢失FLA文件的影片作者重新获得FLA文件，从而可以再编辑。完全兼容Flash8文件和动作脚本(ActionScript)2.0。硕思闪客精灵支持将包含组件的SWF文件转换成FLA格式，用户可以在Flash中编辑这些组件。支持解析Flash影片中的视屏(video)文件，并将Flash影片中的视频文件导出为*.flv格式。2.硕思闪客精灵具体使用方法：①解析Flash课件，提取课件素材在Flash课件作品中有大量的图片、声音和视频等资源。由于制作者拥有的资源不同，在制作课件时，很难及时、方便地寻找到适合的素材。如果可以从同类作品中将所需要的资源提取出来为己所用的话，不仅大大节约了搜集素材资源的时间，而且会极大地提高课件利用率。但是，Flash课件发布时一般都进行加密处理，使教师无法用普通的方式导入到Flash中进行编辑。而硕思闪客精灵可以解析出Flash作品中的元件及脚本，并且可以保存成swf格式，这样在创作时就可以直接导入Flash中使用。启动闪客精灵，单击工具上的“快速打开”按钮打开一个Flash动画(可以是swf格式或exe格式)，闪客精灵会自动分解当前动画(图2)，包括用到的脚本语言(Actions语句)，并在资源栏中分类罗列着动画中的各种元件(图片、按钮、影片和声音等);单击某个元件，可以在中间的窗口中预览;勾选需要的元件，然后单击“导出”按钮，就可以把选中的元件分类保存到原文件所在的文件夹中。②反编译Flash课件，获取课件源代码硕思闪客精灵的最大亮点就是能够将Flash动画(swf格式)还原成其源文件(Fla格式)，相信这个功能是很多朋友期待已久的。还原的方法十分的简单，只需要打开Flash动画，再单击工具栏上的“导出Fla”按钮，选择保存位置，稍等后就完成了还原工作，此时还会提示“是否愿意用Flash打开它”，单击“Yes”即可启动系统中安装的Flash打开还原后的源文件，此时你就可以随心所欲地对它进行修改啦。3.用flash8进行编辑基本方法：选取需要帧，复制，粘贴到新的flash中，调试修改。上面介绍了关于破解Flash课件的一些方法和手段，有一个特定的使用范围，即为了课堂教学服务，只有资源共享才能提高教学效率，促进教学效果的提高。不能做为商业目的，也不能将别人的课件的署名修改一下，便成为自己的作品，用于参加比赛，这是不道德的行为。在PPT演示中禁用右键快捷菜单和滑鼠滚动一大群与会人员正襟危坐，你豪情满怀地进行着某个新产品的演示或介绍，却不小心由于鼠标左键的误操作导致幻灯片跳到了本不应该出现的位置，或者本应按下鼠标左键切换到下一张，却由于按下了右键而出现一个快捷菜单。不用担心，只要进行小小的设置，就可以将这些烦人的问题统统搞定。从任务窗格中打开“幻灯片切换”，将换片方式小节中的“单击鼠标时”和“每隔”两个复选项全部去除，然后将这个设置应用于所有幻灯片，以后切换到下一张或上一张，只有通过键盘上的方向键才能进行操作。至于另外一个问题，解决的办法也很简单，从“工具”菜单下打开“选项→视图”窗口，取消“幻灯片放映”小节上的“右键单击快捷菜单”复选框即可。■在PPT演示文稿内复制幻灯片要复制演示文稿中的幻灯片，请先在普通视图的“大纲”或“幻灯片”选项中，选择要复制的幻灯片。如果希望按顺序选取多张幻灯片，请在单击时按Shift键；若不按顺序选取幻灯片，请在单击时按Ctrl键。然后在“插入”菜单上，单击“幻灯片副本”，或者直接按下“Ctrl+shift+D”组合键，则选中的幻灯片将直接以插入方式复制到选定的幻灯片之后。■Powerpoint自动黑屏在用Powerpoint展示课件的时候，有时需要学生自己看书讨论，这时为了避免屏幕上的图片影响学生的学习注意力可以按一下“B”键，此时屏幕黑屏。学生自学完成后再接一下“B”键即可恢复正常。按“W”键也会产生类似的效果。■将幻灯片发送到word文档1、在Powerpoint中打开演示文稿，然后在“文件”菜单上，指向“发送”，再单击“MicrosoftWord”。2、在“将幻灯片添加到Microsoftword文档”之下，如果要将幻灯片嵌入word文档，请单击“粘贴”；如果要将幻灯片链接到word文档，请单击“粘贴链接”。如果链接文件，那么在Powerpoint中编辑这些文件时，它们也会在word文档中更新。3、单击“确定”按钮。此时，系统将新建一个word文档，并将演示文稿复制到该文档中。如果word未启动，则系统会自动启动word。■让幻灯片自动播放要让powerpoint的幻灯片自动播放，只需要在播放时右键点击这个文稿，然后在弹出的菜单中执行“显示”命令即可，或者在打开文稿前将该文件的扩展名从PPT改为PPS后再双击它即可。这样一来就避免了每次都要先打开这个文件才能进行播放所带来的不便和繁琐。■增加PPT的“后悔药”在使用powerpoint编辑演示文稿时，如果操作错误，那么只要单击工具栏中的“撤消”按钮，即可恢复到操作前的状态。然而，默认情况下Powerpoint最多只能够恢复最近的20次操作。其实，powerpoint允许用户最多可以“反悔”150次，但需要用户事先进行如下设置：在“工具－选项”，击“编辑”选项卡，将“最多可取消操作数”改为“150”，确定。■PPT中的自动缩略图效果你相信用一张幻灯片就可以实现多张图片的演示吗？而且单击后能实现自动放大的效果，再次单击后还原。其方法是：新建一个演示文稿，单击“插入”菜单中的“对象”命令，选择“Microsoftpowerpoint演示文稿”，在插入的演示文稿对象中插入一幅图片，将图片的大小改为演示文稿的大小，退出该对象的编辑状态，将它缩小到合适的大小，按F5键演示一下看看，是不是符合您的要求了？接下来，只须复制这个插入的演示文稿对象，更改其中的图片，并排列它们之间的位置就可以了。■快速灵活改变图片颜色利用powerpoint制作演示文稿课件，插入漂亮的剪贴画会为课件增色不少。可并不是所有的剪贴画都符合我们的要求，剪贴画的颜色搭配时常不合理。这时我们右键点击该剪贴画选择“显示‘图片’工具栏”选项（如果图片工具栏已经自动显示出来则无需此操作），然后点击“图片”工具栏上的“图片重新着色”按钮，在随后出现的对话框中便可任意改变图片中的颜色。■为PPT添加公司LOGO用powerpoint为公司做演示文稿时，最好第一页都加上公司的Logo，这样可以间接地为公司做免费广告。执行“视图－母版－幻灯片母版”命令，在“幻灯片母版视图”中，将Logo放在合适的位置上，关闭母版视图返回到普通视图后，就可以看到在每一页加上了Logo，而且在普通视图上也无法改动它了。■“保存”特殊字体为了获得好的效果，人们通常会在幻灯片中使用一些非常漂亮的字体，可是将幻灯片拷贝到演示现场进行播放时，这些字体变成了普通字体，甚至还因字体而导致格式变得不整齐，严重影响演示效果。在powerpoint中，执行“文件－另存为”，在对话框中点击“工具”按钮，在下拉菜单中选择“保存选项”，在弹出其对话框中选中“嵌入TrueType字体”项，然后根据需要选择“只嵌入所用字符”或“嵌入所有字符”项，最后点击“确定”按钮保存该文件即可。■利用组合键生成内容简介我们在用powerpoint2003制作演示文稿时，通常都会将后面几个幻灯片的标题集合起来，把它们作为内容简介列在首张或第二张幻灯片中，让文稿看起来更加直观。如果是用复制粘贴来完成这一操作，实在有点麻烦，其实最快速的方法就是先选择多张幻灯片，接着按下alt+shift+s即可。■演示文稿中的图片随时更新在制作演示文稿中，如果想要在其中插入图片，执行“插入－图片－来自文件”，然后打开“插入图片”窗口插入相应图片。其实当我们选择好想要插入的图片后，可以点击窗口右侧的“插入”按钮，在出现的下拉列表中选“链接文件”项，点击确定。这样一来，往后只要在系统中对插入图片进行了修改，那么在演示文稿中的图片也会自动更新，免除了重复修改的麻烦。■快速调用其他PPT在进行演示文档的制作时，需要用到以前制作的文档中的幻灯片或要调用其他可以利用的幻灯片，如果能够快速复制到当前的幻灯片中，将会给工作带来极大的便利。在幻灯片选项卡时，使光标置于需要复制幻灯片的位置，选择“菜单”中的“幻灯片（从文件）”命令，在打开的“幻灯片搜索器”对话框中进行设置。通过“浏览”选择需要复制的幻灯片文件，使它出现在“选定幻灯片”列表框中。选中需要插入的幻灯片，单击“插入”，如果需要插入列表中所有的幻灯片，直接点击“全部插入”即可。这样，其他文档中的幻灯片就为我们所用了。■快速定位幻灯片在播放powerpoint演示文稿时，如果要快进到或退回到第5张幻灯片，可以这样实现：按下数字5键，再按下回车键。若要从任意位置返回到第1张幻灯片，还有另外一个方法：同时按下鼠标左右键并停留2秒钟以上。■利用剪贴画寻找免费图片当我们利用powerpoint2003制作演示文稿时，经常需要寻找图片来作为铺助素材，其实这个时候用不着登录网站去搜索，直接在“剪贴画”中就能搞定。方法如下：插入－图片－剪贴画，找到“搜索文字”一栏并键入所寻找图片的关键词，然后在“搜索范围”下拉列表中选择“Web收藏集”，单击“搜索”即可。这样一来，所搜到的都是微软提供的免费图片，不涉及任何版权事宜，大家可以放心使用。■制作滚动文本在powerpoint中有时因显示文本内容较多就要制作滚动文本。具体制作方法如下：视图－工具栏－控件箱，打开控件工具箱，点击“文字框”选项，插入“文字框”控件，然后在幻灯片编辑区按住鼠标左键拖拉出一个文本框，并根据版面来调整它的位置和大小。接着在“文字框”上右击鼠标，选择快捷菜单中的“属性”命令，弹出“文字框”属性窗口，在属性窗口中对文字框的一些属性进行相关的设置。设置好后右击“文字框”，选择“文字框对象”中的“编辑”命令，这时就可以进行文字的输入，文本编辑完之后，在文字框外任意处单击鼠标，即可退出编辑状态。一个可以让框内文字也随滚动条拖动而移动的文本框就做好了。■突破20次的撤消极限Powerpoint的“撤消”功能为文稿编辑提供了很大方便。但powerpoint默认的操作次数却只有20次。执行“工具－选择”，击“编辑”标签卡，在“最多可取消操作数”中设置你需要的次数即可。不过要注意，powerpoint撤消操作次数限制最多为150次。■利用画笔来做标记利用powerpoint2003放映幻灯片时，为了让效果更直观，有时我们需要现场在幻灯片上做些标记，这时该怎么办？在打开的演示文稿中单击鼠标右键，然后依次选择“指针选项－绘图”即可，这样就可以调出画笔在幻灯片上写写画画了，用完后，按ESC键便可退出。■快速调节文字大小在powerpoint中输入文字大小不合乎要求或者看起来效果不好，一般情况是通过选择字体字号加以解决，其实我们有一个更加简洁的方法。选中文字后按ctrl+]是放大文字，ctrl+[是缩小文字。■计算字数和段落执行“文件－属性”，在其对话框中选“统计”选项卡，该文件的各种数据，包括页数、字数、段落等信息都显示在该选项卡的统计信息框里。■轻松隐藏部分幻灯片对于制作好的p