博客

1. 后端：Spring+SpringMVC+Mybatis+Redis
2. 前端：JSP+LayUI+Echarts+jQuery

package com.example.base.controller;

import com.alibaba.fastjson.JSONObject;
import com.example.base.dao.mapper.DBHandler;
import com.example.base.dao.mapper.DictMapper;
import com.example.base.dao.mapper.UserMapper;
import com.example.base.dao.repository.UserRepo;
import com.example.base.entity.User;
import com.example.base.util.ApplicationContextUtil;
import com.example.base.vo.MsgVO;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
@Component
@ServerEndpoint("/groupChat/{sid}/{userId}")
public class WebSocketServerController {

    //解决无法注入问题
    private static UserRepo userRepo;

    private static ApplicationContext applicationContext;
    public static void setApplicationContext(ApplicationContext applicationContext) {
        userRepo = applicationContext.getBean(UserRepo.class);
    }
    /**
     * 房间号 -> 组成员信息
     */
    private static ConcurrentHashMap<String, List<Session>> groupMemberInfoMap = new ConcurrentHashMap<>();
    /**
     * 房间号 -> 在线人数
     */
    private static ConcurrentHashMap<String, Set<Integer>> onlineUserMap = new ConcurrentHashMap<>();

    /**
     * 收到消息调用的方法，群成员发送消息
     *
     * @param sid:房间号
     * @param userId：用户id
     * @param message：发送消息
     */
    @OnMessage
    public void onMessage(@PathParam("sid") String sid, @PathParam("userId") Integer userId, String message) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        Set<Integer> onlineUserList = onlineUserMap.get(sid);
        // 先一个群组内的成员发送消息
        sessionList.forEach(item -> {
            try {
                // json字符串转对象
                MsgVO msg = JSONObject.parseObject(message, MsgVO.class);
                msg.setCount(onlineUserList.size());
                // json对象转字符串
                String text = JSONObject.toJSONString(msg);
                item.getBasicRemote().sendText(text);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    /**
     * 建立连接调用的方法，群成员加入
     *
     * @param session
     * @param sid
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid, @PathParam("userId") Integer userId) {
        List<Session> sessionList = groupMemberInfoMap.computeIfAbsent(sid, k -> new ArrayList<>());
        Set<Integer> onlineUserList = onlineUserMap.computeIfAbsent(sid, k -> new HashSet<>());
        onlineUserList.add(userId);
        sessionList.add(session);
        // 发送上线通知
        sendInfo(sid, userId, onlineUserList.size(), "上线了~");
    }


    public void sendInfo(String sid, Integer userId, Integer onlineSum, String info){
        // 获取该连接用户信息
        User currentUser =  userRepo.findById(userId).get();

        // 发送通知
        MsgVO msg = new MsgVO();
        msg.setCount(onlineSum);
        msg.setUserId(userId);
        msg.setAvatar(currentUser.getAvatar());
        msg.setMsg(currentUser.getNickname()+ info);
        // json对象转字符串
        String text = JSONObject.toJSONString(msg);
        onMessage(sid, userId, text);
    }

    /**
     * 关闭连接调用的方法，群成员退出
     *
     * @param session
     * @param sid
     */
    @OnClose
    public void onClose(Session session, @PathParam("sid") String sid, @PathParam("userId") Integer userId) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        sessionList.remove(session);
        Set<Integer> onlineUserList = onlineUserMap.get(sid);
        onlineUserList.remove(userId);
        // 发送离线通知
        sendInfo(sid, userId, onlineUserList.size(), "下线了~");
    }

    /**
     * 传输消息错误调用的方法
     *
     * @param error
     */
    @OnError
    public void OnError(Throwable error) {
        log.info("Connection error");
    }
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE  mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.base.dao.mapper.TzpyhMapper">
    <resultMap id="BaseResultMap" type="com.example.base.entity.Tzpyh">
        <result column="gm" property="gm"/>
        <result column="id" property="id"/>
        <result column="qydz" property="qydz"/>
        <result column="qymc" property="qymc"/>
        <result column="zynr" property="zynr"/>
    </resultMap>

    <!-- 表字段 -->
    <sql id="baseColumns">
        t.gm
        , t.id
        , t.qydz
        , t.qymc
        , t.zynr
    </sql>

    <!-- 查询全部 -->
    <select id="listAll" resultMap="BaseResultMap">
        SELECT
        <include refid="baseColumns"/>
        FROM tzpyh t
    </select>

    <!-- 根据主键获取单条记录 -->
    <select id="getById" resultMap="BaseResultMap" parameterType="Integer">
        SELECT
        <include refid="baseColumns"/>
        FROM tzpyh t
        WHERE id = #{id}
    </select>

    <!-- 插入全部字段 -->
    <insert id="insert" parameterType="com.example.base.entity.Tzpyh"
            keyProperty="id" keyColumn="id" useGeneratedKeys="true"
    >
        INSERT INTO tzpyh
        <trim prefix="(" suffix=")" suffixOverrides=",">
            gm,
            qydz,
            qymc,
            zynr,
        </trim>
        <trim prefix="VALUES (" suffix=")" suffixOverrides=",">
            #{gm},
            #{qydz},
            #{qymc},
            #{zynr},
        </trim>
    </insert>

    <!-- 插入不为NULL的字段 -->
    <insert id="insertIgnoreNull" parameterType="com.example.base.entity.Tzpyh"
            keyProperty="id" keyColumn="id" useGeneratedKeys="true"
    >
        INSERT INTO tzpyh
        <trim prefix="(" suffix=")" suffixOverrides=",">

            <if test="gm != null">
                gm,
            </if>
            <if test="qydz != null">
                qydz,
            </if>
            <if test="qymc != null">
                qymc,
            </if>
            <if test="zynr != null">
                zynr,
            </if>
        </trim>
        <trim prefix="VALUES (" suffix=")" suffixOverrides=",">
            <if test="gm != null">
                #{gm},
            </if>
            <if test="qydz != null">
                #{qydz},
            </if>
            <if test="qymc != null">
                #{qymc},
            </if>
            <if test="zynr != null">
                #{zynr},
            </if>
        </trim>
    </insert>

    <!-- 更新,更新全部字段 -->
    <update id="update" parameterType="com.example.base.entity.Tzpyh">
        UPDATE tzpyh
        <set>
            gm=#{gm},
            qydz=#{qydz},
            qymc=#{qymc},
            zynr=#{zynr},
        </set>
        WHERE id = #{id}
    </update>


    <!-- 更新不为NULL的字段 -->
    <update id="updateIgnoreNull" parameterType="com.example.base.entity.Tzpyh">
        UPDATE tzpyh
        <set>
            <if test="gm != null">
                gm=#{gm},
            </if>
            <if test="qydz != null">
                qydz=#{qydz},
            </if>
            <if test="qymc != null">
                qymc=#{qymc},
            </if>
            <if test="zynr != null">
                zynr=#{zynr},
            </if>
        </set>
        WHERE id = #{id}
    </update>


    <!-- 根据主键删除记录 -->
    <delete id="delete" parameterType="com.example.base.entity.Tzpyh">
        DELETE
        FROM tzpyh
        WHERE id = #{id}
    </delete>


</mapper>

<template>
  <div>
    <el-card>
      <el-table
        :data="
          resultList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        stripe
      >
        <el-table-column
          type="index"
          label="#"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
        ></el-table-column>
        <el-table-column
          label="姓名"
          prop="nickname"
          align="center"
        ></el-table-column>
        <el-table-column
          label="角色"
          prop="role"
          align="center"
        ></el-table-column>
        <el-table-column
          label="城市"
          prop="city"
          align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="regTime"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="success" @click="editUser(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="resultList.length"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      title="增加用户"
      :visible.sync="shareDialogVisible"
      width="30%"
      @close="shareRoleDialogClosed"
    >
      <el-form :model="addUserForm" ref="addUserFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="addUserForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="addUserForm.role" filterable placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="addUserForm.city"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="shareDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="eritForm" ref="eritFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="eritForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="eritForm.nickname"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色" prop="role">
          <el-select v-model="eritForm.role" filterable placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="城市" prop="city">
          <el-input v-model="eritForm.city"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserCmf">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.query();
  },
  data() {
    return {
      queryForm: {
        username: "",
        nickname: "",
        role: "",
      },
      addUserForm: {
        id: "",
        username: "",
        password: "",
        nickname: "",
        role: "",
        city: "",
      },
      eritForm: {},
      roleList: [],
      shareDialogVisible: false,
      editDialogVisible: false,
      //查询到的数据
      resultList: [],
      //分页中的当前页
      currentPage: 1,
      //分特中的每页的大小
      pagesize: 5,
    };
  },
  methods: {
    query() {
        const sql = "select a.*,c.name role from user a join roles_user b on a.id = b.uid join roles c on c.id = b.rid  where a.id="+  window.sessionStorage.getItem("userId");
         this.postRequest("selectAllBySql", {sql: sql}).then((resp) => {
            this.resultList = resp.data.data;
        });
    },
    bfAddUser(){
      this.getRoleList();
      this.shareDialogVisible = true;
    },
    addUser() {
      this.postRequest("admin/user/add", this.addUserForm).then((res) => {
        if (res.data.status === 0) {
          this.$message.success(res.data.msg);
          console.log(res.data);
        }
        if (res.data.status === 1) {
          this.$message.error(res.data.msg);
          console.log(res.data);
        }
        this.shareDialogVisible = false;
        this.query();
      });
    },
    editUser(e) {
      this.eritForm = e;
      this.editDialogVisible = true;
      this.getRoleList();
    },
    editUserCmf() {
      console.log(this.eritForm);
      this.postRequest("admin/user/edit", this.eritForm).then((res) => {
        console.log(res.data.status);
        if (res.data.status === 0) {
          console.log(res.data.msg);
          this.$message.success(res.data.msg);
        }
        if (res.data.status === 1) {
          this.$message.error(res.data.msg);
        }
        this.editDialogVisible = false;
        this.query();
      });
      
    },
    getRoleList() {
      this.getRequest("admin/user/role/select").then((res) => {
        this.roleList = res.data.data;
        console.log(res.data.data);
      });
    },
    delUser(e) {
      this.postRequest("admin/user/del", e).then((res) => {
        if (res.data.status === 0) {
          this.$message.success(res.data.msg);
          console.log(res.data);
        }
        if (res.data.status === 1) {
          this.$message.error(res.data.msg);
          console.log(res.data);
        }
      });
      this.query();
    },
    //处理分页的函数
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    shareRoleDialogClosed() {
      //添加用户的弹框关闭重置表单
      this.$refs.addUserFormRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
</style>