大作业总结笔记｜ 青训营笔记

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

我们队伍选择的是仿掘金官网～以下是我们研讨会的技术选型、架构设计等部分，详情以及演示视频请参见汇报文档/仓库地址😊

利用vite + vue3技术栈仿掘金官网首页实现无限滚动列表，Markdown解析、自动生成toc目录、toc自动滚动等功能。

1 技术选型

前端：html, css, javascript, Vue3, element-ui, Vue-cli

前后端交互：axios

后端：python, flask

重要实现点

有整体布局分析、细节效果分析、无限滚动列表、markdown文档解析与高亮等。

其中，对于markdown文章解析与高亮部分，我们采用marked.js实现文章解析，marked 是一个 JavaScript 编写的 Markdown 解析和编译器，可以快速地编译大块的Markdown文本，并且已完全兼容客户端浏览器。对于组件的原生渲染，先把markdown解析成tokens，再交由html的renderer处理。采用highlight.js进行代码高亮，创建v- highlight全局指令，从而实现在vue组件中应用代码高亮。

2 架构设计

1. 前端部分

 JUEJIN\SRC
 │  App.vue
 │  main.ts
 │  style.css
 ├─components
 │        AppTopNav.vue --顶部导航栏
 │        AppSideBar.vue --侧边栏
 │   
 │  
 ├─views
 │  │
 │  ├─home
 │  │    AuthorInfo.vue --作者相关信息
 │  │    ListNav.vue --文章列表导航栏
 │  │    List.vue --文章列表
 │  │    Login.vue --登录
 │  │    Register.vue --注册
 │  │
 │  ├─post
 │  │    AuthorInfo.vue --作者简要信息
 │  │    Aside.vue --文章页侧边栏
 │  │    Article.vue --文章展示
 │  │    Catalog.vue -- toc目录
 │  │    Content.vue -- Markdown文章显示区
 │  │    NewArticle.vue -- 新建文章页面
 │  │    ShowPost.vue -- 文章列表
 │  │
 │  └─Layout.vue --总体布局
 │
 ├─fake-api
 │      Article.ts --测试用文章数据
 │      index.js --测试用首页列表数据
 │
 ├─router
 │      index.js --路由模块
 │
 └─request
         index.ts --请求模块

2. 后端部分

通过创建工厂函数，在启动文件里直接调用生成 Flask App；并注册 shell 命令，方便快速生成数据库数据。并且建立用户、分类和文章数据库模型，实现用户文章数据部分的增删改查。

# 新建文章
@user_bp.route('/post/new', methods=['GET', 'POST'])
def new_post():
    user = User.query.get(1)
    title = request.form.get('title')
    category = Category.query.filter_by(name=request.form.get('category')).first()
    body = request.form.get('body')
    post = Post(title=title, body=body, category=category, user=user)
    db.session.add(post)
    db.session.commit()
    response = {'status': 'success'}
    return jsonify(response)