前端小菜雞使用Vue+Element筆記（一）

阿新 • • 發佈：2018-10-26

.proto 瀏覽器 csdn ams .com blank != .html ***

關於使用Vue+Element的項目簡介~

最近因為項目組缺前端人員，所以自己現學現做頁面，先把前後臺功能調通覺得前端可真的是不容易呀哎呀~

首先記錄一下相關的Vue入門的教程：

vue環境搭建示例：https://blog.csdn.net/mao834099514/article/details/79138484

vue基本語法了解：https://www.runoob.com/vue2/vue-tutorial.html

　　　　　　　　https://cn.vuejs.org/v2/guide/syntax.html

Element組件使用文檔：http://element-cn.eleme.io/#/zh-CN/component/installation 這個真的很棒，代碼可以直接復制下來用的都不用自己重新寫哈哈哈

這個是別人寫的Element組件綜合使用的代碼，有興趣的可以從github上把源碼下載下來在本地跑起來看一看寫的很全很優秀 https://github.com/PanJiaChen/vue-element-admin

前端項目目錄結構：

技術分享圖片

其中用於開發的是：src 目錄

src目錄結構：

assets：存放圖片信息

components: 存放vue頁面信息例如： hello.vue

config: 裏面是一些關於localStorage的配置

router: 裏面包含的是一些路由的配置

service: 定義與後臺進行交互的方法

store: 定義一些類似與後臺session作用域的變量可以在整個會話中使用這裏面定義的對象

技術分享圖片

一、 service目錄下的 api.js 文件

統一封裝和後臺進行交互的Ajax方法，在 *.vue頁面可以直接通過import導入使用該方法與後臺進行交互

import { Message } from ‘element-ui‘
import Vue from ‘vue‘
import $ from ‘jquery‘
/**
 * 封裝的全局ajax請求
 */
Vue.prototype.baseURL = ‘/XXX-XXX-service‘
const Http = (url, data, type, contentType) => {
  // 默認為post
  type = (type == null 
 || type == ‘‘ || typeof (type) === ‘undefined‘) ? ‘post‘ : type//eslint-disable-line
  // 創建一個promise對象
  var promise = new Promise((resolve, reject) => {
    if (!data) {
      data = {}
    }
    if (!contentType && typeof (contentType) === ‘string‘) {
      data.token = sessionStorage.token
    } else {
      url = url + ‘?token=‘ + sessionStorage.token
    }

    $.ajax({
      type: type,
      data: data,
      url: Vue.prototype.baseURL + url,
      timeout: 60000,
      dataType: ‘json‘,
      contentType: contentType,
      success: function (res) {
        resolve(res)
      },
      error: function (e) {
        reject(e)
        Message.error({
          ‘message‘: ‘系統錯誤，請稍後再試‘,
          ‘duration‘: ‘2000‘,
          ‘showClose‘: false
        })
      },
      complete: function (XMLHttpRequest, status) {
        if (status == ‘timeout‘) {//eslint-disable-line
          Message.warning({
            ‘message‘: ‘網路超時，請刷新‘,
            ‘duration‘: ‘2000‘,
            ‘showClose‘: false
          })
        }
      }
    })
  })
  return promise
}
//當指定類型為‘application/json’類型時，傳給後臺的入參必須為對象 且需要通過 JSON.stringfy(userObj)方法處理後才能被正確讀取。 使用示例：hello(userObj)
export const hello = (params) => {
  return Http(‘/hello‘, params, ‘post‘, ‘application/json‘)
}

//這裏未指定參數數據類型 則需要一個一個的指明參數 name = ‘zs‘; age= ‘18‘ 不能以對象的形式傳到後臺。使用示例： userLogin(name,age)
export const userLogin = (params) => {
  return Http(‘/auth/user/login‘, params, ‘post‘)
}

二、存儲會話級別變量的定義：store目錄下的index.js，mutation.js

index.js文件：指定state下有那些屬性，之後在任意頁面都可以直接使用這裏定義的屬性以及對應的屬性值。

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import mutations from ‘./mutations‘
import actions from ‘./actions‘
import getters from ‘./getters‘

Vue.use(Vuex)
const state = {
  fixnavli: ‘other‘,  //這是給單個數據賦值的示例，之後再當前項目的任意一個頁面都能獲取到這個變量的值
  loadding: false, // 加載動畫
  userInfo: sessionStorage.getItem(‘userInfo‘) ? JSON.parse(sessionStorage.getItem(‘userInfo‘)) : ‘‘, //這是從session中取對象值來給state值 userInfo賦值
  userHasLogin: sessionStorage.getItem(‘userInfo‘)
}
export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations
})

mutation.js文件：給index.js文件中的state指定的屬性定義賦值方法，在頁面中可以動態改變state指定的屬性對應的值

export const ADD_NUM = ‘ADD_NUM‘ export const FIX_NAVLI = ‘FIX_NAVLI‘ export const LOADDING = ‘LOADDING‘ export const USER_LOGIN = ‘USER_LOGIN‘ export const USER_LOGINOUT = ‘USER_LOGINOUT‘ export const USER_LOGIN_TEST = ‘USER_LOGIN_TEST‘ export const INPUT_FORM = ‘INPUT_FORM‘

import {setStore, getStore} from ‘../config/mUtils‘//eslint-disable-line

export default {
  [ADD_NUM] (state) {
    state.num += 1
  },
  [FIX_NAVLI] (state, name) {
    state.fixnavli = name
  },
  [LOADDING] (state, flag) {
    state.loadding = flag
  },
  [USER_LOGIN_TEST] (state) {
    state.userHasLogin = true
  },
  [USER_LOGIN] (state, userInfo) {
    sessionStorage.setItem(‘userInfo‘, JSON.stringify(userInfo))
    state.userHasLogin = true
    state.userInfo = userInfo
  },
  [INPUT_FORM] (state, inputForm) {
    sessionStorage.setItem(‘inputForm‘, JSON.stringify(inputForm))
    state.inputForm = inputForm
  },
}

三、 router目錄下的路由信息 ,相當於控制前端頁面的跳轉信息

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home.vue‘
import store from ‘@/store/index‘ // 引入store文件

Vue.use(Router)

const router = new Router({
  mode: ‘history‘, // 默認是hash模式
  scrollBehavior (to, from, savePosition) { // 在點擊瀏覽器的“前進/後退”，或者切換導航的時候觸發。
    // console.log(to) // to：要進入的目標路由對象，到哪裏去
    // console.log(from) // from：離開的路由對象，哪裏來
    // console.log(savePosition) // savePosition：會記錄滾動條的坐標，點擊前進/後退的時候記錄值{x:?,y:?}
    if (savePosition) {
      return savePosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return {
        x: 0,
        y: to.meta.savedPosition || 0
      }
    }
  },
  routes: [
    {
      path: ‘/login‘,
      name: ‘login‘,
      props: {
        ‘title‘: ‘登錄‘
      },
      component: () => import(/* webpackChunkName: "about" */ ‘@/components/Login.vue‘) //請求 /login的時候回跳轉到 Login.vue頁面
    },
    {
      path: ‘/mainIndex‘,
      name: ‘mainIndex‘,
      props: {
        ‘title‘: ‘主頁面‘
      },
      component: () => import(/* webpackChunkName: "about" */ ‘@/components/mainIndex.vue‘)  //表示請求 /mainIndex時會跳轉到mainIndex.vue頁面
    }
  ]
})

router.beforeEach(function (to, from, next) {
  clearTimeout(Vue.prototype.loaddTimeout)
  clearTimeout(Vue.prototype.loaddTimeout1)
  Vue.prototype.loaddTimeout1 = setTimeout(function () {
    store.commit(‘LOADDING‘, true)// 每次跳轉顯示加載動畫
  }, 10000)
  Vue.prototype.loaddTimeout = setTimeout(function () {
    next({path: ‘/404‘, query: { redirecter: to.path }})
  }, 60000)
  var login = store.state.userHasLogin
  if (to.path == ‘/login‘) {//eslint-disable-line
    store.commit(‘USER_LOGINOUT‘)
    next()
  } else {
    if (login) {
      next()
    } else {
      next({
        path: ‘/login‘
      })
    }
  }
})
router.afterEach((to, from) => {
  clearTimeout(Vue.prototype.loaddTimeout)
  clearTimeout(Vue.prototype.loaddTimeout1)
  store.commit(‘LOADDING‘, false)
})

export default router

四、config目錄下的 mUtils.js 文件

/**
 * 存儲localStorage
 */
export const setStore = (name, content) => {
  if (!name) return
  if (typeof content !== ‘string‘) {
    content = JSON.stringify(content)
  }
  window.localStorage.setItem(name, content)
}

/**
 * 獲取localStorage
 */
export const getStore = name => {
  if (!name) return
  return window.localStorage.getItem(name)
}

/**
 * 刪除localStorage
 */
export const removeStore = name => {
  if (!name) return
  window.localStorage.removeItem(name)
}

五、components目錄下的*.vue頁面：這裏包含了開發的絕大部分內容呀！！！在頁面裏會調用service包下api.js定義的方法，也會使用store包下的index.js定義的state屬性

<template>
  <div class="sidebar">
    <el-container>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-header> <h1>個人資料</h1></el-header>
          <el-container>
            <el-aside width="1000px">
              <el-row>
                <div class="grid-content bg-purple">
                  <el-col :span="12">
                    <span>姓名：</span>
                    <el-input placeholder="姓名" v-model="name"  class="filter-item"/>
                  </el-col>
                </div>
              </el-row>
              <el-row>
                  <el-col :span="12" >
                    <div class="grid-content bg-purple">
                      <span>出生日期</span>
                      <el-date-picker v-model="birth"  placeholder="年 / 月  / 日" type="date"/>
                    </div>
                  </el-col>
              </el-row>
            </el-aside>
          <el-header>
          <el-row>
            <div class="grid-content bg-purple">
               <el-col :span="9"><el-button type="primary" icon="el-icon-search" @click="query">跳轉</el-button></el-col>
               <el-col :span="9"><el-button type="primary" icon="el-icon-search" @click="nextStep">下一步</el-button></el-col>
            </div>
          </el-row>
        </el-header>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from ‘vuex‘  //這裏是指定需要引用state定義的屬性
import {hello} from ‘../service/api‘   //這裏是指定引用自定義的與後臺進行交互的方法

export default {
  name: ‘mainIndex‘,
  props: {
    title: String
  },
  data: function () {   
    return {  //這裏定義需要用到的變量，在這裏申明 也可以賦初始值 定義好後方法中可以使用 this.name給變量重新復制
      name: ‘‘,
      birth: ‘‘,
      aaaaa: this.fixnavli  //
    }
  },

  computed: {
    ...mapState([   //這裏申明取出mapState中的值，方法中直接使用this.fixnavli, this.userInfo 便可以調用 (名字一一對應)
      ‘fixnavli‘,
      ‘userInfo‘,
    ])
  },
  methods: {
    ...mapMutations([  //這裏是對state定義的屬性賦值的方法，用於隨時更新state中的屬性對應的屬性值,使用方法： this.INPUT_FORM(obj)
      ‘FIX_NAVLI‘,   
      ‘INPUT_FORM‘
    ]),

    /** 從這裏開始 定義頁面中需要用到的方法，方法與方法直接的調用 使用 this.query() */
    // 跳過按鈕
    query: function () {
      var data = {
        code: this.fixnavli,
        msg: this.fixnavli
      }
      data = JSON.stringify(data)
      hello(data).then(res => {
        alert(‘返回:‘ + res.text)
      })
    },

    // 下一步 按鈕（轉到基本計劃頁面）
    nextStep: function () {
      var inputForm = {  //定義inputForm對象，可以是簡單的對應，也可以是嵌套的對象！
        ‘currentstep‘: ‘1‘,‘onlProposalForm‘: {
          ‘onlProposalForm1‘: {
            ‘name‘: this.name,   //會自動和 v-model指定的名字對應的值綁定
            ‘birth‘: this.birth,
          },
          ‘onlProposalForm2‘: {
            ‘areaCode‘: ‘SRHK‘,
            ‘sex‘: ‘0‘,
          }
        }
      }
      this.INPUT_FORM(inputForm) //調用更新state中定義的屬性對應的值的方法
　　　 //這裏進行頁面跳轉
      this.$router.push({  
        path: ‘/login‘   //跳轉到登錄頁面
      })
    },

    // 初始化頁面默認數據
    selectInit () {
      let tmpInputForm = this.inputForm // 取出存入session中的對象，判斷是否有數據，如果有就從session中取出inputForm對象中存的數據填充頁面
      if (tmpInputForm != null && tmpInputForm !== ‘‘) {
        this.age = tmpInputForm.onlProposalForm.onlProposalForm1.age
        this.birth = tmpInputForm.onlProposalForm.onlProposalForm1.birth
      } else {
        this.name = ‘zs‘  //初始化的時候給頁面的框賦初始值
        this.age = ‘18‘
      }
    } ,  //******* 千萬要記得需要被調用的方法必須定義在 methods:{} 這個大框框裏面，不然會識別不了的！！！
  },

  mounted () {

  },

  created: function () {
    this.selectInit()  //在剛進入頁面的時候，會調用created方法，在裏面調用自定義的 selectInit()方法進行頁面初始化
  }
}
</script>

  <style>
  .el-row {
    margin-bottom: 20px;
  }

  .el-button--primary {
    color: black;
    background-color: rgba(121, 121, 152, 0.33);
    border-color: rgba(121, 121, 152, 0.33);
  }

  .el-input {
    width: auto;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  </style>

前端小菜雞使用Vue+Element筆記（一）

.proto 瀏覽器 csdn ams .com blank != .html *** 關於使用Vue+Element的項目簡介~ 最近因為項目組缺前端人員，所以自己現學現做頁面，先把前後臺功能調通覺得前端可真的是不容易呀哎呀~ 首先記錄一下相關的Vue入門的教程： vu

前端小菜雞使用Vue+Element筆記（一）

關於使用Vue+Element的項目簡介~

前端小菜雞使用Vue+Element筆記（一）

前端JS框架——Vue.js筆記（一）

Vue.js 筆記（一）起步

VUE學習筆記（一）—安裝vue-cli和建立專案

Web 前端開發入門級學習筆記（一）

Vue學習筆記（一）

vue學習筆記（一）關於事件冒泡和鍵盤事件以及與Angular的區別

vue 學習筆記（一）

VUE學習筆記（一）基礎

vue 學習筆記（一）

Vue學習筆記（一）元件

VUE面試筆記（一）

vue學習筆記（一）---- vue指令（ v-bind 屬性繫結）

easyUi 學習筆記（一）使用easyui 和ztree 創建前端框架

前端開發入門學習筆記（一）

vue項目爬坑筆記（一）

element ui Angular學習筆記（一）

vue-router學習筆記（一）

Web前端-Html部分筆記（一）

1.Vue + Vue Router + Vuex + Element-UI（一）

前端小菜雞使用Vue+Element筆記（一）

關於使用Vue+Element的項目簡介~

相關推薦