axios

一、axios簡介

axios是獨立於vue的一個項目，基於promise用於瀏覽器和node.js的http客戶端

在瀏覽器中可以幫助我們完成 ajax請求的發送
在node.js中可以向遠程接口發送請求

二、代碼實例

1、獲取數據

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

注意：測試時需要開啓後端服務器，並且後端開啓跨域訪問權限

2、模擬後臺json數據

{
    "sucess":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"素小暖","age":20},
            {"name":"小耗子","age":30},
            {"name":"凱美瑞","age":40}
        ]
    }
}

3、html

<!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>
    <div id="app">
        <!--把userList數組裏面數據顯示 使用v-for指令 -->
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的結構
            data: { //在data定義變量和初始值
                //定義變量，值空數組
                userList:[]
            },
            created() { //頁面渲染之前執行
                //調用定義的方法
                this.getUserList()
            },
            methods:{//編寫具體的方法
                //創建方法 查詢所有用戶數據
                getUserList() {
                    //使用axios發送ajax請求
                    //axios.提交方式("請求接口路徑").then(箭頭函數).catch(箭頭函數)
                    axios.get("data.json")
                        .then(response =>{//請求成功執行then方法
                            //response就是請求之後返回數據
                            //console.log(response)
                            //通過response獲取具體數據，賦值給定義空數組
                            this.userList = response.data.data.items
                            console.log(this.userList)
                        }) 
                        .catch(error =>{
                        }) //請求失敗執行catch方法
                }
            }
        })
    </script>
</body>
</html>

4、控制檯輸出

element-ui

一、element-ui簡介

element-ui 是餓了麼前端出品的基於 Vue.js的後臺組件庫，方便程序員進行頁面快速佈局和構建

官網： http://element-cn.eleme.io/#/zh-CN

Node.js

一、Node.js簡介

簡單的說 Node.js 就是運行在服務端的 JavaScript。

Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

二、Node.js有什麼用

如果你是一個前端程序員，你不懂得像PHP、Python或Ruby等動態編程語言，然後你想創建自己的服務，那麼Node.js是一個非常好的選擇。

Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那麼你將會很容易的學會Node.js。

當然，如果你是後端程序員，想部署一些高性能的服務，那麼學習Node.js也是一個非常好的選擇。

三、Node.js安裝

官網：https://nodejs.org/en/download/

cmd--> node -v 檢查nodejs是否安裝成功，npm -v 檢查npm是否安裝成功！

nodejs安裝過程中，自帶npm。

四、快速入門

1、創建文件夾nodejs

2、控制檯程序

console.log('Hello Node.js')

打開命令行終端：Ctrl + Shift + y

進入到程序所在的目錄，輸入

node 01.js

瀏覽器的內核包括兩部分核心：

DOM渲染引擎；
js解析器（js引擎）
js運行在瀏覽器中的內核中的js引擎內部

Node.js是脫離瀏覽器環境運行的JavaScript程序，基於V8 引擎（Chrome 的 JavaScript的引擎）

3、服務器端應用開發（瞭解）

創建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發送響應數據 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 終端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

運行服務器程序

node 02-server-app.js

服務器啓動成功後，在瀏覽器中輸入：http://localhost:8888/ 查看webserver成功運行，並輸出html頁面

停止服務：ctrl + c

NPM

一、npm簡介

NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態系統，裏面所有的模塊都是開源免費的；也是Node.js的包管理工具，相當於前端的Maven 。

1、NPM工具的安裝位置

我們通過npm 可以很方便地下載js庫，管理前端工程。

Node.js默認安裝的npm包和工具的位置：Node.js目錄\node_modules

在這個目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個工具，說明 Node.js已經集成了npm工具

#在命令提示符輸入 npm -v 可查看當前npm版本
npm -v

二、使用npm管理項目

1、創建文件夾npm

2、項目初始化

#建立一個空文件夾，在命令提示符進入該文件夾  執行命令初始化
npm init
#按照提示輸入相關信息，如果是用默認值則直接回車即可。
#name: 項目名稱
#version: 項目版本號
#description: 項目描述
#keywords: {Array}關鍵詞，便於用戶搜索到我們的項目
#最後會生成package.json文件，這個是包的配置文件，相當於maven的pom.xml
#我們之後也可以根據需要進行修改。

#如果想直接生成 package.json 文件，那麼可以使用命令
npm init -y

3、修改npm鏡像

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢。

這裏推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ ，淘寶 NPM 鏡像是一個完整 npmjs.com 鏡像，同步頻率目前爲 10分鐘一次，以保證儘量與官方服務同步。

設置鏡像地址：

#經過下面的配置，以後所有的 npm install 都會經過淘寶的鏡像地址下載
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

4、npm install命令的使用

#使用 npm install 安裝依賴包的最新版，
#模塊安裝的位置：項目目錄\node_modules
#安裝會自動在項目目錄下添加 package-lock.json文件，這個文件幫助鎖定安裝包的版本
#同時package.json 文件中，依賴包會被添加到dependencies節點下，類似maven中的 <dependencies>
npm install jquery

#npm管理的項目在備份和傳輸的時候一般不攜帶node_modules文件夾
npm install #根據package.json中的配置下載依賴，初始化項目

#如果安裝時想指定特定的版本
npm install [email protected]

#devDependencies節點：開發時的依賴包，項目打包到生產環境的時候不包含的依賴
#使用 -D參數將依賴添加到devDependencies節點
npm install --save-dev eslint
#或
npm install -D eslint

#全局安裝
#Node.js全局安裝的npm包和工具的位置：用戶目錄\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安裝的方式
npm install -g webpack

5、其它命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名

#卸載包
npm uninstall 包名
#全局卸載
npm uninstall -g 包名

Babel

一、Babel簡介

Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉爲ES5代碼，從而在現有環境執行執行。

這意味着，你可以現在就用 ES6 編寫程序，而不用擔心現有環境是否支持。

二、安裝

npm install --global babel-cli

#查看是否安裝成功
babel --version

三、Babel的使用

1、初始化項目

npm init -y

2、創建文件

src/example.js

下面是一段ES6代碼：

// 轉碼前
// 定義數據
let input = [1, 2, 3]
// 將數組的每個元素 +1
input = input.map(item => item + 1)
console.log(input)

3、配置.babelrc

Babel的配置文件是.babelrc，存放在項目的根目錄下，該文件用來設置轉碼規則和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段設定轉碼規則，將es2015規則加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

4、安裝轉碼器

npm install --save-dev babel-preset-es2015

5、轉碼

# 轉碼結果寫入一個文件
mkdir dist1
# --out-file 或 -o 參數指定輸出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

# 整個目錄轉碼
mkdir dist2
# --out-dir 或 -d 參數指定輸出目錄
babel src --out-dir dist2
# 或者
babel src -d dist2

Webpack

一、Webpack簡介

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。

二、Webpack安裝

1、全局安裝

npm install -g webpack webpack-cli

2、安裝後查看版本號

webpack -v

三、初始化項目

1、創建webpack文件夾

進入webpack目錄，執行命令

npm init -y

2、創建src文件夾

3、src下創建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下創建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下創建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

四、JS打包

1、webpack目錄下創建配置文件webpack.config.js

以下配置的意思是：讀取當前項目目錄下src文件夾中的main.js（入口文件）內容，分析資源依賴，把相關的js文件打包，打包後的文件放入當前目錄的dist文件夾下，打包後的js文件名爲bundle.js

const path = require("path"); //Node.js內置模塊
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前文件所在路徑
        filename: 'bundle.js' //輸出文件
    }
}

2、命令行執行編譯命令

webpack #有黃色警告
webpack --mode=development #沒有警告
#執行後查看bundle.js 裏面包含了上面兩個js文件的內容並驚醒了代碼壓縮

也可以配置項目的npm運行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

運行npm命令執行打包

npm run dev

3、webpack目錄下創建index.html

引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

五、CSS打包

1、安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

Loader 可以理解爲是模塊和資源的轉換器。

首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js內置模塊
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規則應用到以css結尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夾創建style.css

body{
    background:pink;
}

4、修改main.js

在第一行引入style.css

require('./style.css');

Spring Boot + Vue 全棧開發，都需要哪些前端知識？