前言
今天差不多把整个仿站项目做好并部署好了,除了一页前端界面没有写(界面太复杂,写的我心累)。本来这个项目是跟着一个教程写的,但是在看了几节课觉得看视频太拖拉了,然后就基本上自己写了。可能有一些前端组件的设计不太专业,但是我自我感觉复用性还是勉强可以接受的。但是项目中的CSS的代码确实存在很大程度的冗余。
技术点(踩坑点)
Vue中使用自定义组件
Vue.component("Tag-Name", component)
使用
<router-link class="nav-link" tag="div" to="/">首页</router-link>
在单页面中跳转。
- 使用
<router-view></router-view>
进行子路由的跳转,注意这里的跳转在不修改nginx的时候可以使用
$router.push("/xxx") |
若是使用a标签的链接并且vue-router的mode不是hash而是history是,在部署时会出现链接失效的状况,或者刷新后返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。
- 组件插槽的使用,这个使用其实很简单,在组件中写
<slot></slot>
然后使用这个组件标签后,直接在里面写内容就可以了
组件之间数据传输,写组建时同样是使用props来接收信息,然后用组件标签的时候使用属性传递消息。
组建插槽的数据通信,对于一个组件来说,他的自身的数据是封闭的,如果其它视图想要通过插槽使用这个组件中传递出来的信息,可以这么写
<slot name="items" :contentData="item"></slot>
使用name命名插槽,:dataname绑定传输的数据,接收的时候可以这么使用
<template ##items="{contentData}"> |
我一开始看文档的时候,直接看晕了,什么东西传来传去的
- 后端数据的批量选择,其实这个map和filter是很容易理解的,但是emmm,层级嵌套一多真的晕,这里分享一段代码,写这里的时候没理清数据结构,绕晕死,估计还有可以优化的空间。
router.get('/news/list', async (req, res) => {
const news = await Category.find().where({
name: "新闻资讯"
});
// 类别
const type = await Category.find().where({
parent: news
});
const article = await Article.find();
const dto = type.map(item => {
// 筛选同一类别的文章
let articleList = article.filter(el => el.categories.includes(item._id)).map(em => {
return {
categoriesName: item.name,
title: em.title,
date: em.updatedAt.getMonth()+"/"+em.updatedAt.getDay(),
id: em._id,
}
})
return {
name: item.name,
newsList: articleList
}
})
res.send(dto);
})
一点感受
通过复刻一个项目让我对业务的理解提升很大,Vue学到这里也差不多是能用了。接下来就回归我的老本行啦。