【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.11-3.12）

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.11-3.12）

本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
https://gitee.com/blaunicorn/node-vue-wangzherongyao
持续更新中…

3.11 web页继续优化card，抽象首页card的各个部分，形成listcard、nav、swiper组件

// web\src\components\ListCard.vue 理想是传入数据，直接展示新闻、英雄列表和图文攻略
<template>
  <a-card :icon="icon" :title="title">
    <!-- 应用插槽展示数据 -->
    <div class="nav jc-between">
      <div
        class="nav-item"
        :class="{ active: active === index }"
        v-for="(category, index) in categories"
        :key="index"
        @click="
          () => {
            active = index;
            $refs.list.$swiper.slideTo(index);
          }
        "
      >
        <div class="nav-link" v-text="category.name">热门</div>
      </div>
    </div>
    <div class="card-body pt-3">
      <swiper
        ref="list"
        @slide-change="() => (active = $refs.list.$swiper.realIndex)"
      >
        <swiper-slide v-for="(category, index) in categories" :key="index">
          <!-- 具名插槽，把子组件的数据再传递给父组件，便于后面区分新闻资讯、英雄列表、视频列表的不同样式展示 -->
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </a-card>
</template>

<script>
  export default {
    props: {
      icon: { type: String, required: true },
      title: {
        type: String,
        required: true,
      },
      // 分类
      categories: { type: Array, required: true },
    },
    data() {
      return {
        active: 0,
      };
    },
  };
</script>

<style>
</style>

// web\src\main.js
// 全局引用CardList组件
import ListCard from './components/ListCard.vue'
Vue.component('m-list-card', ListCard)

// Web界面中的swiper的点击和滑动控制样式功能
// 点击转跳区域
@click = "$refs.list.$swiper.slideTo(i)"
//区域改变，active的样式也跟随变化
@slide-change="() => active = $refs.list.$swiper.realIndex"

// web\src\views\Home.vue 引入ListCard组件
    <!-- 封装好的高级组件 -->
    <m-list-card
      icon="caidananniudianji"
      title="新闻资讯-ListCard组件"
      :categories="newsCats"
    >
      <!-- 在父组件里，不通过循环，直接拿到子组件里的具名slot的数据，
      这样的好处是 子组件的内容可以由父组件决定怎么展示 -->
      <template #items="{ category }">
        <div
          class="py-2"
          v-for="(item, index) in category.newsList"
          :key="index"
        >
          <span v-text="item.categoryName">[新闻]</span>
          <span>|</span>
          <span v-text="item.title + item._id"
            >春和景明柳垂莺娇，峡谷好礼随春报到</span
          >
          <span v-text="item.date">06/12</span>
        </div>
      </template>
      <!-- <template v-slot:heros="{ category }"></template> -->
    </m-list-card>

3.12 web页新闻资讯的数据录入

// web\src\components\ListCard.vue 理想是传入数据，直接展示新闻、英雄列表和图文攻略

web\src\views\Main.vue
<style lang="scss">
  //   增加吸顶效果
  .topbar {
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>

// console终端中输出html中的文字
$$('.news_list_cont a').map(el=>el.innerHTML)
$$('.news_list .title').map(el=>el.innerHTML).slice(5)

// 写一个接口去自动录入新闻资讯的标题
// 1.server端引入插件，可以直接读取文件夹下所有文件
npm install require-all --save

// server\plugins\db.js使用该插件
    // 2.（）当成一个函数使用，再传入一个路径,回退到上级路径
    require('require-all')(__dirname + '/../models')
    //初始化数据

 // server\routes\web\index.js
module.exports = app => {
    const router = require('express').Router()
    //通过访问一个路径来写入数据,这样是数据能通过js的方式来写入数据库，不用自己在后台一个个添加
    // 初始化新闻数据

    // const Article = require('../../models/Article') // 这种要一个个引入相对麻烦些
    const mongoose = require('mongoose')// 另外一种方式是直接通过mongoose读取数据库
    // 使用模型
    const Artice = mongoose.model('Article')
    const Category = mongoose.model('Category')

    router.get('/news/init', async (req, res) => {
        const parent = await Category.findOne({
            name: '新闻分类'
        })
        console.log(parent)
        //获取分类，lean表示获取纯粹的json数组，用where限制分类新闻分类
        const cats = await Category.find().lean().where({
            parent: parent
        });
        // console.log(cats);
        const newsTitles = ["嫦娥皮肤设计大赛最终投票开启公告", "狄某有话说｜姜子牙化身“象棋高手”？", "3月17日外挂专项打击公告", "3月17日“演员”惩罚名单", "3月17日净化游戏环境声明及处罚公告", "3月16日体验服停机更新公告", "老亚瑟的答疑时间：貂蝉-仲夏夜之梦海报优化计划，王昭君-凤凰于飞优化海报过程稿", "嫦娥皮肤设计大赛人气创意奖、优秀创意奖公布", "3月16日账号注销流程变更说明", "春和景明柳垂莺娇，峡谷好礼随春报到", "3月16日全服不停机更新公告", "3月13日体验服不停机更新公告", "3月12日体验服停机更新公告", "3月12日体验服停机更新公告", "狄某有话说｜江湖规矩，对线不打“WiFi”牛", "第三届王者荣耀全国大赛赛事日历公布", "嫦娥皮肤设计大赛最终投票开启公告", "狄某有话说｜姜子牙化身“象棋高手”？", "老亚瑟的答疑时间：貂蝉-仲夏夜之梦海报优化计划，王昭君-凤凰于飞优化海报过程稿", "嫦娥皮肤设计大赛人气创意奖、优秀创意奖公布", "超丰厚奖励等你赢！第三届王者荣耀全国大赛北京海选首站（北京丰科万达站）即将开赛！", "第三届王者荣耀全国大赛——安徽省再次启航！", "第三届王者荣耀全国大赛城市赛道——第一期海选赛赛点信息", "斗鱼新势力战队选拔赛", "狄某有话说｜江湖规矩，对线不打“WiFi”牛", "老亚瑟的答疑时间：貂蝉-仲夏夜之梦及金色仲夏夜优化后海报展示", "王者荣耀·女神节 峡谷女神才艺showtime还不来围观！", "狄某有话说｜春节回顾，2月对局环境数据盘点！", "嫦娥皮肤设计大赛首轮投票开启公告", "老亚瑟的答疑时间：皮肤优化沟通月历上线，公孙离-祈雪灵祝优化进度展示"]
        // 打算制造随机分类，slice是为了防止影响数据本身，复制一份数据去排序。Math.random()-0.5是让数据在正负0.5之间随机，slice(0,2)是取两个数
        const randomCats = cats.slice(0).sort((a, b) => Math.random() - 0.5).slice(0, 2)
        const newList = newsTitles.map(title => {
            return {
                categories: randomCats, // 打乱随机取2个分类
                title: title
            }
        })
        // 清空原有数据库,再插入数据
        await Artice.deleteMany({})
        await Artice.insertMany(newList)
        res.send(newList)
    })

    app.use('/web/api', router)
}

// server\index.js
// 导入web 路由
require('./routes/web')(app)

//3. http://localhost:3000/web/api/news/init  后端api可以访问到数据