Vue - Vue + Element 搭建后台管理系統界面

 Vue + Element 搭建后台管理系統界面

新建項目

安裝webpack

npm install webpack -g

安裝腳手架

npm install vue-cli -g

創建項目文件

vue init webpack vue_demo

詢問項依次為：

1. 項目名稱，直接回車使用默認。注：此處項目名不能使用大寫。
2. 項目描述，如果不需要就直接回車。
3. 項目作者，默認計算機用戶名。
4. 構建方式，建議：standalone。
5. 是否安裝vue的路由插件，建議：y。
6. 是否使用ESLint檢測你的代碼，ESLint是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。建議選擇n。因為選擇y后調試項目時，控制台報很多黃色警告提示格式不規范，但其實並不影響項目。
7. 是否安裝單元測試，建議：y。
8. 是否安裝E2E測試框架NightWatch（End To End，“用戶真實場景”。），建議：y。
9. 項目創建后是否要為你運行“npm install”，建議：yes use npm。

運行項目

在idea中打開項目文件，在Terminal中輸入

npm run dev

項目啟動之后，在瀏覽器中輸入 http://127.0.0.1:8080 即可看到頁面。

引入ElementUI

安裝element ui

npm install element-ui --save

將/src/main.js修改為

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

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

登陸頁面

src目錄下新建目錄views，在views下新建登陸頁面Login.vue

<template>
  <div class="login-container">
    <el-form :model="dataForm" :rules="rules"
             status-icon
             ref="ruleForm"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">登錄</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="dataForm.username" auto-complete="off" placeholder="用戶名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="dataForm.password" auto-complete="off" placeholder="密碼"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="remember">記住密碼</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="login">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        login: false,
        dataForm: {
          username: 'admin',
          password: '123456',
        },
        rules: {
          username: [{required: true, message: '請輸入賬號', trigger: 'blur'}],
          password: [{required: true, message: '請輸入密碼', trigger: 'blur'}]
        },
        checked: false
      }
    },
    methods: {
      handleSubmit(event) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.login = true;
            if (this.dataForm.username === 'admin' && this.dataForm.password === '123456') {
              this.login = false;
              sessionStorage.setItem('user', this.dataForm.username);
              this.$router.push({path: '/'});
            } else {
              this.login = false;
              this.$alert('用戶名或密碼錯誤!', '提示', {
                confirmButtonText: 'ok'
              })
            }
          } else {
            console.log('提交出錯!');
            return false;
          }
        })
      }
    }
  };
</script>
<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  label.el-checkbox.remember {
    margin: 0px 0px 15px;
    text-align: left;
  }
</style>

因為頁面默認插入了vue圖標，去掉vue圖標需要修改src/App.vue

<template>
  <div id="app">
    <!-- 注釋掉默認的vue圖標 -->
    <!--    <img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

將Login.vue設置為默認頁面，修改路由文件router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

瀏覽器再次打開 http://localhost:8080/#/，出現登陸頁面

將未登錄會話重定向到 /login

用 vue-router 的 beforeEach 實現
beforeEach 方法接收三個參數：

• to: Rout。即將要進入的目標 路由對象
• from: Route。當前導航正要離開的路由
• next: Function。一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

在 src/main.js 文件追加：

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    sessionStorage.removeItem('user');
  }
  let user = sessionStorage.getItem('user');
  if (!user && to.path !== '/login') {
    next({
      path: '/login'
    })
  } else {
    next();
  }
});