Vue学习笔记02

十二、Axios

1. 概述

Axios是vue用来发送AJAX请求的组件，但不是vue提供的

2. 相关网站

github：https://github.com/axios/axios

3. 安装和导入

安装

cnpm install --save axios vue-axios

导入

#导入vue及axios的组件
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

4. 快速入门

4.1 创建一个组件MyAxiosTest.vue，在该组件发送ajax

<template>
    <div>
      <button @click="axiosAjax()">使用axios发送Ajax请求</button>
    </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

  Vue.use(VueAxios, axios);
    export default {
        name: "MyAxiosTest",
        methods : {
          axiosAjax(){
            this.axios({
              url : "http://localhost:80/test",
              method : 'GET',
              params : {
                id : 10
              }
            }).then(function (res) {
              console.log(res);
            });
          }
        }
    }
</script>

<style scoped>

</style>

创建一个组件MyAxiosTest.vue,在该组件发送ajax

4.2 在父组件上使用子组件MyA凶手Test.vue

5. 注册功能的实现

5.1 设计一个注册页面【App.vue】

<template>
  <div id="app">

    <center>
      <h2>
        欢迎来到Java2107注册页面
      </h2>
      <form method="post">
        <label for="username">用户名:</label><input id="username" v-model="user.username"/><br/>
        <label for="password">密码:</label><input id="password" v-model="user.password"/><br/>
        <label>性别:</label><input value="1" type="radio" v-model="user.gender"/>男
          <input value="0" type="radio" v-model="user.gender"/>女<br/>
        <label for="birth">生日:</label><input id="birth" type="date" v-model="user.birth"/><br/>
        <input type="button" @click="regist()" value="注册">
      </form>
    </center>

  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);
export default {
  name: 'App',
  components: {

  },
  data(){
    return {
      user : {
        gender : 1
      }
    }
  },
  methods : {
    regist(){
      this.axios.post('http://localhost:80/user/regist', this.user).then( (response) => {
        console.log(response);

        let resultVO = response.data;
        if(resultVO.success) {
          alert("注册成功" + resultVO.data.id);

          this.user = resultVO.data;
          console.log(this.user);
        }

      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

<style>

</style>

5.2 后台【跨域】

@RestController
// 跨域注解
@CrossOrigin("http://localhost:8080")
public class UserController {
    @PostMapping("/user/regist")
    public ResultVO regist(@RequestBody User user){
        System.out.println(user);
        user.setId(1111);
        return ResultVO.ok("注册成功",user);
    }
   }

十三、路由

1. 现实中的路由

功能：分配一条可以上网的线路给某台电脑

2. Vue中的路由

实现组件间的跳转
组件名称：vue-router
要想使用，必须安装

3. 快速入门

3.1 步骤

创建vue项目，安装路由模块
需要准备跳转的组件【首页、用户页面】
在路由表中注册路由信息【router/index.js】
在main.js中使用路由
定义路由出口

3.2 具体如下：

需要准备跳转的组件【首页、用户页面】
在路由表中注册路由信息【router/index.js】
在main.js中使用路由【默认使用】
App.vue定义路由出口
测试

http://localhost:8080/#/user –> 用户界面
http://localhost:8080/#/home –> 首页

4. router-link

可以实现如同a链接的跳转方式

4.1 基本使用

router-link的使用

4.2 路由传参

修改路由表
修改App.vue
修改User.vue

十四、ElementUI

1. 概述

一个饿了么开发的UI库，具备非常丰富的效果
官网：https://element.eleme.io/#/zh-CN

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

2. 安装

npm i element-ui -S

3. 使用

在main.js中导入

import Vue from 'vue';
import ElementUI from 'element-ui';  //1
import 'element-ui/lib/theme-chalk/index.css';  //2
import App from './App.vue';

Vue.use(ElementUI);  //3

new Vue({
  el: '#app',
  render: h => h(App)  //4
});

4. 登录案例

4.1 登录组件

<template>
    <div>

      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
          <el-form :model="user" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login()">登录</el-button>
            </el-form-item>
          </el-form>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
          return {
            user: {}
          }
        },
        methods: {
          login() {
            console.log(this.user);
          }
        }
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
</style>

4.2 注册路由信息

4.3 路由跳转

App.vue

5. mock假数据

官网：https://www.fastmock.site/

十五、解决前端权限和登录信息的保存

1. 使用SessionStorage来保存用户数据

SessionStorage
原理

2. 实现权限控制

使用SessionStorage存储登录标识，配合vue的过滤器来实现

2.1 实现步骤

将登录标识存放到SessionStorage中
main.js加一个路由过滤器

//====================路由过滤器============开始================
// 在路由前执行
//beforeEach : 路由过滤器，类似于后台的过滤器，在每次路由前都会进行拦截
router.beforeEach((to, from, next) => {
  //to : 目标资源【要去的资源】
  //from : 源资源【从哪来的资源】
  //next : 下一个路由过滤器
  // 获取用户登录标识
  let isLogin = sessionStorage.getItem('isLogin');
  if (to.path == '/logout') {   // 注销【退出】
    sessionStorage.clear();  // 清空sessionStorage
    next({path: '/login'});  // 跳转到登录
  } else if (to.path == '/regist') {
    //注册就直接放行
    next();
  } else if (to.path == '/login') {  // 如果请求的是登录页，判断是否登录过：如果是，直接跳转到首页
    if (isLogin == "true") {
      next({path: '/home'}); // 已经登录，跳转到首页
    }
  } else if (isLogin == null) {
    next({path: '/login'});  //没有登录，跳转到登录页
  }
  next();  // 下一个路由
});

3. 实现展示用户数据

3.1 使用Vuex实现状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

3.2 实现步骤

安装Vuex

npm install vuex --save
#或者
cnpm install vuex --save

在src下创建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 全局 state 对象，用于保存所有组件的公共数据
const state = {
  // 定义一个 user 对象
  // 在vue组件中是通过 this.$store.state.user 来获取
  user: {
    id:0,
    username: ''
  }
};

//类比Java类中属性的get方法
// 实时监听 state 值的最新状态，注意这里的 getters 可以理解为计算属性
const getters = {
  // 在组件中是通过 this.$store.getters.getUser 来获取
  getUser(state) {
    return state.user;
  }
};

//类比Java类中属性的set方法
// 定义改变 state 初始值的方法，这里是唯一可以改变 state 的地方，缺点是只能同步执行
const mutations = {
  // 在组件中是通过 this.$store.commit('updateUser', user); 方法来调用 mutations
  updateUser(state, user) {
    state.user = user;
  }
};

//调用actions时，会异步执行mutations中的函数
// 定义触发 mutations 里函数的方法，可以异步执行 mutations 里的函数
const actions = {
  // 在组件中是通过 this.$store.dispatch('asyncUpdateUser', user); 来调用 actions
  asyncUpdateUser(context, user) {
    context.commit('updateUser', user);
  }
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

Login.vue中存放用户数据,登录成功后，存放用户数据到store的state中
在各个组件中获取store中的state的用户数据【Home.vue】

4. 解决刷新后用户数据丢失

4.1 实现步骤

App.vue增加监听事件

//组件被挂载时，会自动调用
mounted() {
  //绑定事件
  window.addEventListener('unload', this.saveState);
},
methods: {
  saveState() {
    //向sessionStorage中设置一个state标识，值是从vuex空间中拿到的state
    sessionStorage.setItem('state', JSON.stringify(this.$store.state));
  }
}

store/index.js 修改 state

// 全局 state 对象，用于保存所有组件的公共数据
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  // 定义一个 user 对象
  // 在vue组件中是通过 this.$store.state.user 来获取
  user: {
    id:0,
    username: ''
  }
};

十六、vue-element-admin

1. 问题

我们能不能快速布局一个后台管理系统页面

可以：element-ui 可以使用其中提供的组件进行布局，但是还是过于麻烦

2. 概述

vue-element-admin是一个后台管理系统对应的前端布局解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

可以帮我们快速布局后台管理系统的前端原型页面

3. 快速入门

下载成品项目

vue-element-admin：功能齐全
vue-admin-template：基本功能

运行项目—官方建议不要使用cnpm

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev