VUE3-博客全栈 08-前端

本节：博客首页的编写，模糊查询博客内容和博客标题，分类的切换。

 div:

 script:  1.引入路由，定义变量的模块，inject等  2.实例化路由和要用的模块

 3.获取分类，挂载分类

 4.获取分页的方法

5.点击进入详情博客的方法

5.1  通过route获取当前的路由信息，把点击的博客id传给后端，获取文章的内容

(1)引入route (2)实例化route  (3)可以输出route ,然后找打自己要的数据，进行赋值

 6.分类的的下拉框赋值，切换不同的分类，会显示不同分类的数据 

 7.路由的配置

 { path: '/', component: () => import('../views/HomePage.vue') },

学习两个js的函数：

（1）map() 方法可以把对象转换成 [key ,value] 的形式，改变新的key的值。

map() 方法按顺序为数组中的每个元素调用一次定义的函数：numbers.map(Math.sqrt);求个数值的平方函数。

（2）find( ) 可以进行一次回调函数，返回符合条件的值。

最后，简陋的博客就写好啦，完结撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。

整个首页的代码：

<template>
  <div class="conrainer">
    <div class="nav">
      <div @click="homePage">首页</div>
      <div>
        <n-popselect @update:value="selectCategory" v-model:value="selectedCategory" :options="categoryOptions"
          trigger="click">
          <div>分类<span>{{categoryName}}</span></div>
        </n-popselect>
      </div>
      <div @click="dashboard">后台</div>
    </div>
    <n-divider />
    <n-space class="search">
      <n-input v-model:value="pageInfo.keyword" :style="{ width: '500px' }" placeholder="请输入关键字" />
      <n-button type="primary" ghost @click="loadBlogs(0)"> 搜索 </n-button>
    </n-space>
    <!-- v-for这里的括号写错了 -->
    <div v-for="(ii,index) in blogList" style="margin-bottom:15px;cursor:pointer;">
      <n-card @click="toDetail(ii)" :title="ii.title">
        {{ii.content}}
        <template #footer>
          <n-space align="center">
            <div>
              发布时间：{{ii.create_time}}
            </div>
          </n-space>
        </template>
      </n-card>
    </div>
    <n-space>
      <n-pagination @update:page="loadBlogs" v-model:page="pageInfo.page" :page-count="pageInfo.pageCount" />
    </n-space>
    <n-divider />
    <!-- 分割线 -->
    <div class="footer">
      <div>Power by xxxxxxx</div>
      div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive, inject, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'; //路由
const router = useRouter()
const axios = inject("axiosTool")  //axiosTool 是我provide定义的名字
 
const selectedCategory = ref(0)
const categoryName = computed(() => {
  let selectedOption = categoryOptions.value.find((option) => {
    return option.value == selectedCategory.value
  })
  return selectedOption ? selectedOption.label : ""
})
const selectCategory = (id) => {
  pageInfo.categoryId = id;
  loadBlogs()
}
// const toPage = async (Number) => {
//   pageInfo.page = Number
//   loadBlogs();
// }
 
 
 
onMounted(() => {
  loadCategorys()
  loadBlogs()
})
 
const categoryOptions = ref([])
// 获取分类
const loadCategorys = async () => {
  let res = await axios.get("/categorty/list")
  // map（）可以把对象，转换成[key,vaule]的数组形式
  categoryOptions.value = res.data.rows.map((i) => {
    return {
      label: i.name,
      value: i.id
    }
  })
}
const pageInfo = reactive({//分页信息
  page: 1,
  pageSize: 3,
  pageCount: 0,
  count: 0,
  keyword: "",
  categoryId: 0
})
 
const blogList = ref([])  //博客列表
// 获取博客 ，这里组件有个功能就是可以根据id找到value
const loadBlogs = async (page = 0) => {
  if (page != 0) {
    pageInfo.page = page;
  }
  let res = await axios.get(`/blog/search?categoryId=${pageInfo.categoryId}&keyword=${pageInfo.keyword}&page=${pageInfo.page}&pageSize=${pageInfo.pageSize}`)
  let temp_rows = res.data.data.rows;
  for (let jj of temp_rows) {
    jj.content += "..."
    let d = new Date(jj.create_time)
    jj.create_time = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
  }
  blogList.value = temp_rows;
  pageInfo.count = res.data.data.count
  // parseInt向下取整，就是不算小数点，  ，%是取余数
  pageInfo.pageCount = parseInt(pageInfo.count / pageInfo.pageSize) + (pageInfo.count % pageInfo.pageSize > 0 ? 1 : 0)
 
}
 
const homePage = () => {
  router.push("/")
 
}
const dashboard = () => {
  router.push("login")
}
 
const toDetail = (ii) => {
  router.push({
    path: "detail", query: {
      id: ii.id
    }
  })
 
}
</script>
 
<style lang="scss" scoped>
.conrainer {
  width: 1200px;
  margin: 0 auto
}
 
.nav {
  display: flex;
  font-size: 20px;
  font-weight: 800px;
  padding-top: 20px;
  color: #64676a;
 
  div {
    cursor: pointer;
    margin-left: 15px;
 
    &:hover {
      // 鼠标划过去会变色
      color: coral;
    }
 
    span {
      font-size: 12px;
    }
  }
 
}
 
.search {
  margin-bottom: 15px;
}
 
.footer {
  width: 500px;
  margin: 0px auto;
  color: #64676a;
  margin-bottom: 0px;
  text-align: center;
}
</style>