前后端分离单页应用开发——王者荣耀手机端复刻(技术篇)

前言

今天差不多把整个仿站项目做好并部署好了,除了一页前端界面没有写(界面太复杂,写的我心累)。本来这个项目是跟着一个教程写的,但是在看了几节课觉得看视频太拖拉了,然后就基本上自己写了。可能有一些前端组件的设计不太专业,但是我自我感觉复用性还是勉强可以接受的。但是项目中的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}">
</template>

我一开始看文档的时候,直接看晕了,什么东西传来传去的

  • 后端数据的批量选择,其实这个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学到这里也差不多是能用了。接下来就回归我的老本行啦。


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×