移动端单模块功能实现思路及重要方法总结

忘是亡心i 2023-10-04 01:23 5阅读 0赞

![20210609234312234.gif][]

#### 1 更多操作思路分析： ####

> 总体认知：搭结构，先做基本的页面样式，再做功能。能封装就封装，复杂功能拆分成一个个分支组件

#### 2 我要实现的效果 ####

> 对于已经登陆的用户，点击小×可允许他们去关闭某篇文章，或者是反馈内容；对于没有登录的用户小×不会显示

#### 3 大体规划 ####

> 第一步，搭建UI页面。只有登录的用户才能看见小×，未登录是没有的  
> 第二步，使用弹层组件，使同一时间只有一个子内容显示，另一个隐藏  
> 第三步，点击‘不感兴趣’，要做三件事分别是 1调接口，关闭弹层，删除文章（数组中）
> 
> 第四步，点击‘举报内容’，同样是做三件事

#### 4 具体实现使用到的知识点 ####

> 4.1，需要判断用户有没有token，有token就显示小x号可对其操作，没token那只能干看了。在组件中判断有没有token的话，if(this.$store.state.XXX)--毕竟token是保存在vuex的state中的，注意：如果是在template中的话不要加this。因为vue底层已经做了
> 
> 4.2，弹层组件popup组件\+v-model +利用v-if-else实现状态切换--这个看官网的使用方法，vant（有赞）
> 
> 4.3，点击小x控制弹出框的显示隐藏（点击事件可以把简单代码写在注册行，如：@click='xx变量名=false' 以及v-if = ‘布尔值’，如：v-if="!isReport"），以及获取文章的id，后面根据他删除，id是上面v-for的属性，也就是说，你要点击这个删除某个文章，肯定需要获取文章的id之类的，万变不离其宗。
> 
> 4.4 弹出框用的是vant里的popup弹出层
> 
> 4.5 弹出框里面的内容，选择新建一个.vue文件搭建结构（就问你能不能在当前页面写？——能！），目的是结构清晰，方便维护。 利用vant里面的cell单元格，先将所有的内容放进去，只需要控制每次只有一个显示就行。
> 
> 4.6  
> 这个状态1 ，2 其实就是刚搭好页面结构，就是需要隐藏的和显示的都在一起，算了，加一段代码。如打印的话，会清楚看到页面结构，理解我说的。
> 
> 4.7 使用v-if else控制元素的现实和隐藏，可以做一些判断
> 
>     // 此文件负责弹出层内容显示，使用vant里面的cell单元格
>     <template>
>       <div class="more-action">
>         
>         <van-cell-group v-if="!isReport">
>           <van-cell @click="buxihuan">不感兴趣</van-cell>
>           <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
>           
>           
>           <van-cell>拉黑作者</van-cell>
>         </van-cell-group>
>         
>         <van-cell-group v-else>
>           <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
>           <van-cell
>             v-for="item in reports"
>             :key="item.value"
>             @click="hReport(item.value)"
>             >{
>         { item.label }}</van-cell
>           >
>         </van-cell-group>
>       </div>
>     </template>

#### 5.继续上面的知识点 ####

> 5.1 点击不感兴趣要做三件事，调接口+关弹窗+删数据
> 
> 上面新建了，子组件，一般子传父都是传些数据，然而：
> 
> 子传父-骚操作--子传父不带数据，就告诉你，爹你来！  
> 他爹通过子自定义的事件名接受，同时使用自己的回调函数，处理。
> 
> 5.2 调接口--毫无难度-先去建个.js文件封装，接着导入-使用-固定步骤固定格式-熟能生巧尔
> 
> 5.3删除文章-删除数组中的（不可能因为你不喜欢这个文章，后台把数据库内容给删除了），利用findindex找下标，利用splice删除数组该下标。里面有一个点比较关键，下标哪里来？点击小x的时候，就可以获取得到，然后定义state里定义变量接受，之后传给函数，Soeasy。（findindex 是js封装的api，我会在另一个文章中集中总结）

#### 6重要知识点 ####

> 1.【**封装数据**】把数据封装到单独的文件中，封装成对象。然后渲染的时候通过引入（注意，引入的时候需要先定义，例如这种需要在data中引入，如函数需要在methods中），再使用v-for。可以提高可维护性。试想，如果你写在data或者state中，固定的的写死，但凡需求以便，或是改动数据非常不便，**理解封装的思想很重要**
> 
>     / 以模块的方式导出 举报文章 时，后端接口约定的举报类型
>     // 这是常量数组
>     // 搞这个的目的是后期可以提高可维护性，改动简单，属于弊在当下功在千秋
>     const reports = [
>       {
>         value: 0,
>         label: '其它问题'
>       },
>       {
>         value: 1,
>         label: '标题夸张'
>       },{
>          ……
>          }
>      
>     ——————————————————下面是不封装的对比——————————————————————
>      <van-cell icon="arrow-left">返回</van-cell>
>           <van-cell>侵权</van-cell>
>           <van-cell>色情</van-cell>
>           <van-cell>暴力</van-cell>
>           ……
>         </van-cell-group>

#### 6.2 消除魔法字符串 ####

> **消除魔法字符串**，听着很酷炫，其实很简单。不过他很优雅，也确实很帅。

let  a = 100;
    //这是普通写法
    console.log(100 + 1) 
    console.log(100 + 2)
    console.log(100 + 3)
    console.log(100 + 4)
    ……
    //高级写法：
    console.log(a + 1) 
    console.log(a + 2)
    console.log(a + 3)
    console.log(a + 4)
    看见没，如果这是一个一直输出，100+上某个数，我可以将a 提出来，这样将来变成99+某个数，我只需要改一个值就行了

#### 6.3 父组件修改子组件 ####

> 1 给子组件添加引用。它子组件补充一个 ref 例如  <子组件名字 ref="XXXX"></子组件名字>
> 
> 2 通过this.$refs.子组件引用.子组件数据=新值。this.$refs.XXXX.aaaa= 值
> 
> 注意：一定要确保这个子组件已经被创建出来了
> 
> 父组件可以想怎么修改子组件就怎么修改子组件

## 0今日重点 ##

#### token持久化 ####

> 背景：在我点击登录进去首页的时候，后台token确实发来了，但是保存在内存中，一刷新就没了，而要干一些事，没token还得重新登录，非常不合适。于是借助本地存储+vuex
> 
> 知识回顾：vuex保存数据的特点：保存在内存中（页面一刷新就没了），响应式，全局公共的，任何组件都可以使用；本地存储特点：保存在本地浏览器，存储大小有几个m，非响应式，但保存时间长，刷新页面数据还在。

> 我在初始做这个项目的时候，就感觉出来了，页面一刷新，我就得重新登录获取token，然后我想用本地存储，结果只在请求中写了保存，却没有把token取出来给state，结果肯定是不行 。

#### 使用方法： ####

> 首先，token是后台给我们发的，发来的是对象，键值对的形式，此时打印的话，可以看到，token的值是字符串。我们存的时候需要转换成字符串，取出来的时候，需要转化成对象，好操作token。
> 
> 1 .localStorage.setItem("键", JSON.stringify(值)) // 保存
> 
> 2. JSON.parse(localStorage.getItem(值)) //获取
> 
> 3. localStorage.removeItem(‘键’) //删除
> 
> ## 还可以将他们封装起来，到时候随便调用。 ##

[20210609234312234.gif]: https://img-blog.csdnimg.cn/20210609234312234.gif