文字页游开发（客户端）1

标签：文字 vue socket 登录 state 开发 import data 客户端

客户端搭建

 在服务端搭建成功后，在下载好node、npm相关的内容后就可直接下载安装vue相关的内容

这边就直接使用vue-cli 脚手架去安装vue

npm install -g @vue/cli

具体流程参考：https://cli.vuejs.org/zh/guide/installation.html

创建项目

使用脚手架的命令

vue create client

选择Manually select features

仅选择Vuex

 

 

 然后使用2.x版本

 

 

 其他默认选择。等待创建完成就可以使用命令进入项目文件夹了。

使用命令npm run serve便可以开始调试项目。

使用vue-socket.io和element-ui

安装vue-socket.io模块，在命令行输入

npm install vue-socket.io --save

安装element-ui模块，在命令行输入

npm i element-ui -S

 详细可参考：https://element.eleme.cn/#/zh-CN/component/installation

 

引入模块

然后在目录里找到main.js引入vue-socket.io和element-ui

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import store from './store/index'
import 'element-ui/lib/theme-chalk/index.css';
import VueSocketIO from 'vue-socket.io'

Vue.config.productionTip = false


Vue.use(ElementUI).use(
  new VueSocketIO({
    debug: false, // debug调试，生产建议关闭
    connection: "http://localhost:3000", // 服务器地址
    vuex: {
      store,
      actionPrefix: 'SOCKET_',
      mutationPrefix: 'SOCKET_'
    },
    options: {     //Optional options, 
      autoConnect: false, //关闭自动连接，在用户登录后在连接。
    }
  })
);

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

修改sotre/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        /* 聊天类型 */
        chatType: '',
        /* 记录登录状态 */
        isLogin: false,
        /* 我的信息 */
        myInfo: {
        },/* 别人的信息（特指聊天对象） */
        userInfo: {
            account: '',
            name: '',
        },
        /* 用户列表 */
        userList: [],
        /* 聊天记录 */
        chatMessageList: [],
    },
    mutations: {
        /* 聊天记录的修改,这里我们使用vuex监听 */
        SOCKET_s2c_updateChatMessageList(state, data) {
            state.chatMessageList.push(data);
        },
        /* 登录成功 */
        SOCKET_loginSuccess(state, data) {
            state.myInfo = data.info;
            state.myBag = data.bag;
            // 清掉2个不想要客户端知道的东西
            delete state.myInfo._id
            delete state.myInfo.password
            state.isLogin = true;
        },/* 渲染用户列表 */
        SOCKET_login(state, data) {
            state.userList = data;
        },
        setUserInfo(state, data) {
            state.userInfo = data;
        },
        setMyInfo(state, data) {
            state.myInfo = data;
            state.isLogin = true;
        },
        setLogout(state) {
            state.myInfo = {};
            state.isLogin = false;
        },
    },
    actions: {},
    modules: {}
})

创建登录页面

修改client目录下的App.vue

新增一个登录和注册框，把按钮绑定上注册、登录功能

<template>
  <div class="common">
    <!-- 登录 -->
    <div v-if="!isLogin" class="login">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="登录" name="first">
          <!-- 用户名输入 -->
          <el-input v-model="account" placeholder="请输入用户名" />
          <el-input v-model="password" placeholder="输入密码" />
          <el-button @click="login">登录</el-button>
      </el-tabs>
    </div>
  </div>
</template>

新建login方法

使用this.$socket 调用vue-socket.io，调用connect()方法链接服务器。

使用emit向服务器通讯

login() {
      if (this.account && this.password) {
        /* 连接socket */
        this.$socket.connect();
        console.log(this.$socket);
        console.log(this.$socket.emit("test"));
        this.$socket.emit(
          "login",
          { account: this.account, password: this.password },
          (result) => {
            if (result) {
              /* 登录成功的情况下，才修改vuex的数据 */
              this.$message.success("登录成功！");
            } else {
              /* 失败，给出提示！ */
              this.$message.error("登录失败");
            }
          }
        );
      }
    },

新建register方法

同理

register() {
      if (this.account && this.password && this.nikename) {
        /* 连接socket */
        this.$socket.connect();
        this.$socket.emit(
          "register",
          {
            account: this.account,
            password: this.password,
            nikename: this.nikename,
          },
          (result) => {
            console.log(result);
            if (result) {
              /* 登录成功的情况下，才修改vuex的数据 */
              this.$message.success("注册成功！");
             
            } else {
              /* 失败，给出提示！ */
              this.$message.error("注册失败！");
            }
          }
        );
      }

 

标签：文字,vue,socket,登录,state,开发,import,data,客户端
From： https://www.cnblogs.com/hakold/p/17023574.html