8 年之前 · 91d3fa85c6
--- a/Node.js/test/createServer.js
+++ b/Node.js/test/createServer.js
@@ -0,0 +1,21 @@
 
				+let http = require('http');
			
 
				+let url = require('url');
			
 
				+let util = require('util');
			
 
				+
			
 
				+// 使用http模块中的createServer()方法创建服务器并返回一个实例对象，该实例对象有一个listen()方法，通过request,response参数来接收和响应数据
			
 
				+let server = http.createServer((req, res) => {
			
 
				+  // 设置编码及响应头部信息
			
 
				+  // res.writeHead(200,{"Content-Type": "text/plain; charset=utf-8"});
			
 
				+  res.statusCode = 200;
			
 
				+  res.setHeader("Content-Type", "text/plain; charset=utf-8");
			
 
				+  // 响应结束，向客户端发送响应数据
			
 
				+  // 通过req.url拿到浏览器端访问的地址
			
 
				+  // url模块中的parse()方法解析一个URL字符串并返回一个URL对象
			
 
				+  // util模块中的inspect()方法返回object的字符串表示，主要用于调试
			
 
				+  res.end(util.inspect(url.parse(req.url)));
			
 
				+});
			
 
				+
			
 
				+// 使用server实例对象的listen方法指定这个HTTP服务器监听的端口号为3000
			
 
				+server.listen(3000, '127.0.0.1', () => {
			
 
				+  console.log("服务器已经运行，请打开浏览器，输入:http://127.0.0.1:3000/ 来进行访问")
			
 
				+});
			
--- a/Node.js/test/httpGet.js
+++ b/Node.js/test/httpGet.js
@@ -0,0 +1,23 @@
 
				+let http = require('http');
			
 
				+let util = require('util');
			
 
				+
			
 
				+// 通过http模拟请求访问第三方接口
			
 
				+http.get("http://www.imooc.com/u/card", (res) => {
			
 
				+  // 定义一个data变量,用于暂存接收到的数据
			
 
				+  let data = '';
			
 
				+  // 通过res的data事件监听函数，每当接收到数据，就累加到data变量中
			
 
				+  res.on('data', (chunk) => {
			
 
				+    data += chunk;
			
 
				+  });
			
 
				+  // 在end事件触发后，通过JSON.parse将data变量转换为JSON对象，然后返回给客户端调用
			
 
				+  res.on('end', () => {
			
 
				+    try {
			
 
				+      let result = JSON.parse(data);
			
 
				+      console.log("result:" + util.inspect(result))
			
 
				+    } catch (e) {
			
 
				+      console.error(e.message);
			
 
				+    }
			
 
				+  }).on('error', (e) => {
			
 
				+    console.error(`错误: ${e.message}`);
			
 
				+  });
			
 
				+});
			
--- a/Node.js/test/index.html
+++ b/Node.js/test/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+    <title>test</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div>
			
 
				+        <h1>hello Node.js</h1>
			
 
				+    </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Node.js/test/readFile.js
+++ b/Node.js/test/readFile.js
@@ -0,0 +1,26 @@
 
				+let http = require('http');
			
 
				+let url = require('url');
			
 
				+let util = require('util');
			
 
				+let fs = require('fs');
			
 
				+
			
 
				+let server = http.createServer((req, res) => {
			
 
				+  // 通过浏览器端访问的地址获取文件名
			
 
				+  var pathname = url.parse(req.url).pathname;
			
 
				+  fs.readFile(pathname.substring(1), (err, data) => {
			
 
				+    if (err) {
			
 
				+      res.writeHead(404, {
			
 
				+        'Content-Type': 'text/html'
			
 
				+      });
			
 
				+    } else {
			
 
				+      res.writeHead(200, {
			
 
				+        'Content-Type': 'text/html'
			
 
				+      });
			
 
				+      res.write(data.toString());
			
 
				+    }
			
 
				+    res.end();
			
 
				+  });
			
 
				+});
			
 
				+
			
 
				+server.listen(3000, '127.0.0.1', () => {
			
 
				+  console.log("服务器已经运行，请打开浏览器，输入:http://127.0.0.1:3000/ 来进行访问")
			
 
				+});
			
--- a/Vue.js/components/select-dropdown-1.vue
+++ b/Vue.js/components/select-dropdown-1.vue
@@ -0,0 +1,109 @@
 
				+<!--下拉选择组件-->
			
 
				+<template>
			
 
				+    <div class="selection-component">
			
 
				+        <div class="selection-show" @click="toggleDrop">
			
 
				+            <!-- 显示选中的项 -->
			
 
				+            <span>{{ selections[nowIndex].label }}</span>
			
 
				+            <div class="arrow"></div>
			
 
				+        </div>
			
 
				+        <div class="selection-list" v-if="isDrop">
			
 
				+            <ul>
			
 
				+                <!-- 遍历选项数组 -->
			
 
				+                <li v-for="(item, index) in selections" @click="dropdownSelection(index)">
			
 
				+                    {{ item.label }}
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    props: {
			
 
				+        // 接收父级传递过来的选项数据，并定义类型和默认值
			
 
				+        selections: {
			
 
				+            type: Array,
			
 
				+            default: [{
			
 
				+                label: 'test',
			
 
				+                value: 0
			
 
				+            }]
			
 
				+        }
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            nowIndex: 0,
			
 
				+            isDrop: false
			
 
				+        }
			
 
				+    },
			
 
				+    methods: {
			
 
				+        toggleDrop(event) {
			
 
				+            this.isDrop = !this.isDrop
			
 
				+        },
			
 
				+        dropdownSelection(index) {
			
 
				+            this.nowIndex = index
			
 
				+            this.isDrop = false
			
 
				+            // 触发on-chosen事件，向父组件传递选中的项
			
 
				+            this.$emit('on-chosen', this.selections[this.nowIndex])
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.selection-component {
			
 
				+    position: relative;
			
 
				+    display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.selection-show {
			
 
				+    border: 1px solid #e3e3e3;
			
 
				+    padding: 0 20px 0 10px;
			
 
				+    display: inline-block;
			
 
				+    position: relative;
			
 
				+    cursor: pointer;
			
 
				+    height: 25px;
			
 
				+    line-height: 25px;
			
 
				+    border-radius: 3px;
			
 
				+    background: #fff;
			
 
				+}
			
 
				+
			
 
				+.selection-show .arrow {
			
 
				+    display: inline-block;
			
 
				+    border-left: 4px solid transparent;
			
 
				+    border-right: 4px solid transparent;
			
 
				+    border-top: 5px solid #e3e3e3;
			
 
				+    width: 0;
			
 
				+    height: 0;
			
 
				+    margin-top: -1px;
			
 
				+    margin-left: 6px;
			
 
				+    margin-right: -14px;
			
 
				+    vertical-align: middle;
			
 
				+}
			
 
				+
			
 
				+.selection-list {
			
 
				+    display: inline-block;
			
 
				+    position: absolute;
			
 
				+    left: 0;
			
 
				+    top: 25px;
			
 
				+    width: 100%;
			
 
				+    background: #fff;
			
 
				+    border-top: 1px solid #e3e3e3;
			
 
				+    border-bottom: 1px solid #e3e3e3;
			
 
				+    z-index: 5;
			
 
				+}
			
 
				+
			
 
				+.selection-list li {
			
 
				+    padding: 5px 15px 5px 10px;
			
 
				+    border-left: 1px solid #e3e3e3;
			
 
				+    border-right: 1px solid #e3e3e3;
			
 
				+    cursor: pointer;
			
 
				+    background: #fff;
			
 
				+    white-space: nowrap;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+}
			
 
				+
			
 
				+.selection-list li:hover {
			
 
				+    background: #e3e3e3;
			
 
				+}
			
 
				+</style>
			
--- a/Vue.js/components/select-multiterm-1.vue
+++ b/Vue.js/components/select-multiterm-1.vue
@@ -0,0 +1,78 @@
 
				+<!--多选组件-->
			
 
				+<template>
			
 
				+    <div class="chooser-component">
			
 
				+        <ul class="chooser-list">
			
 
				+            <!-- 遍历选项数组 -->
			
 
				+            <li v-for="(item, index) in selections" :title="item.label" :class="{active: checkActive(index)}" @click="multiSelect(index)">
			
 
				+                {{ item.label }}
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// 引入JavaScript工具库lodash
			
 
				+import _ from 'lodash'
			
 
				+export default {
			
 
				+    props: {
			
 
				+        // 接收父级传递过来的选项数据，并定义类型和默认值
			
 
				+        selections: {
			
 
				+            type: Array,
			
 
				+            default: [{
			
 
				+                label: 'test',
			
 
				+                value: 0
			
 
				+            }]
			
 
				+        }
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            nowIndexes: [0]
			
 
				+        }
			
 
				+    },
			
 
				+    methods: {
			
 
				+        multiSelect(index) {
			
 
				+            if (this.nowIndexes.indexOf(index) === -1) {
			
 
				+                this.nowIndexes.push(index)
			
 
				+            }
			
 
				+            else {
			
 
				+                this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
			
 
				+                    return idx !== index
			
 
				+                })
			
 
				+            }
			
 
				+            let nowObjArray = _.map(this.nowIndexes, (idx) => {
			
 
				+                return this.selections[idx]
			
 
				+            })
			
 
				+            // 触发on-chosen事件，向父组件传递选中的项
			
 
				+            this.$emit('on-chosen', nowObjArray)
			
 
				+        },
			
 
				+        checkActive(index) {
			
 
				+            return this.nowIndexes.indexOf(index) !== -1
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.chooser-component {
			
 
				+    position: relative;
			
 
				+    display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.chooser-list li {
			
 
				+    display: inline-block;
			
 
				+    border: 1px solid #e3e3e3;
			
 
				+    height: 25px;
			
 
				+    line-height: 25px;
			
 
				+    padding: 0 8px;
			
 
				+    margin-right: 5px;
			
 
				+    border-radius: 3px;
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.chooser-list li.active {
			
 
				+    border-color: #4fc08d;
			
 
				+    background: #4fc08d;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/Vue.js/components/select-number-1.vue
+++ b/Vue.js/components/select-number-1.vue
@@ -0,0 +1,108 @@
 
				+<!--数字选择组件-->
			
 
				+<template>
			
 
				+    <div class="counter-component">
			
 
				+        <div class="counter-btn" @click="minus"> - </div>
			
 
				+        <div class="counter-show">
			
 
				+            <input type="text" v-model="number" @keyup="fixNumber">
			
 
				+        </div>
			
 
				+        <div class="counter-btn" @click="add"> + </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    props: {
			
 
				+        // 接收父级传递过来的最大值，并定义类型和默认值
			
 
				+        max: {
			
 
				+            type: Number,
			
 
				+            default: 5
			
 
				+        },
			
 
				+        // 接收父级传递过来的最小值，并定义类型和默认值
			
 
				+        min: {
			
 
				+            type: Number,
			
 
				+            default: 1
			
 
				+        }
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            number: this.min
			
 
				+        }
			
 
				+    },
			
 
				+    watch: {
			
 
				+        number() {
			
 
				+            // 触发on-number事件，向父组件传递数值
			
 
				+            this.$emit('on-number', this.number)
			
 
				+        }
			
 
				+    },
			
 
				+    methods: {
			
 
				+        fixNumber() {
			
 
				+            let fix
			
 
				+            if (typeof this.number === 'string') {
			
 
				+                fix = Number(this.number.replace(/\D/g, ''))
			
 
				+            }
			
 
				+            else {
			
 
				+                fix = this.number
			
 
				+            }
			
 
				+            if (fix > this.max) {
			
 
				+                fix = this.max
			
 
				+            }
			
 
				+            else if (fix < this.min) {
			
 
				+                fix = this.min
			
 
				+            }
			
 
				+            this.number = fix
			
 
				+        },
			
 
				+        minus() {
			
 
				+            if (this.number <= this.min) {
			
 
				+                return
			
 
				+            }
			
 
				+            this.number--
			
 
				+        },
			
 
				+        add() {
			
 
				+            if (this.number >= this.max) {
			
 
				+                return
			
 
				+            }
			
 
				+            this.number++
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.counter-component {
			
 
				+    position: relative;
			
 
				+    display: inline-block;
			
 
				+    overflow: hidden;
			
 
				+    vertical-align: middle;
			
 
				+}
			
 
				+
			
 
				+.counter-show {
			
 
				+    float: left;
			
 
				+}
			
 
				+
			
 
				+.counter-show input {
			
 
				+    border: none;
			
 
				+    border-top: 1px solid #e3e3e3;
			
 
				+    border-bottom: 1px solid #e3e3e3;
			
 
				+    height: 23px;
			
 
				+    line-height: 23px;
			
 
				+    width: 30px;
			
 
				+    outline: none;
			
 
				+    text-indent: 4px;
			
 
				+}
			
 
				+
			
 
				+.counter-btn {
			
 
				+    border: 1px solid #e3e3e3;
			
 
				+    float: left;
			
 
				+    height: 25px;
			
 
				+    line-height: 25px;
			
 
				+    width: 25px;
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.counter-btn:hover {
			
 
				+    border-color: #4fc08d;
			
 
				+    background: #4fc08d;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/Vue.js/components/select-single-1.vue
+++ b/Vue.js/components/select-single-1.vue
@@ -0,0 +1,63 @@
 
				+<!--单选组件-->
			
 
				+<template>
			
 
				+    <div class="chooser-component">
			
 
				+        <ul class="chooser-list">
			
 
				+            <!-- 遍历选项数组 -->
			
 
				+            <li v-for="(item, index) in selections" :title="item.label" :class="{active:index === nowIndex}" @click="singleSelection(index)">
			
 
				+                {{ item.label }}
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    props: {
			
 
				+        // 接收父级传递过来的选项数据，并定义类型和默认值
			
 
				+        selections: {
			
 
				+            type: Array,
			
 
				+            default: [{
			
 
				+                label: 'test',
			
 
				+                value: 0
			
 
				+            }]
			
 
				+        }
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            nowIndex: 0
			
 
				+        }
			
 
				+    },
			
 
				+    methods: {
			
 
				+        singleSelection(index) {
			
 
				+            this.nowIndex = index
			
 
				+            // 触发on-chosen事件，向父组件传递选中的项
			
 
				+            this.$emit('on-chosen', this.selections[index])
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.chooser-component {
			
 
				+    position: relative;
			
 
				+    display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.chooser-list li {
			
 
				+    display: inline-block;
			
 
				+    border: 1px solid #e3e3e3;
			
 
				+    height: 25px;
			
 
				+    line-height: 25px;
			
 
				+    padding: 0 8px;
			
 
				+    margin-right: 5px;
			
 
				+    border-radius: 3px;
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.chooser-list li.active {
			
 
				+    border-color: #4fc08d;
			
 
				+    background: #4fc08d;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/Vue.js/components/slideShow-1.vue
+++ b/Vue.js/components/slideShow-1.vue
@@ -0,0 +1,154 @@
 
				+<!--幻灯片组件-->
			
 
				+<template>
			
 
				+    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
			
 
				+        <div class="slide-img">
			
 
				+            <a href="javascript:;">
			
 
				+                <transition name="slide-trans">
			
 
				+                    <!-- 轮播图 -->
			
 
				+                    <img v-if="isShow" :src="slides[nowIndex].src">
			
 
				+                </transition>
			
 
				+                <transition name="slide-trans-old">
			
 
				+                    <img v-if="!isShow" :src="slides[nowIndex].src">
			
 
				+                </transition>
			
 
				+            </a>
			
 
				+        </div>
			
 
				+        <h2>{{ slides[nowIndex].title }}</h2>
			
 
				+        <ul class="slide-pages">
			
 
				+            <li @click="goto(prevIndex)">&lt;</li>
			
 
				+            <!-- 遍历幻灯片数组 -->
			
 
				+            <li v-for="(item, index) in slides" @click="goto(index)">
			
 
				+                <a :class="{on: index === nowIndex}">
			
 
				+                    {{ index + 1 }}
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li @click="goto(nextIndex)">&gt;</li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    props: {
			
 
				+        // 接收父级传递过来的幻灯片数据，并定义类型和默认值
			
 
				+        slides: {
			
 
				+            type: Array,
			
 
				+            default: []
			
 
				+        },
			
 
				+        // 接收父级传递过来的幻灯片自动轮播的时间，并定义类型和默认值
			
 
				+        inv: {
			
 
				+            type: Number,
			
 
				+            default: 1000
			
 
				+        }
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            nowIndex: 0,
			
 
				+            isShow: true
			
 
				+        }
			
 
				+    },
			
 
				+    computed: {
			
 
				+        prevIndex() {
			
 
				+            if (this.nowIndex === 0) {
			
 
				+                return this.slides.length - 1
			
 
				+            }
			
 
				+            else {
			
 
				+                return this.nowIndex - 1
			
 
				+            }
			
 
				+        },
			
 
				+        nextIndex() {
			
 
				+            if (this.nowIndex === this.slides.length - 1) {
			
 
				+                return 0
			
 
				+            }
			
 
				+            else {
			
 
				+                return this.nowIndex + 1
			
 
				+            }
			
 
				+        }
			
 
				+    },
			
 
				+    methods: {
			
 
				+        goto(index) {
			
 
				+            this.isShow = false
			
 
				+            setTimeout(() => {
			
 
				+                this.isShow = true
			
 
				+                this.nowIndex = index
			
 
				+            }, 10)
			
 
				+        },
			
 
				+        runInv() {
			
 
				+            this.invId = setInterval(() => {
			
 
				+                this.goto(this.nextIndex)
			
 
				+            }, this.inv)
			
 
				+        },
			
 
				+        clearInv() {
			
 
				+            clearInterval(this.invId)
			
 
				+        }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+        this.runInv();
			
 
				+    }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.slide-trans-enter-active {
			
 
				+    transition: all .5s;
			
 
				+}
			
 
				+
			
 
				+.slide-trans-enter {
			
 
				+    transform: translateX(900px);
			
 
				+}
			
 
				+
			
 
				+.slide-trans-old-leave-active {
			
 
				+    transition: all .5s;
			
 
				+    transform: translateX(-900px);
			
 
				+}
			
 
				+
			
 
				+.slide-show {
			
 
				+    position: relative;
			
 
				+    margin: 15px 15px 15px 0;
			
 
				+    width: 900px;
			
 
				+    height: 400px;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.slide-show h2 {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    color: #fff;
			
 
				+    background: #000;
			
 
				+    opacity: .5;
			
 
				+    bottom: 0;
			
 
				+    height: 30px;
			
 
				+    line-height: 30px;
			
 
				+    text-align: left;
			
 
				+    padding-left: 15px;
			
 
				+}
			
 
				+
			
 
				+.slide-img {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+.slide-img img {
			
 
				+    width: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+}
			
 
				+
			
 
				+.slide-pages {
			
 
				+    position: absolute;
			
 
				+    bottom: 10px;
			
 
				+    right: 15px;
			
 
				+}
			
 
				+
			
 
				+.slide-pages li {
			
 
				+    display: inline-block;
			
 
				+    padding: 0 10px;
			
 
				+    cursor: pointer;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+
			
 
				+.slide-pages li .on {
			
 
				+    border-radius: 50%;
			
 
				+    background-color: #6f6265;
			
 
				+    padding: 0 5px;
			
 
				+}
			
 
				+</style>