全栈开发学习(Node+Vue+Mongodb)(十)——后台数据展示到移动端页面

本专题文章共十篇，已完结，后续有补充会实时更新。

1 后台数据录入

• 录入后台数据的各种分类（手动）

• 爬取官网的数据

  Chrome 里console中输入：

  $$(‘选择器’) =》

  $$('选择器 ').map(el=>el.innerHTML) =》

  *.slice(5) * //跳过5条数据

• 在数据库中引入所有模型 ，在server里安装：npm i require-all

  在db.js中引入

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

• 在移动端接口文件下通过js的方式直接录入

  创建init接口

   router.get('/news/init', async (req, res) => {
      const parent = await Category.findOne({
        name: '新闻分类'
      })
      const cats = await Category.find().where({     
        parent: parent
      }).lean()  //获取分类，取json格式
  	//爬取的数据粘贴在这里
      const newsTitles = ["凤求凰&“.................]
      
      //循环newsTitles 得到对象数组
      const newsList = newsTitles.map(title => {
  	//随机取分类
        const randomCats = cats.slice(0).sort((a, b) => Math.random() - 0.5)
        return {
          categories: randomCats.slice(0, 2),  //对应的分类
          title: title
        }
      })
  
       await Article.deleteMany({})       //将数据库所有内容清空
       await Article.insertMany(newsList) //插入newsList数据
      res.send(newsList)
    })

  ps：注意，要批量向后台导入数据时要先在浏览器调用一下这个init接口，否则不会执行插入语句也就没有导入数据的效果。

2 数据接口

新建get接口，用于前端调用

router.get('/news/list',async(req,res)=>{
    const parent=await Category.findOne({
        name:'新闻分类'
    })
      /*聚合查询*/
    const cats = await Category.aggregate([
        { $match: { parent: parent._id } },  //过滤数据，条件查询上级分类
        {
          /*能够查询出每个分类底下的所有文章*/
          $lookup: {         //关联查询
            from: 'articles',  //从Article模型中查询
            localField: '_id', 
            foreignField: 'categories',  //外键
            as: 'newsList'  //命名为newsList
          }
        },
        {
            $addFields: {
              newsList: { $slice: ['$newsList', 5] }  //只取每个分类底下的5个文章数据
            }
          }
        ])
         /*新增热门分类，其中的文章从其他的分类中获取得到*/
        const subCats = cats.map(v => v._id)  //子分类是之前的那4个分类
        //在4个类别前加上“热门”分类
        cats.unshift({
          name: '热门',
          newsList: await Article.find().where({
            categories: { $in: subCats }
          }).populate('categories').limit(5).lean()
        })
        //获取热门分类里的文章的原分类
        cats.map(cat => {
          cat.newsList.map(news => {
            news.categoryName = (cat.name === '热门')   
              ? news.categories[0].name : cat.name
            return news
          })
          return cat
        })
        res.send(cats)
  })

3 数据展示

移动端数据展示的方法和之前后台管理界面的类似，此处不再赘述

• 在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 其他细节问题

• swiper

  • 英雄板块告诉随元素内容多少变化

  • 导航高亮跟随swiper而变化

• 英雄技能点击跳转到对应描述

  
        
  
             
  
                  
              
                  
  
                       
     
                          
  {{currentSkill.name}}
                              
                            (冷却值：{{currentSkill.delay}} 消耗：{{currentSkill.cost}})
                               
                        
                           
  {{currentSkill.description}}
                              
  
                                 
  小提示：{{currentSkill.tips}}
                              
                           
  
  

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