文章目錄

• 前言
• 當前項目結構
• 首頁實現
• • 首頁內容
• 樹洞模塊
• • 日志模塊
  • 好友模塊
• 總結

前言

零零散散，花費了將近三天的時間，我終于重新從0開始搭建出了一個新的博客社區的用戶端的大體框架。目前各個組件和功能已經確定，接下來只要細化組件然后懟服務即可。關于后臺管理系統的話我這邊是打算直接嫖開源后臺管理系統來做了，目前已經確定好了嫖哪個開源項目。現在用戶界面還剩下一些例如fork頁面，博文頁面，問題頁面，社區管理部分沒寫，這些玩意寫起來也快，反正那些玩意早就定義好了。

ok,我們來看看目前的主要效果。

當前項目結構

路由名與組件名一樣

首頁實現

這里也簡單說一下那些個實現吧。
先前有幾篇博客已經說了怎么做的消息，個人中心模塊，文章編寫模塊。

現在就先隨便寫寫主頁是怎么做的。

<template> <div style="height: 960px;width: 80%;margin: 0 auto"><el-row :gutter="22"><el-col :span="16"><div class="grid-content bg-purple"><div class="block" style="width: 100%;margin: 0 auto"><span class="demonstration"><i class="el-icon-position">&nbsp;精選推薦：</i></span><br><br><br><el-carousel height="220px" :interval="4000" type="card"><el-carousel-item v-for="item in Items" :key="item"><div style="width:80%;height: 80%;margin: 0 auto"><imgstyle="width:100%;height: 100%;border-radius: 5px"v-bind:src="item.image"class="image"><p class="message" style="font-weight:bold;text-align: center;width: 100%;margin: 0 auto">{{item.info}}</p></div></el-carousel-item></el-carousel><br><br><div style="margin-left: 2%"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">熱門文章</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/lastArticle'}">最新文章</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/hotAns'}">熱門問答</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/lastAns'}">最新問答</el-breadcrumb-item><el-breadcrumb-item ></el-breadcrumb-item></el-breadcrumb></div><br><br><div style="width: 98%;margin: 0 auto"><router-view></router-view></div></div></div></el-col><el-col :span="7"><div class="grid-content bg-purple" ><p style="color: snow;background-color: #439dea;height: 35px;border-radius: 5px">Calendar：</p><el-calendar class="test" style="background-color: #fffefe"><!-- 這里使用的是 2.5 slot 語法，對于新項目請使用 2.6 slot 語法--><templateslot="dateCell"slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '??' : ''}}</p></template></el-calendar><br><i class="el-icon-bell">通告：</i><br><br><div style="width: 95%"><el-carousel indicator-position="outside"><el-carousel-item v-for="item in ItemsNot" :key="item"><div style="width:100%;height: 80%;margin: 0 auto"><imgstyle="width:100%;height: 150px;border-radius: 5px"v-bind:src="item.image"class="image"><p class="message" style="font-weight: bold;font-size: 2px;text-align: center;width: 100%;margin: 0 auto">{{item.info}}</p></div></el-carousel-item></el-carousel></div></div></el-col></el-row> </div> </template><script> export default {name: "homepage",data(){return{Items: [{"image":"/static/temporary/headpic.jpg","info":"手寫Spring5核心注解"},{"image":"/static/temporary/showbg.jpg","info":"深入JVM"},{"image":"/static/temporary/showbg1.jpg","info":"情感問答：要不要做舔狗"},{"image":"/static/temporary/showbg2.jpg","info":"社區推薦：Huterox社區"},],ItemsNot: [{"image":"/static/temporary/headpic.jpg","info":"WhiteHole V0.7火熱開發中"},{"image":"/static/temporary/showbg.jpg","info":"2022未來可期"},]}} } </script><style scoped> .el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0; }.el-carousel__item:nth-child(2n) {background-color: white; }.el-carousel__item:nth-child(2n+1) {background-color: white; } .el-col {border-radius: 4px; } .bg-purple-dark {background: white; } .bg-purple {background: white; } .bg-purple-light {background: white; } .grid-content {border-radius: 4px;min-height: 36px; } .row-bg {padding: 10px 0;background-color: #f9fafc; }.message{width: 10em;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; }.is-selected {color: #1989FA; } .test /deep/ .el-calendar-table .el-calendar-day{width: 100%;height: 35px;font-size: 1px; } </style>

首頁內容

然后咱們說說這個顯示熱門文章的玩意。由于都是類似的，所以也是只是說一個。

<template><div style="width: 100%"><br><br><div style="width: 100%;margin-left: 1%" class="main"><el-card shadow="hover" v-for="(message,index) in Messages" :key="index"><div style="height:100px"><div style="width:14%;height: 100%;border-radius: 100px;display:inline-block;"><imgstyle="width:100%;height: 100%;border-radius: 100px"v-bind:src="message.image"class="image"></div><div style="display:inline-block;margin-left: 5%;width: 60%"><p class="message" style="font-weight:bold">{{message.name}}</p><p style="font-weight: lighter" class="message">{{message.info}}</p><p class="message">閱讀：<i class="el-icon-view"></i>{{message.number}}&nbsp;&nbsp;收藏：<i class="el-icon-star-off"></i>{{message.favorite}}&nbsp;&nbsp;權限：<i class="el-icon-coordinate"></i>{{message.level}}&nbsp;&nbsp;<i v-if="message.level>=2">fork:{{message.fork}}</i></p></div><div style="width:18%;height: 100%;display:inline-block;"><p style="text-align: center">{{message.data}}</p><br><br></div></div><br></el-card></div><br><div class="footer" style="margin: 0 auto;width: 100%;"></div></div></template><script> export default {name: "hotArticle",data(){return{Messages:[{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 1,"fork": 2,"image":"/static/temporary/headpic.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 1,"fork": 2,"image":"/static/temporary/headpic.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 2,"fork": 2,"image":"/static/temporary/showbg.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 3,"fork": 22,"image":"/static/temporary/showbg1.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 3,"fork": 22,"image":"/static/temporary/showbg1.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 3,"fork": 22,"image":"/static/temporary/showbg1.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 3,"fork": 22,"image":"/static/temporary/showbg1.jpg"},{"info":"Spring 是一個輕量級的開發框架","name":"Spring 5 核心原理解析","number": 999,"data":"2022-3-27",favorite: 999,level: 3,"fork": 22,"image":"/static/temporary/showbg1.jpg"},]}}, } </script><style scoped> .message{width: 25em;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; } </style>

樹洞模塊

由于其他的模塊與主頁類似，所以就不說了。
主要說說樹洞，目前是寫了兩個功能，一個是日志，一個是好友功能（還有細節沒寫）

<template><div style="height: 960px;width: 80%;margin: 0 auto"><el-row :gutter="22"><el-col :span="16"><div class="grid-content bg-purple"><div class="block" style="width: 100%;margin: 0 auto"><br><br><br><div style="margin-left: 2%"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/treehole' }">日志</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/treehole/haoYou'}">好友</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/treehole/piaoLiu'}">漂流瓶</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/treehole/baiDongZhi'}">白洞值</el-breadcrumb-item><el-breadcrumb-item ></el-breadcrumb-item></el-breadcrumb></div><br><br><div style="width: 98%;margin: 0 auto"><router-view></router-view></div></div></div></el-col><el-col :span="7"><div class="grid-content bg-purple" ><p style="color: snow;background-color: #439dea;height: 35px;border-radius: 5px">Calendar：</p><el-calendar class="test" style="background-color: #fffefe"><!-- 這里使用的是 2.5 slot 語法，對于新項目請使用 2.6 slot 語法--><templateslot="dateCell"slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '??' : ''}}</p></template></el-calendar></div></el-col></el-row></div> </template><script> export default {name: "treehole",data(){return{}} } </script><style scoped> .el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0; }.el-carousel__item:nth-child(2n) {background-color: white; }.el-carousel__item:nth-child(2n+1) {background-color: white; } .el-col {border-radius: 4px; } .bg-purple-dark {background: white; } .bg-purple {background: white; } .bg-purple-light {background: white; } .grid-content {border-radius: 4px;min-height: 36px; } .row-bg {padding: 10px 0;background-color: #f9fafc; }.message{width: 10em;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; }.is-selected {color: #1989FA; } .test /deep/ .el-calendar-table .el-calendar-day{width: 100%;height: 35px;font-size: 1px; } </style>

日志模塊

這里其實是主要使用了動態加載去做，所以要說一下

<template> <div><br><br><div><div style="position: fixed;top: 200px;left: 52%;width: 80px;height: 80px"><el-button style="width: 100%;height: 100%"@click="submit" type="primary"icon="el-icon-edit" circle>寫寫</el-button></div></div><div class="block" ><el-empty v-if="Message.length===0" description="您還沒有日志喲~"></el-empty><el-timeline v-if="Message.length>0" v-infinite-scroll="load" v-bind:infinite-scroll-distance="long" infinite-scroll-disabled="busy"><el-timeline-itemv-for="(message, index) in Message":key="index":data="message.data"><el-card class="show" style="background-color: white;width: 60%"><el-popoverplacement="top-start"width="500"trigger="hover"v-bind:content="message.content"><el-button class="show1" style="border-radius: 10px" slot="reference">{{message.data}}</el-button></el-popover></el-card></el-timeline-item></el-timeline></div><el-dialogstyle="width:80%;margin: 0 auto"title="日志":visible.sync="dialogFormVisible"><el-form :model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="日志內容" prop="content"><el-input type="textarea" :rows="10" v-model="ruleForm.content"placeholder="同一天提交的日志將被覆蓋喲~"></el-input></el-form-item></el-form><div style="margin: 0 auto" slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button></div></el-dialog></div> </template><script> export default {name: "riZhi",data() {return {long: 2,Message: [{content: 'WhiteHoleV0.7設計初稿',data: '2022-03-27',}, {content: '吃飽了沒事做開始繼續完成這個WhiteHoleV0.7',data: '2022-05-01',},{content: '吃飽了沒事做開始繼續完成這個WhiteHoleV0.7',data: '2022-05-02',},{content: '吃飽了沒事做開始繼續完成這個WhiteHoleV0.7，要加快進度了',data: '2022-05-03',},],dialogFormVisible: false,ruleForm: {content: '',},rules: {content: [{required: true, message: '請編寫您的日志', trigger: 'blur'},{min: 10, max: 500, message: '長度在 10 到 500 個字符', trigger: 'blur'}],}};},methods: {load () {//這部分讓你的axios去動態加載let temp=[// {// content: 'WhiteHoleV0.7設計初稿',// data: '2022-03-27',// }]for (let i = 0; i < temp.length; i++) {this.Message.push(temp[i])}},// 提交submit(){//點擊提交后既可以獲取html內容，又可以獲得markdown的內容，之后存入到服務端就可以了this.dialogFormVisible=true;},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {if (this.ruleForm.que===""){alert("標題不能為空")return}alert('submit!');this.dialogFormVisible = false;} else {return false;}});},}, } </script><style scoped> .show:hover{box-shadow: 0px 15px 30px rgb(24, 160, 236);margin-top: 20px;background-color: #1e6ce1; } .show1:hover{box-shadow: 0px 15px 30px rgb(24, 160, 236);margin-top: 5px;background-color: #cdda19;}</style>

好友模塊

這個也是使用了JwChat
但是那個破玩意，我調了半天沒有我想要的結果，所以最后還是想了個很直接暴力的方法。
就是直接側邊欄跳轉。后面讓路由傳參，區別用戶。

<template><div style="width: 100%"><el-container style="height: 600px; border: 1px solid #eee"><el-aside width="215px" style="background-color: white"><el-card style="height: 80px" shadow="hover" v-for="(message,index) in Messages" :key="index"> <!-- 這邊后面做參數傳遞--><router-link to="/treehole/haoYou/haoYouChat" class="alink"><div style="height:50px"><div style="width:50px;height: 100%;border-radius: 100px;display:inline-block;"><imgstyle="width:100%;height: 100%;border-radius: 100px"v-bind:src="message.image"class="image"></div><div style="display:inline-block;width: 100px;height: 50px"><p class="message" style="font-size: 1px;color: #3492e7;font-weight: bold">{{message.name}}</p><br></div></div></router-link></el-card></el-aside><el-containerstyle="background-repeat: no-repeat;background-size:100% 100%;"><el-main><div style="width: 80%;margin: 0 auto"><router-view></router-view></div></el-main></el-container></el-container></div> </template> <script> //我們這邊默認保留100條歷史信息吧，不然頂不住 export default {name: "haoYou",data () {return {inputMsg: '',list: [],tool: {callback: this.toolEvent},Messages:[{"name":"Futerox","image":"/static/temporary/headpic.jpg"},{"name":"Kuterox","image":"/static/temporary/showbg.jpg"},{"name":"Luterox","image":"/static/temporary/showbg1.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},{"name":"Luterox","image":"/static/temporary/showbg1.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},{"name":"Luterox","image":"/static/temporary/showbg1.jpg"},{"name":"Muterox","image":"/static/temporary/headpic.jpg"},]}},methods: {bindEnter (e) {console.log(e)const msg = this.inputMsgif (!msg) return;//這個是我的消息發送的const msgObj = {"date": "2022/05/3 21:19:07","text": { "text": msg },"mine": true,"img": "/static/temporary/headpic.jpg"}this.list.push(msgObj)},toolEvent (type, obj) {console.log('tools', type, obj)},talkEvent (play) {console.log(play)},},mounted () {const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'//這個是對面發過來的消息const list = [{"date": "2022/05/3 21:19:07","text": { "text": "起床不" },"mine": false,"name": "Futerox","img": "/static/temporary/showbg.jpg"},]this.list = list} } </script><style scoped> .el-header {background-color: #e5efe2;color: #333;line-height: 60px; }.el-aside {color: #333; } .router-link-active {text-decoration: none; }.alink{text-decoration: none; }</style> <template><div ><JwChat :taleList="list" @enter="bindEnter" @clickTalk="talkEvent" v-model="inputMsg":toolConfig="tool" ></JwChat></div></template> <script> //我們這邊默認保留100條歷史信息吧，不然頂不住 export default {name: "haoYouChat",data () {return {inputMsg: '',list: [],tool: {callback: this.toolEvent},}},methods: {bindEnter (e) {console.log(e)const msg = this.inputMsgif (!msg) return;//這個是我的消息發送的const msgObj = {"date": "2022/05/3 21:19:07","text": { "text": msg },"mine": true,"img": "/static/temporary/headpic.jpg"}this.list.push(msgObj)},toolEvent (type, obj) {console.log('tools', type, obj)},talkEvent (play) {console.log(play)},},mounted () {const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'//這個是對面發過來的消息const list = [{"date": "2022/05/3 21:19:07","text": { "text": "起床不" },"mine": false,"name": "Futerox","img": "/static/temporary/showbg.jpg"},]this.list = list} } </script>

總結

就先這樣吧，后面有時間我就慢慢寫。什么時候做好，看心情。

總結

以上是生活随笔為你收集整理的WhiteHoleV0.7界面预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。