这是我参与「第四届青训营」笔记创作活动的的第4天

青训营前端结业项目答辩汇报-对也不全队

一、项目介绍

介绍：借鉴掘金官网样式与功能，实现的功能有：无限滚动的文章列表、首页响应式布局、文章代码高亮、文章发表功能、首页文章展示排序、首页文章按关键词展示、前后端交互...

项目服务器地址：http://47.92.135.202:8080/

二、项目分工

团队成员	主要贡献
李显凇	技术选型、团队组织
谢玉赛	技术选型、响应式开发、首页文章列表开发、文章详情页开发、文章发布模块开发、后端node与数据库开发、汇报文档撰写
李江浩	技术选型、响应式规划、路由配置、项目结构开发、navi栏开发、沸点开发、sidebar开发、汇报文档撰写
陈钦	技术选型、创作者中心开发
赵寒冰	技术选型
周泽扬	技术选型

三、项目实现

3.1 技术选型与相关开发文档

团队背景：

1.大多熟练使用html+css+JavaScriptES6，正在从vue2到vue3学习迁移中，团队熟悉的编程语言有go、c++、node，熟悉的组件有element与vant。

2.框架的选择：考虑到团队开发一致性与项目稳定性，选择vue2作为开发框架，如有后续完善计划，可迁移至vue3。

3.组件的选择：鉴于掘金官网主要使用场景为pc端，且用户创作部分需要有管理系统，因此选择element作为开发组件。

4.后端语言：熟悉后端语言的成员较少，考虑到开发语言的一致性，选择使用node.js与mysql数据库进行数据交互。

5.数据库设计：仿掘金官网必须要做的数据表为用户表、文章表，待完善的数据表为点赞数据表、收藏数据表、回复表...用户表与文章表字段如下图（其中文章表中userid为用户表id的外键）

6.服务器：作为一个技术交流社区，掘金每日访问量可能高达数百万计，我们团队没有这个资金租赁如此大的服务器，因此，我们的项目存放在了阿里云服务器上（2g*40g）

3.2 架构设计

项目目录如下：

技术栈：js+less+Vue2+VueRouter+Elementjs+Node.js+mysql

前端架构：

3.3 项目代码介绍

代码量比较庞大，在这里挑选几个项目要点涉及到的代码进行展示：

1.无限滚动（瀑布流）

    <!-- 瀑布流 -->
    <div :class="{ waterfall: true, 'waterfall-react': sidebaron }" ref="scrollBox">
        <!-- 骨架屏组件 -->
        <SkeletonVue :height="150" :class="{ 'Skeleton': !sidebaron, 'Skeleton-react': sidebaron }" v-if="isskeleton">
        </SkeletonVue>
        <!-- 文章概览组件List，对后端传来的文章列表articlearr进行for循环 -->
        <List v-for="(item, index) in articlearr" :key="index" :postid="item.id" :authorname="item.username"
            :title="item.title" :coverimg="item.photo"
            :abstract="item.abstract == 'null' ? item.content : item.abstract" :date="item.posttime"
            :keywords="item.keywords" :comment="item.replycount" :likecount="item.followcount"
            :viewcount="item.viewcount">
        </List>
        <h3 v-if="istip" :class="{ 'Skeleton': !sidebaron, 'Skeleton-react': sidebaron }"
            style="text-align: center; margin:20px 0">没有更多了</h3>
    </div>

<script>
import List from '../../components/List.vue'
import SkeletonVue from '../../components/Skeleton.vue';
import { getarticleAPI } from '../../api/getarticleAPI'

export default {
    data() {
        return {
            articlearr: [],//文章列表
            isloading: false,//向后端请求文章
            loadheight: 200,//加载余量阈值
            index: 0,
            num: 10,
            isskeleton: true,
            istip: false,//提示：没有更多了
        }
    },
    components: {
        List,
        SkeletonVue,
    },
    methods: {
        // 重置索引、列表等
        reSet() {
            this.index = 0
            this.articlearr = []
            this.isskeleton = true
            this.istip = false
        },
        // 查询所有文章
        async getArticle() {
            // 首页列表排序匹配，order表示传给后方的排序依据,篇幅有限，在这里省略了排序switch代码
            let order
            // 。。。省略
            order = 'recommend'
            // 获取文章列表
            const res = await getarticleAPI(this.index, this.num, order)
            if (res.code !== 201) {
                this.isskeleton = false
                this.istip = true
                return
            }
            // 后端传来的文章存入数组
            this.articlearr = [...this.articlearr, ...res.data]
            // sql查询索引增加
            this.index = this.index + this.num
            this.isloading = false
            this.isskeleton = false
        },
        // 防抖函数
        debounce(fn, delay) {
            let timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn();
                }, delay);
            }
        },
        // 监听屏幕滚动
        windowScroll() {
            if (!this.isloading) {
                let boxHeight = this.$refs.scrollBox.offsetHeight
                let scrollboxheight = boxHeight + 56 + 42  //盒子高度（包括navi）
                let boxoffset = window.pageYOffset  //屏幕滚动像素
                let deviceheight = window.screen.height  //设备高度
                // 当滚动盒子偏移量小于屏幕滚动像素+设备高度+200余量时获取新文章
                if (scrollboxheight < boxoffset + deviceheight + this.loadheight) {
                    // 设置节流阀isloading
                    this.isloading = true
                    this.getArticle()
                } else{
                    return
                }
            } else return
        }
    },
    created() {
        window.addEventListener('resize', this.debounce(this.toggleTopBar, 500))//响应式相关代码
        window.addEventListener('scroll', this.windowScroll)
        this.getArticle()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.debounce(this.toggleTopBar, 500));//响应式相关代码
        window.removeEventListener('scroll', this.windowScroll)
    }
};
</script>

2.利用window.addEventListener('resize', this.debounce(this.toggleTopBar, 500))实现响应式布局。详情移步github-github.com/gogojonnyS/… p206 and so on。

3.引入富编辑器，转存正文html实现代码高亮。详情移步github-github.com/gogojonnyS/…

4.后端node.js实现数据库的增、查...详情移步github-github.com/gogojonnyS/…

5.其他代码介绍详见github仓库-github.com/gogojonnyS/…

四、测试结果

4.1功能性测试

网站基本功能皆有实现，导航各个页面间的路由跳转、首页下拉无限加载、详情页代码高亮等。能够保障用户的基本使用体验。

4.1.1导航栏功能测试

导航列表基本上实现了页内无刷新跳转，部分页面尚未完善，有待改进
导航栏的响应式布局基本完善

4.1.2创作者中心

完成了创作者中心页面基本实现
左侧列表交互功能完善，由于时间问题没有做后端数据交互，有待改进
掘金logo设置了跳转去首页的路由
写文章按钮设置了跳转到富文本编辑器的路由
创作者中心下拉菜单基本完善
- 写文章功能完成
- 发沸点功能完成
- 草稿箱完成
- 写代码功能使用了官方链接，有待改进

4.1.3首页的基本布局完成

页内子路由完整
瀑布流列表排序完成，可根据推荐以及热度等进行排序
文章有兴趣标签，但标签功能未作后端数据交互，待改进
下拉无限刷新功能完整，且右侧有返回顶部按钮
右侧海报和签到基本完成并做了黏性定位

4.1.4详情页

代码高亮显示
右侧海报和签到基本完成并做了黏性定位
左侧按钮列表基本实现，但功能尚未完善，有待改进

4.2性能测试

控制台保留一部分信息输出，影响页面加载，待改进；

五、Demo 演示视频（必填）

暂时无法在飞书文档外展示此内容

项目在线地址：http://47.92.135.202:8080/

六、项目总结与反思

目前仍存在的问题

部分组件未完善

部分页面未创建

功能不完整

已识别出的优化项

页面布局有待优化

控制台可删除不必要的信息输出

架构演进的可能性

主要使用vue2搭建项目，可迁移到vue3

项目过程中的反思与总结

部分成员使用的技术栈熟练度有待加强

各个成员对git团队协作开发不熟悉，有待加强练习

部分成员活跃度较低

项目开发时间不足，时间安排不当，成员之间协作沟通存在问题，导致项目功能不完整

项目汇报 | 青训营笔记