一、读取静态资源

1、在node项目的src目录,建立www目录,放置music项目文件

2、在src目录,建立index.js

const http = require('http')
const path = require('path')
const fs = require('fs')

let server = http.createServer((req,res)=>{
    if (req.url == "favicon.ico") return;
    
    console.log(req.url);
    if (req.url.startsWith('/music')){
        fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
            if(err) throw err;
            res.end(data);
        })
    }  else {
        
    }
})

server.listen('8085')

在cmd中,进入src目录,输入:node index.js

在浏览器中,输入:

二、实现登录

前端采用jquery的ajax请求。

后端采用node编写,采用两种方式(get、post)实现登录,get请求采用getlogin;post采用postlogin登录

1、编写服务端

由于要解析地址获取请求参数,导入:

const querystring=require('querystring')
const url=require('url')

完整代码:

const http = require('http')
const path = require('path')
const fs = require('fs')
const querystring=require('querystring')
const url=require('url')

let server = http.createServer((req,res)=>{
    if (req.url == "favicon.ico") return;
    
    console.log(req.url);
    if (req.url.startsWith('/music')){
        fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
            if(err) throw err;
            res.end(data);
        })
    } else if(req.url.startsWith('/getlogin')){
        if (url.parse(req.url,true).query.username){
            let username = url.parse(req.url,true).query.username;
            let password = url.parse(req.url,true).query.password;
            res.end(username);
        } else {
            res.end('404');
        }
        
    } else if(req.url.startsWith('/postlogin')){
        let allData = '';
        req.on('data',chunk=>{
            allData+=chunk;
        })
        req.on('end',()=>{
            console.log("allData:"+allData);
            
            allData = "/postlogin?"+allData;
            if (url.parse(allData,true).query.username){
                let username = url.parse(allData,true).query.username;
                let password = url.parse(allData,true).query.password;
                res.end(username);
            } else {
                res.end('404');
            }
        })
        
    } else {
        
    }
})

server.listen('8085')

2、客户端

2.1采用get请求

var username = $('#username').val();
            var pwd = $('#pwd').val();
            var rememberpwd = $('#rememberpwd').prop('checked');
            //采用ajax验证
            // 采用get方法
            var sendData = "username="+username+"&password="+pwd;
            var url="http://localhost:8085/getlogin?"+sendData;
            $.ajax({
                type:'get',
                url:url,
                success:function(data){
                    console.log(data);
                    if (data!="404"){
                        $('#usr').text("欢迎"+data+"登录");
                        $('.loginForm').hide();
                    } else {
                        alert('登录失败');
                    }
                },
                error:function(err){
                    console.log(err);
                    alert('登录失败');
                }
            });

2.2采用post请求

var username = $('#username').val();
            var pwd = $('#pwd').val();
            var rememberpwd = $('#rememberpwd').prop('checked');
            //采用ajax验证
            //采用post方法
            var url="http://localhost:8085/postlogin";
            $.ajax({
                type:'post',
                url:url,
                data:{
                    username:username,
                    password:pwd
                },
                success:function(data){
                    console.log(data);
                    if (data!="404"){
                        $('#usr').text("欢迎"+data+"登录");
                        $('.loginForm').hide();
                    } else {
                        alert('登录失败');
                    }
                },
                error:function(err){
                    console.log(err);
                    alert('登录失败');
                }
            });

三、效果图

打开登录

登陆后

完善网易云音乐。读取静态资源。实现用户登录以后,登录的内容转换成欢迎XXXX登录相关推荐

  1. 【各版本通吃】【2023/05/14更新】通过网易云音乐分享链接找到分享用户主页

    2023/05/14正式更新,支持所有版本解析 简介 曾经网易云音乐的音乐分享链接携带了用户明文 id ,可以直接通过拼接网址得到用户主页. 前天发现官方为这个举措在安全层面下了功夫加固了数据,好歹终 ...

  2. 【python】爬虫入门:爬取网易云音乐的歌曲评论、用户歌单、用户听歌记录等

    目录 一.概述 二.爬取流程 1.爬取评论 1.1.资源定位 1.2.爬取准备 1.3.代码实现 2.爬取听歌记录 2.1.资源定位 2.2.爬取准备 2.3.js劫持 三.总结 一.概述 第一次学爬 ...

  3. node实现网易云音乐项目前后端连接

    1完善网易云音乐.读取静态资源.实现用户登录以后,登录的内容转换成欢迎XXXX登录 后台文件代码 const fs=require('fs'); const http=require('http'); ...

  4. 第二次作业--网易云音乐

    [网易云音乐]是一款由网易开发的音乐产品,依托专业音乐人.DJ.好友推荐及社交功能,在线音乐服务主打歌单.社交.大牌推荐和音乐指纹,以歌单.DJ节目.社交.地理位置为核心要素,主打发现和分享.[1]这 ...

  5. SSM+微信小程序网易云音乐设计与实现 毕业设计-附源码261620

    基于SSM微信小程序的网易云音乐 摘  要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...

  6. SSM+mysql+微信小程序网易云音乐设计与实现 毕业设计-附源码261620

    基于SSM微信小程序的网易云音乐 摘  要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...

  7. (附源码 )SSM+mysql+微信小程序网易云音乐设计与实现 毕业设计261620

    基于SSM微信小程序的网易云音乐 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...

  8. 微信小程序网易云音乐设计与实现 毕业设计-附源码261620

    基于SSM微信小程序的网易云音乐 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...

  9. 第2次作业:网易云音乐案例分析

    一.介绍产品相关信息 摘要:网易云音乐是一款专注于发现与分享的音乐产品,拥有大量高品质音乐,同时提供歌单.主播电台.个性化推荐.互动交流等功能,致力于为用户打造全新的音乐生活.网易云音乐从13年初起步 ...

最新文章

  1. 独家 | 构建符合道德规范的用于人才管理的AI(附链接)
  2. 防抖动函数(debounce)的原理
  3. 如何写出一个较好的快速排序程序
  4. linux 递归查看文件个数,Linux下递归读取文件数量
  5. BZOJ 1051 || POJ 2186 受欢迎的牛 Tarjan
  6. 【jQuery】JQuery-ui autocomplete与strtus2结合使用
  7. 专业版谷歌地球地图永久版带手机版App
  8. 什么是硬件加速引擎?
  9. 双容水箱液位串级控制系统的设计
  10. google吃豆子游戏
  11. Linux history命令
  12. mysql超市管理系统怎么写_java+mysql超市进销存管理系统设计+源代码
  13. DSP28335的eCAP模块
  14. 销售人员激励机制怎么定?
  15. arcgis的炸开多边形功能
  16. 后端开发面试自我介绍_java开发面试评语
  17. 论文阅读_DeepWalk
  18. 黑马NLP实战 --- 新闻分类模型训练
  19. Spring捕获AOP抛出的异常
  20. 2023年全国最新道路运输从业人员精选真题及答案62

热门文章

  1. 2013一些好的句子
  2. 会计计算机敲打大赛,2017上半年会计实操技能竞赛“荣耀对决”总决赛!
  3. MatlabSimulink开发STM32F4
  4. ArcGIS Engine开发---图层符号化
  5. 使用软件检测电脑设置对应的注册表位置
  6. 基础知识 十进制转二进制
  7. Ansible、Puppet、SaltStac等4种常见的自动化运维工具全解析
  8. Fortran笔记,指针-Part1
  9. VC实现的简易防火墙
  10. Extjs 4.0 textarea 滚动条自动到最低