本节:博客首页的编写,模糊查询博客内容和博客标题,分类的切换。
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>