本專(zhuān)題文章共十篇寄雀，已完結(jié)秧均，后續(xù)有補(bǔ)充會(huì)實(shí)時(shí)更新窖张。

1 后臺(tái)數(shù)據(jù)錄入

• 錄入后臺(tái)數(shù)據(jù)的各種分類(lèi)（手動(dòng)）

• 爬取官網(wǎng)的數(shù)據(jù)

  Chrome 里console中輸入：

  $$('選擇器') =》

  $$('選擇器 ').map(el=>el.innerHTML) =》

  *.slice(5) * //跳過(guò)5條數(shù)據(jù)

• 在數(shù)據(jù)庫(kù)中引入所有模型 椭岩，在server里安裝：npm i require-all

  在db.js中引入

   require('require-all')(__dirname + '/../models') //引用了models里所有js
  

• 在移動(dòng)端接口文件下通過(guò)js的方式直接錄入

  創(chuàng)建init接口

   router.get('/news/init', async (req, res) => {
      const parent = await Category.findOne({
        name: '新聞分類(lèi)'
      })
      const cats = await Category.find().where({     
        parent: parent
      }).lean()  //獲取分類(lèi)践叠，取json格式
    //爬取的數(shù)據(jù)粘貼在這里
      const newsTitles = ["鳳求凰&“.................]
      
      //循環(huán)newsTitles 得到對(duì)象數(shù)組
      const newsList = newsTitles.map(title => {
    //隨機(jī)取分類(lèi)
        const randomCats = cats.slice(0).sort((a, b) => Math.random() - 0.5)
        return {
          categories: randomCats.slice(0, 2),  //對(duì)應(yīng)的分類(lèi)
          title: title
        }
      })
  
       await Article.deleteMany({})       //將數(shù)據(jù)庫(kù)所有內(nèi)容清空
       await Article.insertMany(newsList) //插入newsList數(shù)據(jù)
      res.send(newsList)
    })
  

  ps：注意，要批量向后臺(tái)導(dǎo)入數(shù)據(jù)時(shí)要先在瀏覽器調(diào)用一下這個(gè)init接口膊存，否則不會(huì)執(zhí)行插入語(yǔ)句也就沒(méi)有導(dǎo)入數(shù)據(jù)的效果导而。

2 數(shù)據(jù)接口

新建get接口忱叭，用于前端調(diào)用

router.get('/news/list',async(req,res)=>{
    const parent=await Category.findOne({
        name:'新聞分類(lèi)'
    })
      /*聚合查詢(xún)*/
    const cats = await Category.aggregate([
        { $match: { parent: parent._id } },  //過(guò)濾數(shù)據(jù)，條件查詢(xún)上級(jí)分類(lèi)
        {
          /*能夠查詢(xún)出每個(gè)分類(lèi)底下的所有文章*/
          $lookup: {         //關(guān)聯(lián)查詢(xún)
            from: 'articles',  //從Article模型中查詢(xún)
            localField: '_id', 
            foreignField: 'categories',  //外鍵
            as: 'newsList'  //命名為newsList
          }
        },
        {
            $addFields: {
              newsList: { $slice: ['$newsList', 5] }  //只取每個(gè)分類(lèi)底下的5個(gè)文章數(shù)據(jù)
            }
          }
        ])
         /*新增熱門(mén)分類(lèi)今艺，其中的文章從其他的分類(lèi)中獲取得到*/
        const subCats = cats.map(v => v._id)  //子分類(lèi)是之前的那4個(gè)分類(lèi)
        //在4個(gè)類(lèi)別前加上“熱門(mén)”分類(lèi)
        cats.unshift({
          name: '熱門(mén)',
          newsList: await Article.find().where({
            categories: { $in: subCats }
          }).populate('categories').limit(5).lean()
        })
        //獲取熱門(mén)分類(lèi)里的文章的原分類(lèi)
        cats.map(cat => {
          cat.newsList.map(news => {
            news.categoryName = (cat.name === '熱門(mén)')   
              ? news.categories[0].name : cat.name
            return news
          })
          return cat
        })
        res.send(cats)
  })

3 數(shù)據(jù)展示

移動(dòng)端數(shù)據(jù)展示的方法和之前后臺(tái)管理界面的類(lèi)似韵丑，此處不再贅述

• 在web中安裝axios并引入模塊

  import axios from 'axios'
  Vue.prototype.$http =axios.create({
    baseURL:process.env.VUE_APP_API_URL || '/web/api'
  })
  

• methods

   async fetchNewsCats(){
          const res =await this.$http.get('news/list')
          this.newsCats=res.data
        }
  

4 其他細(xì)節(jié)問(wèn)題

• swiper

  • 英雄板塊告訴隨元素內(nèi)容多少變化

     <swiper ref="list"  :options="{autoHeight:true}" >
    

  • 導(dǎo)航高亮跟隨swiper而變化

     <swiper ref="list" @slide-change="()=>active=$refs.list.swiper.realIndex">
    

• 英雄技能點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)描述

  <!-- skills -->
        <div class="skills bg-white mt-4">
             <div class="d-flex jc-around">
                  <img 
                       class="icon"
                       @click="currentSkillIndex=i"
                       :class="{active:currentSkillIndex===i}"
                       :src="item.icon" alt="" 
                       v-for="(item,i) in model.skills" :key="item.name"/>
              </div>
                  <div v-if="currentSkill">
                       <div class="d-flex pt-4 pb-2 ml-2">   
                          <h3 class="m-0">{{currentSkill.name}}</h3>
                              <span class="text-grey ml-4">
                            (冷卻值：{{currentSkill.delay}} 消耗：{{currentSkill.cost}})
                               </span>
                        </div>
                           <p class="ml-2">{{currentSkill.description}}</p>
                              <div class="border-bottom"></div>
                                 <p class="text-grey">小提示：{{currentSkill.tips}}</p>
                              </div>
                           </div>
  <!-- end of skills -->
  

  computed:{
           currentSkill(){
               return this.model.skills[this.currentSkillIndex]
           }
       }