企业网站的建设包括怎么制作网站商城

当前位置： 首页 > news >正文

企业网站的建设包括,怎么制作网站商城,网站icon怎么设置,自己建的网站如何做海外推广首先附上项目介绍,后面详细解释技术细节 1. chat-websocket 一个基于Vue3和WebSocket的简易网络聊天室项目#xff0c;包括服务端和客户端部分。 项目地址 websocket-chat 下面是项目的主要组成部分和功能#xff1a; 项目结构 chat-websocket/ |– server/ # WebSocket 服…首先附上项目介绍,后面详细解释技术细节 1. chat-websocket 一个基于Vue3和WebSocket的简易网络聊天室项目包括服务端和客户端部分。 项目地址 websocket-chat 下面是项目的主要组成部分和功能 项目结构 chat-websocket/ |– server/ # WebSocket 服务端 | |– run.js # 服务端 | |– DBManager.js #数据库对象管理 |– src/ | |– components/ | | |– … # Vue 组件 | |– assets/ | | |– … # 静态资源 | |– views/ | | |– Home.vue # 主要视图组件 | | |– Login.vue # 登录视图组件 | |– router/ | |– App.vue | |– main.js |– public/ |– README.md |– …功能特性 私聊功能用户可以选择联系人进行一对一私聊发送即时消息。群聊功能用户可以加入群组与群组成员进行群聊。修改用户名用户可以在界面上直接修改自己的用户名。显示在线(连接)状态重新连接: WebSocket 断开连接后,用户可以重新连接服务器, 重新连接后, 会加载之前的聊天记录 技术栈 前端框架 使用 Vue3 作为前端框架Element Plus 用于 UI 组件。 后端框架 后端使用 Node.js Mysql 实现使用 WebSocket 库 ws 作为 WebSocket 服务端。 WebSocket 实时通信使用 WebSocket 技术保证消息的实时性。 上面是项目介绍,下面介绍细节 2. 整体设计思路 前端使用Vue框架,快速搭建聊天室的原型,同时为了美观,使用Element Plus 用于 UI 组件.前端页面 包含登陆页面Login和聊天页面Home实时通信使用 WebSocket 技术,客户端发送请求,服务端结合数据库进行返回.服务端使用Session机制,记录sessions[clientId],增加定时器定时清除session,用于24H过期机制.服务端直接使用ws库建立连接,同时使用DBManager操作数据库对象,完成数据处理和传输.为了方便消息分类传输,定义消息对象,客户端和服务端共有相同的消息对象. 一次简单的登陆到获取消息的流程如图: #mermaid-svg-zAlw4lmarJ2JAxfW {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .error-icon{fill:#552222;}#mermaid-svg-zAlw4lmarJ2JAxfW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zAlw4lmarJ2JAxfW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-zAlw4lmarJ2JAxfW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zAlw4lmarJ2JAxfW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zAlw4lmarJ2JAxfW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zAlw4lmarJ2JAxfW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zAlw4lmarJ2JAxfW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zAlw4lmarJ2JAxfW .marker.cross{stroke:#333333;}#mermaid-svg-zAlw4lmarJ2JAxfW svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zAlw4lmarJ2JAxfW .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .cluster-label text{fill:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .cluster-label span{color:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .label text,#mermaid-svg-zAlw4lmarJ2JAxfW span{fill:#333;color:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .node rect,#mermaid-svg-zAlw4lmarJ2JAxfW .node circle,#mermaid-svg-zAlw4lmarJ2JAxfW .node ellipse,#mermaid-svg-zAlw4lmarJ2JAxfW .node polygon,#mermaid-svg-zAlw4lmarJ2JAxfW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zAlw4lmarJ2JAxfW .node .label{text-align:center;}#mermaid-svg-zAlw4lmarJ2JAxfW .node.clickable{cursor:pointer;}#mermaid-svg-zAlw4lmarJ2JAxfW .arrowheadPath{fill:#333333;}#mermaid-svg-zAlw4lmarJ2JAxfW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-zAlw4lmarJ2JAxfW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-zAlw4lmarJ2JAxfW .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-zAlw4lmarJ2JAxfW .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-zAlw4lmarJ2JAxfW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-zAlw4lmarJ2JAxfW .cluster text{fill:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW .cluster span{color:#333;}#mermaid-svg-zAlw4lmarJ2JAxfW div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-zAlw4lmarJ2JAxfW :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 服务端返回成功,设置session_id,24H后过期 websocket 进入页面直接建立websocket连接 登陆 聊天页面 点击用户或群组 从服务端得到对应消息列表 一次简单的发送和获取消息的流程如图: #mermaid-svg-IQOgyIuCZaAuNqGV {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .error-icon{fill:#552222;}#mermaid-svg-IQOgyIuCZaAuNqGV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IQOgyIuCZaAuNqGV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IQOgyIuCZaAuNqGV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IQOgyIuCZaAuNqGV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IQOgyIuCZaAuNqGV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IQOgyIuCZaAuNqGV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IQOgyIuCZaAuNqGV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IQOgyIuCZaAuNqGV .marker.cross{stroke:#333333;}#mermaid-svg-IQOgyIuCZaAuNqGV svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IQOgyIuCZaAuNqGV .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .cluster-label text{fill:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .cluster-label span{color:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .label text,#mermaid-svg-IQOgyIuCZaAuNqGV span{fill:#333;color:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .node rect,#mermaid-svg-IQOgyIuCZaAuNqGV .node circle,#mermaid-svg-IQOgyIuCZaAuNqGV .node ellipse,#mermaid-svg-IQOgyIuCZaAuNqGV .node polygon,#mermaid-svg-IQOgyIuCZaAuNqGV .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IQOgyIuCZaAuNqGV .node .label{text-align:center;}#mermaid-svg-IQOgyIuCZaAuNqGV .node.clickable{cursor:pointer;}#mermaid-svg-IQOgyIuCZaAuNqGV .arrowheadPath{fill:#333333;}#mermaid-svg-IQOgyIuCZaAuNqGV .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IQOgyIuCZaAuNqGV .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IQOgyIuCZaAuNqGV .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-IQOgyIuCZaAuNqGV .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-IQOgyIuCZaAuNqGV .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IQOgyIuCZaAuNqGV .cluster text{fill:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV .cluster span{color:#333;}#mermaid-svg-IQOgyIuCZaAuNqGV div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-IQOgyIuCZaAuNqGV :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 服务端接收,保存消息到数据库,并根据用户和群组进行实时转发 用户A发送消息 用户B收到 3. 前端设计实现 3.1 页面设计实现 聊天室布局参考Element Plus提供的布局 其中头部展示用户信息状态, 左边是群组和用户选择, 主界面就是聊天界面,展示聊天信息. 最终成品如下: 一些细节解释 用户头像根据用户名自动生成,用到了ui组件. 可以显示用户当前连接状态,当链接断开后,可以重新连接. 聊天信息包含三要素: 时间, 用户名, 内容, 如图所示.通过v-if判断消息放在左边还是右边 发送栏固定,且接收和发送消息后聊天窗口(列表)自动到达底部.
3.2 登陆逻辑设计实现 进入页面后已经建立websocket连接,单击登陆后发送请求,若成功则接收到username,uid,session_id,这三个参数,直接以cookie的形式保存在本地. 后续进入页面,服务端都会 验证session,进行持久化访问. 3.3 聊天逻辑设计实现 前端共享使用相同的socket对象. 每次单击群组或用户,根据当前选择发送请求获取接收不同类型消息 群组消息 用户消息 还需要在进入页面后获取用户和群组列表进行初始化 无论是接收到群组还是用户消息,直接放入相同的列表,因为两种消息只需要显示三要素即可,后面分别解析

1. 后端设计实现 4.1 数据库设计实现 设计数据库包含如下表:
   表名列名数据类型说明USERuidINTEGER用户ID主键自增nameVARCHAR(255)用户名passwordVARCHAR(255)用户密码GROUPSgidINTEGER群组ID主键自增nameVARCHAR(255)群组名GMESSAGEidINTEGER消息ID主键自增gidINTEGER群组IDuidINTEGER发送消息的用户IDgnameVARCHAR(255)群组名textTEXT消息内容UMESSAGEidINTEGER消息ID主键自增s_uidINTEGER发送消息的用户IDr_uidINTEGER接收消息的用户IDtextTEXT消息内容timeTIMESTAMP消息发送时间GROUP_USERuidINTEGER用户IDgidINTEGER群组ID 还有与各表对应的管理类:
   各表分别继承管理类这里使用 Promise 的方式可以更好地处理异步代码 4.2 服务端设计实现 导入所需的模块和类 entity.js: 包含了用户和消息的实体类定义。DBManager.js: 包含了与数据库交互的相关类。ws: WebSocket 模块。创建了一些表格和实体对象的实例用于存储和管理用户、群组、消息等信息。 常量和变量定义 SESSION_EXPIRY_TIME: 定义了会话过期时间以毫秒为单位用于定期检查会话是否过期。Ws: WebSocket 模块的别名。clients: 存储WebSocket连接的对象。sessions: 存储用户会话信息。 初始化WebSocket服务器 定义一些事件处理函数如handleOpen、handleClose、handleConnection等。在handleConnection中处理了用户连接时的事件包括消息的处理。 消息处理 handleMessage函数用于处理收到的消息。根据消息类型进行相应的操作包括群组聊天、获取初始数据、私聊等。使用数据库表格对象如groupTable、gmessageTable等进行消息的存储和查询。通过WebSocket向指定用户或群组发送消息。 用户登录 当收到类型为MessageType.MESSAGE_LOGIN的消息时处理用户登录逻辑。检查用户是否存在于数据库中若不存在则插入新用户。为用户分配一个唯一的会话ID将用户信息存储在sessions对象中。向客户端发送登录成功消息并携带用户信息和会话ID。
   sessions的保存形式如下: sessions[clientId] {uid: uid,username: msg.data.username,ws: this,creationTime: Date.now(),sessionID: clientId,};定时器判断是否过期 5. 展示 群组聊天 私聊 5. 小结 孟宁老师上课旁征博引,时不时与同学们互动 (指让同学们发数字),无论是前端网络编程,网络协议RPC,还是Linux内核网络协议栈,似乎都信手拈来,相信如果认真听课,加上自己的钻研,绝对受益匪浅. 对于这门课程,完全可以说是师傅领进门,修行看个人了,我们深入其中某个方向,也会有所建树. 此前只是接触过JS和Vue,并未熟练掌握它们,这次由于课程原因,尝试完全使用JS作为前后端代码,没有使用熟悉的Python和Java来构建后端,算是对自己的一次挑战.幸好有chatgpt在细节上的协助,结合各类组件丰富的文档,完成了这次项目.