文章目錄

• （硅谷課堂項目）Java開發(fā)筆記4：前端基礎(chǔ)知識（二）
• • • 一、NPM
    • • 1、NPM簡介
      • • 1.1、什么是NPM
        • 1.2、NPM工具的安裝位置
      • 2、使用npm管理項目
      • • 2.1、創(chuàng)建文件夾npm
        • 2.2、項目初始化
        • 2.3、修改npm鏡像
        • 2.4、npm install命令的使用
        • 2.5、其它命令
    • 二、模塊化開發(fā)（一）
    • • 1、模塊化簡介
      • • 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)行程序
    • 四、搭建項目前端環(huán)境
    • • 1、vue-admin-template模板
      • 2、搭建環(huán)境
      • 3、修改登錄功能
      • • 3.1、創(chuàng)建登錄接口
        • 3.2、修改登錄前端
        • （1）修改接口路徑
        • （2）修改js文件
    • 五、跨域問題
    • • 1、什么是跨域
      • 2、配置

（硅谷課堂項目）Java開發(fā)筆記4：前端基礎(chǔ)知識（二）

一、NPM

1、NPM簡介

1.1、什么是NPM

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

1.2、NPM工具的安裝位置

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

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

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

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

2、使用npm管理項目

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

2.2、項目初始化

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

2.3、修改npm鏡像

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

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

設(shè)置鏡像地址：

#經(jīng)過下面的配置，以后所有的 npm install 都會經(jīng)過淘寶的鏡像地址下載 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節(jié)點下，類似maven中的 <dependencies> npm install jquery #npm管理的項目在備份和傳輸?shù)臅r候一般不攜帶node_modules文件夾 npm install #根據(jù)package.json中的配置下載依賴，初始化項目 #如果安裝時想指定特定的版本 npm install jquery@2.1.x # 局部安裝 #devDependencies節(jié)點：開發(fā)時的依賴包，項目打包到生產(chǎn)環(huán)境的時候不包含的依賴 #使用 -D參數(shù)將依賴添加到devDependencies節(jié)點 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、模塊化簡介

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

隨著網(wǎng)站逐漸變成"互聯(lián)網(wǎng)應(yīng)用程序"，嵌入網(wǎng)頁的Javascript代碼越來越龐大，越來越復(fù)雜。

Javascript模塊化編程，已經(jīng)成為一個迫切的需求。理想情況下，開發(fā)者只需要實現(xiàn)核心的業(yè)務(wù)邏輯，其他都可以加載別人已經(jīng)寫好的模塊。

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

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

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

• 命名沖突
• 文件依賴

模塊化規(guī)范：

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

2、ES5模塊化

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

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

2.2、導(dǎo)出模塊

創(chuàng)建 common-js模塊化.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 }

簡寫

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

完整js文件：

// 定義成員： const sum = function(a,b){return parseInt(a) + parseInt(b) } const subtract = function(a,b){return parseInt(a) - parseInt(b) }// 導(dǎo)出成員： module.exports = {sum: sum,subtract: subtract }// //簡寫 // module.exports = { // sum, // subtract // }

2.3、導(dǎo)入模塊

創(chuàng)建引入模塊.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 引入模塊.js

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

運(yùn)行結(jié)果：

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

1、ES6模塊化寫法（一）

ES6使用 export 和 import 來導(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

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

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

1.3、安裝Babel

Babel是一個廣泛使用的轉(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，存放在項目的根目錄下，該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，presets字段設(shè)定轉(zhuǎn)碼規(guī)則，將es2015規(guī)則加入 .babelrc：

創(chuàng)建.babelrc文件：

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

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

在項目中安裝

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

1.6、轉(zhuǎn)碼

# 整個目錄轉(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)碼

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

2.4、運(yùn)行程序

node dist2/userComponent2.js

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

1、vue-admin-template模板

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

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

2、搭建環(huán)境

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

3、修改登錄功能

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

創(chuàng)建LoginController

package com.gerrard.olclass.vod.controller;import com.gerrard.olclass.result.Result; import org.springframework.web.bind.annotation.*;import java.util.HashMap; import java.util.Map;@RestController @RequestMapping("admin/vod/user") //@CrossOrigin public class LoginController {@PostMapping("login")public Result login(){Map<String,Object> map=new HashMap<>();//查看模板未改返回的數(shù)據(jù),按照返回數(shù)據(jù)格式用后端來造數(shù)據(jù)map.put("token","admin");return Result.ok(map);}//info@GetMapping("info")public Result info() {//{"code":20000,"data":// {"roles":["admin"],// "introduction":"I am a super administrator",// "avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",// "name":"Super Admin"}}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);} }

3.2、修改登錄前端

（1）修改接口路徑

原代碼：

# just a flag ENV = 'development'# base api VUE_APP_BASE_API = '/dev-api'

（2）修改js文件

原user.js文件在vue-admin-template\src\api目錄下。

內(nèi)容：

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

修改user.js文件的內(nèi)容：

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

先運(yùn)行模板代碼，查看登錄時的數(shù)據(jù)請求，查看請求后響應(yīng)的數(shù)據(jù)格式，后端根據(jù)這個格式來編寫代碼。

再將系統(tǒng)登錄時請求的地址改掉，鏈到后端去，在后端寫接口，根據(jù)模板代碼請求后響應(yīng)的數(shù)據(jù)格式來編碼。

五、跨域問題

1、什么是跨域

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

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

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

2、配置

在Controller類上添加注解

@CrossOrigin //跨域

總結(jié)

以上是生活随笔為你收集整理的（硅谷课堂项目）Java开发笔记4：前端基础知识（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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