【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.11-3.12）
本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
/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'ponent('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.jsmodule.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可以访问到数据
