c站（clicli.us）3.0 重构经验分享

Question

c站（clicli.us）3.0 重构经验分享

yisar opened this issue 6 years ago · 2 comments

yisar commented 6 years ago

halo，大家好，我是 132
唔，经过四天时间，c站的 3.0 重构终于告一段落啦

重构真的是，最不合算的重复劳动了
可是每次重构，都或多或少的，学到新东西

之前的 2.0 重构的文章，在这里：#147

重构背景

v2 版本一来，经过接近一年的时间，随着c站业务的发展，已经出现一些问题
比如我们的番剧系统，需要更加强大的索引
比如我们的 ugc 版权，需要更加合理的上传审核机制
等等
加上多人协作，代码质量每况愈下

本来是打算等到 vue3 发版再重构的来着，但是还是没能忍得住，就提前重构了

目标

对代码进行重新梳理，提高代码质量，减小维护成本
对各个端进行重构，更完美的服务业务，更有利于下次重构

开始

后端 API 重构

重构的开端还是从 API 开始
本次后端重构，最主要的是重构了番剧索引接口

场景主要就是，这种索引的场景，其中，分类、状态等，单选，标签多选，条件间取交集，标签取并集

其实这个场景在视频网站中非常多见，对于后端来说，是个一对多，多对多的问题
上个版本 c站使用了 redis 来做这个逻辑

略复杂，这个版本，使用了更简单的方式，拼接字符串

var query string
if status != "" && status != "nowait" {
	query = fmt.Sprintf(`AND posts.status ='%s'`, status)
}

if sort != "" {
	query += fmt.Sprintf(`AND posts.sort ='%s'`, sort)
}

if uid != 0 {
	query += fmt.Sprintf(`AND posts.uid ='%d'`, uid)
}

if status == "nowait" {
	query += `AND NOT posts.status='wait'`
}
···
这样就会根据参数，拼成一个字符串
为了防止所有参数都没有的情况，可以默认携带一个 1=1

```sql
sqlRaw := fmt.Sprintf(`SELECT posts.id,posts.title,posts.content,posts.status,posts.sort,posts.tag,posts.time,users.id,users.name,users.qq FROM posts LEFT JOIN users ON posts.uid = users.id 
WHERE 1=1 %s ORDER BY time DESC`, query)

这样就可以做成一个完美的查询接口啦，一个接口搞定一切查询的 case

接口预览：https://api.clicli.us/posts?status=public&sort=新番&tag=推荐+耽美&uid=2&page=1&pageSize=10

然后对于用户接口等，同时也做了类似的调整
然后后端就没啥啦

前端

前端的重构，其实就是重新写了 API，大概提几个要点吧

###. 跨域

跨域是个很尴尬的问题，之前面试还一直被问，我当时是咋说的来着？

不解释，就是反代
这次最坑的是，我真的是，三天重构时间，因为我没有去反代，浪费了一天时间

最主要的是非简单请求的 options携带 cookie 的问题
据说，需要同时满足两个条件：

withcredentials必须设置为true, origin不能用通配符*

可惜，捣鼓了好久，还是不能很好的解决
最终我很后悔这次尝试，我从一开始就应该坚定立场

面试官你再敢问，我就不解释，反代送给你

新番时间表

场景如图，需要一个从周一到周日的新番表

之前我们是后台手动设置，很不够傻瓜化

这次决定做成自动的
方法就是对数据的重新遍历

let ret = {
            1: [],
            2: [],
            3: [],
            4: [],
            5: [],
            6: [],
            0: [],
          }
res.data.posts.forEach(item => {
     let day = new Date(item.time).getDay()
     ret[day].push(item)
 })
this.items = ret

ret 一个以数字为 key 的对象，分别代表了周一到周日，0 为周日
然后渲染就很容易啦

<li v-for="item in items[activeIndex]">
   <router-link :to="'/play/gv'+item.id">
       <img :src="getSuo(item.content)" :alt="item.title">
       <div class="text">
          <div class="title">{{item.title}}</div>
       </div>
   </router-link>
 </li>