日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
npm init -y 
 
 
 
 

 
 
 
 

  
  
  
  
css ---存放樣式目錄 
  
  
  
  
js ---存放邏輯文件目錄 
  
  
  
  
imgs ---存放圖片目錄 
  
  
  
  
index.html ---項目主頁面 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
   
  
  
  
  
   
  
  
  
  
     
  
  
  
  
       
  
  
  
  
      {{ message }}
 
  
  
  
  
      {{txt}}
 
  
  
  
  
      {{status}}
 
  
  
  
  
      send 
  
  
  
  
      
{{resTxt}}
 
  
  
  
  
    

這個頁面很簡單，主要使用Vue.js渲染文本以及調(diào)用接口后渲染文本。調(diào)用接口的方法我們這里使用fetch方法，使用詳情大家可以到MDN網(wǎng)址查看：

 
 
 
 

  
  
  
  
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API 
 
 
 
 

建立完前端項目了，我們下一步就開始建立后端項目，我們這里使用的是Node.js技術棧。server文件夾下只有一個主文件app.js。

app.js

 
 
 
 

  
  
  
  
const express = require('express'); 
  
  
  
  
const bodyParser = require('body-parser') 
  
  
  
  
const app = express();    
  
  
  
  
 
  
  
  
  
app.use(express.static("./src")); 
  
  
  
  
 
  
  
  
  
app.use(bodyParser.urlencoded({ extended: true })); 
  
  
  
  
app.use(bodyParser.json()); 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// 跨域 
  
  
  
  
app.all('*', function (req, res, next) { 
  
  
  
  
    res.header("Access-Control-Allow-Origin", "*"); 
  
  
  
  
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
  
  
  
  
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); 
  
  
  
  
    res.header("X-Powered-By", ' 3.2.1'); 
  
  
  
  
    res.header("Content-Type", "application/json;charset=utf-8"); 
  
  
  
  
    next(); 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
//自定義接口 
  
  
  
  
app.get("/mes", function (request, response) { 
  
  
  
  
    response.send({ 
  
  
  
  
        status:"success", 
  
  
  
  
        mes:"渲染頁面成功！" 
  
  
  
  
    }); 
  
  
  
  
}) 
  
  
  
  
 
  
  
  
  
app.post("/send",function(request,response){ 
  
  
  
  
    response.send(request.body); // echo the result back 
  
  
  
  
}) 
  
  
  
  
 
  
  
  
  
app.listen(3000, function () { 
  
  
  
  
    console.log("服務器運行中"); 
  
  
  
  
}); 
 
 
 
 

這里，我們也簡單地介紹一下里面涉及的知識點。express相信接觸Node的伙伴們一定知道。Express 是一個保持最小規(guī)模的靈活的Node.js，Web 應用程序開發(fā)框架，為 Web 和移動應用程序提供一組強大的功能。這里，我們主要使用它創(chuàng)建幾個API接口，供前臺調(diào)用。body-parser是在處理程序之前在中間件中解析傳入的請求體，可以在request.body中獲取從前臺傳來的數(shù)據(jù)。

在此之前，你需要安裝以下兩個依賴：

 
 
 
 

  
  
  
  
npm install express 
 
 
 
 

 
 
 
 

  
  
  
  
npm install body-parser -D 
 
 
 
 

三、開發(fā)前后端熱重載功能

前后端項目我們已經(jīng)建立完成，下面我們將把重點放到如何開發(fā)熱重載功能上。

我會先在項目根目錄下創(chuàng)建一個gulpfile.js文件。然后，我會列出我們需要了解的知識點有哪些。

• gulp
• browser-sync
• gulp-nodemon

gulp

• gulp是基于Node.js的前端自動化構建工具，能自動化地完成 JavaScript/sass/html/image/css 等文件的的測試、檢查、合并、壓縮混淆、格式化、瀏覽器自動刷新、部署文件生成等操作，同時可以對文件進行監(jiān)聽，如果文件有改動，可以自動處理生成新的文件。所以gulp解決了開發(fā)效率(修改代碼后自動更新頁面)、資源整合(代碼的壓縮合并)、代碼質(zhì)量(代碼的檢查 自動化測試)、代碼轉換(es6-->es5)等問題

這里，我們需要知道gulp是怎樣創(chuàng)建任務的。

 
 
 
 

  
  
  
  
const gulp =  require('gulp'); 
  
  
  
  
// 創(chuàng)建任務 
  
  
  
  
// 第一個參數(shù): 任務名 
  
  
  
  
// 第二個參數(shù): 回調(diào)函數(shù),當我們執(zhí)行任務時就會執(zhí)行這個函數(shù) 
  
  
  
  
gulp.task('test', function(){ 
  
  
  
  
    console.log('test'); 
  
  
  
  
}) 
 
 
 
 

 
 
 
 

  
  
  
  
//執(zhí)行任務: gulp 任務名 
  
  
  
  
gulp test 
 
 
 
 

browser-sync

這里，我們可以重點介紹下它，它就是我們今天要找的主角。

在找它之前，我也找到其他可以實現(xiàn)自動刷新瀏覽器的插件，如：LiveReload，它也可以自動刷新頁面，實時預覽html效果。但是，我為什么沒用LiveReload呢?最痛心的一點是你需要在瀏覽器上安裝LiveReload插件，另外在本地你也得安裝一個LiveReload軟件。如果你是用的是VScode編輯器，需要在插件中心安裝LiveReload插件。默認情況下,瀏覽器和編輯器并不會自動為你激活LiveReload的功能，你需要手動配置一些東西。所以這么麻煩，干脆看看還有沒有別的解決方案。

最終，我找到了它——browser-sync，以下是官方對它的解釋：

• Browsersync能讓瀏覽器實時、快速響應您的文件更改(html、js、css、sass、less等)并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調(diào)試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調(diào)試的頁面，當您使用browsersync后，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。

當然，學習它之前，你需要注意browser-sync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js。

然后，你可以全局安裝它。

 
 
 
 

  
  
  
  
npm install -g browser-sync 
 
 
 
 

也可以在本地項目下安裝它。

 
 
 
 

  
  
  
  
npm install --save-dev browser-sync 
 
 
 
 

如果你想更加深度地了解它，可以在瀏覽器上搜索以下網(wǎng)址：

 
 
 
 

  
  
  
  
http://www.browsersync.cn/docs/ 
 
 
 
 

browser-sync可以單獨使用，也可以集成到gulp和grunt這樣的構建工具中使用，在Node.js項目中還能結合gulp-nodemon實現(xiàn)全棧的自動刷新。

gulp-nodemon

nodemon是一款非常實用的工具，用來監(jiān)控你 Node.js 源代碼的任何變化和自動重啟你的服務器。 gulp-nodemon幾乎和普通gulp-nodemon完全一樣，但它是為執(zhí)行Gulp任務而設計的。

介紹完我們需要了解的知識點之后，我們就深入到gulpfile.js文件中，看看是如何實現(xiàn)前后端熱重載的。

 
 
 
 

  
  
  
  
const gulp = require('gulp'); 
  
  
  
  
const browserSync = require('browser-sync').create(); 
  
  
  
  
const nodemon = require('gulp-nodemon'); 
  
  
  
  
 
  
  
  
  
gulp.task('server', function() { 
  
  
  
  
    nodemon({ 
  
  
  
  
        script: 'server/app.js', 
  
  
  
  
        ignore: ["gulpfile.js", "node_modules/"], 
  
  
  
  
        env: { 
  
  
  
  
            'NODE_ENV': 'development' 
  
  
  
  
        } 
  
  
  
  
    }).on('start', function() { 
  
  
  
  
        browserSync.init({ 
  
  
  
  
            proxy: 'http://localhost:3000', 
  
  
  
  
            files: ["src/**"], 
  
  
  
  
            port:8080 
  
  
  
  
        }, function() { 
  
  
  
  
            console.log("browser refreshed."); 
  
  
  
  
        }); 
  
  
  
  
    }); 
  
  
  
  
}); 
 
 
 
 

在此之前，你需要安裝以下三個依賴：

 
 
 
 

  
  
  
  
npm install gulp -D 
 
 
 
 

 
 
 
 

  
  
  
  
npm install browser-sync -D 
 
 
 
 

 
 
 
 

  
  
  
  
npm install gulp-nodemon -D 
 
 
 
 

安裝完依賴之后，我們就來解讀下以上代碼。

require('browser-sync').create();這行代碼的意思是創(chuàng)建browser-sync實例，并允許您創(chuàng)建多個服務器或代理。

gulp.task()代碼段作用是創(chuàng)建任務。

 
 
 
 

  
  
  
  
// 創(chuàng)建任務 
  
  
  
  
// 第一個參數(shù): 任務名 
  
  
  
  
// 第二個參數(shù): 回調(diào)函數(shù),當我們執(zhí)行任務時就會執(zhí)行這個函數(shù) 
  
  
  
  
gulp.task('test', function(){ 
  
  
  
  
    console.log('test'); 
  
  
  
  
}) 
 
 
 
 

nodemon中是一個配置對象。

• script：指向服務器文件地址。
• ignore：忽略部分對程序運行無影響的文件的改動，nodemon只監(jiān)視js文件，可用ext項來擴展別的文件類型。
• env：運行環(huán)境 development 是開發(fā)環(huán)境，production 是生產(chǎn)環(huán)境。

這里，我們通過gulp-nodemon的start事件來觸發(fā)browser-sync的啟動。

browserSync.init()這行代碼的init方法中，第一個參數(shù)我們需要傳入一個配置對象，第二個參數(shù)我們需要定義一個回調(diào)方法。

• proxy：代理服務端的接口地址。
• files：需要監(jiān)聽的文件目錄。
• port：端口號。

這里需要注意的是，如果是修改了服務端的js文件，會先通過nodemon重啟應用，這時瀏覽器不會刷新，要再保存一下修改的文件，browser-sync才會顯示出修改后的效果。

瀏覽效果

至此，我們的項目就大功告成了，在瀏覽之前呢!我們需要這樣一個操作。打開package.json文件。定義一個啟動命令，方便我們每次啟動。

 
 
 
 

  
  
  
  
"scripts": { 
  
  
  
  
  "dev": "gulp server" 
  
  
  
  
}, 
 
 
 
 

之后，我們就可以這樣啟動項目了。

 
 
 
 

  
  
  
  
npm run dev 
 
 
 
 

在瀏覽器上。

打開成功，現(xiàn)在我們改動下代碼，看看是否可以熱重載。

測試成功，這樣我們就安心地開發(fā)自己的代碼了，效率自然就提高了。之前那樣不停地F5，有沒有覺得這個動作對程序員來說很沒有創(chuàng)造力呢?現(xiàn)在可以減輕左手和F5鍵的負擔了。

結語

謝謝閱讀，希望沒有浪費你的時間。如果覺得有幫助!

源碼地址：

https://gitee.com/maomincoding/gulp-vue-cli