阅读 108

全栈开发学习(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 ref="list"  :options="{autoHeight:true}" >
      复制代码
    • 导航高亮跟随swiper而变化

       <swiper ref="list" @slide-change="()=>active=$refs.list.swiper.realIndex">
      复制代码
  • 英雄技能点击跳转到对应描述

    <!-- 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]
             }
         }
    复制代码