var x = 10;
var y = 'abc';
var z = null;

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log(x, y, a, b) // 10, 'abc', 10, 'abc'

var x = 10;
var y = 'abc';
var a = x;
var b = y;
a = 5;
b = 'def';
console.log(x, y, a, b); // 10, 'abc', 5, 'def'

var arr = []; // (a)
arr.push(1); // (b)

var reference = [1];
var refCopy = reference;

reference.push(2);
console.log(reference, refCopy); // [1, 2], [1, 2]

var obj = { first: 'fundebug.com'};
obj = { second: 'fundebug.cn'};

var arrRef = ['Hi!'];
var arrRef2 = arrRef;
console.log(arrRef === arrRef2); // true

var arr1 = ["Hi!"];
var arr2 = ["Hi!"];
console.log(arr1 === arr2); // false

var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);
console.log(arr1str === arr2str); // true

var hundred = 100;
var two = 2;
function multiply(x, y) {
 return x * y;
}
var twoHundred = multiply(hundred, two);

function changeAgeImpure(person) {
 person.age = 25;
 return person;
}
var alex = {
 name: 'Alex',
 age: 30
};
var changedAlex = changeAgeImpure(alex);
console.log(alex); // { name: 'Alex', age: 25 }
console.log(changedAlex); // { name: 'Alex', age: 25 }

function changeAgePure(person) {
 var newPersonObj = JSON.parse(JSON.stringify(person));
 newPersonObj.age = 25;
 return newPersonObj;
}
var alex = {
 name: 'Alex',
 age: 30
};
var alexChanged = changeAgePure(alex);
console.log(alex); // { name: 'Alex', age: 30 }
console.log(alexChanged); // { name: 'Alex', age: 25 }

TML DOM INPUT FILE 大文件上傳解決方案，HTML5大文件上傳解決方案，HTML5大文件上傳源代碼，HTML5大文件上傳源碼，HTML5大文件上傳代碼，HTML5大文件上傳技術，HTML5大文件上傳技巧，HTML5大文件上傳配置，HTML5大文件上傳方法，HTML5大文件上傳原理，HTML5大文件上傳教程，HTML5大文件上傳視頻，javascript大文件上傳技術，vue大文件上傳技術，dom大文件上傳技術，input file大文件上傳技術，

用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務器也容易出錯，需要分片，分塊，分割上傳。也就是將一個大的文件分成若干個小文件塊來上傳，另外就是需要實現秒傳功能和防重復功能，秒傳就是用戶如果上傳過這個文件，那么直接在數據庫中查找記錄就行了，不用再上傳一次，節省時間，實現的思路是對文件做MD5計算，將MD5值保存到數據庫，算法可以用MD5，或者CRC，或者SHA1，這個隨便哪個算法都行。

分片還需要支持斷點續傳，現在HTML5雖然提供了信息記錄功能，但是只支持到了會話級，也就是用戶不能關閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續傳，電腦一關結果進度信息就丟失了，這個是他們的一個痛點。

切片的話還有一點就是在服務器上合并，一個文件的所有分片數據上傳完后需要在服務器端進行合并操作。

聊下HTML5吧，怎么說呢，HTML5也就是chrome提供的一個API來實現文件分片，反正基本的需求，小文件用是能用，但是用起來多多少少還是有點別扭，擴展性，安全性，穩定性用戶那陣都不太滿意，關鍵是什么，我們是沒辦法對HTML5進行擴展，個性化和定制化開發的，基本上被谷歌給限制死了，這也是現在國產化的意義，希望能夠打破這個限制。不然公司的一些產品和業務不太好開展，總不能用戶提個需求，我們就說谷歌Chrome沒提供API，所我們就無法開發吧。這不是跟客戶扯呢。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數據庫

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

外話：近來想把網站做下更新，從框架到內容的更新，但又不想放棄SEO的優勢，日常工作用到vue.js在SEO方面劣勢較多，果斷選擇了Nuxt.js，苦于國內文章抄襲的非常嚴重 如某n 某書，最終在稀土找到一篇像樣的文章，以頭條為平臺記錄網站改版全過程。

此文章建議在PC端查看，涉及到代碼部分，移動端查看確實不方便

Nuxt.js 概要

簡而言之，Nuxt.js是幫助Vue.js輕松完成服務端渲染工作的框架。Nuxt.js預設了服務端渲染所需要的各種配置，如異步數據，中間件，路由。它好比是 Angular Universal 之于 Angular， Next.js 之于 React。

如Nuxt.js文檔所說，通過對客戶端/服務端基礎架構的抽象，Nuxt.js 讓開發者專注于頁面的UI渲染。

靜態文件生成器

Nuxt.js的一個重要功能是，通過 generate 命令，生成靜態站點。類似于流行的靜態生成工具Jekyll。

Nuxt.js 內部依賴

除了Vue.js 2.0之外，Nuxt.js集成了如下模塊: Vue-Router, Vue-Meta 和 Vuex (僅在使用 Vuex 狀態樹配置項 時引入)。 這樣的好處在于，不需要手工配置依賴，不需要同時在客戶端和服務端配置相同的庫。 Nuxt.js在包含如上依賴的情況下，總大小仍然保持在 28kb min+gzip (如果使用了 Vuex 特性的話為 31kb)。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作（如打包、代碼分層、壓縮等等）。

工作原理

當你訪問一個基于Nuxt.js構建的頁面時，發生了的事情如下：

1. 當用戶訪問應用程序, 如果store中定義了 nuxtServerInit action，Nuxt.js將調用它更新store。
2. 接下來，將加載即將訪問頁面所依賴的任何中間件。Nuxt首先從nuxt.config.js這個文件中，加載全局依賴的中間件，之后檢測每個相應頁面對應的布局文件 ，最后，檢測布局文件下子組件依賴的中間件。以上是中間件的加載順序。
3. 如果要訪問的路由是一個動態路由, 且有一個相應的 validate() 方法路由的validate 方法，將進行路由校驗。
4. 之后, Nuxt.js 調用 asyncData() 和 fetch() 方法，在渲染頁面之前加載異步數據。asyncData() 方法用于異步獲取數據，并將fetch回來的數據，在服務端渲染到頁面。 用fetch() 方法取回的將數據在渲染頁面之前填入store。
5. 最后一步, 將所有數據渲染到頁面。

下圖闡述了 Nuxt.js 應用一個完整的服務器請求渲染的流程，摘自官網：

使用 Nuxt.js 創建一個靜態網站

下面讓我們動手創建一個基于Nuxt.js簡單的靜態博客。我們的發送的請求，返回 mock 的JSON數據。

完成下面的例子，你需要了解基礎的 vue.js 知識。如果你是個新手，你可以通過Jack Franklin的getting started guide了解 Vue.js 2.0。同時，我將使用ES6語法，你可以參考www.sitepoint.com/tag/es6/ 重溫ES6語法。

我們的 Demo 最終效果如下:

本文中代碼可參照 GitHub, demo 地址如下：https://github.com/sitepoint-editors/nuxt-ssr-blog/

基礎配置

開始使用 Nuxt.js 最簡單的方式就是使用 Nuxt.js 團隊自己開發的腳手架。我們可以使用 vue-cli 快速創建我們的項目 (ssr-blog)：

`vue init nuxt/starter ssr-blog`
# 提示： 如果你沒有安裝過vue-cli，請先通過npm install -g vue-cli 命令安裝vue-cli。

# 之后，我們將安裝項目的依賴
cd ssr-blog
npm install

# 現在我們啟動程序:
`npm run dev`

# 如果正確啟動, 你能訪問 http://localhost:3000 
# 展示的頁面是 Nuxt.js 模板的初始頁面
# 你也可以通過查看頁面源代碼，驗證頁面所展示的一切內容，都是服務端渲染好的。

下面，我們簡單配置下 nuxt.config.js，包含以下選項：

// ./nuxt.config.js

module.exports = {
  /*
   * Headers of the page
   */
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    // ...
    link: [
      // ...
      { 
        rel: 'stylesheet', 
        href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css' 
      }
    ]
  },
  // ...
}

在如上配置文件下，我們使用 titleTemplate 字段 title 變量指定文章題目，在渲染之前用title變量值替換掉%s這個占位，填充到titleTemplate 。

同時，我也使用了 CSS 框架, Bulma, 預設一些樣式。通過 link 配置項。

提示： Nuxt.js使用 vue-meta 更新我們的 html headers 信息。所以，我們可以看看 meta 具體的配置項，優化頁面 html 信息。

現在，我們可以通過幾個步驟，完成博客的頁面和功能。

使用 Layouts

首先，我們將為我們所有的頁面定義一個通用的基本布局。我們通過修改 layouts/default.vue 文件，更新 main Nuxt.js layout：

<!-- ./layouts/default.vue -->

<template>
  <div>
    <!-- navigation -->
    <nav class="nav has-shadow">
      <div class="container">
        <div class="nav-left">
          <nuxt-link to="/" class="nav-item">
            Awesome JS SSR Blog!
          </nuxt-link>
          <nuxt-link active-class="is-active" to="/" class="nav-item is-tab" exact>Home</nuxt-link>
          <nuxt-link active-class="is-active" to="/about" class="nav-item is-tab" exact>About</nuxt-link>
        </div>
      </div>
    </nav>
    <!-- /navigation -->

    <!-- displays the page component -->
    <nuxt/>

  </div>
</template>

在我們通用的布局里，我們僅僅對頁面添加導航欄，我們通過 component進一步完成具體頁面模塊的定制。你可以查看components-nuxt-link 進一步了解。

在創建布局時component非常重要，它決定具體頁面展示的元素。

當然，component也可以做更多事情，比如定義通用組件和錯誤頁面，但是我們的博客很簡單，不需要這些功能。強烈建議閱讀 Nuxt.js documentation on views ，你可以通過這篇文章了解更多 Nuxt.js 特性。

簡單的頁面和路由

Nuxt.js 頁面是以 單文件組件 形式組織目錄結構。 Nuxt.js 自動找到目錄下每個 .vue 文件，并添加到頁面中。

創建博客主頁

我們可以通過修改 index.vue 文件修改主頁， 通過 Nuxt.js 創建的文件如下：

<!-- ./pages/index.vue -->
<template>
  <div>
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the JavaScript SSR Blog.
          </h1>
          <h2 class="subtitle">
            Hope you find something you like.
          </h2>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    head: {
      title: 'Home'
    }
  }
</script>

如前所述，在渲染之前，題目將自動填充至文件。

我們現在可以刷新頁面，看看主頁的變化。

創建 About 頁面

Nuxt.js 還有一個優秀的特性，監聽文件夾下文件的更改，所以，在文件更改時，不需要重啟應用更新。

來，我們添加一個簡單的 about.vue 頁面：

<!-- ./pages/about.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">About this website.</h2>
      <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
      <br>
      <h4 class="title is-4">What we hope to achieve:</h4>
      <ul>
        <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
        <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
        <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
        <li>Ut non enim metus.</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About'
  }
}
</script>

現在我們訪問 http://localhost:3000/about 看看about頁面，無需重啟，非常方便。

在主頁展示文章列表

我們的首頁在沒有內容的時候展示如上, 所以下一步，我們要在 index.vue 上添加博客列表這個組件。

首先，我們需要把 JSON 格式的文章保存在服務根目錄下。文件可以從 這里下載，或者你可以復制下面的 JSON 到根目錄文件夾 posts.json 下:

[
    {
        "id": 4,
        "title": "Building universal JS apps with Nuxt.js",
        "summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "08:00 - 07/06/2017"
    },
    {
        "id": 3,
        "title": "Great SSR Use cases",
        "summary": "See simple and rich server rendered JavaScript apps.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "17:00 - 06/06/2017"
    },
    {
        "id": 2,
        "title": "SSR in Vue.js",
        "summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "13:00 - 06/06/2017"
    },
    {
        "id": 1,
        "title": "Introduction to SSR",
        "summary": "Learn about SSR in JavaScript and how it can be super cool.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "John Doe",
        "published": "11:00 - 06/06/2017"
    }
]

提示： 理想情況下，我們應該從通過 API 獲取文章數據。

components 存放在 components 文件夾下，我們可以創建如下組件：

<!-- ./components/Posts.vue -->
<template>
  <section class="main-content">
    <div class="container">
      <h1 class="title has-text-centered">
        Recent Posts.
      </h1>
      <div class="columns is-multiline">
        <div class="column is-half" v-for="post in posts">
          <div class="card">
           <header class="card-header">
            <p class="card-header-title">
              {{ post.title }}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              {{ post.summary }}
              <br>
              <small>
                by <strong>{{ post.author}}</strong> 
                \\ {{ post.published }}
              </small>
            </div>
          </div>
          <footer class="card-footer">
            <nuxt-link :to="`/post/${post.id}`" 
              class="card-footer-item">
              Read More
            </nuxt-link>
          </footer>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

<script>
  import posts from '~/posts.json'

  export default {
    name: 'posts',
    data () {
      return { posts }
    }
  }
</script>

我們引入 JSON 文件充當異步數據，通過 v-for 指令循環列表，取出我們需要的屬性填充進組件模板展示。

提示： ~ 符號是 / 的別名。你可以查看 這篇文檔 了解更具體的用法。

下面，我們添加 component 到主頁：

<!-- ./pages/index.vue -->
<template>
<div>
    <!-- ... -->
    <posts />
</div>
</template>

<script>
import Posts from '~components/Posts.vue'

export default {
  components: {
    Posts
  },
  // ...
}
</script>

添加動態路由

現在，我們為文章頁配置動態路由，我們以 /post/1 為例：

為此，我們添加 post 文件夾到 pages 目錄下，如下：

pages
└── post
    └── _id
        └── index.vue

我們的程序生成相應的動態路由：

router: {
  routes: [
    // ...
    {
      name: 'post-id',
      path: '/post/:id',
      component: 'pages/post/_id/index.vue'
    }
  ]
}

更新單一發布文件：

<!-- ./pages/post/_id/index.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">{{ post.title }}</h2>
      <div v-html="post.content"></div>
      <br>
      <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4>
    </div>
  </div>
</template>

<script>
  // import posts saved JSON data
  import posts from '~/posts.json'

  export default {
    validate ({ params }) {
      return /^\d+$/.test(params.id)
    },
    asyncData ({ params }, callback) {
      let post = posts.find(post => post.id === parseInt(params.id))
      if (post) {
        callback(null, { post })
      } else {
        callback({ statusCode: 404, message: 'Post not found' })
      }
    },
    head () {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.post.summary
          }
        ]
      }
    }
  }
</script>

Nuxt.js通過添加通用方法，簡化開發流程。看看我們應該如何在單文件應用中使用它。

• 路由校驗可以通過路由校驗方法 validate 校驗路由。如果我們的驗證路由參數驗證數字，如果驗證失敗，將自動跳轉到404頁面。如果它返回“false”,Nuxt。js將自動加載404錯誤頁面。想看更多，請查看Nuxt官網。
• asyncData 方法用于 fetch 數據，并在服務端渲染頁面，返回給瀏覽器。它可以通過多種方式返回數據。我們可以通過多種方式返回數據。在本文中的例子里，我們使用回調函數返回頁面。我們使用一個回調函數來返回相同的帖子“id”屬性“id”參數的路線。
• 正如我們之前看到的,我們使用head 的方法來設置頁面 header 。這時，我們改變頁面你的 title ，添加頁面信息到具體頁面。

現在我們可以再次訪問我們的博客看到所有路線和頁面正常工作，并查看頁面源代碼生成的HTML。我們有一個服務器端JavaScript應用程序呈現功能。

生成靜態文件

接下來，我們要生成程序的 HTML 靜態文件。

我們需要對 Nuxt.js 做一個小修改，Nuxt.js 默認忽略動態路由。為了生成動態路由文件，我們需要修改 ./nuxt.config.js

我們使用回調函數，返回以后包含動態路由的列表：

// ./nuxt.config.js

module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json')
      let routes = posts.map(post => `/post/${post.id}`)
      callback(null, routes)
    }
  }
}

如果你想查看全部關于 generate 的配置， 可以參照 這篇文檔 。

運行如下命令，生成全部頁面：

`npm run generate`

Nuxt 將所有生成的頁面放到 dist 文件夾下。

使用 Nginx 部署

最后一步，可以使用 Nginx 進行部署，nginx的安裝過程此文不再贅述。

結論

generate 命令來生成我們頁面的靜態文件，假如，我們需要回復。

下一期講，改版中的踩坑問題。