npm i element-ui -S

安装 css 之类的相关的依赖

npm install  sass-loader@7.3.1 node-sass --save-dev

引入使用

标红色的部分是引入的代码. 在项目的 main.js 里面

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
  render: h => h(App)
})

简单的登录页面实现以及校验功能

主要是使用 element-ui 的form 组件功能的验证以及一些消息提示

<template>
  <el-form ref="form" :model="form" :rules="rules" class="login-box">
    <h3 class="login-title">欢迎登录</h3>
    <el-form-item label="账号" prop="name">
      <el-input type="text" aria-placeholder="请输入用户名" v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" aria-placeholder="请输入密码" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">登录</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          name: "",
          password: ""
        },
        rules: {
          name: [
            {required: true, message: '请输入用户名称', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push("/main")
          } else {
            this.$message({
              message: '用户名或者密码未填',
              type: 'warning'
            });
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .login-box {
    width: 350px;
    margin: 150px auto;
    border: 1px solid #DCDFE6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 30px #DCDFE6;
  }

  .login-title {
    text-align: center;
  }

</style>

展示效果

校验失败的提示效果, 成功后就自动跳转到 /main 页面, 即首页页面的组件

结合 element-ui 对 Vue 相关知识点整理 (router,axios,Vuex )
element-ui 安装
引入使用
简单的登录页面实现以及校验功能
首页简单实现
组件间参数传递方式
路由重定向
路由模式处理
统一 404 处理
路由钩子函数进行异步请求
Vuex 解决状态问题

首页简单实现

布局

基于官方的示例, 实现一个简单的左侧导航栏, 右侧内容展示, 头部展示一个title 的一个布局

main.vue

main 组件还是用 element-ui 的相关方法来拼

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>羊驼产品</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/member/type">羊驼型号</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">

                <router-link to="/member/list">羊驼列表</router-link>
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-message"></i>羊驼园区</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">园区分布</el-menu-item>
              <el-menu-item index="2-2">园区列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>用户中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>admin</span>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

子路由

index.js 子路由相关代码

/main 下的子路由用 children 来作为关键字传入

import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login";
import Main from "../views/Main";
import MemberList from "../views/Member/MemberList";
import MemberType from "../views/Member/MemberType";


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main,
      children: [
        {
          path: '/member/list',
          name: 'MemberList',
          component: MemberList
        },
        {
          path: '/member/type',
          name: 'MemberType',
          component: MemberType
        }
      ]
    },

  ]
})

组件间参数传递方式

路径匹配

link to 的时候传递参数

 <router-link to="/member/type/1">羊驼型号</router-link>

路由路径的时候

　　指定参数

      {   
          path: '/member/type/:id',
          name: 'MemberType',
          component: MemberType
        }

组件内参数的使用

　　通过 $route.params.id 进行调用

<template>
  <div>羊驼类型  ID={{$route.params.id}}</div>
</template>

展示效果

porps 方式

link to 部分改为对象

　　name 固定参数传递的是跳转组件的 name

　　params 固定参数表示传入的参数, 格式为对象, 里面为具体传入的参数

　　<router-link :to="{name:'MemberType', params: {id: 3}}">羊驼型号</router-link>

路由的部分

　　添加一个 props 为 true

{
          path: '/member/type/:id',
          name: 'MemberType',
          component: MemberType,
          props: true
}

组件内参数的使用

声明出来一个 props , 然后模板里面就可以简单的直接用参数了

<template>
  <div>羊驼类型 ID={{id}}</div>
</template>

<script>
  export default {
    name: "MemberType",
    props: ["id"]

  }
</script>

展示效果

porps 方法内的使用

应用场景示例

这里登陆后的跳转时, 把登录后的用户名传递过来在首页显示出来, 之前是写死的 admin

代码

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({name: "Main", params: {username: this.form.name}})
          } else {
            this.$message({
              message: '用户名或者密码未填',
              type: 'warning'
            });
            return false;
          }
        });
      },

路由里面打开 props

    {
      path: '/main/',
      name: 'Main',
      component: Main,
      props: true,
      children: [
        {
          path: '/member/list',
          name: 'MemberList',
          component: MemberList
        },
        {
          path: '/member/type/:id',
          name: 'MemberType',
          component: MemberType,
          props: true
        }
      ]
    },

main 组件里面接受使用

　　 <span>{{username}}</span>

  export default {
    name: "Main",
    props: ["username"]
  }

实现效果

登录后

路由重定向

main 需要接受一个 :username 的参数

{
      path: '/main/:username',
      name: 'Main',
....

路由设置, 将一个 username 的参数重定向传递给 main

    {
      path: '/remain/:username',
      redirect: '/main/:username'
    }

多加一个按钮来指向这个路径, 这里假设传递一个 admin123的参数

 <el-menu-item index="1-3">
      <router-link to="/goHome/admin123">回到首页</router-link>
 </el-menu-item>

展示效果

路由模式处理

默认的这种单文件之间的组件跳转的页面 url 里面会有个 #

效果展示

统一 404 处理

代码

<template>
    <div> 假设一个很好看的 404 提示页面</div>
</template>

<script>
    export default {
        name: "NotFound"
    }
</script>

<style scoped>

</style>

{
      path: "*",
      name: 'NotFound',
      component: NotFound
}

效果展示

路由钩子函数进行异步请求

钩子函数的定义

所有的钩子函数

相关的调用过程可以用此代码调试

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

钩子函数的参数 , to. from. next. 分别表示要去的路由, 从那个路由来的, 以及控制路由的参数

  export default {
    name: "MemberType",
    props: ["id"],
    beforeRouteEnter: (to, from, next) => {

    },
    beforeRouteLeave: (to, from, next) => {
    },
  }

axios 相关准备

异步请求需要 axios 安装

cnpm install axios -s

引用 axios

import axios from "axios";

Vue.prototype.axios = axios

配合钩子函数使用进行异步请求

后端准备

既然是异步请求则需要一个后端, 这里后端起一个 django 随便编写一些简单的数据进行回应

前后端的跨域问题让 django 的后端来处理. 从而让前段完全不需要操作好了

安装跨域相关处理的包

pip install django-cors-headers

添加进去 app中

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'user.apps.UserConfig',
    'rest_framework',
    'django_filters',
    'coreapi',
    'corsheaders'
]

然后注册中间件, 注意放的位置, 放错了就不会生效了

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

settings.py 里面对跨域的限制的相关配置

ALLOWED_HOSTS = ["*"]
# 增加跨域忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

前端部分

羊驼类型组件调整的时候, 会在页面渲染前来进行axios 请求数据

<template>
  <div>羊驼类型 ID={{id}}</div>
</template>

<script>
  export default {
    name: "MemberType",
    props: ["id"],
    beforeRouteEnter: (to, from, next) => {
      next(vm => {
        vm.getData()
      })
    },
    beforeRouteLeave: (to, from, next) => {
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://127.0.0.1:8000/yangtuo/type/',
        }).then(function (repos) {
          console.log(repos)
        }).catch(function (error) {
          console.log(error)
        })

      }
    }
  }
</script>

<style scoped>

</style>

可以看到请求到的数据就在这里打印出来了

Vuex 解决状态问题

Vuex 是 vue 中的状态管理控制器, 用于集中管理所有组件的状态,

安装使用

cnpm install vuex --save

main.js

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

应用场景

比如登录态的判断, 如果没登录访问任何页面都跳转到登录页进行登录

场景实现

基于 sessionStorage

首先, login的组件里面在登录成功之后在 session 里面设定一个登录标识

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sessionStorage.setItem('isLogin', 'true')
            this.$router.push({name: "Main", params: {username: this.form.name}})
          } else {
            this.$message({
              message: '用户名或者密码未填',
              type: 'warning'
            });
            return false;
          }
        });
      },

然后, 在main.js 里面调用钩子函数 beforeEach

相关的代码, 因为需要全局生效. 所以在 main.js 中

// 路由跳转前
router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('isLogin')
  console.log(isLogin)
  console.log(to.path)
  // 登出,
  if (to.path == '/logout') {
    // 清理状态
    sessionStorage.clear();
    // 跳转登录页
    next({path: '/login/'});
    // 登录
  } else if (to.path == '/login') {
    // 是否已登录
    if (isLogin != null) {
      next({path: '/main'});
    }
  } else if (isLogin == null) {
    next({path: '/login'});
  }
  next()
})

基于 Vuex

sessionStroage 只能简单的存储一些键值对, 而实际用户对象的存储则不方便

使用 Vuex 即可解决这个问题

配置

在 src 根目录下创建一个 store 文件来保存 Vuex 的配置文件 index.js 内容如下

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

// 全局的 state 对象, 用于保存所有组件的公共数据
const state = {
  user: {
    name: ""
  }
}

// 监听state 对象的值的最新状态 (计算属性)
const getters = {
  getUser(state) {
    return state.user
  }
}

// 唯一一个可以修改 state 值得方法 (同步执行)
const mutations = {
  updateUser(state, user) {
    state.user = user
  }
}

// 异步执行 mutations 方法
const actions = {
  asyncUpdateUser(context, user) {
    context.commit("updateUser", user)

  }
}


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

main.js 里面进行注册

import store from "./store";


new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>',
  render: h => h(App)
})

使用

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sessionStorage.setItem('isLogin', '');
            this.$store.dispatch('asyncUpdateUser', {name: this.form.name})
            this.$router.push({name: "Main", params: {username: this.form.name}});
          } else {
            this.$message({
              message: '用户名或者密码未填',
              type: 'warning'
            });
            return false;
          }
        });
      },

state 的内容使用

 <span>{{$store.getters.getUser.name}}</span>

效果示例

登录成功后右上角的这个登录用户的显示可以直接在 state 里面去取

刷新重置问题处理

但是目前存在一个问题, 就是刷新之后就没有了, 目前的示例都是在一个单页面上进行

每次刷新之后, state 就会恢复默认值

解决思路

可以监听刷新动作的发生, 然后一旦刷新就保存当前的 state 信息进 sessionStorage 中

以及 state 生成的时候页判断下 sessionStorage 中是不是已存在. 存在直接用即可

App.vue 里面加这两个

mounted() {
      window.addEventListener('unload', this.saveState);
    },
    methods: {
      saveState() {
        sessionStorage.setItem('state', JSON.stringify(this.$store.state));
      }
    }

声明的地方这样调整即可

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  user: {
    name: ""
  }
}

模板化

上述的示例是个单文件应用, 只用了一个 user 状态

如果存在很多的时候, 最好每个状态都分别用一个文件区分开. 进行模板化处理

以上示例进行封装的形式如下

在 store里面建立 modules 的文件夹下, 对 user 单独起一个 js

user.js

内容的变化就是放进了对象里面, 要做一些调整, 并且暴露出去

const user = {
// 全局的 state 对象, 用于保存所有组件的公共数据
  state : sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
    user: {
      name: ""
    }
  },

// 监听state 对象的值的最新状态 (计算属性)
  getters : {
    getUser(state) {
      return state.user
    }
  },

// 唯一一个可以修改 state 值得方法 (同步执行)
  mutations : {
    updateUser(state, user) {
      state.user = user
    }
  },

// 异步执行 mutations 方法
  actions : {
    asyncUpdateUser(context, user) {
      context.commit("updateUser", user)

    }
  }
}

export default user

index.js

这里则需要对暴露出去的 user 进行引用

import Vue from "vue"
import Vuex from 'vuex'
import user from "./modules/user";
Vue.use(Vuex)




export default new Vuex.Store({
  modules: {
    user
  }
})

使用上没有变化

只有原生使用的时候需要调整到去 user 对象中, (为解决刷新问题的时候使用的)

之前是直接存进去的是 state 中, 现在是放在 user 里面了.

App.vue

<template>
  <div >
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {
      window.addEventListener('unload', this.saveState);
    },
    methods: {
      saveState() {
        
        // sessionStorage.setItem('state', JSON.stringify(this.$store.state)); 
        sessionStorage.setItem('state', JSON.stringify(this.$store.state.user));
      }
    }
  }
</script>

<style>

</style>

--------------------orz 竣工

引入使用

简单的登录页面实现以及校验功能

展示效果

首页简单实现

布局

相关代码

main.vue

子路由

index.js 子路由相关代码

组件间参数传递方式

路径匹配

路由路径的时候

组件内参数的使用

展示效果

porps 方式

link to 部分改为对象

路由的部分

组件内参数的使用

展示效果

porps 方法内的使用

应用场景示例

代码

实现效果

路由重定向

路由模式处理

相关处理

效果展示

统一 404 处理

代码

效果展示

路由钩子函数进行异步请求

钩子函数的定义

axios 相关准备

配合钩子函数使用进行异步请求

后端准备

前端部分

Vuex 解决状态问题

安装使用

应用场景

场景实现

基于 sessionStorage

基于 Vuex

刷新重置问题处理

解决思路

模板化

相关推荐