vuedetect

A Vue.js project with express(in processing)/REMOVE UPDATES TO UPDATE.md

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Our Goal

Until 2018, complete a website.

And,

• SEVER is based on express
• Fonter is based on Vue
• UI is based on vue-material

Vue

The jobs of vue showed:

├── vue
├── vue-hot-reload-api
├── vue-loader
├── muse-ui - UI库/Ｍaterial-design
├── vue-resource - vue向服务器发起请求
├── vue-router - 由于Vue属于单页面应用，该插件用于处理页面中不同路由跳转
├── vee-validate - Front end verification
├── vue-style-loader
├── vue-template-compiler
├── vue-template-es2015-compiler
├── vuex - Vue状态处理插件,数据来源于服务器.即Vue发起AJAX请求

And the workflow of vuex showed below:

Express

The jobs of express showed:

• More datasets
• More pages
• More funcs backend

Mongoose

Use Mongoose to manager Mongodb, and the datasets stored in Mlab Driver

User-Schema

What kind of data should be fetched when user login!

• follow apps
• owner apps(created by themself), and followers

UserDataSets Design

What the UserDataSets should contain?

• nickname
• password
• account
• followapps
• ownerapps

APPS-Schema

Return apps' data when user login or request a get by apps' list?

APPSDataSets Design

What the APPSDataSets should contain?

• headers(avatar/name)
• info(creater, type, follow, post, body)
• home

Pages

First Commit

• The Home-Page
• The Login-Page
• The Download-Page

LOGININ-PAGE

Should contain funcs of datasets.

• loginin-router
  • add history mode in router
• login-vuex
  • hello world
  • post data to server(http://localhost:3000)
• mongodb datasets
  • create free clound datasets
  • how the mongodb work
• service
  • cors
  • create sheet in datasets/link to datasets
  • add jwt-simple to server-login-router
  • move secret into config
• login.vue
  • modify postdata
• UI
  • background
  • input filed
  • hello bar
  • button

func complete!

REG-PAGE

This page similar to LOGININ-PAGE, we need add new actions/mutations(such as:check account...) to REG-PAGE/LOGIN-PAGE

• REG.vue
  • panel
  • simple validate
  • validate nickname/account/password/passwordConfirmed in vee-validate'sapi-way
• REG-vuex
  • action-check: post data to server
• server
  • check info in datasets
  • add newuser-info into datasets
  • add new Router process check nickname and password, Returns in a specific format
• UI

CHAT-ROOM

Click wake-button, enter chatroom in each pages!Still in Processing!

• vue
  • init message from state
  • init threads in list from state
  • add click thread func
• api
  • create message template
  • read office message from office.js
• actions
  • sendMessage
  • switch thread
• mutations
  • add message to state
  • init office-message come from api
  • switch thread to set currentThreadId
  • store thread in local
• socket
  • connect to server by socket
  • send message and receive(me send to me)
  • xmind for message flow
  • store messsages in localStorage
  • send message from another side!(in .js file)
  • add/delte friend!
• server
  • connect to client
  • auth token
• UI
  • message-thread, title

APPLICATION-PAGE(under thinking)

show some info of all the apps:

• can serach.
• has pages

APPLICATION/TYPE-PAGE

it's alpha version now!

• - compelete office type
  • - user type: post user data/and modify
• - UI
• - datasets
• - server
  • - get/post from/to server
• auto fetch data when data change

USERINFO-PAGE

alpha verson components:

• home - show info sketch/can modify some things
• follows - some rows: follow apps/friends

HOME-PAGE

Should contain brief of this website.