• go+mysql+redis+vue3简单聊室，第6弹：使用vue3和element-plus调用接口

    文章目录


    我们使用go实现了聊天应用的接口和数据同步后，就可以开始着手使用vue搭建前端页面，并且调用接口了。本篇文章不会详细说明vue3和相关组件的使用方法，有需求的可以直接查看官方文档接口即可

    首先安装node.js，安装成功后，使用npm命令行安装vue3。安装完vue3后，在指定目录使用vue命令创建一个项目脚手架。node.js和vue的安装问题可以查看这里

    vue create chat

    • 1

    项目结构

    该命令创建了一个目录chat，并在chat中创建了项目的相关目录和文件，如下
    在这里插入图片描述

    • node_modules 存放项目依赖的各种模块和工具
    • public 是项目的入口目录，访问url默认访问该路径下的资源
    • src 项目的业务逻辑目录
      main.ts 是入口文件调用的js文件
      App.vue 是入main.ts文件中调用的组件
    • package.json 项目的依赖配置文件，用于项目的编译
    • vue.config.js vue应用的配置文件

    页面效果

    在这里插入图片描述
    在这里插入图片描述

    项目初始化配置

    main.ts

    主要用于引入项目需要用到的组件、模块和css文件，然后实例化一个vue应用

    import { createApp } from 'vue' // 引入vue，解构初始化方法
import App from './App.vue'     // 引入 App.vue 组件
import router from './router'	// 引入路由
import store from './store'		// 引入页面存储
import ElementPlus from 'element-plus'	// 引入element-plus
import 'element-plus/dist/index.css'	// 引入element-plus的css文件
import axios from 'axios'		// 引入 axios
// 使用App基础组件，创建一个vue应用
const app = createApp(App)
// 创建一个axios实例
const $axios = axios.create({
  // baseURL:'/api',// 设置代理后，这里填写代理的名称
  baseURL: 'http://127.0.0.1:8080/', //请求接口的host
  timeout:2000,
  withCredentials:true // 跨域请求时是否携带cookie验证
})
//把axios实例注入全局，方便之后使用
app.provide('$axios',$axios)
//vue应用加载各种组件实例，并挂载到id为app的dom上。#app的doum在public中的index.html
app.use(store).use(router).use(ElementPlus).mount('#app')


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    App.vue

    是项目的展示页面，提供一个路由容器，供其他组件l展示即可

    <template>
  <router-view></router-view>
</template>

<script setup>

import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goLogin = () => {
  router.push({ name: 'login-index' })
}
// 当组件加载成功时，执行goLogin方法，跳转到login-index组件
onMounted(goLogin)
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin: 60px auto;
    width:900px;
    height:700px;
  }
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    router/index.js

    该文件用于配置url路由，并指定路由绑定的组件

    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 引入用到的组件
import LoginIndex from '@/views/LoginIndex.vue'
import ChatWin from '@/views/ChatWin.vue'
// 初始化一个路由和组件的关系数组
const routes: Array<RouteRecordRaw> = [
  {name:'login-index',path:'/login',component:LoginIndex},
  {name:'chat-win',path:'/chat',component:ChatWin}
]
// 创建路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// 暴露路由
export default router


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    页面和组件

    vue中，页面都是以组件的形式出现的，但是我们仍然可以把他们区分
    登录注册这些复用率比较低的，占据整个网页的布局组件，我们把它们当做页面，统一存放在src/views 目录下
    消息展示、轮播这些小块儿的组件，可以把它们当做组件，统一存放在src/components目录下
    这样方便我们对组件和页面的管理

    我们先zaiviews目录下创建登录和聊天这两个页面的组件

    LoginIndex.vue

    <template>
  <el-container style="height:100%;">
    <el-aside style="width:60%;height:100%;background: #95d475;text-align: center;line-height:500px;color: #fdf6ec;font-size: 25px;">
      golang-vue-element-MSG
    </el-aside>
    <el-main  style="height:100%;background: #d1edc4;padding-top:200px;">
      <el-row :gutter="1" align="middle">
        <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="16"><div class="grid-content ep-bg-purple" /><h1>登录系统</h1></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
      <el-row :gutter="1" align="middle">
        <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="16"><div class="grid-content ep-bg-purple" />
          <el-form :model="form" >
            <el-form-item label="账号：">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%;" type="success" @click="onSubmit">
                登录<el-icon class="el-icon--right"><Check /></el-icon>
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script setup>
import { inject, reactive } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const form = reactive({
  phone: '',
  password: ''
})
const $axios = inject('$axios')
const onSubmit = ()=> {
  //访问登录接口
  $axios.post('/user/login', form).then((response) => {
    console.log(response.data)
    if(response.data.status == 200){
      ElMessage({message:'登录成功',type:'success'})
      // 登录成功，调整到chat-win组件
      router.push({name: 'chat-win'})
    }else{
      ElMessage.error(response.data.msg)
    }
  })
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    ChatWin.vue

    <template>
  <el-container style="height:100%;">
    <el-aside >
      <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>折叠菜单1</span>
          </template>
          <el-sub-menu index="1-2">
            <template #title>折叠菜单2</template>
            <el-sub-menu index="1-2-3">
              <template #title>折叠菜单3</template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-2-3-1">item one</el-menu-item>
                <el-menu-item index="1-2-3-2">item two</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <span>单聊</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <span>群聊</span>
        </el-menu-item>
      </el-menu>

    </el-aside>

    <el-main style="padding: 0;height:100%;border: 1px solid #A8ABB2;">
      <el-header style="height:5%;line-height:30px;border-bottom: 1px solid #C0C4CC;">当前聊天对象</el-header>
      <el-main style="background-color: #F2F6FC;height:75%;border-bottom: 1px solid #C0C4CC;">
        <chat-list
          v-for="item in contentList.arr"
          :user-id = "item.userid"
          :content="item.msg"
          :key = "item.id"
        ></chat-list>

      </el-main>
      <el-footer style="height:20%;">
        <el-form >
            <el-input
              v-model="textarea"
              type="textarea"
              placeholder=""
              :autosize="{minRows:3,maxRows:10}"
              style="height:90px;width:100%;overflow: auto;"
            />
          <el-row>
            <el-col :span=18 ></el-col>
            <el-col :span=6 >
              <el-tooltip
                v-model:visible="visible"
                placement="left"
                :auto-close=1000
                effect="light"
              >
                <template #content>
                  <span>不能发送空白内容</span>
                </template>
                <el-button  type="success" @click="onSubmit">
                  发送<el-icon class="el-icon--right"><Check /></el-icon>
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-form>
      </el-footer>
    </el-main>
  </el-container>
</template>

<script setup>
  import { reactive, ref, inject, onMounted} from 'vue'
  import { Check } from '@element-plus/icons-vue'
  // 引入自定义ChatList组件
  import ChatList from '@/components/ChatList.vue'
  // 伸缩菜单监听事件	
  const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
  }
  const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
  }
  // 从全局依赖中取出axios 实例
  const $axios = inject('$axios')
  const contentList = reactive({ arr: [] })
  let websocket
  const data = {username:'',userid:'0',msg:'',id:'0'}
  // 页面加载时，请求一次消息记录接口
  onMounted(() => {
     $axios.get('/index').then((response) => {
       if(response.data.status == 200){
         if(response.data.logs.length > 0){
           const msgLog = response.data.logs
           for(const step in msgLog){
             contentList.arr.push({
               id:msgLog[step].ID,
               userid:msgLog[step].UserID,
               msg:msgLog[step].Content
             })
           }
         }
         data.userid = String(response.data.userInfo.ID)
         data.username = response.data.userInfo.Name
       }
    })
    // 建立websocket链接
    websocket = new WebSocket('ws://127.0.0.1:8080/index')
    websocket.onopen = function (){
      console.log('connected')
      data.msg = '我上线了'
      websocket.send(JSON.stringify(data))
    }
    websocket.onmessage = function (e){
      console.log('接收消息', e.data)
      contentList.arr.push(JSON.parse(e.data))
      console.log(contentList.arr)
    }
    websocket.onclose = function (e){
      console.log('closed',e)
    }
  })
  const textarea = ref('')
  const visible = ref(false)
  // 发送消息
  const onSubmit = ()=>{
    if(textarea.value == ''){
      visible.value = true
      return false
    }
    visible.value = false
    data.msg = textarea.value
    // contentList.arr.push(data)
    console.log(data)
    websocket.send(JSON.stringify(data))
    textarea.value = ''
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  >>>.el-textarea__inner{ border:0;resize: none;box-shadow:none;}
  .el-aside{
    width:30%;height:100%;background: #545c64;
  }
  .el-header{
    height:10%;background-color: #F2F6FC;
  }
  .el-menu{width:100%;}
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162

    上面文件中引用了ChatList组件，用于展示聊天记录
    components/ChatList.vue

    <template>
  <el-row :gutter="20" v-if="userId == 1">
    <el-col :span="3"><img style="width:35px;height:35px;" :src="headImg"/></el-col>
    <el-col :span="12" class="content-div">{{content}}</el-col>
  </el-row>
  <el-row :gutter="20" v-else>
    <el-col :span="9"></el-col>
    <el-col :span="12" class="content-div" style="text-align: right;">{{content}}</el-col>
    <el-col :span="3"><img style="width:35px;height:35px;" :src="headImg"/></el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import {defineProps, ref} from 'vue'
  const props = defineProps({
    userId:{type:Number, required:true},
    content:{type:String, required:true}
  })
  const headImg = ref<string>('')
  if(props.userId == 1){
    headImg.value = 'imgs/default_head.jpg'
  }else{
    headImg.value = 'imgs/my_head.jpg'
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-div{
  text-align: left;
  background-color: #fff;
  line-height: 39px;
  padding: 0 3px;
}
.el-row {
  margin-bottom: 10px;
}
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
  • 相关阅读:
    mongoDB基本命令操作
    Effective C++ 学习笔记 条款19 设计class犹如设计type
    docker基础命令（包括安装、卸载、打包等）
    ant vue3 自定义table一行两列
    第四章 选择结构程序设计
    postgresql源码编译安装
    新营销模式之分享购营销模式~你见过这种营销模式吗？
    java计算机毕业设计养生药膳推荐系统源程序+mysql+系统+lw文档+远程调试
    表存储数据模型：宽列和时间序列
    WSL---Window上的子Linux系统
  • 原文地址：https://blog.csdn.net/u012830303/article/details/125873061