前端路线--Nodejs(day02)

day02-02-http模块


let http = require("http") //服务器模块

// 创建一个服务器对象app
let app = http.createServer((request, response) => {
    // request 请求
    // response 响应
    response.write("ok")  //服务器给前端响应的数据
    response.end() //响应结束
})

//服务器监听端口
// 参数1:端口号  参数2:回调函数
app.listen(3000, () => {
    console.log("3000running");
})


day02-03-案例-用服务器把大商创给页面

let http = require("http") //服务器模块
let fs = require("fs")

// 创建一个服务器对象app
let app = http.createServer((req, res) => {
	//设置写入头信息
	/* 
		第一个参数:成功的响应状态码
		第二个参数:文本模式和字符集
	 */
    // res.writeHead(200, {
    //     "content-type": "text/html;charset=utf-8"
    // })

    // http://localhost:3000/index.html
    console.log(req.url); 返回请求的文件名index.html
	
	
    // 读取文件
    fs.readFile('./dscmall' + req.url, (err, data) => {
        if (err) {
            console.log(err);
        } else {
            res.write(data)  //服务器给前端响应的数据

        }
        res.end() //响应结束
    })

})


app.listen(3000, () => {
    console.log("3000running");
})


day02-04-url模块

let url = require("url");
let str = "http://localhost:3000/?username=erge&age=18"  //{username:"erge",age:18}
// url.parse(字符串url,true)

//将URL字符串解析为对象
// 说明:第二个参数如果为true 解析的对象中的query将是对象 { username: 'erge', age: '18' }
console.log(url.parse(str, true));

// format() 是parse()方法的逆向操作
//将url进行斜杠/拼接
//参数1:url字符串 参数2:拼接的字符串
console.log(url.resolve("http://localhost:3000", "login")); //http://localhost:3000/login


//将对象格式化为url字符串  parse()的逆向操作
let urlobj=url.parse(str, true);
console.log(url.format(urlobj));
// Url {
//     protocol: 'http:',
//     slashes: true,
//     auth: null,
//     host: 'localhost:3000',
//     port: '3000',
//     hostname: 'localhost',
//     hash: null,
//     search: '?username=erge&age=18',
//     query: [Object: null prototype] { username: 'erge', age: '18' },
//     pathname: '/',
//     path: '/?username=erge&age=18',
//     href: 'http://localhost:3000/?username=erge&age=18'
//   }

day02-05-querystring模块

let querystring = require("querystring");


//把?后的数据转为对象
console.log(querystring.parse("username=erge&age=18")); //{ username: 'erge', age: '18' }
console.log(querystring.parse("username=二哥&age=18"));

//把对象转为?后面的字符串
console.log(querystring.stringify({ username: 'erge', age: '18' })); //username=erge&age=18

// escape() 编码
console.log(querystring.escape("雷锋")); //%E9%9B%B7%E9%94%8B

// unescape() 解码
console.log(querystring.unescape("%E9%9B%B7%E9%94%8B")); //雷锋

day02-06-path模块

//引入模块
let path = require("path");

//获取url中的文件名
let str = "http://localhost/dscmall/index.html"
console.log(path.basename(str));  //index.html  获取文件名

//获取后缀名
console.log(path.extname(str)); // .html  后缀名

//获取请求资源所在的目录
console.log(path.dirname(str)); //http://localhost/dscmall  获取目录

//获取路径的全部信息
console.log(path.parse(str));
// {
//     root: '',
//     dir: 'http://localhost/dscmall',
//     base: 'index.html',
//     ext: '.html',
//     name: 'index'
//   }


day02-07-自定义模块

//引入(对应exports)  导出的是对象
// let userInfo=require('./module/导出暴露.js');
// console.log(userInfo);
// console.log(userInfo.fn());

//引入(对应module.exports)	导出的是内容
let {uname,age}=require('./module/导出暴露.js');
console.log(uname,age);

// module.exports和exports的区别?
// 都是暴露模块
// module.exports是暴露内容的
// exports是包括对象的

// 导出的规则
//exports导出
/* exports.uname = uname;
exports.age = age;
exports.fn = fn;

//module.exports导出
module.exports = {
    uname,
    age,
    fn
} */

day02-08-精简导入模块的路径

//cnpm install jquery   下载jquery插件
//引入jquery模块
let $ = require("jquery")
console.log($);

//简化导入模块的路径
// let erge = require("./node_modules/haogu/dist/erge.js")
let erge = require("haogu")
console.log(erge);

//导入暴露的数据
let { username } = require("student")
console.log(erge); //{ username: '二哥' }
console.log(username); //好谷学员

//精简导入模块的路径
/* 
1.在目标模块-->cmd
 2.cnpm init  ->生成package.json
 根据步骤配置包名,版本,文件描述,入口点,测试文档,远程仓库,关键词,作者,证书(ISC)[开源]
 3.cnpm init -y -->快速生成package.json
 */

day02-09-补充上传图片预览

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 1px dashed #ccc;
            margin: 50px auto;
            border-radius: 10px;
            position: relative;
        }

        .box:hover {
            border-color: blue;
        }

        .box input {
            width: 200px;
            height: 200px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .box span {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: #999;
        }

        .box:hover span {
            color: #666;
        }

        #list li {
            width: 200px;
            height: 200px;
            border: 1px dashed #ccc;
            margin: 50px auto;
            border-radius: 10px;
            float: left;
            overflow: hidden;
        }

        #list li img {
            width: 200px;
            height: 200px;

        }
    style>
head>

<body>
    <div class="box">
        
        <input type="file" id="uploadimg" multiple>
        <span>+span>
    div>
    <ul id="list">ul>
    <script>
        // 获取input
        var uploadimg = document.querySelector("#uploadimg");
        var oList = document.getElementById("list")
		
        // onchange 表单的值改变,并且失去焦点之后执行
        uploadimg.onchange = function () {
            // console.log(this); //
            // console.dir(this) //console.dir() //获取对象上的属性和方法
            // console.log(this.files); //上传图片的集合
            for (var i = 0; i < this.files.length; i++) {
                uploadFn(this.files[i])
            }
        }
		
		
        // 上传文件的函数
        function uploadFn(file) {
            console.log(file);
            // 创建一个读取文件的对象
            var reader = new FileReader()
            // DataURL形式读取文件
            reader.readAsDataURL(file)
			//给reader添加onload事件
            reader.onload = function () {
                var li = document.createElement("li")
                // console.log(reader.result);
                // var img = document.createElement("img")  //
                var img = new Image()  //
                console.log(img);
				//reader.result  获得reader读取的结果
                img.src = reader.result
                li.appendChild(img) //将图片插入li中

                oList.appendChild(li) //将li插入ul中
            }
        }
    script>
body>

html>

你可能感兴趣的:(前端,前端)