test

時間  2021-02-20
標籤 javascript css html 前端 java node mysql jquery webpack git 欄目 JavaScript 简体版
原文   原文鏈接

摘要：主要是簡單的介紹了前端的基礎知識javascript

  • Nodejs
  • npm
  • ES6
  • Babel等等

1、Nodejs

1.1 Nodejs介紹與安裝

  • 介紹 ：css

    ​ 簡單的說 Node.js 就是運行在服務端的 JavaScript。 Node.js 是一個基於Chrome JavaScript 運行時創建的一個平臺。底層架構是：javascript. 文件後綴：.jshtml

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

    img

  • 安裝 ：默認安裝就能夠java

1.2 Nodejs入門

  1. 建立一個項目文件夾node

  2. 建立 helloworld.jsmysql

    console.log('hello world');

  3. 打開命令行終端運行 ：node helloworld.jsjquery

1.3 Nodejs-實現HTTP請求訪問

1.建立 httpserver.js;webpack

// 導入模塊是require 就相似於import java.io 
const http = require('http');
// 1: 建立一個httpserver服務
http.createServer(function(request,response){
    // 瀏覽器怎麼認識hello server!!! 
    response.writeHead(200,{'Content-type':'text/plain'}); //這句話的含義是：告訴瀏覽器將
    // 以text-plain去解析hello server 這段數據。
    // 給瀏覽器輸出內容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);

console.log("你啓動的服務是：http://localhpst:8888以啓動成功!!");
// 2: 監聽一端口8888
// 3: 啓動運行服務 node httpserver.js
// 4: 在瀏覽器訪問http://localhost:8888

2.運行服務器程序：git

​ node httpserver.js

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

4.中止服務：ctrl + c

1.4 Node-操做MySQL數據庫

1：安裝mysql依賴

npm install mysql

2：定義db.js進行操做

//1: 導入mysql依賴包,  mysql屬於第三方的模塊就相似於 java.sql同樣的道理
var mysql = require("mysql");
// 1: 建立一個mysql的Connection對象
// 2: 配置數據鏈接的信息 
var connection =mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"mkxiaoer",
    database:"testdb"
});

// 3：開闢鏈接
connection.connect();
// 4: 執行curd
connection.query("select * from kss_user",function(error,results,fields){
    // 若是查詢出錯，直接拋出
    if(error)throw error;
    // 查詢成功
    console.log("results = ",results);
});
// 5: 關閉鏈接
connection.end();
// 最後一步：運行node db.js 查看效果

3：新建數據庫:db_test和表kss_user表

四、運行db.js

若是想開發更復雜的基於Node.js的應用程序後臺，須要進一步學習Node.js的Web開發相關框架 express，art-template、koa等

2、npm 包管理器

2.1 簡介

官方網站：https://www.npmjs.com/
NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態系統，裏面全部的模塊都是開源免費的；也是Node.js的包管理工具，至關於前端的Maven 。

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

2.2 修改npm 鏡像

一、修改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 
# 安裝 Node.js 淘寶鏡像加速器 （cnpm）
npm install -g cnpm --registry=https://registry.npm.taobao.org
#查看npm配置信息npm config list

2.3 npm install 模塊

  • npm 安裝 Node.js 模塊語法格式以下：

    $ npm install <Module Name>

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

  • 安裝好以後，express 包就放在了工程目錄下的 node_modules 目錄中，所以在代碼中只須要經過 require('express') 的方式就好，無需指定第三方包路徑。

    var express = require('express');

  • 全局安裝與本地安裝

    npm 的包安裝分爲本地安裝（local）、全局安裝（global）兩種，從敲的命令行來看，差異只是有沒有-g而已，好比

    npm install express          # 本地安裝
npm install express -g   # 全局安裝

#本地安裝
#將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），若是沒有 node_modules 目錄，會在當前執行 npm 命令的目錄下生成 node_modules 目錄。
#能夠經過 require() 來引入本地安裝的包。

#全局安裝
#Node.js全局安裝的npm包和工具的位置：用戶目錄\AppData\Roaming\npm\node_modules
#能夠直接在命令行裏使用。

# 修改 node 類庫默認安裝位置
# 默認是在 C:\Users\lingStudy\AppData\Roaming\npm

npm config set prefix "D:\nodejs安裝路徑\node_global"
npm config set cache "D:\nodejs安裝路徑\node_cache"
# 查看修改是否成功
npm root -g
# 而後把D:\node安裝目錄\node_global配置到環境變量的 PATH 下便可

2.4 npm其餘命令

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

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

2.5 package.json 和 建立模塊

  1. package.json 屬性說明

    • name - 包名。
    • version - 包的版本號。
    • description - 包的描述。
    • homepage - 包的官網 url 。
    • author - 包的做者姓名。
    • contributors - 包的其餘貢獻者姓名。
    • dependencies - 依賴包列表。若是依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。
    • repository - 包代碼存放的地方的類型，能夠是 git 或 svn，git 可在 Github 上。
    • main - main 字段指定了程序的主入口文件，require('moduleName') 就會加載這個文件。這個字段的默認值是模塊根目錄下面的 index.js。
    • keywords - 關鍵字

  2. 建立自定義模塊

    建立模塊，package.json 文件是必不可少的。咱們可使用 NPM 生成 package.json 文件，生成的文件包含了基本的結果。

    $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (node_modules) runoob                   # 模塊名
version: (1.0.0) 
description: Node.js 測試模塊(www.runoob.com)  # 描述
entry point: (index.js) 
test command: make test
git repository: https://github.com/runoob/runoob.git  # Github 地址
keywords: 
author: 
license: (ISC) 
About to write to ……/node_modules/package.json:      # 生成地址

{
  "name": "runoob",
  "version": "1.0.0",
  "description": "Node.js 測試模塊(www.runoob.com)",
  ……
}


Is this ok? (yes) yes

    以上的信息，你須要根據你本身的狀況輸入。在最後輸入 "yes" 後會生成 package.json 文件。

  3. 自定義腳本命令

    改寫package.json

    {
	//...
	"scripts":{
		// "自定義命令key" : "實際執行命令"
		"build":"babel src\\example.js -o dist\\compiled.js"
	},
	//...
}

    執行

    mkdir dist
npm run build

3、ES6 語法糖

1.變量和常量

<script>

         // 1： 在javascrit定義數據類型只有一種標識 - var
         // 靈活拷問：js有數據類型嗎？
         // 有，string,number,Object, boolean, undefined
         // 什麼是語言：電腦內存中，人經過代碼和電腦溝通。
         let name = "zhangsan";
         let age = 100;
         let flag = false;   

         //js被罵沒常量
         const PI = Math.PI;
         // 修改會報錯
         //PI = 1245;
         console.log(PI)


         //var或形成變量穿透
         for(let i=0;i<5;i++){
             console.log(i);
         };

         //console.log("===這裏就是變量穿透===>" + i)

</script>

小結
let : 可變變量
const 是常量
var：最原始

2.模板字符串

之前： 咱們都是使用 ‘’ 或者 「」 來把字符串套起來

如今： `` 【反引號】 tab鍵上面

用途 ：

  1. 基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。

    //es5    
let name = 'itcast'    
console.log('hello ' + name)    //es6    
const name = 'itcast'    
console.log(`hello ${name}`) //hello itcast

  2. 在ES5時咱們經過反斜槓()來作多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。

    <body>
    <script>
        var username = "張三";
        var age = 30;
        // 1: 原始的作法就是去拼接字符串
        var str = "我名字叫 " + username+",年齡是: "+age;
        console.log(str);  
        // 2:用模板字符串來拯救 注意：這裏是 `（飄鍵） (tab鍵盤的上面那個鍵)
        // jdk1.9 
        var str2 = `我名字叫 ${username},年齡是: ${age}`;
        console.log(str2);
    </script>
</body>

3. 函數默認參數 與 箭頭函數

3.1 函數默認參數

<script>
        // 默認參數 給參數列表設定初始值
        function add(a =100,b=100) {
            console.log(a,b);    
        }
        // 執行方法，會用默認值填充，打印出來100,200
        add();
        // 覆蓋默認值打印  結果是1，2      
        add(1,2);

    </script>

3.2 箭頭函數

<script>
        // 箭頭函數
        // 它也是一種函數的定義，它簡化定義僅此而已。
        // 步驟：1：去掉function  2: 括號後面加箭頭。
        // 1:聲明式的定義
        function add (){

        };

        // 2:表達式的定義
        var add2 = function(){

        }     

        // 3:箭頭函數的定義
        var sum = (a = 100,b = 300)=>{
            console.log(a+b);
        };

        // 這裏執行箭頭函數
        sum(50,50);
        // 這裏執行箭頭函數
        sum();
        // 這裏執行箭頭函數
        sum(400);

    </script>

箭頭函數深度學習

<script>

        // 箭頭函數
        // 它也是一種函數的定義，它簡化定義僅此而已。
        // 步驟：1：去掉function  2: 括號後面加箭頭。

        // 無參數的函數
        //var sum = function(){
        //}
        // 箭頭改造以下
        //var sum = ()=>{}



        // 有參數
        // 第一種狀況  一個參數的以下
        //var sum2 = function(a){

        //};

        // 箭頭改造以下
        var sum2 = (a)=>{};
        var sum2 = a=>{
            return a;
        };



        // 第二種狀況 二個參數的以上,記住括號必定要加
        //var sum3 = function(a,b){
        //    return a + b;
        //};
        // 箭頭改造以下
        var sum3 = (a,b)=>{
            return a + b;
        };



        // 第三種狀況，若是沒有邏輯體，只有返回值能夠簡化以下
        //var sum4 = function(a,b){
        //    return a + b;
        //};

        // 箭頭改造以下
        var sum4 = (a,b)=>a+b


        // 執行
        console.log(sum2(100));
        console.log(sum3(100,100));
        console.log(sum4(100,100));


    </script>

4.對象初始化簡寫

它是指：若是一個對象中的key和value的名字同樣的狀況下能夠定義成一個。

<script>

    function person(name, age) {
        //return {name:name,age:age};

        // 對象簡寫
        return { name, age };
    };

    // 調用和執行
    var json = person("小花花美美", 20);
    console.log(json.name, json.age);


    //========================= 實戰應用 =========================
    //<button onclick="login()">登陸</button>
    function login() {
        var username = $("#username").val();
        var password = $("#password").val();
        // 發送ajax
        $.ajax({
            type: "post",
            // 對象簡寫
            data: { username, password },
            // 原始寫分
            //data:{username:username,password:password},
            success() {

            }
        });
    }
</script>

5.對象解構

對象解構 —- es6提供一些獲取快捷獲取對象屬性和行爲方式

<script>
        // 對象解構 --- es6提供一些獲取快捷獲取對象屬性和行爲方式
        var person = {
            name:'zhangsan',
            age:32,
            language:"cn",

            // 函數也有處理
            /* say:function(){
                console.log(this.name+"年齡是：" + this.age);
            }   */

            /* say:()=>{
                console.log(this.name+"年齡是：" + this.age);
            }  */

            say(){
                console.log(this.name+"年齡是：" + this.age);
            } 
        };

        // ===========================傳統的作法========================
        var name = person.name;
        var age = person.age;
        person.say();

        // ===========================對象解構作法========================
        //es6的作法 前提：默認狀況name,age必須是jsonkey.
        var {name,age} = person;
        console.log(name,age);

        // 能夠用冒號取小名
        var {name,age,language:lan} = person;
        console.log(name,age,lan);
    </script>

6.對象傳播操做符 【...】

把一個對象的屬性傳播到另一個對象中

<script>
        // 1： 定義一個對象
        var person1 = {
            name: '小飛飛',
            age: 16,
        };

        // 2： 對象解構
        var {name,age} = person1;

        // =========================== ... 對象融合=====================
        var person2 = {
            ...person1,
            gender:1,
            tel:13478900
        };

        console.log(person2);


        // =========================== ... 對象取值=====================
        // ... 對象取值
        var person3 = {
            name:"李四",
            gender:1,
            tel:"11111",
            address:'廣州'
        };

        // ...person4 把剩下沒取走給我。
        var {name,gender,...person4} = person3;
        console.log(name)
        console.log(age)
        console.log(person4)


        // =================場景分析 -----僞代碼========================
        // 模擬後臺：異步查詢返回用戶數據 以下：
        function findUsers(){
            $.get("xxxxx",function(res){
                var res = {
                    pages:11,
                    pageSize:10,
                    pageNo:1,
                    firstFlag:true,
                    lastFlag:false,
                    total:123,
                    data:[{},{},{},{}],
                };

                // ==========================對象 ... 取值===============
                var {data:users,...pagesjon} = res;

                //等價於
                /*  var users = res.data;
                   var pagesjon = {
                    res = {
                        pages:11,
                        pageSize:10,
                        pageNo:1,
                        firstFlag:true,
                        lastFlag:false,
                        total:123,
                    }; */
            })
        }
    </script>

4、Babel

簡介:

ES6的某些高級語法在瀏覽器環境甚至是Node.js環境中沒法執行。

Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行執行。

這意味着，你能夠如今就用 ES6 編寫程序，而不用擔憂現有環境是否支持。

安裝：

  1. npm install -g babel-cli
  2. #查看是否安裝成功
  3. babel --version

Babel的使用

一、建立babel文件夾
二、初始化項目 （初始化一個Node項目） npm init -y

三、建立文件 src/example.js ，下面是一段ES6代碼：

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

4.配置.babelrc

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

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

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

五、安裝轉碼器，在項目中安裝

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

六、轉碼

# npm install --save-dev csv-loader xml-loader 
 # 轉碼結果寫⼊⼀個⽂件 
 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

5、模塊化

模塊化產生的背景

隨着網站逐漸變成」互聯網應用程序」，嵌入網頁的Javascript代碼愈來愈龐大，愈來愈複雜。

Javascript模塊化編程，已經成爲一個迫切的需求。理想狀況下，開發者只須要實現核心的業務邏輯，其餘均可以加載別人已經寫好的模塊。可是，Javascript不是一種模塊化編程語言，它不支持」類」（class），包（package）等概念，也不支持」模塊」（module）。

CommonJS規範

一、建立「module」文件夾

二、建立 mokuai-common-js/四則運算.js

// 定義成員：
const sum = function(a,b){    
    return a + b
}
const subtract = function(a,b){    
    return a - b
}
const multiply = function(a,b){    
    return a * b
}
const divide = function(a,b){    
    return a / b
}

三、導出模塊中的成員

// 導出成員：
module.exports = {    
    sum: sum,    
    subtract: subtract,    
    multiply: multiply,    
    divide: divide
}

簡寫

//簡寫
module.exports = {    
    sum,    
    subtract,    
    multiply,    
    divide
}

四、建立 mokuai-common-js/引入模塊.js

//引入模塊，注意：當前路徑必須寫 ./
const m = require('./四則運算.js')
console.log(m)

const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

ES6模塊化規範

ES6使用 export 和 import 來導出、導入模塊。

一、建立 mokuai-es6 文件夾

二、建立 src/userApi.js 文件，導出模塊

export function getList() {
    console.log('獲取數據列表')
}

export function save() {
    console.log('保存數據')
}

三、建立 src/userComponent.js文件，導入模塊

/只取須要的方法便可，多個方法用逗號分隔
import { getList, save } from './userApi.js'
getList()
save()

注意：這時的程序沒法運行的，由於ES6的模塊化沒法在Node.js中執行，須要用Babel編輯成ES5後再執行。

  • 初始化項目

​ npm init -y

  • 配置 .babelrc

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

  • 安裝轉碼器，在項目中安裝

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

  • 定義運行腳本，package.json中增長」build」

    {
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

  • 執行命令轉碼

    npm run build

四、運行程序

node dist/userComponent.js

模塊化寫法二

一、建立 src/userApi2.js ，導出模塊

export default {
    getList() {
        console.log('獲取數據列表2')
    },

    save() {
        console.log('保存數據2')
    }
}

二、建立 src/userComponent2.js，導入模塊

import user from "./userApi2.js"
user.getList()
user.save()

三、執行命令轉碼

​ npm run build

四、運行程序

node dist/userComponent.js

6、webpack

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

image-20210217110312523

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

Webpack安裝

一、全局安裝

npm install -g webpack webpack-cli

# 安裝後查看版本號
webpack -v

初始化項目

一、建立webpack文件夾

npm init -y

二、建立src文件夾

三、src下建立common.js

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

四、src下建立utils.js

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

五、src下建立main.js

const common = require('./common');
const utils = require('./utils');

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

打包 JS

一、webpack目錄下建立配置文件webpack.config.js

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

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

二、命令行執行編譯命令

webpack --mode=development
#執行後查看bundle.js 裏面包含了上面兩個js文件的內容並進行了代碼壓縮

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

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

運行npm命令執行打包

npm run dev

三、webpack目錄下建立index.html ， 引用bundle.js

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

四、瀏覽器中查看index.html

打包 Css

一、安裝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

二、修改webpack.config.js

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

三、在src文件夾建立style.css

body{
    background:pink;
}

四、修改main.js，在第一行引入style.css

require('./style.css');

五、運行編譯命令

npm run dev

六、瀏覽器中查看index.html ， 看看背景是否是變成粉色啦？

把這些知識都學習完畢了，那咱們以後學習 Vue 就輕鬆啦！這些都是如今前端工程師的基礎！

安裝hexo 後初始化失敗

解決方案 ：

image-20210218201319921

直接輸入 cnpm install 等待後查看hexo是否初始化成功

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程