WhiteHoleV0.7界面预览

Huterox
181 阅读2分钟

前言

零零散散，花费了将近三天的时间，我终于重新从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">
                <img
                  style="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 语法-->
          <template
            slot="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">
                <img
                  style="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;">
            <img
              style="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 语法-->
            <template
              slot="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-item
        v-for="(message, index) in Message"
        :key="index"
        :data="message.data"
      >
        <el-card class="show" style="background-color: white;width: 60%">
          <el-popover
            placement="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-dialog
    style="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;">
              <img
                style="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-container
        style="
        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.inputMsg
      if (!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.inputMsg
      if (!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>

总结

就先这样吧，后面有时间我就慢慢写。什么时候做好，看心情。

avatar
文章
阅读
粉丝