Vue web chat system imitates wechat and microblog web pages

Time:2021-8-9

Vue web chat system imitates wechat and microblog web pages
Recently, I have been learning the Vue framework. After comparing react and angular, I found that Vue is much faster to get started. Before, I used Vue to develop oneVue imitation wechat mobile terminalIM chat. Recently, I want to continue to strengthen my study, so I made a version of Vue chat room on the web side.
It is still developed based on Vue technology. The new right-click menu and pop-up window are self-developed plug-ins.

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

Vue web chat system imitates wechat and microblog web pages

/*
 *Main page JS
 */
import Vue from 'vue'
import App from './App.vue'

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

//Introduce public JS
import './common.js'

//Introducing global components
//Mode 1:
// Vue.component('headerBar', resolve => require(['./common/header'], resolve))
// Vue.component('tab-bar', resolve => require(['./common/footer'], resolve))
//Mode 2:
import _g_component from './components.js'
Vue.use(_g_component)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
/*
    Introduce public and global component configuration
    Q:282310962
    https://www.cnblogs.com/xiaoyan2017
*/ 

//Introducing sidebar and contacts
import winBar from './components/winbar'
import sideBar from './components/sidebar'
import recordList from './components/recordList'
import contactList from './components/contact'

//Introducing jquery
import $ from 'jquery'

//Introducing wcpop pop-up plug-in
import wcPop from './assets/js/wcPop/wcPop'
import './assets/js/wcPop/skin/wcPop.css'

//Have you introduced the PC UI library
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//Import picture preview plug-in
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

//Introducing a custom scroll bar plug-in
import geminiScrollbar from 'vue-gemini-scrollbar'

//Introducing and loading more plug-ins
import infiniteLoading from 'vue-infinite-scroll'

//Introducing Gaode map
import vueAMap from 'vue-amap'

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

    //Application examples
    Vue.use(elementUI)
    Vue.use(photoPreview, {
        loop: false,
        Fullscreenel: true, // full screen
        Arrovel: true, // left and right buttons
    });
    Vue.use(geminiScrollbar)
    Vue.use(infiniteLoading)
    Vue.use(vueAMap)
    vueAMap.initAMapApiLoader({
        key: "e1dedc6bdd765d46693986ff7ff969f4",
        plugin: [
            "Amap. Autocomplete", // enter the prompt plug-in
            "Amap. Placesearch", // POI search plug-in
            "Amap. Scale", // thumbnail plug-in scale bar in the lower right corner
            "Amap. Overviews", // map eagle eye plug-in
            "Amap. Toolbar", // map toolbar
            "Amap. Maptype", // category switching control, which realizes the control of switching between the default layer, satellite map and traffic layer
            "Amap. Polyeditor", // edit polyline and polygon
            "Amap. Circleeditor", // circular editor plug-in
            "Amap. Geolocation" // positioning control, which is used to obtain and display the longitude and latitude position of the user's host
        ],
        uiVersion: "1.0"
    });

}

export default install
/*
 *Page address routing JS
 */ 
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

//By rewriting the router.go method, the new router instance contains the back method
Router.prototype.back = function(){
    window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
    routes: [
        //Login and registration
        {
            path: '/login',
            component: resolve => require(['../views/auth/login'], resolve),
            meta: { hideSideBar: true },
        },
        {
            path: '/register',
            component: resolve => require(['../views/auth/register'], resolve),
            meta: { hideSideBar: true },
        },

        //Home page, address book, dynamic circle
        {
            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 },
        },

        ...

    ]
});

//Register global hook (intercept login status)
router.beforeEach((to, from, next) => {
    const token = store.state.token
    //Judge whether the routing address needs login permission
    if(to.meta.requireAuth){
        //Judge whether the token exists
        if(token){
            next()
        }else{
            next()
            //No login authorization
            wcPop({
                Content: 'authorization not logged in yet!', anim: 'shake', style: 'background:#e03b30; color:#fff;',  time: 2,
                end: function(){
                    next({ path: '/login' })
                }
            });
        }
    }else{
        next()
    }
})

export default router
<!-- Login / registration template -- >
<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>Welcome to Vue webchat</h2>
        </div>
        <div class="forms">
            <form @submit.prevent="handleSubmit">
                <ul class="clearfix">
                    < Li class = "flexbox flex align" > < I class = "iconfont icon Shouji" > < / I > < input class = "iptxt flex1" type = "Tel" V-model = "formobj. Tel" name = "Tel" placeholder = "please enter the phone number" autocomplete = "off" MaxLength = "11" / > < EM class = "borline" ></em></li>
                    < Li class = "flexbox flex align" > < I class = "iconfont icon pass" > < / I > < input class = "iptxt flex1" type = "password" V-model = "formobj. PWD" name = "PWD" placeholder = "please enter password" autocomplete = "off" / > < EM class = "borline" ></em></li>
                </ul>

                <div class="btns"><button class="wc__ btn-primary btn__ Login "type =" submit "> login < / button > < / div >
                <div class="lgregLink align-c clearfix">
                    < router link to = "#" tag = "a" > forgot password < / router link >
                    < router link to = "/ register" tag = "a" > registered user < / router link >
                </div>
            </form>
        </div>
    </div>
    <div class="wcim__lgregFooter">
        < p class = "version" > Vue web chat room ▪  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: 'mobile number cannot be empty!', style: 'background:#e03b30; color:#fff;',  time: 2 });
              }else if(!checkTel(this.formObj.tel)){
                  Wcpop ({content: 'incorrect mobile number format!', style: 'background:#e03b30; color:#fff;',  time: 2 });
              }else if(!this.formObj.pwd){
                  Wcpop ({content: 'password cannot be empty!', style: 'background:#e03b30; color:#fff;',  time: 2 });
              }else{
                  this.$store.commit('SET_TOKEN', setToken());
                  this.$store.commit('SET_USER', this.formObj.tel);

                  wcPop({
                      Content: 'login succeeded, skipping...', style: 'background: #41b883; color:#fff;',  time: 2, shadeClose: false,
                      end: function(){
                          that.$router.push('/');
                      }
                  });
              }
          }
      }
  }
</script>

<style>

</style>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

This article is an original article and cannot be reproduced without the permission of the author. You are welcome to exchange QQ (282310962) Wx (xy190310)

Recommended Today

Example of method for converting Lua table to c# dictionary

Table property Table is an “associative array”. The index of the array can be a number or a string. All index values need to be enclosed by “[” and “]”; If it is a string, you can also remove quotation marks and brackets; That is, if it is not enclosed by [], it is considered […]