Vue--权限、axios、webpack、loader

时间  2019-11-12
标签 vue 权限 axios webpack loader 繁體版
原文   原文链接

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;
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程