Proyecto Dark Horse Headline: el último día de la recepción del día 08

2. Responder a comentarios de componentes recursivos

Método de realización: bucle infinito interno

Deje que el componente recursivo responda a los comentarios de forma indefinida

<div class="commentItem" title="我是评论列表的子组件">
     <!-- 组件递归，判断是否有parent.parent -->
     <!-- 递归：内部循环，这一条为了实现无限的评论回复 -->
 <item v-if='parent.parent' :parent='parent.parent' @replyItem='sendComment'></item>

21. Gestión de columnas

Agregar entrada para la administración de columnas: índice agregar estilo

/deep/.van-sticky{
  padding-right: 50px;
  &::after{
    content: '+';
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
---------------------------------
document.querySelector('.van-sticky').οnclick=e=>{
               console.log(e.target.className);
               if(e.target.className==='van-sticky'){
                 this.$router.push('/cateManager')
               }
             }

Negocios a manejar

1. Obtenga todas las columnas y cárguelas en la estructura "haga clic para eliminar el canal".

2. Preste atención a un detalle aquí: no piense en "atención" y "titulares"

3. Los datos relevantes para la gestión de columnas se almacenan localmente.

4. Almacene los canales no agregados y los canales agregados localmente

5. Los datos que operamos son todos de datos locales.

6. Los datos de la columna de la página de inicio deben provenir del almacenamiento local. Por supuesto, para que el negocio de la página de inicio continúe sin problemas, significa que los datos de la matriz almacenados localmente no solo pueden ser el nombre de la columna, sino que también contienen la identificación y otros datos similares.

Revise el proceso de operación de los datos json (cadena de matriz)

Obtener una cadena en formato json

Convertir cadena en matriz u objeto js

Manipular matrices u objetos

Convertir matriz u objeto de nuevo en cadena

Almacenar cadena

Agregue componentes y configure el enrutamiento

{
    
    
    name:'cateManager',
	path:'/cateManager',
	component: () =>
                import ('@/views/cateManager.vue')
}

Llame al método api para obtener datos para lograr una representación dinámica: antes había una interfaz de memoria en la columna de la página

cateManager lee los datos de columna almacenados localmente y los procesa dinámicamente

async mounted () {
    
    
        // 数据渲染，如果我有之前存过的栏目数据，那么我渲染之前的数据在页面，没有则发请求渲染默认的栏目数据
        // 判断是否有已删除的栏目
        if(localStorage.getItem('tokens_addColumnList')){
    
    
            this.addColumnList=JSON.parse(
                localStorage.getItem('tokens_addColumnList')
            )
        }
        // 判断是否有已添加的栏目
        if(localStorage.getItem('tokens_delColumnList')){
    
    
            this.delColumnList=JSON.parse(
                localStorage.getItem('tokens_delColumnList')
            )
        }else{
    
    
            let res= await getCategory()
            this.delColumnList=res.data.data
            console.log(this.delColumnList);
            // if(localStorage.getItem('tokens')){
    
    
            //     this.delColumnList=this.delColumnList.splice(2) // 干掉关注和头条
            // }else{
    
    
            //     this.delColumnList=this.delColumnList.splice(1) // 干掉头条
            // }
        }
    }

Logra la eliminación de la columna

removeCate(i){
    
    
            console.log(this.delColumnList[i]);
             // 先添加再移除
             // 将当前栏目添加到“未添加栏目数组”中
             this.addColumnList.push(this.delColumnList[i])
             // 从已添加的栏目数组中移除当前栏目
             this.delColumnList.splice(i,1)
             // 将当前数据存储到本地
             localStorage.setItem('tokens_delColumnList',JSON.stringify(this.delColumnList))
              localStorage.setItem('tokens_addColumnList',JSON.stringify(this.addColumnList))

        },

Darse cuenta de la adición de la columna

 addCate(i){
    
    
            this.delColumnList.push(this.addColumnList[i])
            this.addColumnList.splice(i,1)
            // 将当前数据存储到本地
             localStorage.setItem('tokens_delColumnList',JSON.stringify(this.delColumnList))
              localStorage.setItem('tokens_addColumnList',JSON.stringify(this.addColumnList))

        }

Estructura de la página

<template>
  <div class="cateManager">
      <myheader title='我的栏目'>
          <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
      </myheader>
      <div class="column">
          <div class="del">
              <h2>点击删除以下频道</h2>
              <ul>
                  <li v-for="(v,i) in delColumnList" :key="i" @click="removeCate(i)">{
   
   {v.name}}</li>
              </ul>
          </div>
          <div class="add">
              <h2>点击添加以下频道</h2>
              <ul>
                  <li v-for="(v,i) in addColumnList" :key="i" @click="addCate(i)">{
   
   {v.name}}</li>
              </ul>
          </div> 
      </div>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import {getCategory} from '@/apis/category'
export default {
    data () {
     return {
         delColumnList:[],  //可以删除的栏目
         addColumnList:[]    //可以添加的栏目      
     }
    },
    components:{
        myheader
    },
}
<style lang="less" scoped>
h2{
   margin: 10px 0 0 10px;
}
ul{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    // justify-content: space-between;
}
li{
    display: flex;
    justify-content: center;
    width: 50px;
    padding: 10px;
    margin: 10px 0;
    margin-right: 20px;
    border: 1px solid #000;
    &:nth-child(4n){
    margin-right: 0px;
    }
}
</style>

22. Búsqueda

Realice el almacenamiento local de datos de búsqueda

Agregue componentes y configure el enrutamiento

{
    
    
    name:'Search',
	path:'/search',
	component:Search
}

Fabricación de la estructura del componente

<template>
  <div class="search">
    <div class="header">
      <span class="iconfont iconjiantou2" @click="$router.back()"></span>
      <van-search
        v-model="userKey"
        placeholder="请输入搜索关键词"
        shape="round"
      >
      </van-search>
      <div @click="onSearch">搜索</div>
    </div>
    <div class="historyList">
      <h2>历史记录</h2>
      <router-link to="">美女</router-link>
      <router-link to="">美女</router-link>
    </div>
    <div class="historyList">
      <h2>搜索结果</h2>
      <router-link to="">美女</router-link>
      <router-link to="">美女</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      userKey:''
    }
  },
  methods:{
    onSearch(){

    }
  }
}
</script>

<style lang='less' scoped>
  .header{
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    .van-search{
      flex: 1;
      padding: 5px 12px;
    }
  }
  .historyList{
    padding:10px;
    border-bottom: 1px solid #ccc;
    h2{
      line-height: 40px;
      font-weight: bold;
    }
    > a {
      display: block;
      text-decoration: underline;
      line-height: 30px;
      color:#666;
    }
  }
</style>

Agregar método api

// 7.搜索文章
export const searchArticle = (params)=>{
    
    
    return axios({
    
    
        url:`/post_search`,
        params
    })
}
---------------------------------------
<div class="historyList">
	<h2>搜索结果</h2>
	<router-link :to="{path:`/articleDetail/${item.id}`}" v-for='item in searchList' :key='item.id'>{
    
    {
    
    item.title}}</router-link>
</div>

Método de llamada para realizar la búsqueda

async onSearch(key){
    
    
    this.searchList.length = 0
    let res = await searchArticle({
    
    keyword:key})     
    if(res.data.data.length > 0){
    
    
        this.searchList = res.data.data
    }
    // 将当前的搜索关键字存储到本地
    let arr = this.getdata()
    // 判断当前关键字是否已经存在
    let index = arr.indexOf(key)
    if(index !== -1){
    
    
        arr.splice(index,1)
    }
    // unshift:在数组的最前面插入数据
    arr.unshift(key)
    localStorage.setItem('toutiao_search_history_52',JSON.stringify(arr))
},
// 获取之前存储的历史关键字
getdata(){
    
    
        return JSON.parse(localStorage.getItem('toutiao_search_history_52')|| '[]') 
    }

Cuando se abra la página, cargue el historial

mounted(){
    
    
    this.historyList = this.getdata()
}
---------------------------------------
<div class="historyList">
      <h2>历史记录</h2>
      <a href='javascript:;' v-for='(item,index) in historyList' :key='index' @click="onSearch(item)">{
    
    {
    
    item}}</a>
</div>