# 友聊 **Repository Path**: YanTaiMuYu/chat_with_friends ## Basic Information - **Project Name**: 友聊 - **Description**: 前端vue+后端django的一个分享交流平台 - **Primary Language**: Python - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 8 - **Created**: 2020-09-16 - **Last Updated**: 2020-12-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 友聊分享平台 个人博客地址：[陈昀昊的博客](https://cloudhao.top) ### 项目概述 近年来，随着互联网的快速发展，人们利用互联网平台发布自己言论方式越来越多种多样。越来越多的创作者希望通过互联网这样一个平台来分享自己的学习或创作的经验，与作品的展示。随着越来越多的创作者加入互联网这个大家庭，创作者的人数规模越来越大，互联网分享平台的需求也越来越迫切。为广大创作者提供一个经验、作品交流平台，已经成为了互联网行业中的热点。面对越来越多的创作者，现有的微博、博客等各大信息交流平台难以提供专门的创作信息交流模块，无法更好地为广大创作者服务，而且提供的分享功能单一，形式单调。目前已有的信息分享平台难以满足当下创作者群体的需求，因此，应该开发一款功能集中统一，分享形式多种多样，具有高标准、高质量、方便快捷的创作者分享平台来满足广大创作者的需求。 友聊创作系统是一个方便创作者与粉丝交流的信息系统，主要为各类创作者及其粉丝圈提供友好的创作交流平台。它继承了传统博客的形式，注重内容的呈现和用户兴趣驱动，拥有着一定的交流性和传播性，可以实现创作者与粉丝之间的互动，例如对作品的评论、收藏和转发等。在本系统中，创作者将通过文章的形式分享作品及其创作经验，展现出一种“分享+社交”的新模式。 ### **开源代码与组件使用情况** 本作品采用Vue.js作为前端开发框架，Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。使用Django作为后端框架，是用python语言写的开源web开发框架，并遵循MVC设计。数据库采用Mysql,前端UI库采用Vuetify.js, Vuetify.js是一个Vue的UI库，提供Vue组件供使用。根据 Google Material Design 指南实现。 ### 作品目标平台 本作品的目标平台为Web端，可在PC端与手机端通过浏览器访问，依托于良好的自适应效果，使得本作品能够在不同尺寸大小的屏幕上都具有良好的适应性。 ### 作品思路 友聊是一个为大家交流分享提供的一个平台，在作品的设计初衷就是希望每一个人的作品能够尽可能的展现给大家，所以在信息的呈现上作品的优先级是占首位的，我们采用卡片设计来展现每一个创作者的作品，以瀑布流无缝刷新的形式来呈现作品，目的是为了能够使得在一个页面上用户能够尽可能的看到更多的作品，而不需要依赖点击操作。同时网站整体元素采用蓝色调，同时辅以大量留白设计，这样做的目的是不会让用户在浏览文章时感觉太过沉重死板，留白设计能够很好的平衡大量图片文章内容带来的内容拥挤现象，能够给用户良好的浏览体验。 ### 设计思路 1）进行详细的需求分析，理清设计开发思路； 2）在Gitee（码云）上创建仓库，然后打开Vscode拉取项目； 3）选用合适的框架、UI进行开发； 4）设计后台网站的文件： - urls.py处理用户、数据库进行交互的接口 - views.py处理接口的实现。 - models.py用来设计数据库。 5）设计数据库的表格： - backend_creater表负责存储创作者的信息 - backend_category表用于文章分类筛选 - backend_article表用于存储创作者的文章信息 - backend_comment表负责存储用户的文章评论 - backend_follow表负责统计用户点赞数据 - backend_image表负责存储图片数据 6）设计前台网站的文件： - Home.vue呈现主页面。 - Article.vue呈现文章页面。 - EditArticle.vue呈现文章编辑页面。 - MyArticle.vue呈现文章列表页面。 - Creater.vue呈现创作者动态页面。 - Explore.vue呈现发现页面。 - Follow.vue呈现关注列表页面。 - FollowLink.vue呈现友链页面。 - MyComment.vue呈现评论列表页面。 - Search.vue呈现文章搜索页面。 - Setting.vue呈现设置页面。 7）调试接口，将信息插入到数据库中，以及从数据库中获取信息； 8）进行软件测试，对发现的bug进行修改； ### 项目规划 在互联网时代，前后端分离的开发方式愈发的火爆，本项目采用前后端分离开发方式，在前后端架构选型上采用前端Vue.js，后端Django的开发方式，希望借助它们快速开发的优势，能够在较短的时间内快速完成一个项目的开发，同时依托于其渐进式开发的特点，为将来更多功能的开发做好准备。 ### 项目进度 Day01 后端项目初始化，创建表，创建部分路由，实现图片上传功能 Day02 实现jwt授权，创建jwt鉴权装饰器，创建登录路由,hashlib加密密码 Day03 前端页面项目启动，顶栏设计，登录注册功能实现 Day04 发现页面更新，分类筛选，小屏幕选择分类优化 Day05 设置页面完成，自定义全局toast组件 Day06 文章详情页面简易版完成，创作者主页完成，对应的后台接口实现 Day07 文章发表页面完成，关注接口完成，前台关注功能完成，npm提示插件更新0.1.4，修复部分bug Day08 友链（关注的人的动态）页面完成，其接口完成，ToolBar逻辑修改，文章页面bug修复,npm提示插件更新0.1.5，增加fadein动画 Day09 文章编辑更新页面完成，取关功能完成，我的文章列表界面完成。对应的后台接口完成，删除提示功能实现。修复部分bug。 Day10 首页布局完成，文章获取接口优化，修复部分bug Day11 接口微调实现后台分页，对应前台根据监听scroll无缝加载数据，解决部分bug Day12 评论组件实现，后台发送评论，评论列表等接口实现，数据获取bug修复 Day13 登录注册框增加密码显示，汉化，评论bug修复，修复登录后头像无法获取的bug，数据获取排序不正常bug修复 Day14 底部链接添加，打包部署 Day15 文章页面界面优化，添加点赞分享链接功能，评论列表页面增加文章入口，分享功能实现 Day16 修复了一个分享QQ却只能访问首页的bug Day17 添加搜索页面，可以搜索文章标题，修复刷新bug，修复通知bug Day18 修复组件在判断登录过期状态时无法刷新的bug Day19 修复刷新资源请求异常、修复注册时的文本遗留，修复文章发表按钮错误、修复注册后没有默认头像，更新后顶部的头像等待1s后刷新，鼠标指针也状态添加、简介去格式化、友链文章按最新排序 Day20 修复组件在销毁时无法移除鼠标滚动事件的bug，探索页添加到顶部的图标 Day21 修改文章页面标题与作者的位置，修改文章页面的视频宽高比，布局更加人性化 Day22 修改探索页指定文章，改为用户说明书，发现页与首页跳转滚动优化,新增隐私页 Day23 小火箭返回图标提升为全局通用组件，通用性增强，探索页面简化元素 ### 部分界面 ### 首页 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316220332.png) ### 发现 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214140.png) ### 友链 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316220342.png) ### 设置 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214210.png) ### 关注列表 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214219.png) ### 分享&点赞文章 ![image-20200409201816486](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/image-20200409201816486.png) ### 评论列表 ![image-20200409201854807](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/image-20200409201854807.png) ### 发表文章 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214236.png) ### 文章 ![image-20200409201925898](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/image-20200409201925898.png) ### 评论区 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200317202905.png) ### 动态 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214251.png) ### 搜索 ![image-20200430005700740](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/image-20200430005700740.png) ### 自适应 ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214307.png) ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214321.png) ![](https://gitee.com/cyh199910/personal_picture_bed/raw/master/img/QQ截图20200316214335.png)