【全栈之巅】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"><divclass="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"><swiperref="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-cardicon="caidananniudianji"title="新闻资讯-ListCard组件":categories="newsCats"><!-- 在父组件里，不通过循环，直接拿到子组件里的具名slot的数据，这样的好处是 子组件的内容可以由父组件决定怎么展示 --><template #items="{ category }"><divclass="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可以访问到数据