<View>
  <Image
    source={require('/react-native/img/favicon.png')}
  />
  <Image
    source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
  />
  <Image
    source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
  />
</View>

// 引入Dimensions，用于获取设备的尺寸
import { Dimensions } from 'react-native';

// 设置基础宽度为750
const BASE_WIDTH=750;

export function calc(size){
  // 获取当前窗口宽度，支持参数为window和screen
  let { width } = Dimensions.get('window');

  // 换算出当前需要显示的尺寸
  return size * width / BASE_WIDTH;
}

const headerCmp={ // 组件必须有父级标签，不可以直接写入文本
  template: '<div>头部</div>'
}

const footerCmp={
  template: '<div>底部</div>'
}

const footerCmp2={
  template: '<div>底部</div>'
}

const newsCmp={
  template: '<div>新闻</div>'
}

const userCmp={
  template: '<div>用户</div>'
}

const indexCmp={
  template: '<div>首页</div>'
}

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      components: { // 通过components属性显示多个组件
        default: indexCmp,  // 默认视图，对应<router-view></router-view>
        header: headerCmp,  // 命名视图，对应<router-view name="header"></router-view>
        footer: footerCmp
      },
    },
    {
      path: '/news',
      name: 'news',
      components: {
        default: newsCmp,
        header: headerCmp,
        footer: footerCmp2
      }
    }
  ]
})

let vm = new Vue({
  el: '#app',
  data: {

  },
  // 将路由添加到Vue中
  router,
  methods: {
    fn1() {
      // 通过路由名称跳转，配置params参数。
      this.$router.replace({ name: 'index', params: { id: Math.random() } });
    },
    fn2() {
      // 直接跳转路由地址，参数直接带在路径中。
      this.$router.push(`/news/${Math.random()}`);
    },
    fn3() {
      // 通过路由地址进行跳转，配置query参数。
      this.$router.push({ path: '/user', query: { userId: 321 } });
    },
    fn4() {
      console.log(this.$router)
      this.$router.go(1)
    },
    fn5() {
      this.$router.forward()
    },
    fn6() {
      this.$router.go(-1)
    },
    fn7() {
      this.$router.back()
    },
  }
})

<div id="app">
  <router-link class="nav" to="/">首页</router-link>
  <router-link class="nav" to="/news">新闻</router-link>
  <!-- 多个路由容器 -->
  <!-- name属性的值对应路由配置中components中的属性名 -->
  <router-view name="header"></router-view>
  <router-view></router-view>
  <router-view name="footer"></router-view>
</div>

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  }
})

<div id="app">
  <!-- 使用Vue表达式插入值 -->
  姓名：{{name}}<br/>
  年龄：{{age}}
</div>

出生日期：{{new Date().getFullYear() - age}}

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  },
  methods: {
    getBirth() {
      return new Date().getFullYear() - this.age
    },
  }
})

出生日期：{{this.getBirth()}}

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  }
})

<div id="app">
  <!-- 通过v-bind指令插入属性，可以简写为:title="age + '岁'" -->
  <span v-bind:title="age + '岁'">{{name}}</span>
</div>

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18,
    classStr: 'class1 class2 class3',
    classArr: ['class1', 'class2', 'class3'],
    classObj: { // 为false的属性将不会被渲染到标签中
      class1: true,
      class2: true,
      class3: false
    },
    styleStr: 'display: block; height: 20px; background-color: red;',
    styleObj: {
      display: 'block',
      height: '20px',
      backgroundColor: 'blue'
    },
    styleObj2: {
      width: '200px',
      margin: '0 auto'
    }
  }
})

<div :class="classStr"></div>
<div :class="classArr"></div>
<div :class="classObj"></div>
<div :style="styleStr"></div>
<div :style="styleObj"></div>
<div :style="[styleObj, styleObj2]"></div>

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

const server = http.createServer((req, res) => {
  // 定义公共变量，存储请求方法、路径、数据
  const method = req.method
  let path = ''
  let get = {}
  let post = {}

  // 判断请求方法为GET还是POST，区分处理数据
  if (method === 'GET') {
    // 使用url.parse解析get数据
    const { pathname, query } = url.parse(req.url, true)

    path = pathname
    get = query

    complete()
  } else if (method === 'POST') {
    path = req.url
    let arr = []

    req.on('data', (buffer) => {
      // 获取POST请求的Buffer数据
      arr.push(buffer)
    })

    req.on('end', () => {
      // 将Buffer数据合并
      let buffer = Buffer.concat(arr)

      // 处理接收到的POST数据
      post = querystring.parse(buffer.toString())

      complete()
    })
  }

  // 在回调函数中统一处理解析后的数据
  function complete() {
    console.log(method, path, get, post)
  }
})

server.listen(8080)

export default Vue.component('parent', {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  components: {
    Child
  },
  methods: {
    add() {
      this.num2++
    },
    addChild1() {
      this.$refs.child.num1++
    },
    addChild2() {
      this.$refs.child.add()
    },
  },
  template: `
    <div>
      <div>父级
      num1：{{num1}}
      num2：{{num2}}
      <br/><input type="button" value="子级num1 +1" @click="addChild1" /><br/><input type="button" value="子级num2 +1" @click="addChild2" /></div>
      <child ref="child" :parent="this"></child>
    </div>
  `
});

export default Vue.component('parent', {
  props: ['parent'],
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  methods: {
    add() {
      this.num2++
    },
    addParent1() {
      this.parent.num1++
    },
    addParent2() {
      this.parent.add()
    },
  },
  template: `
    <div>
      子级
      num1：{{num1}}
      num2：{{num2}}
      <br/><input type="button" value="父级num1 +1" @click="addParent1" />
      <br/><input type="button" value="父级num2 +1" @click="addParent2" />
    </div>
  `
});

// 1. vuex-引入
import Vuex from 'vuex'

// vue-cli自带的编译配置
Vue.config.productionTip = false

// 1. vuex-在Vue中使用Vuex，让Vuex中的操作挂载到Vue中。
Vue.use(Vuex)

// 3. vuex-声明store对象
const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 严格模式：防止直接修改state，只能用Mutations操作，由于strict模式是通过对象深度匹配进行，生产模式打开会严重影响性能。
  state: {a: 12, b: 5}, // 核心：数据
  mutations: { // 定义Mutations
    
  },
  actions: { // 定义actions
    
  },
  getters: {}, // 类似于computed
  modules: {} // 将store拆分成多个命名空间，分开使用。
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 将store挂载到Vue实例中。
  components: { App },
  template: '<App/>'
})

<template>
  <div>
    <!-- 读取Vuex的state -->
    a: {{$store.state.a}}
    <Cmp1/>
    <Table :fields="fields" :datas="datas" :parent="this"/>
  </div>
</template>

<template lang="html">
  <div class="">
    <input type="button" value="+5" @click="fn()">
  </div>
</template>

<script>
export default {
  name: 'cmp1',
  methods: {
    fn(){
      // this.$store.state.a+=5; // 在严格模式下，直接修改state可以成功，但会报错
      // this.$store.commit('add', 5);  // 直接触发一个Mutation其实也可行，且不会报错，但这其实违背了Vuex设计的初衷。
      this.$store.dispatch('add', 5);  // 触发一个action，实现数据修改。
    }
  }
}
</script>

<style lang="css" scoped>
</style>

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 严格模式：防止直接修改state，只能用Mutations操作，由于strict模式是通过对象深度匹配进行，生产模式打开会严重影响性能。
  state: {a: 12, b: 5}, // 核心：数据
  mutations: { // 定义Mutations，通过action触发并更新state，Vue Devtool可以监听到数据的修改情况。
    add (state, n) { // 第一个参数为旧state，第二个参数为action中commit传入的参数。
      state.a += n
    }
  },
  actions: { // 定义actions，actions被触发后，将数据提交给Mutations进行处理并更新state。
    add ({ commit }, n) { // 第一个参数为context对象，它不是store本身，可以通过context.commit提交一个Mutation。第二个参数为用于更新state的参数。
      commit('add', n)
    }
  },
  getters: {}, // 类似于computed
  modules: {} // 将store拆分成多个命名空间，分开使用。
})

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
  }
})

<div id="app">
  <input type="text" v-model="name">
  <p>{{name}}</p>
</div>

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: '<strong>lee</strong>',
  }
})

<div id="app">
  <div v-text="name"></div>
  <div v-html="name"></div>
</div>

const server = http.createServer((request, response) => {
  response.write('a')
  response.write('b')
  response.write('c')
  response.end('d')
})

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    users: [
      { name: 'lee', password: '123456' },
      { name: 'zhangsan', password: '654321' },
      { name: 'lisi', password: '111111' },
    ],
    usersObj: {
      lee: '123456',
      zhangsan: '654321',
      lisi: '111111'
    }
  }
})

<div id="app">
  <ul>
    <li v-for="(item, index) in users" :key="index">
      {{index}}.
      用户名：{{item.name}}
      密码：{{item.password}}
    </li>
  </ul>
  <ol>
    <li v-for="(value, key) in usersObj" :key="index">
      用户名：{{key}}
      密码：{{value}}
    </li>
  </ol>
</div>

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    str: 'Vuejs Tutorial'
  }
})

<div id="app">
  <ul>
    <li v-for="(item, index) in str" :key="index">
      {{item}}
    </li>
  </ul>
  <ul>
    <li v-for="index in 10" :key="index">
      {{index}}
    </li>
  </ul>
</div>

<ul>
  <li>
    <span></span>
    <strong></strong>
  </li>
  <li>
    <span></span>
    <strong></strong>
  </li>
</ul>

{
  tag: 'ul',
  children: [
    {
      tag: 'li',
      children: [
        {
          tag: 'span',
          tag: 'strong'
        }
      ]
    },
    {
      tag: 'li',
      children: [
        {
          tag: 'span',
          tag: 'strong'
        }
      ]
    }
  ]
}

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      component: { // 路由显示的组件
        template: '<div>index</div>'  // 组件模板
      }
    },
    {
      path: '/news',
      name: 'news',
      component: {
        template: '<div>news</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>user</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {
    
  },
  // 将路由添加到Vue中
  router
})

<div id="app">
  跳转按钮，通过path跳转<br/>
  <router-link class="nav" to="/index">index</router-link>
  <router-link class="nav" to="/news">news</router-link>
  <router-link class="nav" to="/user">user</router-link><br />
  跳转按钮，通过name跳转<br />
  <router-link class="nav" :to="{ name: 'index' }">index</router-link>
  <router-link class="nav" :to="{ name: 'news' }">news</router-link>
  <router-link class="nav" :to="{ name: 'user' }">user</router-link><br />
  下面是页面内容<br />
  <!-- 路由的内容显示在router-view标签中 -->
  <router-view></router-view>
</div>

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      component: { // 路由显示的组件
        template: '<div>index</div>'  // 组件模板
      }
    },
    {
      path: '/news/:id/', // 通过路由传参
      name: 'news',
      component: {
        template: '<div>新闻：{{$route.params.id}}</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>用户：{{$route.query.userId}}</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {
    
  },
  // 将路由添加到Vue中
  router
})

<div id="app">
  跳转按钮，通过path跳转<br/>
  <router-link class="nav" to="/index">index</router-link>
  <router-link class="nav" to="/news/123">news</router-link>
  <router-link class="nav" to="/user?userId=666">user</router-link><br />
  跳转按钮，通过name跳转<br />
  <router-link class="nav" :to="{ name: 'index' }">index</router-link>
  <router-link class="nav" :to="{ name: 'news', params: { id: 321 } }">news</router-link>
  <router-link class="nav" :to="{ name: 'user', query: { userId: 888 } }">user</router-link><br />
  下面是页面内容<br />
  <!-- 路由的内容显示在router-view标签中 -->
  <router-view></router-view>
</div>

import Vue from 'vue';
// 主入口组件
import App from './App.vue';
// 引入路由配置
import router from './routers';

let vm=new Vue({
  el: '#div1',
  data: {},
  components: {App},
  router, // 将路由表挂载到Vue实例，在组件中可以直接使用路由组件和功能
  template: `
    <App/>
  `
})

import Vue from 'vue';
import Router from 'vue-router';

// 引入页面组件 
import Index from '@/index.vue';
import News from '@/news.vue';

// 全局使用Router
Vue.use(Router);

// 配置路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/news',
      name: 'news',
      component: News
    }
  ]
})

// 此处书写template模板，支持html等多种语言，等同于Vue.component中的template属性
<template lang="html">
  <div>
    <!-- 将组件写入模板，两种写法都兼容 -->
    <CmpTest />
    <cmp-test />
    <!-- 路由跳转链接，由于路由已经在入口index.js中挂载，组件中可以直接使用 -->
    <router-link :to="{ name: 'index', params: {} }">首页</router-link>
    <router-link :to="{ name: 'news', params: {} }">新闻</router-link>
    <router-view/>
  </div>
</template>

// 此处书写JavaScript代码，等同于Vue.component代码
<script>
// 引入其他组件
import CmpTest from './components/cmp.vue'

// 默认导出Vue组件
export default {
  name: 'app',  // name属性为组件提供了一个ID，调试时的报错信息将显示该名称
  data(){
    return {a: 12}
  },
  components: {
    CmpTest
  }
}
</script>

// 此处书写样式，支持css、less等其他语言
<style lang="css" scoped>
</style>

import { mapState, mapActions, mapGetters } from 'vuex'

computed: {
  ...mapState(['a', 'b']),
}

computed: {
  a() {
    return this.$store.state.a
  },
  b() {
    return this.$store.state.b
  },
}

methods: {
  ...mapActions(['addA', 'addB']),
},

methods: {
  addA(n) {
    this.$store.dispatch('addA', n)
  },
  addB(n) {
    this.$store.dispatch('addA', n)
  },
}

computed: {
  ...mapGetters(['count'])
}

computed: {
  count() {
    return this.$store.getters.count
  }
}

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index/:id', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      component: { // 路由显示的组件
        template: '<div>首页：{{$route.params.id}}</div>'  // 组件模板
      }
    },
    {
      path: '/news/:id/', // 通过路由传参
      name: 'news',
      component: {
        template: '<div>新闻：{{$route.params.id}}</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>用户：{{$route.query.userId}}</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {

  },
  // 将路由添加到Vue中
  router,
  methods: {
    fn1() {
      // 通过路由名称跳转，配置params参数。
      this.$router.replace({ name: 'index', params: { id: Math.random() } });
    },
    fn2() {
      // 直接跳转路由地址，参数直接带在路径中。
      this.$router.push(`/news/${Math.random()}`);
    },
    fn3() {
      // 通过路由地址进行跳转，配置query参数。
      this.$router.push({ path: '/user', query: { userId: 321 } });
    },
    fn4() {
      console.log(this.$router)
      this.$router.go(1)
    },
    fn5() {
      this.$router.forward()
    },
    fn6() {
      this.$router.go(-1)
    },
    fn7() {
      this.$router.back()
    },
  }
})

<div id="app">
  跳转按钮，通过JS跳转<br />
  <div class="links">
    <input type="button" value="跳转到首页" @click="fn1()">
    <input type="button" value="跳转到新闻" @click="fn2()">
    <input type="button" value="跳转到用户" @click="fn3()"><br />
    <input type="button" value="前进一页" @click="fn4()">
    <input type="button" value="前进一页" @click="fn5()">
    <input type="button" value="后退一页" @click="fn6()">
    <input type="button" value="后退一页" @click="fn7()">
  </div>
  下面是页面内容<br />
  <!-- 路由的内容显示在router-view标签中 -->
  <router-view></router-view>
</div>

watch: {
  // 监听路由跳转。
  $route(newRoute, oldRoute) {
    console.log('watch', newRoute, oldRoute)
  },
},

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    num: 1
  },
  methods: {
    onClick(add) {
      this.num = this.num + add
    },
  }
})

<div id="app">
  {{num}}
  <button v-on:click="onClick(1)">+1</button>
</div>

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    show: true
  },
  methods: {
    onClick(add) {
      this.show = !this.show
    },
  }
})

<div id="app">
  <button v-on:click="onClick()">显示隐藏</button>
  <div class="box" v-show="show"></div>
  <div class="box2" v-if="show"></div>
</div>

const querystring = require('querystring')

console.log(querystring.parse('foo=bar&abc=xyz&abc=123'))

{ foo: 'bar', abc: [ 'xyz', '123' ] }

console.log(querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' }))

foo=bar&baz=qux&baz=quux&corge=

wx.showLoading({
  title: 'loading'
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)

  wx.showToast({
    title: 'toast',
    icon: 'none',
    duration: 1000
  })

  wx.showShareMenu({
    withShareTicket: true
  })

wx.getUserInfo({
  success(res) {
    console.log(res)
  }
})

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

wx.scanCode({
  scanType: ['barCode', 'qrCode'],
  success(res) {
    console.log(res)  // {errMsg: "scanCode:ok", result: "google", scanType: "QR_CODE", charSet: "UTF-8"}
  }
})

wx.setKeepScreenOn({
  setKeepScreenOn: true
})

wx.setScreenBrightness({
  value: 1
})

wx.getBatteryInfo({
  success(res) {
    console.log(res)  // {isCharging: false, level: 38, errMsg: "getBatteryInfo:ok"}
  }
})

wx.connectWifi({
  SSID: '',
  password: '',
  success(res) {
    console.log(res.errMsg)
  }
})

wx.startSoterAuthentication({
  requestAuthModes: ['fingerPrint'],
  challenge: '123456',
  authContent: '请用指纹解锁',
  success(res) {
    wx.showToast({
      title: JSON.stringify(res),
      icon: 'none'
    })
  },
  fail(res) {
    wx.showToast({
      title: JSON.stringify(res),
      icon: 'none',
      duration: 100000
    })
  },
})

wx.downloadFile({
  url: 'https://cn.bing.com/sa/simg/hpc26i_2x.png',
  filePath: 'hpc26i_2x.png',
  success(res) {
    toast(JSON.stringify(res))
  },
  fail(res) {
    toast(JSON.stringify(res))
  },
})

wx.startBluetoothDevicesDiscovery({
  success(res) {
    toast(JSON.stringify(res))
    wx.stopBluetoothDevicesDiscovery()
  },
  fail(res) {
    toast(JSON.stringify(res))
  },
})

wx.request({
  url: 'https://cn.bing.com/search',
  data: { q: 'abc', safe: 'off' },
  method: 'get',
  dataType: 'text',
  success(res) {
    toast(JSON.stringify(res))
  },
  fail(res) {
    toast(JSON.stringify(res))
  }
})

<form action="http://localhost:8080/login" method="get">
  用户：<input type="text" name="username"><br/>
  密码：<input type="text" name="password"><br/>
  <input type="submit" value="提交">
</form>

const [ pathname, queryStr ] = req.url.split('?')
const query = querystring.parse(queryStr)
console.log(pathname, query)

const url = new URL(`http://localhost:8080${req.url}`)
const { pathname, search } = url
const query = querystring.parse(search.substring(1, url.search.length))
console.log(pathname, query)

// parse方法第二个参数若传true，则会直接将解析出的query值转为对象形式，否则它只是字符串形式
const { pathname, query } = url.parse(req.url, true)
console.log(pathname, query)

const http = require('http')
const multiparty = require('multiparty')

const server = http.createServer((req, res) => {
  const form = new multiparty.Form({
    uploadDir: './upload' // 指定文件存储目录
  })

  form.parse(req) // 将请求参数传入，multiparty会进行相应处理

  form.on('field', (name, value) => { // 接收到数据参数时，触发field事件
    console.log(name, value)
  })

  form.on('file', (name, file, ...rest) => { // 接收到文件参数时，触发file事件
    console.log(name, file)
  })

  form.on('close', () => {  // 表单数据解析完成，触发close事件
    console.log('表单数据解析完成')
  })
})

server.listen(8080)

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {},
  methods: {
    fn1() {
      alert('fn1')
    },
    fn2() {
      alert('fn2')
    },
    submit() {
      alert('submit')
    },
  }
})

<div id="app">
  <div v-on:click="fn1()">
    <form action="" v-on:submit.prevent="submit()">
      <input type="submit" value="按钮" v-on:click.prevent.stop.once="fn2()">
    </form>
  </div>

let vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    fn1() {
      alert('回车')
    },
    fn2() {
      alert('ctrl+回车')
    },
  }
})

<div>
  <!-- 按下回车键时弹窗，也可以写成v-on:keydown.13 -->
  <input type="text" v-on:keydown.enter="fn1()">
  <!-- 按键修饰符也支持组合 -->
  <input type="text" v-on:keydown.ctrl.enter="fn2()">
</div>

<!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>Document</title>
</head>
<body>
  用户：<input type="text" name="username" id="username"><br/>
  密码：<input type="text" name="password" id="password"><br/>
  <input type="button" value="注册" id="reg">
  <input type="button" value="登录" id="login">
  <script>
    // 注册
    document.querySelector('#reg').addEventListener('click', async function () {
      const response = await fetch(`/reg?username=${document.querySelector('#username').value}&password=${document.querySelector('#password').value}`)
      const result = await response.json()
      console.log(result)
      alert(result.msg)
    })

    // 登录
    document.querySelector('#login').addEventListener('click', async function () {
      const response = await fetch(`/login`, {
        method: 'POST',
        body: JSON.stringify({
          username: document.querySelector('#username').value,
          password: document.querySelector('#password').value
        })
      })
      const result = await response.json()
      console.log(result)
      alert(result.msg)
    })
  </script>
</body>
</html>

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

const server = http.createServer((req, res) => {
  // 定义公共变量，存储请求方法、路径、数据
  const method = req.method
  let path = ''
  let get = {}
  let post = {}

  // 判断请求方法为GET还是POST，区分处理数据
  if (method === 'GET') {
    // 使用url.parse解析get数据
    const { pathname, query } = url.parse(req.url, true)

    path = pathname
    get = query

    complete()
  } else if (method === 'POST') {
    path = req.url
    let arr = []

    req.on('data', (buffer) => {
      // 获取POST请求的Buffer数据
      arr.push(buffer)
    })

    req.on('end', () => {
      // 将Buffer数据合并
      let buffer = Buffer.concat(arr)

      // 处理接收到的POST数据
      post = JSON.parse(buffer.toString())

      complete()
    })
  }

  // 在回调函数中统一处理解析后的数据
  function complete() {
    try {
      if (path === '/reg') {
        // 获取get请求数据
        const {
          username,
          password
        } = get

        // 读取user.json文件
        fs.readFile('./users.json', (error, data) => {
          if (error) {
            res.writeHead(404)
          } else {
            // 读取用户数据
            const users = JSON.parse(data.toString())
            const usernameIndex = users.findIndex((item) => {
              return username === item.username
            })

            // 判断用户名是否存在
            if (usernameIndex >= 0) {
              res.write(JSON.stringify({
                error: 1,
                msg: '此用户名已存在'
              }))
              res.end()
            } else {
              // 用户名不存在则在用户列表中增加一个用户
              users.push({
                username,
                password
              })

              // 将新的用户列表保存到user.json文件中
              fs.writeFile('./users.json', JSON.stringify(users), (error) => {
                if (error) {
                  res.writeHead(404)
                } else {
                  res.write(JSON.stringify({
                    error: 0,
                    msg: '注册成功'
                  }))
                }
                res.end()
              })
            }
          }
        })
      } else if (path === '/login') {
        const {
          username,
          password
        } = post

        // 读取users.json
        fs.readFile('./users.json', (error, data) => {
          if (error) {
            res.writeHead(404)
          } else {
            // 获取user列表数据
            const users = JSON.parse(data.toString())
            const usernameIndex = users.findIndex((item) => {
              return username === item.username
            })

            if (usernameIndex >= 0) {
              // 用户名存在，则校验密码是否正确
              if (users[usernameIndex].password === password) {
                res.write(JSON.stringify({
                  error: 0,
                  msg: '登录成功'
                }))
              } else {
                res.write(JSON.stringify({
                  error: 1,
                  msg: '密码错误'
                }))
              }
            } else {
              res.write(JSON.stringify({
                error: 1,
                msg: '该用户不存在'
              }))
            }
          }
          res.end()
        })
      } else {
        // 若不是注册或登录接口，则直接返回相应文件
        fs.readFile(`.${path}`, (error, data) => {
          if (error) {
            res.writeHead(404)
          } else {
            res.write(data)
          }
          res.end()
        })
      }
    } catch (error) {
      console.error(error);
    }
  }
})

server.listen(8080)

const path=require('path');

module.exports={
  mode: 'development',  // 开发模式
  entry: './src/vm.js', // 入口文件配置
  output: {
    path: path.resolve(__dirname, 'dest'),  // 输出文件夹
    filename: 'bundle.min.js' // 打包输出的文件名
  },
  module: {
    rules: [
      { // 处理CSS
        test: /\.css$/i, 
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- name属性的值对应路由配置中components中的属性名 -->
      <router-view name="header"></router-view>
      <!-- 渲染默认视图 -->
      <router-view></router-view>
    </div>
  </body>
  <!-- 引用打包后的js文件 -->
  <script src="dest/bundle.min.js" charset="utf-8"></script>
</html>

// 引入Vue的es module模块，使用vue-cli时，因为配置了alias，所以可以直接引用vue
import Vue from 'vue/dist/vue.esm';
// 引入VueRouter模块
import VueRouter from 'vue-router';

// 引入路由配置
import router from './router';

// 引入项目样式表
import '../css/main.css';

// 安装VueRouter插件
Vue.use(VueRouter);

// 配置Vue应用
const vm=new Vue({
  el: '#app',
  data: {},
  router
});

// 引入VueRouter模块
import VueRouter from 'vue-router';

// 引入组件
import Header from './components/header';
import Home from './components/home';
import News from './components/news1';

export default new VueRouter({
  routes: [
    {
      path: '/index', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      components: { // 通过components属性显示多个组件
        header: Header,  // 命名视图，对应<router-view name="header"></router-view>
        default: Home  // 默认视图，对应<router-view></router-view>
      }
    },
    {
      path: '/news',
      name: 'news',
      components: {
        header: Header,
        default: News
      }
    }
  ]
})

const path = require('path')

const str = '/root/a/b/1.txt'

console.log(path.dirname(str))  // 获取文件目录：/root/a/b
console.log(path.basename(str)) // 获取文件名：1.txt
console.log(path.extname(str)) // 获取文件后缀：.txt
console.log(path.resolve(str, '../c', 'build', 'strict')) // 将路径解析为绝对路径：C:\root\a\b\c\build\strict
console.log(path.resolve(str, '../c', 'build', 'strict', '../..', 'assets')) // 将路径解析为绝对路径：C:\root\a\b\c\assets
console.log(path.resolve(__dirname, 'build')) // 将路径解析为绝对路径：C:\projects\nodejs-tutorial\lesson12\build

const el = document.querySelector('#app')

// 获取标签内容作为页面模板
let template = el.innerHTML

// _data为初始化
let _data = {
  name: 'lee',
  age: 18
}

// 为_data设置拦截，通过修改data中属性的值，来修改
let data = new Proxy(_data, {
  // 当数据修改时，会被set方法拦截，从而得知数据被修改的值value，之后可以将value渲染到页面中，obj为_data
  set(obj, key, value) {
    console.log(`设置${key}属性为${value}`)
    obj[key] = value

    // 将数据渲染到页面中
    render()
  }
})

// 初始化时渲染页面
render()

function render() {
  // 将模板中{{}}内部的内容，用数据替换
  el.innerHTML = template.replace(/\{\{\w+\}\}/g, str => {
    str = str.substring(2, str.length - 2);

    return _data[str];
  })
}

<div id="app">
  姓名：{{name}}<br/>
  年龄：{{age}}
</div>

const el = document.querySelector('#app')

// 获取标签内容作为页面模板
let template = el.innerHTML

// _data为初始化
let _data = {
  name: 'lee',
  age: 18
}

// 为_data设置拦截，通过修改data中属性的值，来修改
let data = new Proxy(_data, {
  // 当数据修改时，会被set方法拦截，从而得知数据被修改的值value，之后可以将value渲染到页面中，obj为_data
  set(obj, key, value) {
    console.log(`设置${key}属性为${value}`)
    obj[key] = value

    // 将数据渲染到页面中
    render()
  }
})

// 初始化时渲染页面
render()

function render() {
  // 将模板中{{}}内部的内容，用数据替换
  el.innerHTML = template.replace(/\{\{\w+\}\}/g, str => {
    str = str.substring(2, str.length - 2);

    return _data[str];
  })

  // 但检测到数据改变时，将input的值同步
  Array.from(document.getElementsByTagName('input'))
    // 查找含有v-model属性，即设置了双向绑定的input
    .filter((ele) => ele.getAttribute('v-model'))
    .forEach((input, index) => {
      const name = input.getAttribute('v-model')
      input.value = _data.name

      // 输入框的值变化时，将data中相应属性的值改变
      input.oninput = function () {
        data[name] = input.value
      }
    })
}

<div id="app">
  <input type="text" v-model="name"><br />
  姓名：{{name}}<br/>
  年龄：{{age}}
</div>

<form action="http://localhost:8080/upload" method="POST" enctype="multipart/form-data">
  用户：<input type="text" name="username" value="lee"><br/>
  密码：<input type="password" name="password" value="123456"><br/>
  <input type="file" name="file" id=""><br/>
  <input type="submit" value="提交">
</form>

const http = require('http')

const server = http.createServer((req, res) => {
  let arr = []

  req.on('data', (buffer) => {
    arr.push(buffer)
  })

  req.on('end', () => {
    let buffer = Buffer.concat(arr)

    console.log(buffer.toString())
  })
})

server.listen(8080)

------WebKitFormBoundaryL5AGcit70yhKB92Y
Content-Disposition: form-data; name="username"

lee
------WebKitFormBoundaryL5AGcit70yhKB92Y
Content-Disposition: form-data; name="password"

123456
Content-Disposition: form-data; name="file"; filename="upload.txt"
Content-Type: text/plain

upload
------WebKitFormBoundaryL5AGcit70yhKB92Y--

------WebKitFormBoundaryL5AGcit70yhKB92Y\r\n
Content-Disposition: form-data; name="username"\r\n
\r\n
lee\r\n
------WebKitFormBoundaryL5AGcit70yhKB92Y\r\n
Content-Disposition: form-data; name="password"\r\n
\r\n
123456\r\n
Content-Disposition: form-data; name="file"; filename="upload.txt"\r\n
Content-Type: text/plain\r\n
\r\n
upload\r\n
------WebKitFormBoundaryL5AGcit70yhKB92Y--

------WebKitFormBoundaryL5AGcit70yhKB92Y\r\nContent-Disposition: form-data; name="username"\r\n\r\nlee\r\n

<分隔符>\r\n字段头\r\n\r\n内容\r\n

[
  ‘’,
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  '--'
]

[
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
  "\r\n字段信息\r\n\r\n内容\r\n",
]

[
  "字段信息\r\n\r\n内容",
  "字段信息\r\n\r\n内容",
  "字段信息\r\n\r\n内容",
]

[
	"字段信息", "内容",
	"字段信息", "内容",
	"字段信息", "内容",
]

let buffer = Buffer.from('lee\r\nchen\r\ntest')

const index = buffer.indexOf('\r\n')

console.log(index)
console.log(buffer.slice(0, index).toString())

module.exports = function bufferSplit(buffer, separator) {
  let result = [];
  let index = 0;

  while ((index = buffer.indexOf(separator)) != -1) {
    result.push(buffer.slice(0, index));
    buffer = buffer.slice(index + separator.length);
  }
  result.push(buffer);

  return result;
}

const http = require('http')
const fs = require('fs')
const bufferSplit = require('./bufferSplit')

const server = http.createServer((req, res) => {
  const boundary = `--${req.headers['content-type'].split('; ')[1].split('=')[1]}`  // 获取分隔符
  let arr = []

  req.on('data', (buffer) => {
    arr.push(buffer)
  })

  req.on('end', () => {
    const buffer = Buffer.concat(arr)
    console.log(buffer.toString())

    // 1. 用<分隔符>切分数据
    let result = bufferSplit(buffer, boundary)
    console.log(result.map(item => item.toString()))

    // 2. 删除数组头尾数据
    result.pop()
    result.shift()
    console.log(result.map(item => item.toString()))

    // 3. 将每一项数据头尾的的\r\n删除
    result = result.map(item => item.slice(2, item.length - 2))
    console.log(result.map(item => item.toString()))

    // 4. 将每一项数据中间的\r\n\r\n删除，得到最终结果
    result.forEach(item => {
      console.log(bufferSplit(item, '\r\n\r\n').map(item => item.toString()))

      let [info, data] = bufferSplit(item, '\r\n\r\n')  // 数据中含有文件信息，保持为Buffer类型

      info = info.toString()  // info为字段信息，这是字符串类型数据，直接转换成字符串，若为文件信息，则数据中含有一个回车符\r\n，可以据此判断数据为文件还是为普通数据。

      if (info.indexOf('\r\n') >= 0) {  // 若为文件信息，则将Buffer转为文件保存
        // 获取字段名
        let infoResult = info.split('\r\n')[0].split('; ')
        let name = infoResult[1].split('=')[1]
        name = name.substring(1, name.length - 1)

        // 获取文件名
        let filename = infoResult[2].split('=')[1]
        filename = filename.substring(1, filename.length - 1)
        console.log(name)
        console.log(filename)

        // 将文件存储到服务器
        fs.writeFile(`./upload/${filename}`, data, err => {
          if (err) {
            console.log(err)
          } else {
            console.log('文件上传成功')
          }
        })
      } else {  // 若为数据，则直接获取字段名称和值
        let name = info.split('; ')[1].split('=')[1]
        name = name.substring(1, name.length - 1)
        const value = data.toString()
        console.log(name, value)
      }
    })
  })
})

server.listen(8080)

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}

import ModA from './mod_a'
import ModB from './mod_b'

export default new Vuex.Store({
  modules: {
    mod_a: ModA,
    mod_b: ModB
  }
})

a_str: {{$store.state.mod_a.str}}<br>
b_str: {{$store.state.mod_b.str}}<br>

computed: {
  ...mapState({
    str_a: state=>state.mod_a.str,
    str_b: state=>state.mod_b.str,
  }),
}

a_str: {{str_a}}<br>
b_str: {{str_b}}<br>

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}

<template>
  <div>
    str: {{$store.state.str}}<br>
    a_str: {{$store.state.mod_a.str}}<br>
    b_str: {{$store.state.mod_b.str}}<br>
    a_str: {{str_a}}<br>
    b_str: {{str_b}}<br>
    <input type="button" value="设置A" @click="setA('aa')">
    <input type="button" value="设置B" @click="setB('bb')"><br/>
    <input type="button" value="设置A" @click="set_a('aaa')">
    <input type="button" value="设置B" @click="set_b('bbb')">
  </div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex';

export default {
  name: 'Index',
  data () {
    return {
      
    }
  },
  async created(){
    await this.readUsers();
  },
  methods: {
    ...mapActions(['addA', 'addB', 'setOnline', 'readUsers', 'mod_a.setStr', 'mod_b.setStr']),
    ...mapActions({
      set_a: 'mod_a.setStr',
      set_b: 'mod_b.setStr'
    }),
    setA(str) {
      this['mod_a.setStr'](str)
    },
    setB(str) {
      this['mod_b.setStr'](str)
    },
  },
}
</script>

<!--index.wxml-->
<view>
  <text>{{name}}</text>
  <text>{{age}}</text>
  <view>{{name}}</view>
  <view>{{age}}</view>
</view>

<view>
  <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</view>

<view wx:if="{{judge}}">
  <text>judge为true时显示</text>
</view>
<view wx:else>
  <text >judge为false时显示</text>
</view>

<!--wxml-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// index.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

<!--wxml-->
<button type="primary" bindtap="onTap">
  修改条件渲染
</button>

onTap() {
  this.setData({
    judge: !this.data.judge
  })
}

<scroll-view scroll-y="{{true}}" style="height: 100rpx;">
  <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>

<icon type="success" size="23" color="green" />
<text >成功</text>

<navigator url="/pages/login/login">跳转到login</navigator>

<form action="">
  <radio-group>
    <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
      <radio value="{{item.value}}" /> {{item.name}}
    </label>
  </radio-group>
  <checkbox-group>
    <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
      <checkbox value="{{item.value}}" /> {{item.name}}
    </label>
  </checkbox-group>
</form>

<form >
  <picker mode="selector" range="{{options}}" value="{{pickerSelected}}" bindchange="onPickerChange">
    <view >{{pickerSelected}}</view>
  </picker>
</form>

onPickerChange(event) {
  this.setData({
    pickerSelected: event.detail.value
  })
}

const http = require('http')
const querystring = require('querystring')

const server = http.createServer((req, res) => {
  let bufferArray = []  // 用于存储data事件获取的Buffer数据。

  req.on('data', (buffer) => {
    bufferArray.push(buffer)  // 将Buffer数据存储在数组中。
  })

  req.on('end', () => {
    // Buffer 类是一个全局变量，使用时无需 require('buffer').Buffer。
    // Buffer.concat方法用于合并Buffer数组。
    const buffer = Buffer.concat(bufferArray)
    // 已知Buffer数据只是字符串，则可以直接用toString将其转换成字符串。
    const post = querystring.parse(buffer.toString())
    console.log(post)
  })
})

server.listen(8080)

export const router = [
  {
    path: '1',
    name: 'news1',
    components: {
      news_header: NewsHeader,
      default: News1
    }
  },
  {
    path: '2',
    name: 'news2',
    components: {
      news_header: NewsHeader,
      default: News2
    }
  }
]

import News, { router as news_router } from './components/news';

export default new VueRouter({
  routes: [
    {
      path: '/news',
      name: 'news',
      components: {
        header: Header,
        default: News
      },
      children: news_router
    }
  ]
})

module.exports.a = 1
module.exports.b = 2

let c = 3

const module1 = require('./module1')

console.log(module1)

const module2 = require('module2')

console.log(module2)  // { a: 1, b: 2 }

exports = {
  a: 1,
  b: 2
}

module.exports = {
  a: 1,
  b: 2
}

module.exports = 123

module.exports = {
  a: 1,
  b: 2,
  c: 3
}

module.exports = function () {
  console.log('test')
}

module.exports = class {
  constructor(name) {
    this.name = name
  }

  show() {
    console.log(`Show ${this.name}`)
  }
}

export default Vue.component('parent', {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Child
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  methods: {
    addChild() {
      this.$refs.child.$emit('add', 5)
    },
  },
  template: `
    <div>
      <div>父级
      num：{{num}}
      <br/><input type="button" value="子级num1 + 5" @click="addChild" />
      <child ref="child" :parent="this"></child>
    </div>
  `
});

export default Vue.component('parent', {
  props: ['parent'],
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addParent() {
      this.parent.$emit('add', 5)
    },
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  template: `
    <div>
      子级
      num：{{num}}
      <br/><input type="button" value="父级num1 + 5" @click="addParent" />
    </div>
  `
});

// 用_data保存数据
let _data = {
  userInfo: {
    name: 'lee',
    age: 18
  }
}

<div id="app">
  姓名：{{userInfo.name}}<br/>
  年龄：{{userInfo.age}}
</div>

/\{\{\w+\}\}/g

/\{\{[\w\.]+\}\}/g

// 将模板中{{}}内部的内容，用数据替换
el.innerHTML = template.replace(/\{\{[\w\.]+\}\}/g, str => {
  str = str.substring(2, str.length - 2);

  // 将userInfo.name拼接为["userInfo"]["name"]，以便查找对象中的属性。
  return eval('_data["' + str.split('.').join('"]["') + '"]')
})

const el = document.querySelector('#app')

// 获取标签内容作为页面模板
let template = el.innerHTML

// 用_data保存数据
let _data = {
  userInfo: {
    name: 'lee',
    age: 18
  }
}

// 为_data设置拦截，通过修改data中属性的值，来修改
let data = new Proxy(_data, {
  // 当数据修改时，会被set方法拦截，从而得知数据被修改的值value，之后可以将value渲染到页面中，obj为_data
  set(obj, key, value) {
    console.log(`设置${key}属性为${value}`)

    eval('_data["' + key.split('.').join('"]["') + '"] = value')

    // 将数据渲染到页面中
    render()
  }
})

// 初始化时渲染页面
render()

function render() {
  // 将模板中{{}}内部的内容，用数据替换
  el.innerHTML = template.replace(/\{\{[\w\.]+\}\}/g, str => {
    str = str.substring(2, str.length - 2);

    // 将userInfo.name拼接为["userInfo"]["name"]，以便查找对象中的属性。
    return eval('_data["' + str.split('.').join('"]["') + '"]')
  })

  // 但检测到数据改变时，将input的值同步
  Array.from(document.getElementsByTagName('input'))
    // 查找含有v-model属性，即设置了双向绑定的input
    .filter((ele) => ele.getAttribute('v-model'))
    .forEach((input, index) => {
      const name = input.getAttribute('v-model')
      eval('input.value = data["' + name.split('.').join('"]["') + '"]')

      // 输入框的值变化时，将data中相应属性的值改变
      input.oninput = function () {
        data[name] = input.value
        eval('data["' + name.split('.').join('"]["') + '"] = input.value')
      }
    })
}

<div id="app">
  <input type="text" v-model="userInfo.name"><br />
  姓名：{{userInfo.name}}<br/>
  年龄：{{userInfo.age}}
</div>

let vm = new Vue({
  el: '#app',
  data: {
    a: 12,
    b: 33,
    familyName: '张',
    name: '三'
  },
  computed: {
    sum() {
      return this.a + this.b
    },
    fullName: {
      get() {
        return this.familyName + this.name
      },
      set(value) {
        this.familyName = value[0]
        this.name = value.substring(1)
      },
    }
  },
})

<div id="app">
  <div>
    {{a}} + {{b}} = {{sum}}
    姓：<input type="text" v-model="familyName">
    名：<input type="text" v-model="name">
    姓名：<input type="text" v-model="fullName">
  </div>
</div>

let vm = new Vue({
  el: '#app',
  data: {
    name: 'lee',
    userInfo: {
      name: 'lee',
      age: 18
    },
    users: [
      'lee',
      'chen',
      'john'
    ]
  },
  watch: {
    name(value) {
      console.log(`name改变为${value}`)
    },
    // userInfo的属性修改不会触发该监听
    userInfo(value) {
      console.log('userInfo已改变', value)
    },
    // 可以监听对象的属性变化
    'userInfo.name': function(value) {
      console.log(`userInfo.name改变为${value}`)
    },
    // 可以监听数组中的某一项
    'users.1': function (value) {
      console.log(`users[1]改变为${value}`)
    },
    // 修改users[1]的值同时也会触发对数组的监听
    users(value) {
      console.log(`users改变为${value}`)
    },
  }
})

<div id="app">
  <div>
    <input type="text" v-model="name">
    <input type="text" v-model="userInfo.name">
    <input type="text" v-model="users[1]">
  </div>
</div>

fs.writeFile('./test.txt', 'test', (error) => {
  if (error) {
    console.log('文件写入失败', error)
  } else {
    console.log('文件写入成功')
  }
})

fs.readFile('./test.txt', (error, data) => {
  if (error) {
    console.log('文件读取失败', error)
  } else {
    // 此处因确定读取到的数据是字符串，可以直接用toString方法将Buffer转为字符串。
    // 若是需要传输给浏览器可以直接用Buffer，机器之间通信是直接用Buffer数据。
    console.log('文件读取成功', data.toString())
  }
})

const http = require('http')
const io = require('socket.io')

// 1. 建立HTTP服务器。
const server = http.createServer((req, res) => {

})

server.listen(8080)

// 2. 建立WebSocket，让socket.io监听HTTP服务器，一旦发现是WebSocket请求，则会自动进行处理。
const ws = io.listen(server)

// 建立连接完成后，触发connection事件。
// 该事件会返回一个socket对象（https://socket.io/docs/server-api/#Socket），可以利用socket对象进行发送、接收数据操作。
ws.on('connection', (socket) => {
  // 根据事件名，向客户端发送数据，数据数量不限。
  socket.emit('msg', '服务端向客户端发送数据第一条', '服务端向客户端发送数据第二条')

  // 根据事件名接收客户端返回的数据
  socket.on('msg', (...msgs) => {
    console.log(msgs)
  })

  // 使用计时器向客户端发送数据
  setInterval(() => {
    socket.emit('timer', new Date().getTime())
  }, 500);
})

<!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>Document</title>
</head>

<body>
  <!-- 引用Socket.io的客户端js文件，由于Socket.io已在服务端监听了HTTP服务器的请求，一旦收到对该文件的请求，则会自动返回该文件，不需要开发人员配置。 -->
  <!-- 该文件在服务端的位置为/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js -->
  <script src="http://localhost:8080/socket.io/socket.io.js"></script>
  <script>
    // 与服务器建立WebSocket连接，该连接为ws协议，socket.io不需要担心跨域问题。
    const socket = io.connect('ws://localhost:8080/')

    // 根据事件名，向服务端发送数据，数据数量不限。
    socket.emit('msg', '客户端向服务端发送数据第一条', '客户端向服务端发送数据第二条')

    // 根据事件名接收服务端返回的数据
    socket.on('msg', (...msgs) => {
      console.log(msgs)
    })

    // 接收服务端通过计时器发送来的数据
    socket.on('timer', (time) => {
      console.log(time)
    })
  </script>
</body>

</html>

const assert = require('assert')

assert(2 > 1, '2 > 1')

assert(1 > 2, '1 > 2')

AssertionError [ERR_ASSERTION]: 1 > 2
    at Object.<anonymous> (C:\projects\nodejs-tutorial\lesson11\assert.js:5:1)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12)
    at executeUserCode (internal/bootstrap/node.js:526:15)
    at startMainThreadExecution (internal/bootstrap/node.js:439:3)

const assert = require('assert')

const obj1 = {
  a: 1,
  b: 2,
  children: {
    c: 3
  }
}

const obj2 = {
  a: 1,
  b: 2,
  children: {
    c: 3
  }
}

const obj3 = {
  a: 1,
  b: 2,
  children: {
    c: '3'
  }
}

assert.deepStrictEqual(obj1, obj2, 'obj1 !== obj2')

assert.deepStrictEqual(obj1, obj3, 'obj1 !== obj3')

const assert = require('assert')

const arr1 = [{
  a: 1,
  b: 2,
  children: [{
    c: 3
  }]
}]

const arr2 = [{
  a: 1,
  b: 2,
  children: [{
    c: 3
  }]
}]

const arr3 = [{
  a: 1,
  b: 2,
  children: [{
    c: '3'
  }]
}]

assert.deepStrictEqual(arr1, arr2, 'arr1 !== arr2')

assert.deepStrictEqual(arr1, arr3, 'arr1 !== arr3')

<!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>Document</title>
</head>
<body>
  网页内容
  <img src="/1.jpg" alt="">
</body>
</html>

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

const server = http.createServer((request, response) => {
  console.log(request.url)  // 在request对象中，可以获取请求的URL，通过URL判断请求的资源。
  fs.readFile(`./www${request.url}`, (error, buffer) => { // 根据URL查找读取相应的文件。
    if (error) {  // 若读取错误，则向前端返回404状态码，以及内容Not Found。
      response.writeHead(404)
      response.write('Not Found')
    } else {  // 若读取成功，则向前端返回读取到的文件。
      response.write(buffer)
    }
    response.end()  // 关闭连接。
  })
})

server.listen(8080)

import Vue from 'vue/dist/vue.esm';

// 通过Vue.component注册一个组件
export default Vue.component('cmp1', {
  props: ['name', 'age', 'list'],  // 定义要传入的props，在Vue中只有已定义的props才可以被组件接收到
  data(){ // 组件的data必须是函数，为了保证组件的data作用域独立
    return {a: 77, b: 55};
  },
  // 组件模板
  template: `
<div>
  姓名：{{name}}<br/>
  年龄：{{age}}<br/>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
`
});

import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';

let vm=new Vue({
  el: '#div1',
  data: {
    type: 'cmp1'
  },
  // 局部组件
  // 组件可以直接引入，也可以通过通用component组件引入，当is属性为特定组件名时，渲染相应组件。
  template: `
<div>
  可以尝试输入cmp1或my-dialog
  <input type="text" v-model="type" />
  <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
  <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
</div>
`
})

// 实例化组件，主要用于测试
let cmp=new Cmp1({
  propsData: {
    name: '张三',
    list: [88, 99, 27]
  }
});

// 生成虚拟vm对象
let vm=cmp.$mount();

// vm.$el中存储了DOM，但不渲染在页面中
console.log(vm.$el);

// 测试代码
if(vm.$el.querySelector('li').innerHTML=='88'){
  console.log('正确');
}else{
  console.log('失败');
}

import Vue from 'vue/dist/vue.esm';
import 'bootstrap/dist/css/bootstrap.css';
import './css/my-dialog.css';

export default Vue.component('my-dialog', {
  data(){
    return {};
  },
  template: `
<div class="panel panel-default my-dialog">
  <div class="panel-heading">
    <slot name="title"/>
  </div>
  <div class="panel-body">
    <slot />
  </div>
</div>
`
});

import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';
import MyDialog from './my-dialog';

let vm=new Vue({
  el: '#div1',
  data: {
    type: 'cmp1'
  },
  // 局部组件
  // 组件可以直接引入，也可以通过通用component组件引入，当is属性为特定组件名时，渲染相应组件。
  template: `
<div>
  可以尝试输入cmp1或my-dialog
  <input type="text" v-model="type" />
  <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
  <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
  <my-dialog>
    <!-- 名为title的插槽内容 -->
    <template slot="title">标题</template>
    一些文字文字文字
    <!-- 默认插槽内容 -->
    <ul>
      <li>asdfas</li>
      <li>asdfas</li>
    </ul>
  </my-dialog>
</div>
`
})

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {}
})

<div id="app">
  <!-- 若不加v-pre指令，直接编译会报错，因为data中没有a和b属性 -->
  <div v-pre>
    {{a}} + {{b}}
  </div>
</div>

// 延迟3秒实例化Vue，若不加v-cloak指令，在页面上会显示{{a}} + {{b}}，1秒之后才渲染出10 + 20。
setTimeout(() => {
  let vm = new Vue({
    el: '#app', // 根元素或挂载点。
    data: {
      a: 10,
      b: 20
    }
  })
}, 3000);

<div id="app">
  <!-- v-cloak指令只是在标签中加入一个v-cloak自定义属性，在HTML还编译完成之后该属性会被删除，可以CSS对标签设置样式，表示HTML还未被编译，比如可以设置display: none; -->
  <div v-cloak>
    {{a}} + {{b}}
  </div>
</div>

<style>
  /* 有v-cloak属性的标签都不显示 */
  [v-cloak] {
    display: none;
  }
</style>

const http = require('http')

const server = http.createServer((req, res) => {
  console.log(req.headers.origin)
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.write(`{"resultCode": "0000", "msg": "success"}`)
  res.end()
})

server.listen(8080)

getters: {
  count (state) {
    return state.a + state.b
  }
}

<div>count from getters: {{$store.getters.count}}</div>

computed: {
  countFromComputed() {
    return this.$store.getters.count
  }
}

<div>count from computed: {{countFromComputed}}</div>

mutations: {
  addA (state, n) {
    state.a += n
  },
  addB (state, n) {
    state.b += n
  },
},
actions: {
  addA ({commit}, n) {
    commit('addA', n)
  },
  addB ({commit}, n) {
    commit('addB', n)
  },
},

countFromComputedSet: {
  get() {
    return this.$store.getters.count
  },
  set(value) {
    this.$store.dispatch('addA', 5)
  },
},

const url = require('url')

const str = 'https://www.google.com:8080/a/b?x=1&y=2&y=3&y=4'

console.log(url.parse(str))

Url {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.google.com:8080',
  port: '8080',
  hostname: 'www.google.com',
  hash: null,
  search: '?x=1&y=2&y=3&y=4',
  query: 'x=1&y=2&y=3&y=4',
  pathname: '/a/b',
  path: '/a/b?x=1&y=2&y=3&y=4',
  href: 'https://www.google.com:8080/a/b?x=1&y=2&y=3&y=4' }

Url {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.google.com:8080',
  port: '8080',
  hostname: 'www.google.com',
  hash: null,
  search: '?x=1&y=2&y=3&y=4',
  query: [Object: null prototype] { x: '1', y: [ '2', '3', '4' ] },
  pathname: '/a/b',
  path: '/a/b?x=1&y=2&y=3&y=4',
  href: 'https://www.google.com:8080/a/b?x=1&y=2&y=3&y=4' }

const { URL } = require('url')
const urlObj = new URL(str)

console.log(urlObj)
console.log(urlObj.toString())

URL {
  href: 'https://www.google.com:8080/a/b?x=1&y=2&y=3&y=4',
  origin: 'https://www.google.com:8080',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'www.google.com:8080',
  hostname: 'www.google.com',
  port: '8080',
  pathname: '/a/b',
  search: '?x=1&y=2&y=3&y=4',
  searchParams:
   URLSearchParams { 'x' => '1', 'y' => '2', 'y' => '3', 'y' => '4' },
  hash: '' }
  
https://www.google.com:8080/a/b?x=1&y=2&y=3&y=4	// toString方法解析出的url

<View>
  <Image
    source={require('/react-native/img/favicon.png')}
  />
  <Image
    source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
  />
  <Image
    source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
  />
</View>

// 引入Dimensions，用于获取设备的尺寸
import { Dimensions } from 'react-native';

// 设置基础宽度为750
const BASE_WIDTH=750;

export function calc(size){
  // 获取当前窗口宽度，支持参数为window和screen
  let { width } = Dimensions.get('window');

  // 换算出当前需要显示的尺寸
  return size * width / BASE_WIDTH;
}

// 引入Nodejs自带的http模块
const http = require('http');
// 引入Nodejs自带的child_process模块
const childProcess = require('child_process');

const hostname = '127.0.0.1'; // 本机地址
const port = 3000; // 端口

// 创建一个服务器
const server = http.createServer((req, res) => {
  res.statusCode = 200; // 设置响应状态码
  res.setHeader('Content-Type', 'text/plain'); // 设置响应头
  res.end('Hello World\n'); // 向前台输出内容
});

// 开启监听
server.listen(port, hostname, () => {
  // 在命令行打印运行结果
  console.log(`Server running at http://${hostname}:${port}/`);
  // 使用默认浏览器打开地址
  childProcess.exec(`start http://${hostname}:${port}/`);
});

actions: {
  async readUsers ({commit}) {
    let res = await fetch('http://localhost:8081/user.txt')
    let users = await res.json()

    commit('setUsers', users)
  }
},

setUsers (state, users) {
  state.users = users
}

async created(){
  await this.readUsers();
},