Skip to content

一个基于vue,vuex,socket.io的故事汇网站,支持在线聊天,多人聊天

Notifications You must be signed in to change notification settings

SunnyTuZi/vue2-story

Repository files navigation

前言

这是一个可以发表故事,可以聊天的网站,我定义为社交网站,它只是一个demo,纯属个人凭空设计。

技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + axios + less + flex +socket.io

项目运行

注意:由于涉及大量的 ES6/7 等新属性,node 需要 6.0 以上版本

git clone https://github.com/SunnyTuZi/vue2-story

cd vue2-story

npm install 或 yarn(推荐)

npm run dev

访问地址:https://localhost:8080/

关于接口数据

由于本系统用的不是静态数据,所以要跑起来的话,还需要搭配后台运行。后台项目传送地址

同时我们也提供了基于react&antd搭建的后台管理页面传送地址

学习不是一天两天的事,希望大家多点耐心哟~

说明

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

目标功能

  • 个人中心 -- 完成
  • 修改个人信息 -- 完成
  • 发表故事 -- 完成
  • 评论故事 -- 完成
  • 评论分页 -- 完成
  • 点赞&踩故事 -- 完成
  • 收藏故事 -- 完成
  • 上传头像 -- 完成
  • 创建聊天分组 -- 完成
  • 单人聊天 -- 完成
  • 多人聊天 -- 完成
  • 关注话题-- 完成
  • 发表话题故事-- 完成
  • 登录、注册 -- 完成
  • 修改密码 -- 完成
  • 故事详情页 -- 完成
  • 关注用户-- 完成
  • 我的动态 -- 完成
  • 我的收藏 -- 完成

总结

1、这也算是初稿,自己完成的一个东西,可能页面不好看,或者功能不完善,也会有bug,也请大家多多体谅。

最终目标

1、用koa2构建的后台系统。地址在这里

2、用react构建后台管理页面 地址在这里

所以我的目的是构建一个横跨前后端,vue2和react的项目,让大家可以多样化学习

。。。敬请期待

部分截图

故事列表页

话题列表页

聊天&分组

用户

项目布局

.
├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── showImages                                  // 项目截图
├── src                                         // 源码目录
│   ├── components                              // 公用组件
│   │   ├── comment
│   │   │   ├── List.vue                        // 评论列表组件
│   │   ├── footer
│   │   │   ├── footer.vue                      // 公用底部
│   │   ├── header
│   │   │   ├── Header.vue                      // 导用头部
│   │   ├── pageTurner
│   │   │   ├── Page.vue                        // 分页组件
│   │   ├── picker
│   │   │   ├── chatBubble.vue                  // 聊天气泡组件
│   │   │   ├── comment.vue                     // 评论输入框组件
│   │   │   ├── SendMsg.vue                     // 信息输入发送组件
│   │   │   ├── Timep.vue                       // 年月选择器
│   │   │   ├── Town.js                         // 地区选择器
│   │   ├── story
│   │   │   ├── Item.vue                        // 故事列组件
│   │   ├── topic
│   │   │   ├── Item.vue                        // 话题列组件
│   │   ├── user
│   │   │   ├── Index.vue                       // 用户封面组件
│   │   │   ├── Item.vue                        // 用户列组件
│   │   ├── cellDetail
│   │   │   └── cellDetail.vue                  // cell组件
│   ├── config                                  // 基本配置
│   │   ├── env.js                              // 环境切换配置
│   │   ├── fetch.js                            // 获取数据
│   │   ├── mUtils.js                           // 常用的js方法
│   │   └── rem.js                              // px转换rem
│   ├── images                                  // 公共图片
│   ├── pages
│   │   ├── bubble
│   │   │   ├── AddGroup.vue                    // 添加分组
|   |   |   ├── Chat.vue                        // 群组聊天
│   │   │   └── List.vue                        // 分组列表
│   │   ├── msg
│   │   │   └── List.vue                        // 消息列表
│   │   ├── search
│   │   │   └── Searcg.vue                      // 搜索页
│   │   ├── story
│   │   │   ├── Add.vue                         // 发表故事
|   |   |   ├── Detail.vue                      // 故事详情
│   │   │   └── List.vue                        // 故事列表
│   │   ├── topic
│   │   │   |── Detail.vue                      // 话题详情
│   │   │   |── List.vue                        // 话题列表
│   │   ├── user
│   │   │   └── Continer.vue                    // 容器
│   ├── router
│   │   └── index.js                            // 路由配置
│   ├── service                                 // 数据交互统一调配
│   │   ├── apiList.js                          // 获取数据的统一调配文件,对接口进行统一管理
│   ├── store                                   // vuex的状态管理
│   │   ├── action.js                           // 配置actions
│   │   ├── getters.js                          // 配置getters
│   │   ├── index.js                            // 引用vuex,创建store
│   │   ├── mutation-types.js                   // 定义常量muations名
│   │   └── mutations.js                        // 配置mutations
│   ├── until
│   │   ├── axios.js                            // axios再次封装
│   │   ├── common.js                           // 公共js函数
│   │   ├── editor.js                           // 文本输入框editor配置
│   │   ├── px2rem.js                           // rem适配
│   │   └── localStorage.js                     // 据本地储存公共函数
│   └── public
|   │   └── font                                // 字体图标
|   │   └── style                               // 公共样式文件
|   │       ├── mixin.less                      // css公用函数
|   │       └── common.less                     // css公用样式
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,加载各种公共组件
├── index.html                                  // 入口html文件
.

License

About

一个基于vue,vuex,socket.io的故事汇网站,支持在线聊天,多人聊天

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published