add doc 😄

add doc 😄

README.md

@@ -1,21 +1,23 @@
-# vuepro
+# webchat
 
-> vuepro
-
-## Build Setup
+```
+npm install -----安装依赖
+npm run dev -----运行
+npm run build -----打包
+node prod.server.js -----打包后运行
+//记得替换
+Index.vue和Chat.vue下的io.connect('http://qiufengh.com:8081')
+http://qiufengh.com:8081改成自己的项目地址。
+```
+效果图
 
-``` bash
-# install dependencies
-npm install
+![](https://github.com/hua1995116/webchat/blob/master/img/1.gif)
+![](https://github.com/hua1995116/webchat/blob/master/img/2.gif)
+![](https://github.com/hua1995116/webchat/blob/master/img/3.gif)
+![](https://github.com/hua1995116/webchat/blob/master/img/4.gif)
 
-# 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
-```
+[http://www.qiufengh.com:8081/#/](http://www.qiufengh.com:8081/#/)
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

config/routes.js

@@ -9,8 +9,8 @@ module.exports = function (app) {
 
     next()
   })
+  // 注册
   app.post('/user/signup', function (req, res) {
-    // console.log(req.body)
     var _user = req.body
     console.log(_user)
     User.findOne({name: _user.name}, function (err, user) {
@@ -36,45 +36,47 @@ module.exports = function (app) {
       }
     })
   }),
+  // 登录
   app.post('/user/signin', function (req, res) {
-      console.log(req.body)
-      var _user = req.body
-      var name = _user.name
-      var password = _user.password
+    console.log(req.body)
+    var _user = req.body
+    var name = _user.name
+    var password = _user.password
 
-      User.findOne({name: name}, function (err, user) {
+    User.findOne({name: name}, function (err, user) {
+      if (err) {
+        console.log(err);
+      }
+      if (!user) {
+        res.json({
+          errno: 1,
+          data: '用户不存在'
+        })
+      }
+      user.comparePassword(password, function (err, isMatch) {
         if (err) {
           console.log(err);
         }
-        if (!user) {
+        if (isMatch) {
+          req.session.user = user;
+          console.log('success');
+          res.json({
+            errno: 0,
+            data: '登录成功',
+            name: name,
+            src: user.src
+          })
+        } else {
           res.json({
             errno: 1,
-            data: '用户不存在'
+            data: '密码不正确'
           })
+          console.log('password is not meached');
         }
-        user.comparePassword(password, function (err, isMatch) {
-          if (err) {
-            console.log(err);
-          }
-          if (isMatch) {
-            req.session.user = user;
-            console.log('success');
-            res.json({
-              errno: 0,
-              data: '登录成功',
-              name: name,
-              src: user.src
-            })
-          } else {
-            res.json({
-              errno: 1,
-              data: '密码不正确'
-            })
-            console.log('password is not meached');
-          }
-        })
       })
+    })
   }),
+  // 信息
   app.get('/message',function (req, res) {
     Message.find({}, function (err, message) {
       if(err) {
@@ -87,20 +89,21 @@ module.exports = function (app) {
       }
     })
   }),
+  // 机器人消息
   app.get('/robotapi',function (req, res) {
     var response = res
     var info = req.query.info
     var userid = req.query.id
     var key = 'fde7f8d0b3c9471cbf787ea0fb0ca043'
     superagent.post('http://www.tuling123.com/openapi/api')
-    .send({info, userid, key})
-    .end((err, res) => {
-      if(err){
-        console.log(err)
-      }
-      response.json({
-        data: res.text
+      .send({info, userid, key})
+      .end((err, res) => {
+        if(err){
+          console.log(err)
+        }
+        response.json({
+          data: res.text
+        })
       })
-    })
-  })  
+  })
 }

prod.server.js

@@ -5,29 +5,31 @@ var port = process.env.PORT || config.dev.port;
 var app = express();
 
 var router = express.Router();
-
+// 用于静态展示入口
 router.get('/',function(req,res,next){
 	req.url = './index.html';
 	next();
 });
 
 app.use(router);
 
+
 /*引入*/
 var mongoose = require('mongoose')
-//日志文件
+// 日志文件
 var morgan = require('morgan')
-//sesstion 存储
+// sesstion 存储
 var bodyParser = require('body-parser')
 var cookieParser = require('cookie-parser')
 var session = require('cookie-session')
+// 用于异步回调
 mongoose.Promise = require('bluebird')
 global.db = mongoose.connect("mongodb://localhost:27017/vuechat")
 
-//服务器提交的数据json化
+// 服务器提交的数据json化
 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({extended: true}))
-//sesstion 存储
+// sesstion 存储
 app.use(cookieParser())
 app.use(session({
   secret: 'vuechat',
@@ -43,11 +45,9 @@ if ('development' === app.get('env')) {
   mongoose.set('debug', true)
 }
 
-require('./config/routes')(app)
-
 var server = app.listen(port)
 
-//websocket
+// websocket
 // var http = require('http').Server(app);
 var io = require('socket.io')(server);
 var Message = require('./models/message')
@@ -56,7 +56,6 @@ io.on('connection', function (socket) {
   //监听用户发布聊天内容
   socket.on('message', function (obj) {
     //向所有客户端广播发布的消息
-    console.log(obj)
     io.emit('message', obj)
     var mess = {
       username: obj.username,
@@ -65,31 +64,27 @@ io.on('connection', function (socket) {
       roomid:'room1'
     }
     var message = new Message(mess)
+    //将发送过来的消息进行储存
     message.save(function (err, mess) {
       if (err) {
         console.log(err)
       }
-      console.log(mess)
+        console.log(mess)
     })
     console.log(obj.username + '说：' + obj.msg)
   })
   socket.on('login',function (obj) {
     users[obj.name] = obj
+    //用于监听用户进行聊天室
     io.emit('login', users)
   })
   socket.on('logout',function (name) {
     delete users[name]
+    //用户监听用退出聊天室
     io.emit('logout', users)
   })
 })
 
-
+require('./config/routes')(app)
+//声明静态资源地址
 app.use(express.static('./dist'));
-
-// module.exports = app.listen(port, function (err) {
-// 	if (err) {
-// 		console.log(err)
-// 		return
-// 	}
-// 	console.log('Listening at http://localhost:' + port + '\n')
-// });

schemas/message.js

@@ -1,5 +1,5 @@
 var mongoose = require('mongoose')
-
+//聊天记录模型
 var MessageSchema = new mongoose.Schema({
   username: String,
   src:String,
@@ -10,7 +10,7 @@ var MessageSchema = new mongoose.Schema({
     default: Date.now()
   }
 })
-
+//静态方法
 MessageSchema.statics = {
   fetch: function (cb) {
     return this

schemas/user.js

@@ -1,5 +1,7 @@
 var mongoose = require('mongoose')
+//用于md5加密
 var bcrypt = require('bcryptjs')
+//加盐数
 var SALT_WORK_FACTOR = 10
 var UserSchema = new mongoose.Schema({
   name: {
@@ -19,10 +21,9 @@ var UserSchema = new mongoose.Schema({
     }
   }
 });
-
+//对密码进行加密
 UserSchema.pre('save', function (next) {
   var user = this
-
   if (this.isNew) {
     this.createAt = this.updateAt = Date.now()
   }
@@ -40,6 +41,7 @@ UserSchema.pre('save', function (next) {
     })
   })
 })
+//用于比较密码是否正确
 UserSchema.methods = {
   comparePassword: function (_password, cb) {
     bcrypt.compare(_password, this.password, function (err, isMatch) {

src/App.vue

@@ -1,6 +1,7 @@
 <template>
     <div id="app">
         <router-view></router-view>
+        <!--tab选项卡-->
         <div class="bottom">
             <mu-paper>
                 <mu-bottom-nav :value="bottomNav" @change="handleChange">
@@ -10,12 +11,15 @@
                 </mu-bottom-nav>
             </mu-paper>
         </div>
+        <!--聊天组件-->
         <chat></chat>
+        <!--注册组件-->
         <register></register>
+        <!--登录组件-->
         <login></login>
+        <!--提示组件-->
         <dialogmodel></dialogmodel>
     </div>
-
 </template>
 
 <script>

src/components/Chat.vue

@@ -48,7 +48,9 @@
           }
         },
         created() {
+            // socket内部，this指针指向问题
             const that = this
+            // 连接websocket地址
             this.socket = io.connect('http://qiufengh.com:8081')
             this.socket.on('message', function(obj) {
                 that.$store.commit('addroomdetailinfos', obj)
@@ -64,12 +66,14 @@
                 this.socket.emit('logout', this.getusername)
             },
             submess() {
+                // 判断发送信息是否为空
                 if (document.getElementById('message').value !== '') {
                     let obj = {
                         username: this.getusername,
                         src: this.getusersrc,
                         msg: document.getElementById('message').value
                     }
+                    // 传递消息信息
                     this.socket.emit('message', obj)
                     document.getElementById('message').value = ''
                 } else {

src/store/index.js

@@ -8,26 +8,35 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
+    // 存放用户
     user: {
       name: '',
       src: ''
     },
+    // 存放历史记录
     messhistory: {
       infos: []
     },
+    // 存放房间信息，为了方便以后做多房间
     roomdetail: {
       id: '',
       users: {},
       infos: []
     },
+    // 存放机器人开场白
     robotmsg: [{
       message: 'Hi~有什么想知道的可以问我',
       user: 'robot'
     }],
+    // 聊天页面显示控制
     chattoggle: false,
+    // 登录页面显示控制
     logintoggle: false,
+    // 注册页面显示控制
     registertoggle: true,
+    // 提示框显示控制
     dialog: false,
+     // 提示框内容
     dialoginfo: ''
   },
   getters: {
@@ -138,6 +147,7 @@ const store = new Vuex.Store({
       })
         .then(function (data) {
           robotdata = JSON.parse(data.data.data)
+          // 分类信息
           if (robotdata.code === 100000) {
             commit('setrobotmsg', {message: robotdata.text, user: 'robot'})
           } else if (robotdata.code === 200000) {