Node系列学习之简单博客前台(二)

179 阅读1分钟

这是我参与更文挑战的第22天,活动详情查看:更文挑战

上一篇文章对前台项目进行了初始化, 从零开始使用Vue-CLi创建项目, 简单的对 element-ui 和 axios 进行配置与封装, 删改了部分路由, 今天开始正式写博客的前台页面~

登录页面路由配置

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login/index.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

登录页面

src/views/Login/index.vue

<template>
  <div class="tmier-login">
    <h1>登录</h1>
    <el-input class="tmier-login-input" v-model="username" placeholder="账号"></el-input>
    <el-input class="tmier-login-input" v-model="password" type="password" placeholder="密码"></el-input>
    <el-button type="primary" class="tmier-login-input" @click="clickLogin">登录</el-button>
  </div>
</template>

<script>
//import x from ''
import { LoginAPI } from '@/api/login.js'
export default {
  components: {},
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {},
  methods: {
    async clickLogin() {
      const res = await LoginAPI(this.username, this.password)
      if(res.errno == 0) {
        this.$message.success('登录成功~')
        this.$router.push({name: 'Home'})
      }
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()
.tmier-login {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.7);
  // background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  // -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  user-select: none;
  .tmier-login-input {
    width: 300px;
    margin-bottom: 20px;
  }
}
</style>

来看一下效果:

image-20210622234143838

登陆成功之后, 进入Home页面

这里主要是测试登录接口, 登录只是让用户对自己的文章进行管理, 不登录的话应该也是可以看到文章列表的~

博客列表

关键文件: views/BlogList/index.vue

<template>
  <div class="blog-list">
    <h1>Tmier的博客</h1>
    <div class="tmier-list-item" v-for="item in 6">
      <div class="content-item">
        <div class="content-item-header">
          <div class="item-info">
            <span class="header-author">前端二师兄</span>
            <span class="dividing">|</span>
            <span class="header-public-time">20小时前</span>
          </div>
          <div class="tags-list">
            <div class="tag-item">前端</div>
            <div class="tag-item">Node</div>
          </div>
        </div>
        <div class="item-title">Vue.Draggable中文文档参考 | 官方文档翻译</div>
        <div class="main-row">
          <div class="main-box">
            <div class="abstract">文档来源于官方文档, 因为官网文档为英文文档, 看的吃力, 而且在网上也并未查询到相关中文文档,所以本人使用翻译工具与查阅相关资料进行逐行翻译, 如有不足请指正~</div>
          </div>
          <div class="cover-img">
            <img :src="imgURL" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import x from ''
export default {
  components: {},
  data() {
    return {
      imgURL: 'http://oss.emier.cn/images/20210622232101.png'
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang='scss' scoped>
//@import url()
.blog-list {
  width: 100%;
  text-align: center;
  padding-top: 30px;
  background: #f4f5f5;
  .tmier-list-item {
    width: 960px;
    margin: 0 auto;
    // height: 100%;
    .content-item {
      width: 700px;
      height: 170px;
      background: #fff;
      cursor: pointer;
      border-bottom: 1px solid #e5e6eb;
      box-sizing: border-box;
      padding: 16px 20px 0;
      text-align: left;
      &:hover {
        background: #fafafa;
      }
      .content-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .item-info {
          .header-author {
            margin-right: 10px;
            opacity: 0.81;
          }
          .dividing {
            margin-right: 10px;
            height: 18px;
            overflow: hidden;
            opacity: 0.3;
            font-size: 14px;
          }
          .header-public-time {
            opacity: 0.6;
          }
        }
        .tags-list {
          display: flex;
          .tag-item {
            flex-shrink: 0;
            margin-left: 8px;
            padding: 0 8px;
            background: #fafafa;
            border-radius: 2px;
            font-size: 14px;
            line-height: 22px;
            color: #4e5969;
          }
        }
      }
      .item-title {
        text-align: left;
        margin-top: 14px;
        margin-bottom: 12px;
        font-size: 18px;
      }
      .main-row {
        width: 100%;
        padding-bottom: 16px;
        display: flex;
        .main-box {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .abstract {
            margin-bottom: 14px;
            font-size: 14px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            color: #4e5969;
            height: 70px;
          }
        }
        .cover-img {
          flex: 0 0 auto;
          width: 142px;
          height: 80px;
          margin-left: 16px;
          background-color: #fff;
          border-radius: 2px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>

模仿的掘金的展示方式, 目前还没有完成, 想在后面一列添加点好玩的东西,如: 星星推荐指数~ 让每一个看你博客的人都能够根据你的推荐第一时间获取你的有价值的博客, 我感觉这个还是很实用的~

先看下效果吧(虽然还没写完...) :

image-20210622235116757

今天先到这了, 明天继续更~