硅谷課堂第四天-前端基礎知識

文章目錄

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

一、NPM

1、NPM簡介

1.1、什么是NPM

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

1.2、NPM工具的安裝位置

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

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

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

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

2、使用npm管理項目

2.1、創建文件夾npm

2.2、項目初始化

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

2.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

2.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 jquery@2.1.x # 局部安裝 #devDependencies節點：開發時的依賴包，項目打包到生產環境的時候不包含的依賴 #使用 -D參數將依賴添加到devDependencies節點 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 包名

二、模塊化開發（一）

1、模塊化簡介

1.1、模塊化產生的背景

隨著網站逐漸變成"互聯網應用程序"，嵌入網頁的Javascript代碼越來越龐大，越來越復雜。
Javascript模塊化編程，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。

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

1.2、什么是模塊化開發

傳統非模塊化開發有如下的缺點：

• 命名沖突
• 文件依賴

模塊化規范：

• CommonJS模塊化規范
• ES6模塊化規范

2、ES5模塊化

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

2.1、創建“module”文件夾

2.2、導出模塊

創建 common-js模塊化/四則運算.js

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

導出模塊中的成員

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

簡寫

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

2.3、導入模塊

創建 common-js模塊化/引入模塊.js

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

2.4、運行程序

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

CommonJS使用 exports 和require 來導出、導入模塊。

三、模塊化開發（二）

1、ES6模塊化寫法（一）

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

1.1、導出模塊

創建 src/userApi.js

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

1.2、導入模塊

創建 src/userComponent.js

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

注意：這時程序無法運行，因為ES6的模塊化無法在Node.js中執行，需要用Babel編輯成ES5后再執行。

1.3、安裝Babel

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

安裝命令行轉碼工具

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

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

1.4、配置.babelrc

Babel的配置文件是.babelrc，存放在項目的根目錄下，該文件用來設置轉碼規則和插件，presets字段設定轉碼規則，將es2015規則加入 .babelrc：

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

1.5、安裝轉碼器

在項目中安裝

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

1.6、轉碼

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

1.7、運行程序

node dist1/userComponent.js

2、ES6模塊化寫法（二）

2.1、導出模塊

創建 es6/userApi2.js

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

2.2、導入模塊

創建 es6/userComponent2.js

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

2.3、轉碼

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

2.4、運行程序

node dist2/userComponent2.js

四、搭建項目前端環境

1、vue-admin-template模板

vue-admin-template是基于vue-element-admin的一套后臺管理系統基礎模板（最少精簡版），可作為模板進行二次開發。

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

2、搭建環境

# 解壓壓縮包 # 進入目錄 cd vue-admin-template-master# 安裝依賴 npm install# 啟動。執行后，瀏覽器自動彈出并訪問http://localhost:9528/ npm run dev

3、修改登錄功能

3.1、創建登錄接口

創建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'}) }

五、跨域問題

1、什么是跨域

（1）瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協議任一不同，都是跨域 。前后端分離開發中，需要考慮ajax跨域的問題。

（2）跨域的本質：瀏覽器對Ajax請求的一種限制

（3）這里我們可以從服務端解決這個問題

2、配置

在Controller類上添加注解

@CrossOrigin //跨域

參考鏈接：

vue參考鏈接

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。