会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132837个问题
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/虚拟环境 31217楼

先运行服务器端,服务器启动没报错,再启动客户端,也没报错,输入账号密码之后客户端报错如下截图,然后发现服务器端也报错,不知道是什么原因。


项目目录结构截图

image.png


错误截图:

客户端

image.png


服务器端

image.png



附上代码:


客户端

package com.cn.entity;

import java.io.DataInputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;
import java.net.Socket;
import java.util.Scanner;

/**
 * 基于TCP协议的Socket编程_双向通信_实现模拟用户登录
 */
public class Client {

    public static void main(String[] args) throws IOException {
        //(1)创建Socket对象,用于连接服务器
        Socket client=new Socket("localhost", 8888);
        //(2)获取输出流  (对象流)
        ObjectOutputStream oos=new ObjectOutputStream(client.getOutputStream());
        //(3)创建User对象
        //调用获取用户对象的方法
        User u=getUser();//new User("bjsxt", "bjsxt");
        //(4)User对象发送到服务器
        oos.writeObject(u);

        //(5)获取输入流(数据流)
        DataInputStream dis=new DataInputStream(client.getInputStream());
        System.out.println(dis.readUTF());
        //(6)关闭流
        if(dis!=null){
            dis.close();
        }
        if(oos!=null){
            oos.close();
        }
        if(client!=null){
            client.close();
        }
    }
    //获取用户对象的方法
    public static User getUser(){
        Scanner input=new Scanner(System.in);
        System.out.println("请输入用户名:");
        String userName=input.next();
        System.out.println("请输入密码:");
        String password=input.next();
        //封装成User对象
        return new User(userName,password);
    }
}

User类

package com.cn.entity;

import java.io.Serializable;

public class User implements Serializable {

    private static final long serialVersionUID = -5699785428357564782L;
    private String userName;
    private String passWord;

    public User(String userName, String passWord) {
        this.userName = userName;
        this.passWord = passWord;
    }

    public User() {
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
}




服务器端

package com.cn.entity;

import java.io.DataOutputStream;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.net.ServerSocket;
import java.net.Socket;

/**
 * 基于TCP协议的Socket编程_双向通信_实现模拟用户登录
 */
public class Server {
    public static void main(String[] args) throws IOException, ClassNotFoundException {
        System.out.println("--------------服务器端已启动---------------");
        //(1)创建SocketServer对象
        ServerSocket server = new ServerSocket(8888);  //10000是端口号
        Socket socket = server.accept();
        //(2)获取输入流(对象流) ,把字节流包装成对象流
        ObjectInputStream ois = new ObjectInputStream(socket.getInputStream());

        //读Object类型,向上类型转换
        User2 user = (User2) ois.readObject();
        System.out.println(socket.getInetAddress().getHostAddress()+"请求登录");
        System.out.println("用户名:"+user.getUserName());
        System.out.println("密码:"+user.getPassWord());


        //(3)堆用户名和密码进行验证
        String str = "";
        if ("bjsxt".equals(user.getUserName())&&"bjsxt".equals(user.getPassWord())){
            str="登录成功";
        }else {
            str="对不起,账号密码不正确!";
        }
        //(4)获取输出流(数据流),把字节流包装成数据流
        DataOutputStream dos = new DataOutputStream(socket.getOutputStream());
        dos.writeUTF(str);
        //(5)关闭流,关闭SockerServer
        if (dos!=null){
            dos.close();
        }
        if (ois!=null){
            ois.close();
        }
        if (socket!=null){
            socket.close();
        }


    }

}

User2类

package com.cn.entity;

import java.io.Serializable;

public class User2 implements Serializable {

    private static final long serialVersionUID = -5699785428357564782L;
    private String userName;
    private String passWord;

    public User2(String userName, String passWord) {
        this.userName = userName;
        this.passWord = passWord;
    }

    public User2() {
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
}


JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程(旧) 31219楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 31223楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min%5B1%5D.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<br/>
<div class="div3"></div>
<script>
    /*
    * css()方法
    * 描述:本方法是jq对象读写css样式的方法,相当于js中的style属性
    * 语法:jq对象.css("key","value");
    * 注意:
    * 1.第一个参数是必要的,第二个参数是可选的
    * 2.如果只有一个参数则代表读取属性的值,*/
    $('.div1').click(function () {
        $(this).css({
            "width": "200px",
            "height": "150px",
            "border": "2px solid green",
            "background-color": "aqua"
        })
    })
    $('.div2').click(function () {
        $(this).css({"width":"+=50px"})
    })
    var arrColor=['red','orange','blue','green','purple','gray','pink','black'];
    for (var i = 0;i<arrColor.length;i++){
        $('.div3').click(function () {
            $(this).css({"background-color":"arrColor[i]"})
        })
    }
</script>
</body>
</html>

怎么实现点一下背景颜色就换一次呢,试了好几次都不对。

WEB前端全系列/第三阶段:jQuery编程模块/jQuery基础知识(旧) 31227楼
Python 全系列/第九阶段:Flask百战电商后台系统/Flask百战电商后台项目 31229楼

$(function(){
    //个人定制开始,规定一个页面只能加载15条数据
    var numPerPage = 15;
    //先要获取一共多少数据,向后台发送请求
    $.get('resource/yz_paginationTool/paginationTool.php',{},function(res){
        var totalLength =JSON.parse(res).dataLength;
        console.log(totalLength);
        var pageCount = Math.ceil(totalLength/numPerPage);//得到页数,然后动态增加分页器
        inserHtml(pageCount,1);
        bindEvent(pageCount);
        //当页面绘制完成后,加载第一页的数据
        getData(1);
    });
    // 默认测试
    /* var pageCount=15;
     inserHtml(pageCount,1);
     bindEvent(pageCount);*/

    /*
        绘制页面的
        page表示一共有多少页
        current默认加载第几页
    */
    function inserHtml(page,current){
        console.log('page:'+page+'-----current:'+current)
        var obj = $(".ts-page");
        obj.empty();
        if(current > 1){
            obj.append('<span class="tspage-start">首页</span>');
            obj.append('<span class="tspage-before">上一页</span>');
        }else{
            obj.remove('.tspage-start');
            obj.append('<span class="tspage-before disable">上一页</span>');
        }
        if(current>3 && current <= page && page>5){
            obj.append('<span class="tspage-ell">...</span>');
        }
        var start = current-2, end= current+2; //中间显示5个
        if(start >1 && current < 4||current == 1){
            end++; //前面会没有省略号。
        }
        if(current > page-2 && current <= page){
            start--; //后面的省略号消失
        }
        for(;start<=end;start++){
            if(start<=page && start >=1){
                if(start != current){
                    obj.append('<span class="page">'+start+'</span>');
                }else{
                    obj.append('<span class="page on">'+start+'</span>');
                }
            }
        }
        if(current+2<page && current >=1 && page>4){
            obj.append('<span class="tspage-ell">...</span>');
        }
        if(current<page){
            obj.append('<span class="tspage-after">下一页</span>');
            obj.append('<span class="tspage-end">尾页</span>');
        }else{
            obj.remove('.tspage-end');
            obj.append('<span class="tspage-after disable">下一页</span>');
        }
    }
    /*
        给分页器工具绑定事件监听
        page表示需要给多少个页面添加事件监听
    */
    function bindEvent(page){
        var obj = $(".ts-page");
        obj.on('click','.page',function(){
            var currentPage = parseInt($(this).text());
            inserHtml(currentPage,page);
            inserHtml(page,currentPage);
            //接下来就是获取后台传来数据的ajax函数+数据适配
            getData(currentPage);
        });
        obj.on('click','.tspage-before',function(){
            var currentPage = parseInt(obj.children('.on').text());
            if(currentPage>1){
                inserHtml(page,currentPage-1);
                //接下来就是获取后台传来数据的ajax函数+数据适配
                getData(currentPage-1);
            }

        });
        obj.on('click','.tspage-after',function(){
            var currentPage = parseInt(obj.children('.on').text());
            if(currentPage<page){
                inserHtml(page,currentPage+1);
                //接下来就是获取后台传来数据的ajax函数+数据适配
                getData(currentPage+1);
            }
        });
        obj.on('click','.tspage-start',function(){
            inserHtml(page,1);
            //接下来就是获取后台传来数据的ajax函数+数据适配
            getData(1);
        });
        obj.on('click','.tspage-end',function(){
            inserHtml(page,page);
            //接下来就是获取后台传来数据的ajax函数+数据适配
            getData(page);
        });
    }

    // 根据选择的页码数处理数据
    function getData(num){
        console.log('num:'+num);
       $.get('resource/yz_paginationTool/paginationTool.php?page='+num, function(data){
           var allDataArr=JSON.parse(data).list;
            //根据数据,将元素创建到页面中
           var  outDiv=document.querySelector('.out');
           if(!outDiv){
              //如果没有outDiv,创建一个
               outDiv=document.createElement('div');
               outDiv.className='out';
               outDiv.style.cssText='position:relative;margin:0 auto; ';
               document.body.appendChild(outDiv);
               //根据数据,创建inDivs
               for(var i=0;i<allDataArr.length;i++){
                   var inDivs=document.createElement('div');
                   inDivs.className='in';
                   inDivs.style.cssText='float:left;width:280px;border:1px  solid black;margin:10px ;' ;
                    //添加内容
                   var neirongStr="<img  src='"+allDataArr[i].headimgurl+"'>"+"<span  class='ts-cardname' style='vertical-align: top'>"+"<p>"+allDataArr[i].sectiontitle+"</p>"+
                   "<em  style='vertical-align: bottom'>"+allDataArr[i].sectionauthor+"</em>"+"</span>";
                   //添加标签
                   neirongStr=neirongStr.concat("<i class='chat-tag'>"+allDataArr[i].sectiontype+"</i>");
                  //添加文本
                   neirongStr=neirongStr.concat("<p class='chat-content'>"+allDataArr[i].sectioncontent+'</p>');
                //    console.log(neirongStr);

                   inDivs.innerHTML=neirongStr;
                   outDiv.appendChild(inDivs);
               }
           }else{
               //清空页面
            //    outDiv.innerHTML='';
              var inDivs=document.createElement('div');
              inDivs.className='in';
              inDivs.style.cssText='float:left;width:280px;height:250px;border:1px  solid black;margin:10px ;' ;
               //添加内容
              var neirongStr="<img  src='"+allDataArr[i].headimgurl+"'>"+"<span  class='ts-cardname' style='vertical-align: top'>"+"<p>"+allDataArr[i].sectiontitle+"</p>"+
              "<em  style='vertical-align: bottom'>"+allDataArr[i].sectionauthor+"</em>"+"</span>";
              //添加标签
              neirongStr=neirongStr.concat("<i class='chat-tag'>"+allDataArr[i].sectiontype+"</i>");
             //添加文本
              neirongStr=neirongStr.concat("<p class='chat-content'>"+allDataArr[i].sectioncontent+'</p>');
              console.log(neirongStr);
              inDivs.innerHTML=neirongStr;
              outDiv.appendChild(inDivs);
            
           }

           

       });
       cardWaterfall();
      
    }
    // //页面加载完成后瀑布流
    function cardWaterfall(){
        var cardArr=$('.in');
        console.log(cardArr.length);
        //此处结果为0
       }
    
});

最后这句不管在哪跑结果都是0

console.log(cardArr.length);

脑袋都想破了没想到哪里出的问题,我新建了js,用window.onload在浏览器结束运行后去查,也不行,我js里构建的class都查不到,但是在浏览器里可以查到

image.png

老师,你本地试试看,能不能查出这节课里面的.in   这个div

WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 31230楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637