Skip to content

一个基于koa2+koa-router+moogose+socket.io的小型服务

Notifications You must be signed in to change notification settings

SunnyTuZi/koa2-story

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f126dda · Sep 17, 2019

History

40 Commits
Jul 4, 2019
May 30, 2019
Sep 12, 2019
Sep 17, 2019
Jul 4, 2019
Sep 17, 2019
Apr 12, 2019
Jul 18, 2019
Sep 17, 2019
Jul 16, 2019
Apr 8, 2019
Apr 8, 2019
Sep 12, 2019
Jul 16, 2019
May 17, 2019
May 30, 2019
Apr 8, 2019
May 17, 2019
May 17, 2019

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

关于接口数据

此项目的所有接口数据都来源于配套的后台系统,后台项目传送地址

如果想体验前后台同时开发,可以下载后台系统,并且自行安装mongoDB。

此时启动本项目的命令为:npm run local 而不是 npm run dev。

同时我们也提供了基于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

一个基于koa2+koa-router+moogose+socket.io的小型服务

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages