位置: IT常识 - 正文

HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?(html5/css3)

编辑:rootadmin
HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?

推荐整理分享HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?(html5/css3),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html5 css3教程,css3模板,css3模板,html5模拟器,html5 css3教程,css3模板,html5+css3模板,html5 css3教程,内容如对您有帮助,希望把文章链接给更多的朋友!

转眼从2005年到现在,《亮剑》已经播出多年,但热度依然不减,而且每次重温我都会看出不一样的意蕴,今天,我就用HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?

目录

1. 实现思路

2. 素材介绍

3. 微信群聊顶部 + 底部 + 聊天区域实现

4. 聊天区域的实现

5. 聊天内容构思

6. 完整源代码

7. 最后

1. 实现思路

既然要实现《亮剑》的平安县城一役,还要做出精彩的微信群聊,那么必然要微信聊天的相关素材,例如顶部群聊名称、底部发送区域、中间的群聊区域、微信头像、微信文字、表情、聊天图片、其他人发送的消息和本人发送的消息等。

2. 素材介绍微信界面icon3个出场人物9人聊天表情 + 图片 3个3. 微信群聊顶部 + 底部 + 聊天区域实现HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?(html5/css3)

由于群聊必定内容较多,所以顶部和底部区域肯定是固定定位的形式,而且我们每天看到的微信聊天窗口底部会包含,打字按钮,输入框,表情按钮,加号按钮,所以此处会使用fixed定位和flex布局,同时很多小icon我已转成了base64的实现方式。

HTML代码如下:

<div class="chat-box"> <div class="head"> <div class="back"></div> <div class="title">《亮剑》讨论群(45)</div> <div class="opera-point">...</div> </div> <div class="char-body"> <!-- 此处稍后添加群聊代码 --> </div> <div class="foot"> <div class="keyboard"></div> <div class="input-box"> <input type="text" /> </div> <div class="face"></div> <div class="add"></div> </div></div>

CSS3代码如下:

html, body, * { margin: 0; padding: 0; font-size: 14px; font-family: Microsoft Yahei; } .chat-box { width: 375px; height: 667px; background: #000; } .head { position: fixed; top: 0; left: 0; height: 40px; width: 375px; } .head .back { position: absolute; height: 40px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzRCQTEyN0IzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzRCQTEyN0MzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEJBMTI3OTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEJBMTI3QTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PulQWg8AAAF/SURBVHja7Ni9SsRAEAfwnd1wldiIlqK1td4LiL7CFQaFCHZWgmVqH+GK4FejryA+gPcA9vZ2YnVkd5yAcBLOYJKZ3UWyRbIchPsxSzb/HUBEFfPQKvIxAP89MGn7wPHpuTLOtXoGMdl1WF4rUBug9cX25tpdnufRVHBssXxGhTu0Y6yjs1P6bRTLEo9Lp56ohquLasKcbk5sifvgAMBRRc5oWoau4FIcfRJOaPoQ+i1uwt2H3mZYcdxAdhwnUATHBRTDcQBFcX2B4rg+QC+4rsA9X7gunzpQ1j7S3QuudQWz7HKFjjBbNXNR4QhaYcMCi+LqkwxvtbSX0SWNJVGjAZhQ1T4W8Qk11e2GpkexRP5ZotVBHUmXWwlk122mCZnGAPwV+b3caQxAL0iOsCCK5IpbYkjOwCqC5I787EiJQxMrUurY2YScxNI8Woq0qKZtUpR062NmQB/+RALgqM3/+mgevRhI9imMvVIcewdtqtbH/M8BdOhRD8DA40uAAQDL2thNJDxLvAAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .head .title { margin: 0 70px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .head .opera-point { position: absolute; top: 12px; right: 12px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAMCAYAAAG2I8urAAAAAXNSR0IArs4c6QAAAddJREFUSA3VVr1OwzAQto0oqgQPABszD4BY4TVIfwR0aBgQb8ALIAbSoVD1J7wGrFRiAokVsbGwMSAVCXPn4PSSxklMGol6SM539913/jnbjEFzGu0j/GOTUvJACr5Owx0L5SBZVxtqDffbqbel7gNqG6K441ABglN3PyJ9YBHKk2qZXNVdzcJVJAwJzR92IvmgjlLH7RSrBhNPAwPohs508FqPf5wIjQVhOtg0xrgNA1GsQIW5yZ7ZFrVwTA+XIaLm/M4feHsRXUKnDOzSy+s7Lnclxrf59PhwFtPNdMvACn/orTGYEcpWXals0L5JLgOrtnGwx/k54+x51L/c4ZxPq8iUza9+3liss1vY57uUdzTwRJ6kysDi6RBJBhOrNY/vaYJGuQRscrlKtmVMIstQEJucEJenWbxGe0GsmKkodQZ1royExFAGVlVZq3Wy/jn5uknaT4ofkqxWlve73Ys3kk9hcRF4oerhtieXeeqoOWv5g3yrmRoHjIvCC6cQnM95m41vVkybWDa+c+YVeHllxQztNr4hyCDYxLLxNdCFaptY4CvwZo8/PcJgVIBzSPlSXQF5UXjDF716iTbdQ8b4AZxJwb2qZlv2Rn3vOs9L5C/z9d95fwDELzC7i+rQHQAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .foot { display: flex; position: fixed; left: 0; top: 627px; width: 375px; height: 40px; background: #222; } .foot .keyboard { margin-top: 8px; margin-left: 10px; width: 26px; height: 26px; background: url(./keyboard.png) no-repeat; background-size: 26px; } .foot .input-box { margin-left: 18px; } .foot .input-box input { margin-top: 7px; height: 26px; width: 240px; border: none; background: #302b2f; outline: none; } .foot .face { margin-top: 8px; margin-left: 10px; width: 26px; height: 26px; background: url(./face.png) no-repeat; background-size: 26px; } .foot .add { margin-top: 7px; margin-left: 6px; width: 26px; height: 26px; background: url(./add.png) no-repeat; background-size: 26px; } .char-body { width: 375px; height: 587px; overflow-y: auto; position: absolute; top: 40px; } .char-body::-webkit-scrollbar { display: none; }

阶段实现效果如下:

4. 聊天区域的实现

聊天区域要注意几点:

聊天区域不显示滚动条其他人头像和文字的排版以及本人头像与文字的排版问题如果需要插入表情和图片的排版控制实现聊天内容引用的排版聊天文案的小三角形的实现

 部分HTML代码如下(这里只展示部分,最后还会有完整源代码):

<div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 我要攻打平安县城啦! </div></div><div class="other-people-li"> <img src="./孔二愣子.png" class="head-photo" /> <div class="word"> 听上去很过瘾呐!不过是为什么啊??? </div></div>

部分CSS3代码如下(这里只展示部分,最后还会有完整源代码):

.other-people-li, .me-people-li { display: flex; margin-top: 20px;}.other-people-li .head-photo { margin-left: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px;}.other-people-li .word { display: inline-block; padding: 15px; background: #302b2f; color: #EEEfFF; margin-left: 10px; border-radius: 10px;}.other-people-li .word img { max-width: 238px;}5. 聊天内容构思

其实《亮剑》整部电视剧来说都是非常精彩的,在上班摸鱼回味电视剧本身,我又结合HTML5+CSS3的小知识做了这个群聊,但技术其实不是什么难点,难点在于构思群聊的内容。

6. 完整源代码

我把完整的源代码拿出来,粘贴到自己的HTML文档中就可以实现本文的效果啦,至于素材大家可以去百度上找,还是挺多的,完整源代码如下:

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>HTML5+CSS3的《亮剑》群聊</title> <style> html, body, * { margin: 0; padding: 0; font-size: 14px; font-family: Microsoft Yahei; } .chat-box { width: 375px; height: 667px; background: #000; } .head { position: fixed; top: 0; left: 0; height: 40px; width: 375px; } .head .back { position: absolute; height: 40px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzRCQTEyN0IzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzRCQTEyN0MzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEJBMTI3OTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEJBMTI3QTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PulQWg8AAAF/SURBVHja7Ni9SsRAEAfwnd1wldiIlqK1td4LiL7CFQaFCHZWgmVqH+GK4FejryA+gPcA9vZ2YnVkd5yAcBLOYJKZ3UWyRbIchPsxSzb/HUBEFfPQKvIxAP89MGn7wPHpuTLOtXoGMdl1WF4rUBug9cX25tpdnufRVHBssXxGhTu0Y6yjs1P6bRTLEo9Lp56ohquLasKcbk5sifvgAMBRRc5oWoau4FIcfRJOaPoQ+i1uwt2H3mZYcdxAdhwnUATHBRTDcQBFcX2B4rg+QC+4rsA9X7gunzpQ1j7S3QuudQWz7HKFjjBbNXNR4QhaYcMCi+LqkwxvtbSX0SWNJVGjAZhQ1T4W8Qk11e2GpkexRP5ZotVBHUmXWwlk122mCZnGAPwV+b3caQxAL0iOsCCK5IpbYkjOwCqC5I787EiJQxMrUurY2YScxNI8Woq0qKZtUpR062NmQB/+RALgqM3/+mgevRhI9imMvVIcewdtqtbH/M8BdOhRD8DA40uAAQDL2thNJDxLvAAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .head .title { margin: 0 70px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .head .opera-point { position: absolute; top: 12px; right: 12px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAMCAYAAAG2I8urAAAAAXNSR0IArs4c6QAAAddJREFUSA3VVr1OwzAQto0oqgQPABszD4BY4TVIfwR0aBgQb8ALIAbSoVD1J7wGrFRiAokVsbGwMSAVCXPn4PSSxklMGol6SM539913/jnbjEFzGu0j/GOTUvJACr5Owx0L5SBZVxtqDffbqbel7gNqG6K441ABglN3PyJ9YBHKk2qZXNVdzcJVJAwJzR92IvmgjlLH7RSrBhNPAwPohs508FqPf5wIjQVhOtg0xrgNA1GsQIW5yZ7ZFrVwTA+XIaLm/M4feHsRXUKnDOzSy+s7Lnclxrf59PhwFtPNdMvACn/orTGYEcpWXals0L5JLgOrtnGwx/k54+x51L/c4ZxPq8iUza9+3liss1vY57uUdzTwRJ6kysDi6RBJBhOrNY/vaYJGuQRscrlKtmVMIstQEJucEJenWbxGe0GsmKkodQZ1royExFAGVlVZq3Wy/jn5uknaT4ofkqxWlve73Ys3kk9hcRF4oerhtieXeeqoOWv5g3yrmRoHjIvCC6cQnM95m41vVkybWDa+c+YVeHllxQztNr4hyCDYxLLxNdCFaptY4CvwZo8/PcJgVIBzSPlSXQF5UXjDF716iTbdQ8b4AZxJwb2qZlv2Rn3vOs9L5C/z9d95fwDELzC7i+rQHQAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .foot { display: flex; position: fixed; left: 0; top: 627px; width: 375px; height: 40px; background: #222; } .foot .keyboard { margin-top: 8px; margin-left: 10px; width: 26px; height: 26px; background: url(./keyboard.png) no-repeat; background-size: 26px; } .foot .input-box { margin-left: 18px; } .foot .input-box input { margin-top: 7px; height: 26px; width: 240px; border: none; background: #302b2f; outline: none; } .foot .face { margin-top: 8px; margin-left: 10px; width: 26px; height: 26px; background: url(./face.png) no-repeat; background-size: 26px; } .foot .add { margin-top: 7px; margin-left: 6px; width: 26px; height: 26px; background: url(./add.png) no-repeat; background-size: 26px; } .char-body { width: 375px; height: 587px; overflow-y: auto; position: absolute; top: 40px; } .char-body::-webkit-scrollbar { display: none; } .other-people-li, .me-people-li { display: flex; margin-top: 20px; } .me-people-li { display: flex; flex-direction: row-reverse; margin-top: 20px; } .other-people-li .head-photo { margin-left: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .head-photo { margin-right: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .word { display: inline-block; padding: 15px; background: #a1e75c; color: #000; margin-right: 10px; border-radius: 10px; } .other-people-li .word { display: inline-block; padding: 15px; background: #302b2f; color: #EEEfFF; margin-left: 10px; border-radius: 10px; } .other-people-li .word img { max-width: 238px; } .me-people-li .word::before { display: block; content: ''; width: 0; height: 0; border-left: #a1e75c 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; right: 64px; } .other-people-li .word::before { display: block; content: ''; width: 0; height: 0; border-right: #302b2f 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; margin-left: -22px; } .into-box { margin-bottom: 20px; padding-right: 74px; text-align: right; } .into-box span { display: inline-block; margin-top: 8px; padding: 2px 6px; background: #CCC; border-radius: 4px; color: #898989; } </style> </head> <body> <div class="chat-box"> <div class="head"> <div class="back"></div> <div class="title">《亮剑》讨论群(45)</div> <div class="opera-point">...</div> </div> <div class="char-body"> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 我要攻打平安县城啦! </div> </div> <div class="other-people-li"> <img src="./孔二愣子.png" class="head-photo" /> <div class="word"> 听上去很过瘾呐!不过是为什么啊??? </div> </div> <div class="other-people-li"> <img src="./丁伟.png" class="head-photo" /> <div class="word"> 老李的话我信,但总得有个原因吧? </div> </div> <div class="other-people-li"> <img src="./秀琴.png" class="head-photo" /> <div class="word"> 因为小日本把我抓走啦 </div> </div> <div class="other-people-li"> <img src="./山本.png" class="head-photo" /> <div class="word"> 捕虜の携帯電話を没収した </div> </div> <div class="other-people-li"> <img src="./大彪.png" class="head-photo" /> <div class="word"> 团长,他们把秀琴嫂子手机没收啦 </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 1营,2营,骑兵连,王德胜,TND给我打 </div> </div> <div class="other-people-li"> <img src="./老兵不抢东西.png" class="head-photo" /> <div class="word"> <img src="./意大利炮.png" /> </div> </div> <div class="other-people-li"> <img src="./老兵不抢东西.png" class="head-photo" /> <div class="word"> 团长,看 </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 这是啥? </div> </div> <div class="other-people-li"> <img src="./孔二愣子.png" class="head-photo" /> <div class="word"> 啥玩意? </div> </div> <div class="other-people-li"> <img src="./丁伟.png" class="head-photo" /> <div class="word"> 炮!!! </div> </div> <div class="other-people-li"> <img src="./山本.png" class="head-photo" /> <div class="word"> 私のおさん </div> </div> <div class="other-people-li"> <img src="./大彪.png" class="head-photo" /> <div class="word"> 团长,小日本说“WC” </div> </div> <div class="other-people-li"> <img src="./楚云飞.png" class="head-photo" /> <div class="word"> <img src="./捂脸.png" /> </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 那还废什么话,开炮!!! </div> </div> <div class="other-people-li"> <img src="./山本.png" class="head-photo" /> <div class="word"> あなたはあなたの嫁を必要としないのですか。 </div> </div> <div class="other-people-li"> <img src="./大彪.png" class="head-photo" /> <div class="word"> 团长,嫂子还在上面 </div> </div> <div class="other-people-li"> <img src="./山本.png" class="head-photo" /> <div class="word"> 話をしよう </div> </div> <div class="other-people-li"> <img src="./大彪.png" class="head-photo" /> <div class="word"> 团长,山本说想谈一谈 </div> </div> <div class="other-people-li"> <img src="./老兵不抢东西.png" class="head-photo" /> <div class="word"> <img src="./爆炸.png" /> </div> </div> <div class="other-people-li"> <img src="./老兵不抢东西.png" class="head-photo" /> <div class="word"> 团长,炸了 </div> </div> <div class="other-people-li"> <img src="./山本.png" class="head-photo" /> <div class="word"> 卧槽 </div> </div> <div class="other-people-li"> <img src="./秀琴.png" class="head-photo" /> <div class="word"> 。。。。。。 </div> </div> <div class="other-people-li"> <img src="./老兵不抢东西.png" class="head-photo" /> <div class="word"> 不是我开的跑 </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 谁干的? </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 谁干的? </div> </div> <div class="other-people-li"> <img src="./李云龙.png" class="head-photo" /> <div class="word"> 谁干的? </div> </div> <div class="me-people-li"> <img src="./小田.png" class="head-photo" /> <div class="word"> 不是要开炮吗? </div> </div> <div class="into-box"> <span> 李云龙:那还废什么话,开炮!!! </span> </div> </div> <div class="foot"> <div class="keyboard"></div> <div class="input-box"> <input type="text" /> </div> <div class="face"></div> <div class="add"></div> </div> </div> </body></html>7. 最后

如果你在上班摸鱼的时候看到这篇博客,或者是在工作学习忙碌之余看到这篇博客,希望读完以后可以让你感到轻松一些,如果你真的感到轻松了,那么这篇博客的目的也就算是达到了。

另外,狗哥和天哥最近也在输出实战类专栏(采用SpringBoot + SpringCloud + Vue前后端分离的形式),目的是希望初学者或者是需要做毕业设计的毕业生,可以跟着专栏从0到1实现一个属于自己的项目。目前专栏的进度我跟大家做一个汇报,喜欢的小伙伴可以抓紧订阅一下:

Vue + SpringBoot前后端分离项目实战 - 前端目录

1. 手把手带你做一套毕业设计-征程开启2. 我应该把毕业设计做到什么程度才能过关?3. 做毕业设计,前端部分你需要掌握的6个核心技能4. 基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

SpringBoot+Vue前后端分离项目实战 - 服务端目录

1. 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇2. 天狗实战SpringBoot+Vue(一)环境安装3. 天狗实战SpringBoot+Vue(二)项目结构搭建(上)

回归《亮剑》和本文的内容,我想出了一个非常有意思的投票内容,希望你喜欢这个投票环节呀

本文链接地址:https://www.jiuchutong.com/zhishi/299830.html 转载请保留说明!

上一篇:消息称中国移动将发布“九天”1+N大模型(中国移动常被称为)

下一篇:【Node.js实战】一文带你开发博客项目之登录(前置知识)(node js教程)

  • 微博粉丝裂变技巧(微博粉丝变现什么意思)

    微博粉丝裂变技巧(微博粉丝变现什么意思)

  • 创维电视怎么安装第三方应用(创维电视怎么安装wps)

    创维电视怎么安装第三方应用(创维电视怎么安装wps)

  • 花小猪怎么预约打车(花小猪怎么预约打车时间视频)

    花小猪怎么预约打车(花小猪怎么预约打车时间视频)

  • 撤销操作的快捷键(撤销操作的快捷组合键)

    撤销操作的快捷键(撤销操作的快捷组合键)

  • 手机截屏为什么相册里没有(手机截屏为什么是黑屏)

    手机截屏为什么相册里没有(手机截屏为什么是黑屏)

  • 硬盘是什么的一种(硬盘是什么以及作用是什么)

    硬盘是什么的一种(硬盘是什么以及作用是什么)

  • 苹果哪些机型有nfc(苹果哪些机型有灵动岛)

    苹果哪些机型有nfc(苹果哪些机型有灵动岛)

  • 华为p30pro屏幕刷新率是多少赫兹(华为mate30pro手机屏)

    华为p30pro屏幕刷新率是多少赫兹(华为mate30pro手机屏)

  • 抖音币充值安卓和苹果是一样的吗(抖音币充值平台app)

    抖音币充值安卓和苹果是一样的吗(抖音币充值平台app)

  • 怎样清除淘宝里已完成的交易记录(怎样清除淘宝里的垃圾)

    怎样清除淘宝里已完成的交易记录(怎样清除淘宝里的垃圾)

  • 计算机主机包括什么(计算机主机包括哪两个部分)

    计算机主机包括什么(计算机主机包括哪两个部分)

  • hp电脑开机黑屏怎么办(hp电脑开机黑屏没反应鼠标也无反应)

    hp电脑开机黑屏怎么办(hp电脑开机黑屏没反应鼠标也无反应)

  • 微信怎么恢复红点提示(微信怎么恢复红包功能)

    微信怎么恢复红点提示(微信怎么恢复红包功能)

  • 抖音注销后身份证可以绑定其他号嘛(抖音注销后身份信息还可以用吗)

    抖音注销后身份证可以绑定其他号嘛(抖音注销后身份信息还可以用吗)

  • 电脑与打印机脱机怎么连接(电脑与打印机脱机状态怎么恢复正常打印)

    电脑与打印机脱机怎么连接(电脑与打印机脱机状态怎么恢复正常打印)

  • iphonex电池容量多大(iphonexs电池容量)

    iphonex电池容量多大(iphonexs电池容量)

  • ipad怎么清理垃圾文件(ipad怎么清理垃圾软件)

    ipad怎么清理垃圾文件(ipad怎么清理垃圾软件)

  • vivo隐私空间在哪里(vivos1隐私空间)

    vivo隐私空间在哪里(vivos1隐私空间)

  • 苹果耳机怎么连接(苹果耳机怎么连接安卓手机)

    苹果耳机怎么连接(苹果耳机怎么连接安卓手机)

  • ios13信号差解决办法(ios13.3信号不好)

    ios13信号差解决办法(ios13.3信号不好)

  • 微信群里怎么创建接龙表格(微信群里怎么创建小程序)

    微信群里怎么创建接龙表格(微信群里怎么创建小程序)

  • 抖音卡点视频怎么制作(抖音卡点视频怎么增加视频长度)

    抖音卡点视频怎么制作(抖音卡点视频怎么增加视频长度)

  • 手机如何将图片转文字(手机如何将图片压缩打包发送)

    手机如何将图片转文字(手机如何将图片压缩打包发送)

  • 携程app怎么取消值机(携程怎么取消订单?)

    携程app怎么取消值机(携程怎么取消订单?)

  • 华硕z390超频设置(华硕z390h超频)

    华硕z390超频设置(华硕z390h超频)

  • 如何在Win11中添加无线打印机?Win11中添加无线打印机操作方法(windows 11怎么用)

    如何在Win11中添加无线打印机?Win11中添加无线打印机操作方法(windows 11怎么用)

  • 一觉醒后ChatGPT 被淘汰了(一觉醒后浑身酸痛)

    一觉醒后ChatGPT 被淘汰了(一觉醒后浑身酸痛)

  • 资产总额的季度怎么算
  • 小规模企业税务登记流程
  • 代理费住宿费都包括什么
  • 高新企业奖励金怎么领
  • 资产负债表第二季度年初余额怎么填
  • 通用发票
  • 个体户银行开户是开公户还是私户
  • 什么经营范围可以开茶叶发票
  • 会计分录借贷符号
  • 企业为什么会有两个中征码
  • 已经认证的发票对方可以作废吗
  • 代收税款
  • 支票结算的账务处理
  • 固定资产采购计入什么科目
  • 赞助支出为什么不算广告费
  • 不能税前扣除的费用有哪些
  • 品种法完工产品成本的单位成本怎么算
  • 合同印花税多交了怎么退
  • 小公司发工资怎么做账
  • 培训费增值税专用发票怎么开
  • 增值税税控系统专用设备
  • 事业单位购入车辆如何做账
  • 网络科技定额发票怎么做分录?
  • 海关票怎么认证
  • windows10如何设置锁屏时间
  • 开具信息咨询费的发票
  • vue3的生命周期
  • 马蹄莲的养殖方法和注意事项视频
  • 交所得税的会计科目
  • 无形资产的摊销计入什么科目
  • 工资属于收益类科目吗
  • 财务费用为什么是负数表示
  • 股东分红税率是20%还是25%
  • pytorch中embedding
  • phpcms怎么用
  • 实际成本法核算方法
  • 小规模纳税人涉税会计分录是哪几个科目
  • 冲减管理费用为什么放在借方
  • 小规模纳税人增值税税率
  • 织梦一直显示上一页和下一页
  • 资产减值损失借方余额在利润表怎么填列
  • 固定资产减少处理
  • 税务处理决定书撤销情形
  • 房地产项目完工清算报告
  • 企业取得财产转让收入
  • 销售退回的账务处理会计分录
  • 实收金额少于发票入账
  • 增值税进项税额抵扣期限最新
  • 长期借款利息是财务费用吗
  • 年末转出未交增值税借方余额怎么处理
  • 没实收资本还怎么做账
  • 收据为什么不能写今收到
  • 对外投资的会计科目
  • 公司法人借款给企业属于关联交易吗?
  • 如何填写出售固定资产表
  • sql触发器语句
  • winxp任务管理器在哪
  • win10系统的设备管理器在哪里
  • linux手动设置ip指令
  • macos 安装win7
  • win10网卡驱动不正常连不上网怎么办
  • win7 64位旗舰版如何实现快速删除U盘?win7快速删除U盘的设置方法
  • 磁盘分区右键是灰色的
  • unity hud优化
  • opengl learning
  • css网站布局实录 pdf
  • Python中lambda的作用
  • js格式化输出
  • jquery从左到右渐渐显示
  • 事件委托jq
  • 焦点问题是什么
  • 用js做表单验证
  • jquery detach
  • 烟酒税收占比
  • 河南省地税税务局官网
  • 如何在个税app中设置企业登录密码
  • 双公开双反馈什么意思
  • 企业报税年报如何填写
  • 发票清单盖章样本图片
  • 本期应纳的增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设