54-5五、權限控制思路引導（略）
5六、權限控制結構搭建（略）
5七、權限控制功能實現
5八、axios的基本介紹和安裝
5九、axios的GET和POST請求實例
60、axios的GET和POST請求實例
6一、使用axios的this指向問題
62-6三、webpack介紹，模塊介紹
64-6五、webpack的基本使用
65.一、export default
6六、webpack的深刻使用
6七、webpack配置文件
6八、css-loader配置
6九、webpack插件介紹
70、webpack-dev-server介紹
7一、vue-loader介紹和單頁組件介紹
54-5五、權限控制思路引導（略）
5六、權限控制結構搭建（略）
5七、權限控制功能實現
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--1. 引入vue-router對象 全局的VueRouter對象-->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 2. 讓Vue使用該VueRouter建立
Vue.use(VueRouter);
var Home = {
template:`<p>我是首頁</p>`
};
var Questionbank = {
template:`<p>我是智能題庫</p>`
};
var Login = {
template:`
<div>
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="登陸" @click=loginHandler>
</div>
`,
methods: {
loginHandler(){ //登陸後，用戶名和密碼存儲到localStorage，而後跳轉到「智能題庫」
localStorage.setItem('user',{name:this.name, pwd:this.password}); //編程式導航
this.$router.push({path:'/questionbank'}); }
}
};
// 3. 建立一個路由對象
var router = new VueRouter({
routes:[
{
path:'/home',
component:Home,
},
{
path:'/questionbank',
component:Questionbank,
//給將來的路由作權限控制
meta:{ //爲true表示訪問該組件須要登陸
auth:true }
},
{
path:'/login',
component:Login,
},
]
});
//全局的導航守衛,
router.beforeEach(function (to, from, next) { // console.log(to); //目標路由，有meta字段
// console.log(from); //原路由，有meta字段
if(to.meta.auth){ //已經登陸，就放行
if(localStorage.getItem('user')){ next(); }else { //用戶點擊了智能題庫的導航 該用戶未登陸，須要讓用戶登陸 next({path:'/login'}); } }else { //若是不調用next那麼頁面會卡住
next(); } }); /*
需求：用戶訪問「智能題庫」時，要監測用戶是否有權限訪問智能題庫的內容，監測用戶是否登陸，
若是沒有就跳轉到登陸頁面，登陸完成後，在localStorage中存用戶名和密碼，並跳轉到
智能題庫頁面，用戶點擊「退出」時，在localStorage中刪除用戶，提示「退出成功」，跳轉到登陸頁面
*/
//4. 建立Vue對象
var App={
template:`<div>
<router-link to="/home">首頁</router-link>
<router-link to="/questionbank">智能題庫</router-link>
<router-link to="/login">登陸</router-link>
<a href="javascript:void(0)" @click="quitHandler">退出</a>
<div id="view">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>`,
methods:{
quitHandler(){ localStorage.removeItem('user'); alert('退出成功'); this.$router.push({path:'/login'}); }
}
};
new Vue({
el:'#app',
template:`<App />`,
components:{
App
},
router,
})
</script>
</body>
5八、axios的基本介紹和安裝
Axios是一個基於promise的HTTP庫，能夠用在瀏覽器和node.js中。
-從瀏覽器中建立XMLHttpRequests
-從node.js建立http請求
-支持PromiseAPI
-攔截請求和響應
-轉換請求數據和響應數據
-取消請求
-自動轉換JSON數據
-客戶端支持防護XSREjavascript
axios的get請求：css
//爲給定ID的user建立請求
axios.get('/user?id=123')
.then((response)=> {
console.log(response);
})
.catch((error)=> {
console.log(error);
});
axios的post請求：html
axios.post('/user',{
firstName: 'fred',
lastName: 'flintstone'
})
.then((response)=> {
console.log(response);
})
.catch((error)=> {
console.log(error);
});
安裝：前端
npm init --yesvue
npm install axios --savejava
5九、axios的GET和POST請求實例
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
template: `<div>
<button type="button" @click="sendAjax">發get請求</button>
<button type="button" @click="sendAjaxByPost">發post請求</button>
<div v-html="msg"></div>
</div>`,
data() {
return {
msg: ''
}
},
methods: {
sendAjax() { axios.get('http://127.0.0.1:8000/') .then(response=> { console.log(response.data); data.msg = response.data; }) .catch(error=> { console.log(error); }); },
sendAjaxByPost() { //後端要urleccode
var params = new URLSearchParams(); params.append('name', 'alex'); axios.post('http://127.0.0.1:8000/aa', params) .then(response=> { console.log(response); }) .catch(error=> { console.log(error); }); }
}
};
new Vue({
el: '#app',
template: `<App />`,
components: {
App
},
})
</script>
</body>
60、axios的GET和POST請求實例
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
/*
Vue和axios都是全局的對象 將來axios會成爲局部做用域
全局做用域使用:axios.xxx
局部做用域使用:this.$axios
*/
//掛載；至關於Vue.prototype.$axios = axios；把axios變成局部做用域的，之後能夠經過this.$axios訪問
Vue.prototype.$axios = axios; // Vue.use(axios); //這個報錯，可是不少插件都是這樣用的，
//配置默認URL
axios.defaults.baseURL='http://127.0.0.1:8000'; var App = {
template: `<div>
<button type="button" @click="sendAjax">發get請求</button>
<button type="button" @click="sendAjaxByPost">發post請求</button>
<div v-html="msg"></div>
</div>`,
data() {
return {
msg: ''
}
},
methods: {
sendAjax() {
//訪問的時候直接拼接到默認URL上
this.$axios.get('/')
.then(response=> {
console.log(response.data);
data.msg = response.data;
})
.catch(error=> {
console.log(error);
});
},
sendAjaxByPost() {
//後端要urleccode
var params = new URLSearchParams();
params.append('name', 'alex');
this.$axios.post('/aa', params)
.then(response=> {
console.log(response);
})
.catch(error=> {
console.log(error);
});
}
}
};
new Vue({
el: '#app',
template: `<App />`,
components: {
App
},
});
</script>
</body>
6一、使用axios的this指向問題
在框架中function(){...}儘可能使用箭頭函數()=>{...}的形式node
sendAjax() {
this.$axios.get('/')
.then(response=> {
console.log(this.datas); //可使用。箭頭函數，this指向Vue對象
})
.catch(error=> {
console.log(this.datas);
});
},
sendAjax() {
this.$axios.get('/')
.then(function (response) {
console.log(this.datas); //不能使用。function函數，this指向window對象 要這樣用就要在函數外面將_this = this,_this.datas
})
.catch(function (error) {
console.log(this.datas);
});
},
62-6三、webpack介紹，模塊介紹
webpack：
工做時基本用不到webpack的配置
webpack是對前端資源進行—資源（HTML、css、js、png、font等）打包的工具
寫完項目進行代碼壓縮的工具
一、對前端的資源進行編譯打包，例如sass、less等打包爲csswebpack
拿打包js來講，js有一個入口文件，好比main.js 這個文件依賴了不少其餘js文件，ios
webpack能夠從main.js去找其餘全部依賴打包爲一個js，以後只須要引入這個打包後的js就好了，命令：webpack ./main.js ./xxx.jses6
2.支持es6模塊化
webpack裏面有不少loader，解決部分css、js等瀏覽器兼容性問題
對前端中全部的模塊進行打包，輸出一個或幾個js文件，後續引入這個js文件，上線
模塊介紹：
同步，必須順序執行。
<script>1.js</script>
<script>2.js</script>
<script>3.js</script>
<script>4.js</script>
es6中異步導入模塊：
import xxx from './xx.js'
64-6五、webpack的基本使用
1.演示webpack對項目進行打包
下載webpack：npm i webpack@3.12.0 -g //@後爲版本，能夠不加
下載完成後：webpack -v 顯示版本表示下載成功
注意：如下代碼在3.12.0版本運行成功。高版本或低版本不能保證
目錄結構：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--main.js是入口，依賴了app.js的一個變量，因此要先加載app.js，
不然main.js獲取不到這個變量。用script方式是同步的，一行一行執行-->
<!--<script type="text/javascript" src="app.js"></script>-->
<!--<script type="text/javascript" src="main.js"></script>-->
<!--若是main.js中要使用import模塊化語句就必須用webpack把main.js打包爲bundle.js-->
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
main.js
/*
import obj from './app.js'
console.log(obj); //{name: "alex"}
import {age,fav,add} from './app.js'
console.log(age); //23
console.log(fav); //上班摸魚
add(); //add方法
*/
// 以上也能夠直接用對象拋出 // main.js中用到了app.js中的對象
import * as o from './app.js'
console.log(o);
/*
{default: {…}, __esModule: true, add: ƒ}
add: ƒ add()
age: (...)
default:
name: "alex"
__proto__: Object
fav: (...)
__esModule: true
get age: ƒ ()
get fav: ƒ ()
__proto__: Object
* */
app.js:
let obj={
name:'alex'
};
// 一個js就是一個模塊，若是想把一個js中的變量或函數拋出去，讓另外一個js引用， // 須要將變量用export{xx}拋出，在另外一個模塊用import xx from 'x.js'導入 // 這時候在入口文件中用<script src='main.js'></script>導入就有問題了，會報錯：Uncaught SyntaxError // 須要藉助webpack進行打包：webpack ./main.js ./bundle.js // 而後引入<script src='bundle.js'></script>這樣就沒問題了。 // 總之要想使用export import這種模塊化的語句，必須用webpack對js進行打包操做
export default obj;
let age = 23;
export {age} //做爲一個key拋出
export var fav = '上班摸魚';
export function add() {
console.log("add方法")
}
65-一、export default
Vue 的模塊機制
Vue 是經過 webpack 實現的模塊化，所以可使用 import 來引入模塊，例如：
此外，你還能夠在 bulid/webpack.base.conf.js 文件中修改相關配置：
意思是，你的模塊能夠省略 ".js"，".vue"，「.json」 後綴，weebpack 會在以後自動添加上；能夠用 "@" 符號代替 "src" 字符串等。
export 用來導出模塊，Vue 的單文件組件一般須要導出一個對象，這個對象是 Vue 實例的選項對象，以便於在其它地方可使用 import 引入。而 new Vue() 至關於一個構造函數，在入口文件 main.js 構造根組件的同時，若是根組件還包含其它子組件，那麼 Vue 會經過引入的選項對象構造其對應的 Vue 實例，最終造成一棵組件樹。
export 和export default 的區別在於：export 能夠導出多個命名模塊，例如：
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
對應的引入方式：
//demo2.js
import { str, f } from 'demo1'
export default 只能導出一個默認模塊，這個模塊能夠匿名，例如：
//demo1.js
export default {
a: 'hello',
b: 'world'
}
對應的引入方式：
//demo2.js
import obj from 'demo1'
引入的時候能夠給這個模塊取任意名字，例如 "obj"，且不須要用大括號括起來。
6六、webpack的深刻使用
目錄結構：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<!--webpack把main.js打包爲bundle.js-->
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
app.js
var App={
template:`<div>我是一個組件</div>`
};
export {App}
main.js
import Vue from './vue.js'
import * as o from './app.js'
var app = new Vue({
el:'#app',
template:'<App />',
components:{
App:o.App
}
});
效果：
<body>
<div>我是一個組件</div>
<!--webpack把main.js打包爲bundle.js-->
<script type="text/javascript" src="bundle.js"></script>
</body>
每次修改了代碼都須要在終端裏執行命令：webpack ./main.js ./bundle.js
這樣就很繁瑣，如何解決呢？
在項目目錄下執行命令：
npm init --yes
npm i webpack@3.12.0 -D
新建webpack.config.js文件
webpack.config.js
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output: {
filename: "./bundle.js"
}
};
這樣：在項目目錄下執行`webpack`命令，就按配置文件執行，至關於`webpack ./main.js ./bundle.js`
也能夠執行`npm run dev` ，至關於`webpack ./main.js ./bundle.js`
以上，是生產環境的配置：寫好以後用`npm run dev`編譯後使用。
開發環境使用就不方便，由於改點東西就編譯很麻煩。能夠讓webpack監聽代碼的改變，即時編譯
6七、webpack配置文件
webpack可使用幾套配置文件，生產環境一套配置文件，開發環境一套配置文件
6八、css-loader配置
使用webpack能夠像模塊那樣去使用.js文件，那麼.css文件也能夠像模塊那樣去使用。前提是配置css-loader
效果：
項目下新建main.css文件
在js中導入css
執行`webpack ./main.js ./bundle.js`實現頁面變紅的效果，須要按如下方法配置css-loader
1.先在項目目錄下執行命令下載loader：
npm install css-loader -D;npm install style-loader -D
2.webpack配置文件中配置css-loader：
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output: {
filename: "./bundle.js"
},
watch: true,
//模塊中的loader加載器，有多種loader，例如
//css json png jpg mp3 mp4 es6的js代碼等
module: { loaders: [ { test: /\.css$/, //css後綴的文件
loader: 'style-loader!css-loader' //使用的loader
} ] }
};
6九、webpack插件介紹
爲了使整個目錄結構井井有條，能夠將./bundle.js 放在./dist/bundle.js目錄裏。在編譯的時候能夠在webpack配置文件中進行設置，還能夠參照給定的index.html在編譯時
生成./dist/index.html
1.下載插件：npm install html-webpack-plugin -D
2.配置文件webpack.config.js：
//nodejs中內容模塊
var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output: {
path:path.resolve('./dist'), //相對路徑轉絕對路徑
filename: "./bundle.js"
},
watch: true,
//模塊中的loader加載器，有多種loader，例如
//css json png jpg mp3 mp4 es6的js代碼等
module: {
loaders: [
{
test: /\.css$/, //css後綴的文件
loader: 'style-loader!css-loader' //使用的loader
}
]
},
//插件
plugins: [ new HtmlWebpackPlugin({ //參照這個index.html在./dist目錄下生成新的index.html
template: './index.html', }) ]
};
還有個http-server插件能夠模擬服務器訪問：
1.安裝插件：`npm install -g http-server`
2.使用方法-進入dist目錄執行命令：`hs -o -p 9999`
70、webpack-dev-server介紹
若是但願執行完`npm run dev`就看到瀏覽器頁面，須要安裝webpack-dev-server插件
1.下載安裝插件：npm install webpack-dev-server@2.9.0 -D //高版本可能很差使
2.修改package.json配置：
{
"name": "webpack_lesson",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open chrome --hot --inline --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"install": "^0.13.0",
"style-loader": "^1.0.0",
"webpack": "^3.12.0"
}
}
3.執行：`npm run dev`
7一、vue-loader介紹和單頁組件介紹
PS：vue模板只能有一個根對象,你得用一個div來或是別的標籤來包裹所有的元素，把子組件所有包裹在父組件內，否則報錯
以前定義組件的方式不美觀，用.vue文件進行規範化， 使用vue-loader將.vue解析爲.js
vue-loader做用是將.js文件用.vue的寫法代替
1.安裝插件：npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 vue@2.5.17 -D //版本要配套。vue跟vue-compiler版本不配套也要報錯
2.配置loader在webpack.config.js中：
//nodejs中內容模塊
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output: {
path:path.resolve('./dist'), //相對路徑轉絕對路徑
filename: "./bundle.js"
},
watch: true,
//模塊中的loader加載器，有多種loader，例如
//css json png jpg mp3 mp4 es6的js代碼等
module: {
loaders: [
{
test: /\.css$/, //css後綴的文件
loader: 'style-loader!css-loader' //使用的loader
},
{ test:/\.vue$/, loader:'vue-loader' }
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
//參照這個index.html在./dist目錄下生成新的index.html
template: './index.html',
})
]
};
main.js
import Vue from './vue.js'
import App from './App.vue'
var app = new Vue({
el:'#app',
template:'<App />',
components:{
App
}
});
//導入css
import './main.css'
App.vue
<!-- 以前的方式App.js：
export default {
template:`<div>我是一個組件</div>`
}; -->
<!--
換成App.vue後
組件結構
業務邏輯
組件樣式 -->
<template>
<div>
<h1 @click="clickHandler">{{msg}}</h1>
<Header />
</div>
</template>
<script>
import Header from './Header.vue'
export default{
data(){
return {
msg:'單頁面組件'
}
},
methods:{
clickHandler(){
alert(this.msg);
}
},
components:{
Header
}
}
</script>
<!-- 不加scoped：表示全局樣式，當前模板和其子模板生效 加scoped：表示局部樣式，只在當前模板生效
-->
<style scoped>
h1{
color: white;
}
</style>
Header.vue
<template>
<div>
<h1>{{desc}}</h1>
</div>
</template>
<script>
export default{
data(){
return {
desc:'我是Header組件'
}
}
}
</script>
<style scoped>
h1{
color: green;
}
</style>
main.css
body{
background-color: red;
}
h1{
color: blue;
}