硅谷課堂第四天-前端基礎(chǔ)知識(shí)

文章目錄

• • 硅谷課堂第四天-前端基礎(chǔ)知識(shí)
  • • 一、NPM
    • • 1、NPM簡(jiǎn)介
      • • 1.1、什么是NPM
        • 1.2、NPM工具的安裝位置
      • 2、使用npm管理項(xiàng)目
      • • 2.1、創(chuàng)建文件夾npm
        • 2.2、項(xiàng)目初始化
        • 2.3、修改npm鏡像
        • 2.4、npm install命令的使用
        • 2.5、其它命令
    • 二、模塊化開發(fā)（一）
    • • 1、模塊化簡(jiǎn)介
      • • 1.1、模塊化產(chǎn)生的背景
        • 1.2、什么是模塊化開發(fā)
      • 2、ES5模塊化
      • • 2.1、創(chuàng)建“module”文件夾
        • 2.2、導(dǎo)出模塊
        • 2.3、導(dǎo)入模塊
        • 2.4、運(yùn)行程序
    • 三、模塊化開發(fā)（二）
    • • 1、ES6模塊化寫法（一）
      • • 1.1、導(dǎo)出模塊
        • 1.2、導(dǎo)入模塊
        • 1.3、安裝Babel
        • 1.4、配置.babelrc
        • 1.5、安裝轉(zhuǎn)碼器
        • 1.6、轉(zhuǎn)碼
        • 1.7、運(yùn)行程序
      • 2、ES6模塊化寫法（二）
      • • 2.1、導(dǎo)出模塊
        • 2.2、導(dǎo)入模塊
        • 2.3、轉(zhuǎn)碼
        • 2.4、運(yùn)行程序
    • 四、搭建項(xiàng)目前端環(huán)境
    • • 1、vue-admin-template模板
      • 2、搭建環(huán)境
      • 3、修改登錄功能
      • • 3.1、創(chuàng)建登錄接口
        • 3.2、修改登錄前端
        • （1）修改接口路徑
        • （2）修改js文件
    • 五、跨域問(wèn)題
    • • 1、什么是跨域
      • 2、配置

一、NPM

1、NPM簡(jiǎn)介

1.1、什么是NPM

NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態(tài)系統(tǒng)，里面所有的模塊都是開源免費(fèi)的；也是Node.js的包管理工具，相當(dāng)于前端的Maven 。

1.2、NPM工具的安裝位置

我們通過(guò)npm 可以很方便地下載js庫(kù)，管理前端工程。

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

• 在這個(gè)目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個(gè)工具，說(shuō)明 Node.js已經(jīng)集成了npm工具

#在命令提示符輸入 npm -v 可查看當(dāng)前npm版本 npm -v

2、使用npm管理項(xiàng)目

2.1、創(chuàng)建文件夾npm

2.2、項(xiàng)目初始化

#建立一個(gè)空文件夾，在命令提示符進(jìn)入該文件夾 執(zhí)行命令初始化 npm init #按照提示輸入相關(guān)信息，如果是用默認(rèn)值則直接回車即可。 #name: 項(xiàng)目名稱 #version: 項(xiàng)目版本號(hào) #description: 項(xiàng)目描述 #keywords: {Array}關(guān)鍵詞，便于用戶搜索到我們的項(xiàng)目 #最后會(huì)生成package.json文件，這個(gè)是包的配置文件，相當(dāng)于maven的pom.xml #我們之后也可以根據(jù)需要進(jìn)行修改。 #如果想直接生成 package.json 文件，那么可以使用命令 npm init -y

2.3、修改npm鏡像

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個(gè)網(wǎng)站在國(guó)內(nèi)速度很慢。

這里推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ ，淘寶 NPM 鏡像是一個(gè)完整 npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務(wù)同步。

設(shè)置鏡像地址：

#經(jīng)過(guò)下面的配置，以后所有的 npm install 都會(huì)經(jīng)過(guò)淘寶的鏡像地址下載 npm config set registry https://registry.npm.taobao.org #查看npm配置信息 npm config list

2.4、npm install命令的使用

#使用 npm install 安裝依賴包的最新版， #模塊安裝的位置：項(xiàng)目目錄\node_modules #安裝會(huì)自動(dòng)在項(xiàng)目目錄下添加 package-lock.json文件，這個(gè)文件幫助鎖定安裝包的版本 #同時(shí)package.json 文件中，依賴包會(huì)被添加到dependencies節(jié)點(diǎn)下，類似maven中的 <dependencies> npm install jquery #npm管理的項(xiàng)目在備份和傳輸?shù)臅r(shí)候一般不攜帶node_modules文件夾 npm install #根據(jù)package.json中的配置下載依賴，初始化項(xiàng)目 #如果安裝時(shí)想指定特定的版本 npm install jquery@2.1.x # 局部安裝 #devDependencies節(jié)點(diǎn)：開發(fā)時(shí)的依賴包，項(xiàng)目打包到生產(chǎn)環(huán)境的時(shí)候不包含的依賴 #使用 -D參數(shù)將依賴添加到devDependencies節(jié)點(diǎn) npm install --save-dev eslint #或 npm install -D eslint #全局安裝 #Node.js全局安裝的npm包和工具的位置：用戶目錄\AppData\Roaming\npm\node_modules #一些命令行工具常使用全局安裝的方式 npm install -g webpack--global

2.5、其它命令

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

二、模塊化開發(fā)（一）

1、模塊化簡(jiǎn)介

1.1、模塊化產(chǎn)生的背景

隨著網(wǎng)站逐漸變成"互聯(lián)網(wǎng)應(yīng)用程序"，嵌入網(wǎng)頁(yè)的Javascript代碼越來(lái)越龐大，越來(lái)越復(fù)雜。
Javascript模塊化編程，已經(jīng)成為一個(gè)迫切的需求。理想情況下，開發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯，其他都可以加載別人已經(jīng)寫好的模塊。

但是，Javascript不是一種模塊化編程語(yǔ)言，它不支持"類"（class），包（package）等概念，更遑論"模塊"（module）了。

1.2、什么是模塊化開發(fā)

傳統(tǒng)非模塊化開發(fā)有如下的缺點(diǎn)：

• 命名沖突
• 文件依賴

模塊化規(guī)范：

• CommonJS模塊化規(guī)范
• ES6模塊化規(guī)范

2、ES5模塊化

每個(gè)文件就是一個(gè)模塊，有自己作用域。在一個(gè)文件里定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見。

2.1、創(chuàng)建“module”文件夾

2.2、導(dǎo)出模塊

創(chuàng)建 common-js模塊化/四則運(yùn)算.js

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

導(dǎo)出模塊中的成員

// 導(dǎo)出成員： module.exports = {sum: sum,subtract: subtract }

簡(jiǎn)寫

//簡(jiǎn)寫 module.exports = {sum,subtract }

2.3、導(dǎo)入模塊

創(chuàng)建 common-js模塊化/引入模塊.js

//引入模塊，注意：當(dāng)前路徑必須寫 ./ const m = require('./四則運(yùn)算.js') console.log(m) const result1 = m.sum(1, 2) const result2 = m.subtract(1, 2) console.log(result1, result2)

2.4、運(yùn)行程序

node common-js模塊化/引入模塊.js

CommonJS使用 exports 和require 來(lái)導(dǎo)出、導(dǎo)入模塊。

三、模塊化開發(fā)（二）

1、ES6模塊化寫法（一）

ES6使用 export 和 import 來(lái)導(dǎo)出、導(dǎo)入模塊。

1.1、導(dǎo)出模塊

創(chuàng)建 src/userApi.js

export function getList() {console.log('獲取數(shù)據(jù)列表') } export function save() {console.log('保存數(shù)據(jù)') }

1.2、導(dǎo)入模塊

創(chuàng)建 src/userComponent.js

//只取需要的方法即可，多個(gè)方法用逗號(hào)分隔 import { getList, save } from "./userApi.js" getList() save()

注意：這時(shí)程序無(wú)法運(yùn)行，因?yàn)镋S6的模塊化無(wú)法在Node.js中執(zhí)行，需要用Babel編輯成ES5后再執(zhí)行。

1.3、安裝Babel

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行執(zhí)行

安裝命令行轉(zhuǎn)碼工具

Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼。它的安裝命令如下：

npm install --global babel-cli #查看是否安裝成功 babel --version

1.4、配置.babelrc

Babel的配置文件是.babelrc，存放在項(xiàng)目的根目錄下，該文件用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件，presets字段設(shè)定轉(zhuǎn)碼規(guī)則，將es2015規(guī)則加入 .babelrc：

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

1.5、安裝轉(zhuǎn)碼器

在項(xiàng)目中安裝

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

1.6、轉(zhuǎn)碼

# 整個(gè)目錄轉(zhuǎn)碼 mkdir dist1 # --out-dir 或 -d 參數(shù)指定輸出目錄 babel src -d dist1

1.7、運(yùn)行程序

node dist1/userComponent.js

2、ES6模塊化寫法（二）

2.1、導(dǎo)出模塊

創(chuàng)建 es6/userApi2.js

export default {getList() {console.log('獲取數(shù)據(jù)列表2')},save() {console.log('保存數(shù)據(jù)2')} }

2.2、導(dǎo)入模塊

創(chuàng)建 es6/userComponent2.js

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

2.3、轉(zhuǎn)碼

# 整個(gè)目錄轉(zhuǎn)碼 mkdir dist2 # --out-dir 或 -d 參數(shù)指定輸出目錄 babel es6 -d dist2

2.4、運(yùn)行程序

node dist2/userComponent2.js

四、搭建項(xiàng)目前端環(huán)境

1、vue-admin-template模板

vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

2、搭建環(huán)境

# 解壓壓縮包 # 進(jìn)入目錄 cd vue-admin-template-master# 安裝依賴 npm install# 啟動(dòng)。執(zhí)行后，瀏覽器自動(dòng)彈出并訪問(wèn)http://localhost:9528/ npm run dev

3、修改登錄功能

3.1、創(chuàng)建登錄接口

創(chuàng)建LoginController

@RestController @RequestMapping("/admin/vod/user") @CrossOrigin//跨域 public class LoginController {/*** 登錄* @return*/@PostMapping("login")public Result login() {Map<String, Object> map = new HashMap<>();map.put("token","admin-token");return Result.ok(map);}/*** 獲取用戶信息* @return*/@GetMapping("info")public Result info() {Map<String, Object> map = new HashMap<>();map.put("roles","admin");map.put("introduction","I am a super administrator");map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");map.put("name","Super Admin");return Result.ok(map);}/*** 退出* @return*/@PostMapping("logout")public Result logout(){return Result.ok();} }

3.2、修改登錄前端

（1）修改接口路徑

（2）修改js文件

import request from '@/utils/request'export function login(data) {return request({url: '/admin/vod/user/login',method: 'post',data}) }export function getInfo(token) {return request({url: '/admin/vod/user/info',method: 'get',params: { token }}) }export function logout() {return request({url: '/admin/vod/user/logout',method: 'post'}) }

五、跨域問(wèn)題

1、什么是跨域

（1）瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，域名、端口、協(xié)議任一不同，都是跨域 。前后端分離開發(fā)中，需要考慮ajax跨域的問(wèn)題。

（2）跨域的本質(zhì)：瀏覽器對(duì)Ajax請(qǐng)求的一種限制

（3）這里我們可以從服務(wù)端解決這個(gè)問(wèn)題

2、配置

在Controller類上添加注解

@CrossOrigin //跨域

參考鏈接：

vue參考鏈接

總結(jié)

以上是生活随笔為你收集整理的day04-硅谷课堂-前端基础知识（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。