devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

简单的聊天程序（二）：配置Vue-cli以加速开发_vue聊天

作者：喵喵爱编程 | 2024-07-28 01:25:51

赞

踩

vue聊天

        上一章--简单的聊天程序（一）：HTML+CSS实现响应式界面已经实现了响应式的界面，接下来我们要实现一些简单的交互操作。

        预期结果 

        在左边切换不同的对话人物，并显示与其聊天记录；在输入框输入文字后按下发送按钮就会显示在上方的聊天记录区域内，并在信息下方显示发送的时间；在信息数量变多屏幕显示不下时，显示页面滚动条。

        Vue-cli的配置

        vue-cli基于vue.js，可快速开发，快速生成工程化项目。首先我们对其配置，然后将上一章的HTML界面和css样式粘入。

        首先我们在任意位置创建任意名的文件夹，我这里在桌面创建了名为projects的文件夹，如下图：

        接下来依次点击VS code的这些部分调出终端：

        确保正常安装了node.js和npm，没有安装的话可以去参考一下网络上其他作者写的文章，这里不再详细讲解。终端输入node -v查看node.js版本，我这里安装的比较早，不是最新版本，安装时直接安装最新版本即可。

        接下来在终端输入命令npm install -g @vue/cli，让软件自行安装vue-cli：

         安装完成后在终端输入下一条指令vue create project1，注意这里的“project1”是你自己的项目名称，可任意修改，程序会在此目录下创建一个你的项目名称的文件夹，里面包含了vue-cli的各个组件等。

        输入命令后程序会让你选择使用vue3还是vue2，键盘上下键选择，回车键确定。这里我选择了vue3，即此界面下直接回车。

         终端显示以下文字表示创建完成：

         这时候我们根据终端的提示先输入cd .\project1\进入新建项目project1的根目录，再输入npm run serve运行该程序，出现以下文字表示程序已成功运行（此处的默认端口应该为8080，但是我的8080端口运行着另外一个程序，因此它自动将此项目运行在了8081端口）：

         使用Ctrl+鼠标左键点击或直接在浏览器输入Local后的网址，自动跳转至如下页面，表示vue-cli已经成功配置并可运行：

         加入自己的页面

         导航至项目内src文件夹内，打开App.vue，可以看到这个文件由三部分组成：<template></template>、<script></script>和<style></style>。其中template内存放HTML代码，script内存放JavaScript代码，style内是css样式代码。我们把各部分里面的代码清空，准备下一步使用。

        将上一章的index.html内<body>里的代码粘贴进<template>，将index.css内的所有代码粘贴至<style>，Ctrl+S保存后程序会自动重新运行，进入页面查看，已经可以正常显示了：

        文档结构

        其中src下自然生成的App.vue为我们主要程序的地方 ，src下的assets新创建了几个json数据文件，来模拟服务器端传来的json数据。其余的文件在没有问题下尽可能不碰。

        <style>内相对于index.css的修改

        先放一张之前的class、id（“.”后跟class，“#”后跟id）与对应div部分的图： 

  1. .left{
  2. 	width: 30%;
  3. 	height: 100%;
  4. 	border-right: 1px solid gray;
  5. 	background-color: rgb(235, 244, 243);
  6.     /*----change----*/
  7. 	overflow-y: auto;
  8.     /*----change----*/
  9. }
  10.  
  11. .upper{
  12. 	width: 100%;
  13. 	height: 80%;
  14. 	background-color: rgb(254, 247, 236);
  15. 	display: block;
  16.     /*----change----*/
  17. 	overflow-y: auto;
  18.     /*----change----*/
  19. }

        两个/*----change----*/内包含相对于原index.css文件的修改。这里使用了overflow-y: auto;来实现内部元素大小如果纵向超过父级元素，右边会显示一个滚动条，这个滚动条只控制这一个div内元素的滚动，如下图：

        此章节新加的class（新加的只用到了class，没用到id）：

  1. .person{
  2. 	width: 90%;
  3. 	height: auto;
  4. 	border-bottom: 1px solid lightgrey;
  5. 	margin-left: auto;
  6. 	margin-right: auto;
  7. }
  8.  
  9. .sel{
  10. 	width: 100%;
  11. 	height: 100%;
  12. 	text-align: left;
  13. 	font-size: 60%;
  14. 	border: 0;
  15. 	background-color: transparent;
  16. 	color: black;
  17. 	margin-bottom: 5%;
  18. }
  19.  
  20. .notSel{
  21. 	width: 100%;
  22. 	height: 100%;
  23. 	text-align: left;
  24. 	font-size: 60%;
  25. 	border: 0;
  26. 	background-color: transparent;
  27. 	color: grey;
  28. 	margin-bottom: 5%;
  29. }

        我们要在.left中纵向排列出联系人的id，.person为每个id的容器，横向占据90%父级元素的宽，并有一条下边框以隔开每一个id。.sel和.notSel为select和not select的缩写，当未选中时，文字颜色为灰色，当选择其中一个id时，它会变为黑色。

  1. .oneMess{
  2. 	margin-left: auto;
  3. 	margin-right: auto;
  4. 	width: 80%;
  5. 	border-bottom: 1px solid lightgray;
  6. }
  7.  
  8. .you{
  9. 	width: auto;
  10. 	height: auto;
  11. 	padding-top: 2%;
  12. 	display: flex;
  13. 	justify-content: left;
  14. }
  15.  
  16. .me{
  17. 	width: auto;
  18. 	height: auto;
  19. 	padding-top: 2%;
  20. 	display: flex;
  21. 	justify-content: right;
  22. }
  23.  
  24. .urtime{
  25. 	color: rgb(140, 140, 140);
  26. 	font-size: 50%;
  27. 	display: flex;
  28. 	justify-content: left;
  29. 	margin-bottom: 1%;
  30. }
  31.  
  32. .mytime{
  33. 	color: rgb(140, 140, 140);
  34. 	font-size: 50%;
  35. 	display: flex;
  36. 	justify-content: right;
  37. 	margin-bottom: 1%;
  38. }

        在.upper中纵向排列出与该人物的聊天记录，每条信息的容器样式为.oneMess，和id一样，它也有一条下边框区别下一条信息。这里的.you、.urtime和.me、.mytime表示了对方与自己的信息与时间样式的样式，.you、.urtime左对齐，.me、.mytime右对齐，使用了display: flex;和justify-content: left/right;来实现，且时间的文字颜色浅于正文的颜色。

        <template>内相对于index.html的修改

  1. <template>
  2. 	<body>
  3. 		<div class="main">
  4. 			<div class="top">
  5. 				<div class="l">CHAT</div>
  6. 				<button class="r">登录</button>
  7. 			</div>
  8. 			<div class="bottom">
  9. 				<div class="left">
  10.                     <!------change------>
  11. 					<div v-for="(p, index) in person" :key="p.name" class="person">
  12. 						<button :class="[p.isSel ? 'sel':'notSel']" @click="selPerson(index)">{{ p.name }}</button>
  13. 					</div>
  14.                     <!------change------>
  15. 				</div>
  16. 				<div class="right">
  17. 					<div class="upper">
  18.                         <!------change------>
  19. 						<div v-for="item in list" :key="item.mess" class="oneMess">
  20. 							<div :class="[item.isMe ? 'me':'you']">{{ item.mess }}</div>
  21. 							<div :class="[item.isMe ? 'mytime':'urtime']">{{ item.time }}</div>
  22. 						</div>
  23.                         <!------change------>
  24. 					</div>
  25.                     <!------change------>
  26. 					<div class="lower">
  27. 						<textarea v-model="datas" name="area" id="area" cols="30" rows="3"></textarea>
  28. 						<button @click="add" class="send">发送</button>
  29. 					</div>
  30.                     <!------change------>
  31. 				</div>
  32. 			</div>
  33. 		</div>
  34. 	</body>
  35. </template>

        <!------change------>内为有修改的部分，接下来三部分文字按顺序对上三个修改部分进行解释。

1.显示人物id

  1. //people.json
  2.  
  3. [
  4.     {
  5.         "isOL": true,
  6.         "name": "girlfriend",
  7.         "isSel": true
  8.     },
  9.     {
  10.         "isOL": false,
  11.         "name": "buddy",
  12.         "isSel": false
  13.     },
  14.     {
  15.         "isOL": true,
  16.         "name": "mom",
  17.         "isSel": false
  18.     }
  19. ]

        对于.left的修改：left内的结构为：一个div包裹着一个button，div的样式对应<style>里的.person。

        div标签其中的v-for="(p, index) in person" :key="p.name"表示从person（由上面的people.json文件引入得来的响应式变量，这个在<script>标签中解释）这个列表中遍历，得到循环次数，把每个变量给p，把索引给index，并把该div以此循环次数渲染（语法上感觉有点像Python的：for i in arr）。这里person的循环次数为3，因此div也会渲染三次。

        button内的:class="[p.isSel ? 'sel':'notSel']" @click="selPerson(index)"，其中:class使用了三元运算符(judge? "true":"false")，person列表中每个对象都有一个isSel属性，标志着这个id是否被鼠标选中。@click表示当按下任意一个button时，它会调用selPerson(index)这个函数（也会在<script>标签中具体解释）。button的值为{{ p.name }}，vue会自动把每个p对象的name赋给每个div。

2.显示与人物的消息

  1. //data-girlfriend.json
  2.  
  3. [
  4.     {
  5.         "isMe": true,
  6.         "mess": "love you",
  7.         "time": "2024-6-22"
  8.     },
  9.     {
  10.         "isMe": false,
  11.         "mess": "ur a good man",
  12.         "time": "2024-6-22"
  13.     },
  14.     {
  15.         "isMe": true,
  16.         "mess": "...",
  17.         "time": "2024-6-22"
  18.     }
  19. ]

         对于.upper的修改：upper内的结构为一个大div包裹着两个竖直排列的div，上面的显示消息正文，下面的显示发送时间。

        大div对应样式为.oneMess，它和.left中的div一样使用v-for循环渲染，只是这次循环的对象是list列表（由上面data-girlfriend.json创建的响应式变量，会在<script>标签中解释）。

        下面的两个竖直排列的div也由三元运算符来判断其样式，条件是data-girlfriend.json中每个对象的isMe属性，如果是我发出的消息，isMe为true，文字右对齐，如果不是我发出的消息，isMe为false，文字左对齐，时间的样式同理。他们的内容也同button值的形式，不过上面循环的对象变为了item，调用时也要使用{{item.mess}}和{{item.time}}

3.数据发送

        对于.lower的修改：lower中包含了一个文本域textarea和一个发送按钮button。

        文本域使用v-model="datas"将其内部值与datas这个响应式变量绑定，文本域内的内容更改，datas的值也会更改。

        按钮使用@click="add"绑定了add函数（无参函数就不用写括号了），按下按钮add函数执行。

        <script>内容

  1.     import { ref } from 'vue';
  2.     import people from './assets/people.json'
  3. 	var person = ref(people);
  4. 	let data;  
  5. 	let list;
  6. 	let datas;
  7. 	
  8.  
  9. 	function changePerson(curPerson){
  10. 		switch (curPerson){
  11. 			case 'buddy':  
  12. 				data = require('./assets/data-buddy.json');  
  13. 				break;  
  14. 			case 'mom':  
  15. 				data = require('./assets/data-mom.json');  
  16. 				break;   
  17. 			case 'girlfriend': 
  18. 				data = require('./assets/data-girlfriend.json');  
  19. 				break;  
  20. 			default: 
  21. 				console.log("error");
  22. 				break;
  23. 		}
  24. 		list = ref(data);
  25. 		datas = ref('');
  26. 	}
  27. 	
  28. 	changePerson(person.value[0]["name"]);

        第一行中，ref为响应式变量，它必须要从‘vue’中引入，不过即使忘了写了，在创建ref变量时VS code也会帮你自动补上。

        第二三行，从assets引入了people.json文件并转为了person这个响应式变量，以便接下来使用。

        四五六行初始化了变量，但是没有赋值，接下来在changePerson函数中对各变量赋值。

        changePerson函数需要传入当前人名curPerson，使用switch-case语句判断读取哪一个json文件。读取后存储至data变量，再转换为响应式变量list。datas即文本域的内容目前设定为空，由于已经双向绑定，这里也可以看作给文本域初始化了。

        在程序开始时第一个调用changePerson函数并传入第一个人名，即可在各个人和消息记录间切换。

  1.     function selPerson(index){
  2. 		for(var i=0; i<person.value.length; i++){
  3. 			if(i!=index){
  4. 				person.value[i]["isSel"] = false;
  5. 			}else{
  6. 				person.value[i]["isSel"] = true;
  7. 				var curPerson = person.value[i]["name"];
  8. 				changePerson(curPerson);
  9. 			}
  10. 		}
  11. 	}

         selPerson用于改变当前被选中的id颜色。由于前面在<style>部分我们对button的三元运算符判断该对象的isSel属性，那么在该对象被选中并给selPerson传入了它的索引index时，函数会使用for循环将除该索引外的所有对象的isSel属性设为false，被选中的对象isSel属性设为true。

        结合上两部分代码和<template>、<style>，运行可得以下结果，被选择的id颜色深一些，右边上半部分的内容也会随着选择的不同而切换：

  1.     function add(){
  2. 		if(datas.value != ''){
  3. 			var sendTime = new Date();
  4. 			var info = {
  5. 				isMe: true,
  6. 				mess: datas.value,
  7. 				time: sendTime
  8. 			};
  9. 			list.value.push(info);
  10. 			datas.value = '';
  11. 		}
  12. 	}

        add函数用于将文本域内文字发送至消息记录框中，实现思路是当文本域内值不为空时，新建一个对象，对象中的isMe为true，mess即信息内容为双向绑定的变量datas（注意这里想使用响应式变量的值需要用.value取得该值），time则是使用new Date()创建了一个新的时间日期对象（只不过这个时间日期的格式非常“具体”，如果想要统一格式的话可以参照一下网络上关于JavaScript的Date()的相关文档）。

        创建完成后使用push()函数添加到该列表的末尾，再将双向绑定至文本域的变量datas的value变空，文本域也就被清空，可以执行下一次输入了。

        源码

简单的聊天程序（二）：配置Vue-cli以加速开发: 为上一篇：简单的聊天程序（一）：HTML+CSS实现响应式界面 的进阶部分，使用vue-cli辅助搭建vue程序。 - Gitee.com

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/892315
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号