vue 网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端
最近一段时间一直在学习vue框架,对比了下react和angular发现vue上手快多了,之前有使用vue开发个vue版仿微信手机端IM聊天,最近想继续加强学习下,就做了一版网页端的vue聊天室。
依然是基于vue全家桶技术实现开发的,新增的右键菜单及弹窗均是自己开发的插件。

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

vue网页版聊天系统|仿微信、微博网页端

/*
 *  主页面js
 */
import Vue from 'vue'
import App from './App.vue'

import router from './router'
import store from './vuex'

// 引入公共Js
import './common.js'

// 引入全局组件
// 方式一:
// Vue.component('headerBar', resolve => require(['./common/header'], resolve))
// Vue.component('tab-bar', resolve => require(['./common/footer'], resolve))
// 方式二:
import _g_component from './components.js'
Vue.use(_g_component)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
/*
    引入公共及全局组件配置
    Q:282310962
    https://www.cnblogs.com/xiaoyan2017
*/ 

// 引入侧边栏及联系人
import winBar from './components/winbar'
import sideBar from './components/sidebar'
import recordList from './components/recordList'
import contactList from './components/contact'

// 引入jquery
import $ from 'jquery'

// 引入wcPop弹窗插件
import wcPop from './assets/js/wcPop/wcPop'
import './assets/js/wcPop/skin/wcPop.css'

// 引入饿了么pc端UI库
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入图片预览插件
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

// 引入自定义滚动条插件
import geminiScrollbar from 'vue-gemini-scrollbar'

// 引入加载更多插件
import infiniteLoading from 'vue-infinite-scroll'

// 引入高德地图
import vueAMap from 'vue-amap'

const install = Vue => {
    // 注册组件
    Vue.component('win-bar', winBar)
    Vue.component('side-bar', sideBar)
    Vue.component('record-list', recordList)
    Vue.component('contact-list', contactList)

    // 应用实例
    Vue.use(elementUI)
    Vue.use(photoPreview, {
        loop: false,
        fullscreenEl: true, //是否全屏
        arrowEl: true, //左右按钮
    });
    Vue.use(geminiScrollbar)
    Vue.use(infiniteLoading)
    Vue.use(vueAMap)
    vueAMap.initAMapApiLoader({
        key: "e1dedc6bdd765d46693986ff7ff969f4",
        plugin: [
            "AMap.Autocomplete", //输入提示插件
            "AMap.PlaceSearch", //POI搜索插件
            "AMap.Scale", //右下角缩略图插件 比例尺
            "AMap.OverView", //地图鹰眼插件
            "AMap.ToolBar", //地图工具条
            "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
            "AMap.PolyEditor", //编辑 折线多,边形
            "AMap.CircleEditor", //圆形编辑器插件
            "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
        ],
        uiVersion: "1.0"
    });

}

export default install
/*
 *  页面地址路由js
 */ 
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

// 通过改写router.go方法,当new Router 实例就包含back方法
Router.prototype.back = function(){
    window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
    routes: [
        // 登录、注册
        {
            path: '/login',
            component: resolve => require(['../views/auth/login'], resolve),
            meta: { hideSideBar: true },
        },
        {
            path: '/register',
            component: resolve => require(['../views/auth/register'], resolve),
            meta: { hideSideBar: true },
        },

        // 首页、通讯录、动态圈
        {
            path: '/',
            redirect: '/chat',
            component: resolve => require(['../views/index'], resolve),
            meta: { requireAuth: true },
        },
        {
            path: '/contact',
            redirect: '/contact/new-friends',
            component: resolve => require(['../views/contact'], resolve),
            meta: { requireAuth: true },
        },

        ...

    ]
});

// 注册全局钩子(拦截登录状态)
router.beforeEach((to, from, next) => {
    const token = store.state.token
    // 判断该路由地址是否需要登录权限
    if(to.meta.requireAuth){
        // 判断token是否存在
        if(token){
            next()
        }else{
            next()
            // 未登录授权
            wcPop({
                content: '还未登录授权!', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
                end: function(){
                    next({ path: '/login' })
                }
            });
        }
    }else{
        next()
    }
})

export default router
<!--登录/注册模板-->
<template>
  <div class="wcim__lgregWrapper flexbox flex__direction-column">
    <div class="wcim__lgregHeader flex1">
        <div class="slogan">
            <div class="logo"><img src="src/assets/img/uimg/u__qun-vue.png" /></div>
            <h2>欢迎使用Vue-webChat</h2>
        </div>
        <div class="forms">
            <form @submit.prevent="handleSubmit">
                <ul class="clearfix">
                    <li class="flexbox flex-alignc"><i class="iconfont icon-shouji"></i><input class="iptxt flex1" type="tel" v-model="formObj.tel" name="tel" placeholder="请输入手机号" autocomplete="off" maxlength="11" /><em class="borLine"></em></li>
                    <li class="flexbox flex-alignc"><i class="iconfont icon-pass"></i><input class="iptxt flex1" type="password" v-model="formObj.pwd" name="pwd" placeholder="请输入密码" autocomplete="off" /><em class="borLine"></em></li>
                </ul>

                <div class="btns"><button class="wc__btn-primary btn__login" type="submit">登录</button></div>
                <div class="lgregLink align-c clearfix">
                    <router-link to="#" tag="a">忘记密码</router-link>
                    <router-link to="/register" tag="a">注册用户</router-link>
                </div>
            </form>
        </div>
    </div>
    <div class="wcim__lgregFooter">
        <p class="version">vue网页端聊天室 ▪ vueWebChat v1.0</p>
    </div>
  </div>
</template>

<script>
  import { setToken, checkTel } from '../../utils/filters'
  export default {
      data () {
          return {
              formObj: {}
          }
      },
      methods: {
          handleSubmit(){
              // console.log(this.formObj)
              // console.log(JSON.stringify(this.formObj))

              var that = this;
              if(!this.formObj.tel){
                  wcPop({ content: '手机号不能为空!', style: 'background:#e03b30;color:#fff;', time: 2 });
              }else if(!checkTel(this.formObj.tel)){
                  wcPop({ content: '手机号格式不正确!', style: 'background:#e03b30;color:#fff;', time: 2 });
              }else if(!this.formObj.pwd){
                  wcPop({ content: '密码不能为空!', style: 'background:#e03b30;color:#fff;', time: 2 });
              }else{
                  this.$store.commit('SET_TOKEN', setToken());
                  this.$store.commit('SET_USER', this.formObj.tel);

                  wcPop({
                      content: '登录成功,跳转中...', style: 'background:#41b883;color:#fff;', time: 2, shadeClose: false,
                      end: function(){
                          that.$router.push('/');
                      }
                  });
              }
          }
      }
  }
</script>

<style>

</style>

本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)

讨论数量: 2

这样贴大量的图和不完整的代码的目的是啥 :unamused:

1个月前 评论
DreamOfFreedom 1个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
文章
10
粉丝
9
喜欢
17
收藏
9
排名:313
访问:1.17 万+
私信
所有博文