first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/聊天室/frontend/js/index.js

@@ -0,0 +1,199 @@
+//渲染进程
+const { ipcRenderer } = require("electron");
+
+class Index {
+    constructor() {
+
+        //将字体和颜色定义全局变量保存起来
+        this.color = "";
+        this.size = "13px";
+        this.backgroundColor = "";
+        //从本地取出登陆页面保存的数据
+        this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
+        this.socket = io("ws://127.0.0.1:3000")
+        // console.log(this.socket);
+        this.socketEmit()
+        this.bindEvent()
+    }
+
+    //前端
+    socketEmit() {
+        //推送消息
+        this.socket.emit("UserLogin", this.userInfo)
+        //主动询问群内在线成员
+        this.socket.emit("getOnlineUser", this.userInfo)
+        //监听服务器推送的消息 “”为空则默认左边 
+        this.socket.on("PushMessage", (arg) => {
+            this.sendMessage(arg, "")
+        })
+        //监听服务器发送的抖动消息 并向各个渲染进程发消息
+        this.socket.on("PushShake", (arg) => {
+            ipcRenderer.send("startShake")
+        })
+        //监听服务器返回在线成员 (返回值是数组 可遍历)
+        this.socket.on("PushOnlineUser", (arg) => {
+            $(".content_right .title").text(`群成员 ${arg.length}`)
+            //遍历之前先清空
+            $(".content_right ul").empty()
+            arg.forEach(v => {
+                $(".content_right ul").append(`
+                <li>
+                    <div class="user">
+                        <img src="${v.img}" alt="">
+                        <span>${v.name}</span>
+                    </div>
+                    ${
+                        v.type == 1 
+                        ? `<i class="iconfont icon-eye"></i>`
+                        : v.type == 2
+                          ? `<i class="iconfont icon-gif"></i>`
+                          : ''
+                    }
+                </li>
+            `)
+
+            })
+        })
+        //监听服务器推送系统消息
+        this.socket.on("SystemMessage", (arg) => {
+            $(".content_left").append(`
+            <li class="system">
+                <span>${arg}</span>
+            </li>
+            `)
+        })
+    }
+
+    //给发送消息绑定事件
+    bindEvent() {
+        var that = this;
+        //头像  名字  群名称
+        $(".header_left img").attr("src", this.userInfo.img)
+        $(".header_left span").text(this.userInfo.name)
+        $(".header_text").text(this.userInfo.room)
+        // $(".footer_input").bind('input propertychange', function() {
+        //     console.log($(".footer_input").html(因为包含表情或者文本等，所以是html));
+        // });
+
+        $(".footer_input").keydown((e) => {
+            if (e.keyCode == 13 || e.keyCode == 108) {
+                //阻止回撤默认事件
+                e.preventDefault();
+                //获取用户输入内容
+                this.userInfo.content = `<div style="background: ${this.backgroundColor}; color: ${this.color}; font-size: ${this.size};">${$(".footer_input").html()}</div>`
+                //消息发送清空输入框
+                $(".footer_input").html("")
+                //向服务器推送消息
+                this.socket.emit("sendMessage", this.userInfo)
+                //发送消息
+                this.sendMessage(this.userInfo);
+            }
+        })
+
+
+        //给底部导航菜单的每一li绑定点击事件
+        $(".menu_footer li").click(function() {
+            console.log(1111);
+            //给被点到的li标签添加激活态，并找到除它之外的所有其他同级元素去除激活态
+            $(this).addClass("active").siblings().removeClass("active")
+            //eq找到指定元素的下标，对象+下标，确定点击的div添加或是去除激活态
+            $(".menu_content div").eq($(this).index()).addClass("active").siblings().removeClass("active")
+            //标题栏文字同步
+            $(".menu_title") 
+        })
+
+        //表情for遍历循环插入表情图
+        for (var i = 0; i <= 274; i++ ) {
+            $(".smiling").append(`
+                <img class="smiling_img" src="./img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+
+        //循环插入动图
+        for (var i = 0; i <= 12; i++ ) {
+            $(".gif").append(`
+                <img class="gif_img" src="./img/gif/${i}.gif" alt="">
+            `)
+        }
+
+        //鼠标悬浮（执行两个方法）表情图是，变为gif动态图
+        $(".smiling img").hover(
+            //mouseenter当鼠标进入时 gif
+            function() {
+                $(this).attr({
+                    src: `./img/icon/${$(this).index()}@2x.gif`
+                })
+            },
+            //mouseleave当鼠标离开时 png
+            function() {
+                $(this).attr({
+                    src: `./img/icon/${$(this).index()}fix@2x.png`
+                })
+            }
+        )
+
+        //点击表情进入输入框
+        $(".smiling img").click(function() {
+            //jq里面追加内容，会删除原件，因此追加克隆的
+            $(".footer_input").append($(this).clone())
+        })
+
+        //同上
+        $(".gif img").click(function() {
+            $(".footer_input").append($(this).clone())
+        })
+
+        //点击对话框菜单选项，打开菜单
+        $(".footer_menu .aaa").click(function() { 
+            //联动菜单和底部导航栏 点击菜单，导航栏有激活态，就说明已经激活了，属于二次点击，因此隐藏菜单并去除导航栏激活态  
+            if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
+                $(".footer_topmenu").hide()
+                $(".menu_footer li").eq($(this).index()).removeClass("active")
+            //除此之外，显示菜单  
+            } else {
+                $(".footer_topmenu").show()
+                //并自己触发自己底部导航栏的点击事件
+                $(".menu_footer li").eq($(this).index()).click()
+            }
+        })
+
+        //监听并获取用户修改的夜色
+        $(".font input").on("input", function () {
+            that.color = $(this).val()
+        })
+        //监听并获取用户修改的字体
+        $(".font select").on("change", function () {
+            that.size = $(this).val()
+        })
+
+        $(".qipao input").on("input", function () {
+            that.backgroundColor = $(this).val()
+        })
+
+        //【1前端】页面抖动按钮绑定点击事件——————
+        $(".icon-shake").click(function () {
+            that.socket.emit("SetShake", that.userInfo)
+        })
+
+    }
+
+
+
+
+    //将发送消息封装起来
+    sendMessage(data, type = "right") {
+        $(".content_left").append(`
+            <li class="${type}"> 
+                <img class="avth" src="${data.img}" alt="">
+                <div class="message">
+                    <div class="name">${data.name}</div>
+                    <div class="message_text">${data.content}</div>
+                </div>
+            </li>
+        `)
+    }
+
+
+}
+
+new Index();

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/聊天室/frontend/js/login.js

@@ -0,0 +1,66 @@
+const { ipcRenderer } = require("electron")
+
+class Login{
+constructor(){
+    this.choiceImg()
+}
+
+//选择头像
+choiceImg(){
+    
+    //头像图片类型
+    var type = ""
+    for (var i = 1; i <= 10; i++){
+        //3张动图
+        i == 3 || i == 4 || i == 5? type = "gif":type = "jpg"
+
+        $(".modal-body").append(
+            `<img src="./img/${i}.${type}" alt="">`
+        )
+    }
+
+    $(".modal-body img").click(function(){
+        // console.log(this);原生js的虚拟dom 需要转换成jq的对象才能进行jq方法操作$(this)
+        //将头像地址修改为刚点击的图片地址
+        $(".login img").attr("src",$(this).attr("src"))
+        //隐藏头像选择对话框 #id选择器
+        $('#myModal').modal('hide')
+    })
+
+    $(".enter").click(function(){
+        var name  = $(".name").val();
+        var room  = $(".room").val();
+
+        if (name.length == 0){
+            new $.zui.Messager('用户名不能为空', {
+                icon: 'exclamation-sign',
+                placement: 'top', // 定义显示位置
+                type: 'danger'
+            }).show();
+
+            return;
+        }
+
+        if (room.length == 0) {
+            new $.zui.Messager('房间号不能为空', {
+                icon: 'exclamation-sign',
+                type: 'danger'
+            }).show();
+
+            return;
+        }
+        // console.log(name,room);
+        //用户数据以对象的形式保存到本地
+        localStorage.setItem("userInfo",JSON.stringify({
+           //当名字和值一样的时候，可以简写一个
+            name,room,img:$(".login img").attr("src")
+        }));
+
+        // 渲染进程向主进程输出消息
+        ipcRenderer.send("openIndex",1)
+    }) 
+}
+
+}
+
+new Login()