first commit

历届学生/罗朝/项目练习/vue-chart/src/App.vue

@@ -0,0 +1,48 @@
+<template>
+  <div id="app">
+   <yd-layout>
+        
+        <v-navbar v-if="ShowNavbars"></v-navbar>
+
+        <div class="content">
+          <router-view></router-view>
+        </div>
+        
+        <v-tabbar v-if="ShowTabbars"></v-tabbar>
+
+       
+
+    </yd-layout>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Tabbar from "./components/tpl/tabbar"
+import Navbar from "./components/tpl/navbar"
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters({
+      ShowNavbars: 'getShowNavbars',
+      ShowTabbars: 'getShowTabbars'
+    })
+  },
+  components: {
+    'v-tabbar': Tabbar,
+    'v-navbar': Navbar,
+  }
+}
+</script>
+
+<style>
+.hairline .yd-scrollview {
+  margin-top: 50px;
+}
+.index .yd-cell-left {
+  flex: 5;
+}
+</style>

历届学生/罗朝/项目练习/vue-chart/src/components/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="index">
+    <div class="list" v-for="(item,index) in list" :key="index">
+      <span class="list-title">{{ item.UserName }}</span>
+      <span>{{ item.UserTime }}</span>
+      <p>{{ item.Usercontent }}</p>
+    </div>
+    <p v-if="showWelcomes">{{mes}}</p>
+  </div>
+</template>
+
+<script>
+import { mapGetters,mapMutations } from "vuex";
+
+export default {
+  created() {
+     this.welcome()
+     this.logout()
+     this.$socket.on('userChart',(obj) => {
+       this.add(obj)
+     })
+  },
+  data () {
+    return {
+      chatDta: [],
+      showWelcomes: true,
+      mes: null
+    }
+  },
+  methods: {
+    ...mapMutations({
+      saveUser: 'setonLineUser',
+      add: 'addMessageList'
+    }),
+    welcome () {
+      this.$socket.emit("messageAllUser",this.$route.query.name)
+      this.$socket.on("welcome",(name,len) => {
+        this.saveUser(len)
+        this.mes = `欢迎用户${name}进入聊天室`;
+        console.log(`欢迎用户${name}进入聊天室`)
+        this.showWelcomes = true
+        // this.$dialog.toast({
+        //     mes: `欢迎用户${name}进入聊天室`,
+        //     timeout: 1500,
+        //     icon: 'success'
+        // });
+      })
+    },
+    logout () {
+      this.$socket.on("logout", (name,len) => {
+         this.$dialog.toast({
+            mes: `用户${name}离聊天室`,
+            timeout: 1500,
+            icon: 'success'
+        });
+        this.saveUser(len)
+      })
+    }
+  },
+  computed: {
+    ...mapGetters({
+     list: 'getMessageList'
+    })
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/罗朝/项目练习/vue-chart/src/components/login.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="login">
+      <yd-cell-group>
+        <yd-cell-item>
+            <span slot="left">用户名：</span>
+            <yd-input slot="right" required v-model="username" max="20" placeholder="请输入用户名"></yd-input>
+        </yd-cell-item>
+    </yd-cell-group>
+    <yd-button-group>
+      <yd-button size="large" type="primary" v-on:click.native="submitLogin"> 登 录 </yd-button>
+    </yd-button-group>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex"
+export default {
+  data() {
+    return {
+      username: null
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.changeNavBar(false)
+      vm.changeTabbar(false)
+    })
+  },
+   beforeRouteLeave (to, from, next) {
+    this.changeNavBar(true)
+    this.changeTabbar(true)
+    next()
+  },
+  methods: {
+    ...mapMutations({
+      changeNavBar: 'setShowNavbars',
+      changeTabbar: 'setShowTabbars',
+      saveUser: 'setonLineUser'
+    }),
+    submitLogin() {
+      this.$socket.emit("UserLogin",this.username)
+      this.$socket.on("loginStatus", (status,UserLength) => {
+        if(status == "loginSuccess") {
+          this.saveUser(UserLength)
+          this.$router.push({ name: 'index',query: { name: this.username }})
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

历届学生/罗朝/项目练习/vue-chart/src/components/tpl/navbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <yd-navbar slot="navbar" title="NavBar" fixed>
+    <p slot="right">在线({{ getOnline }}人)</p>
+     
+  </yd-navbar>
+</template>
+
+<script>
+import { mapGetters } from "vuex"
+export default {
+  computed: {
+    ...mapGetters({
+     getOnline : 'getonLineUser'
+    })
+  }
+}
+</script>
+
+<style scoped>
+p {
+  color: #000;
+}
+</style>

历届学生/罗朝/项目练习/vue-chart/src/components/tpl/tabbar.vue

@@ -0,0 +1,47 @@
+<template>
+    <yd-cell-group class="Userinput">
+        <yd-cell-item>
+            <yd-input slot="left" v-model="UserContent" placeholder="聊天内容..."></yd-input>
+            <span slot="right">
+               <yd-button type="hollow" @click.native="sendUserMessage">发送</yd-button>
+            </span>
+        </yd-cell-item>
+    </yd-cell-group>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  created() {
+  },
+  data() {
+      return {
+        UserContent: null,
+      }
+  },
+  methods: {
+      ...mapMutations({
+        add: 'addMessageList'
+      }),
+      sendUserMessage() {
+        var Message = {}
+        Message.UserTime = this.$utlis.timer();
+        Message.UserName = this.$route.query.name;
+        Message.Usercontent = this.UserContent;
+        this.$socket.emit("sendMessage", Message)
+
+      }
+  }
+}
+</script>
+
+<style scoped>
+.Userinput {
+  position: fixed;
+  width: 100%;
+  bottom:0;
+  left:0;
+}
+
+</style>

历届学生/罗朝/项目练习/vue-chart/src/main.js

@@ -0,0 +1,27 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import VueWebsocket from "vue-websocket";
+import utlis from "./utils"
+import YDUI from 'vue-ydui';
+import 'vue-ydui/dist/ydui.rem.css';
+
+Vue.use(YDUI)
+
+Vue.use(VueWebsocket,"ws://127.0.0.1:3000");
+
+import store from './store/modules/UserMessage'
+
+Vue.prototype.$utlis = utlis
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  store,
+  router,
+  components: { App },
+  template: '<App/>'
+})

历届学生/罗朝/项目练习/vue-chart/src/router/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Index from '@/components/index'
+import Login from '@/components/login'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/index',
+      name: 'index',
+      component: Index
+    }
+  ]
+})

历届学生/罗朝/项目练习/vue-chart/src/store/modules/UserMessage.js

@@ -0,0 +1,54 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+
+Vue.use(Vuex)
+const store = new Vuex.Store({
+  // 只负责存储数据，一般不建议在程序里面直接对 state 数据进行读取修改
+  // 读：getters
+  // 写：mutations
+  state: {
+    showNavbars: true,
+    showTabbars: true,
+    MessageList: [],
+    onLineUser: null
+  },
+  // 读取 state 里面的数据的过程
+  getters: {
+    getMessageList: state => {
+      return state.MessageList
+    },
+    getShowNavbars: state => {
+      return state.showNavbars
+    },
+    getShowTabbars: state => {
+      return state.showTabbars
+    },
+    getonLineUser: state => {
+      return state.onLineUser
+    }
+  },
+  // 修改 state 里面的数据的过程
+  mutations: {
+    addMessageList (state, list) {
+      state.MessageList.push(list)
+    },
+    setShowNavbars(state, status) {
+      state.showNavbars = status
+    },
+    setShowTabbars(state, status) {
+      state.showTabbars = status
+    },
+    setonLineUser(state, status) {
+      state.onLineUser = status
+    }
+  },
+  // 表示动作，一般开发套路是：通过action触发 mutations，然后 mutations 修改 
+  // state
+  actions: {
+    increment (context) {
+      context.commit('increment','你好')
+    }
+  }
+});
+
+export default store;

历届学生/罗朝/项目练习/vue-chart/src/utils/index.js

@@ -0,0 +1,7 @@
+export default {
+  timer() {
+    // 2019-05-19 11:45
+    var time = new Date();
+    return `${time.getFullYear()}-${time.getMonth() +1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
+  }
+}