elementui入門 - myJavaSE

elementui入門

1.前端伺服器搭建

(1)建立一個static web project

(2) 安裝 npm install -g vue-cli

(3) vue init webpack 項目名

(4)cd 項目名

​    npm run dev  運作服務

完成上面步驟後，就将vue.js項目放入到前端伺服器中運作了。如果安裝速度慢可以使用淘寶鏡像代理：npm config set registry https://registry.npm.taobao.org

2.element安裝

 Element，一套為開發者、設計師和産品經理準備的基于 Vue 2.0 的桌面端元件庫 ，是一種很好的前端開發，可以很好的用來實作前後端分離

(1)安裝

​    npm i element-ui -S

(2)引入elementui 在 main.js

　　import ElementUI from \'element-ui\'; //引入核心js元件

　　import \'element-ui/lib/theme-chalk/index.css\';//引入依賴的樣式

　　Vue.use(ElementUI) //引用

3.配置main.js(所有配置寫在一起的，看的時候注意區分)

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import ElementUI from \'element-ui\'; //引入核心js元件
import \'element-ui/lib/theme-chalk/index.css\';//引入依賴的樣式
import axios from \'axios\'//引入axios請求
import UserMock from \'./userMock.js\'//引入假資料源
//配置axios的全局基本路徑
axios.defaults.baseURL=\'\'
//全局屬性配置，在任意元件内可以使用this.$http擷取axios對象
Vue.prototype.$http = axios
Vue.use(ElementUI) //引用elementui
//上面這行代碼的意思 是阻止顯示生産模式的消息
Vue.config.productionTip = false//預設配置false

/* eslint-disable no-new */
new Vue({//挂載index中所有的路由群組件
  el: \'#app\',
  router,
  components: { App },
  template: \'<App/>\'
})      

1.element元件使用 效果： 用戶端（浏覽器）輸入位址-----> 根據路由進入相應的元件中---------->vue界面渲染，展示

步驟1：建立一個vue檔案

<template>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="您好">
      <p>歡迎您</p>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: \'elementUi01\',
    data () {
      return {
        msg: \'歡迎來到vue\',
        visible:false
      }
    }
  }
</script>      

步驟2：在index.js中配置路由（浏覽器通路的路徑，以及元件的引入）

import Vue from \'vue\'
import Router from \'vue-router\'
import HelloWorld from \'@/components/HelloWorld\'//引入界面模闆
import Elementui from \'@/components/_01elementui\'

Vue.use(Router)

export default new Router({//将路由導出到需要挂載的檔案中，main.js
  routes: [
    {
      path: \'/\',//通路路徑
      name: \'HelloWorld\',
      component: HelloWorld//元件名與上面導入的名稱一緻
    },
    {
      path: \'/_01elementui\',
      name: \'_01elementui\',
      component: Elementui
    },      

上面隻是一個簡單的引入，其他還有很多元件和樣式的使用，如el-button 按鈕、el-tree 樹形、el-table表格、el-form表單、el-pagination分頁、el-container容器、el-layout布局

el-tabs頁簽 頁籤、el-dialog對話框、el-alert 提示框等，使用的方式一樣，隻是界面展示内容不同，就不再重複了。

4.mockjs:前端工程師 用來模拟的資料

安裝mockjs

(1) npm install mockjs

(2)userMock.js（假資料生成的檔案）檔案引用 mockjs

let Mock=require(\'mockjs\') ;

(3)在js生成資料 ,攔截axios請求(了解)傳回自己生成的假資料，具體代碼如下

測試：

let Mock=require(\'mockjs\')
//定義一個數組
var dataList = [];
//循環16次生成資料，并将資料放入到數組中，得到一個裝有假資料的集合dataList
for(var i=0;i<16;i++){
    dataList.push(Mock.mock({
        \'id\': \'@increment\',
        \'name\': \'@cname\',
        \'phone\': /^1[0-9]{10}$/,
        \'email\': \'@email\',
        \'address\': \'@county(true)\',
        \'createTime\': \'@date("yyyy-MM-dd")\'
    }));
}
//分頁，index是起始資料，size帶表條數index*size，帶表結束資料
function pagination(index, size, list){
    return list.slice((index-1)*size,index*size);
}
//攔截axios請求opts，前端傳入的參數 para new RegExp(\'/user/list\',攔截的路徑
Mock.mock(new RegExp(\'/user/list\'), \'post\', (opts) => {
    //把上面得到的假資料指派給list集合
    var list =dataList;
    console.log(opts.body)
    //取出傳遞過來的參數的目前頁
    var index = JSON.parse(opts.body).page; //3
    //寫死的一頁條數
    var size = 10;
    //總條數
    var total = list.length
    //調用分頁方法，分頁
    list = pagination(index, size, list)
    //攔截ajax請求後将假資料的結果傳回
    return {
        \'total\': total,
        \'data\': list
    }
})      

5.使用axios發送請求完成（vue.crud）

安裝axios

1.cd 目前項目名

2.npm install axios --save

測試：具體代碼如下

<template>
  <div>
    <!--工具條-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="關鍵字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查詢</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--users就是前端頁面展示内容的資料-->
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px"
    >

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="位址">
      </el-table-column>
      <el-table-column
        prop="email"
        label="郵件">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="電話">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="建立時間"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">檢視</el-button>
          <el-button type="text" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        users: [],
        total:0,
        page:1
      }

    },
    methods:{
      getUsers(){
        //這個是對象  {key:value}
        let para = {
          page:this.page
        }

        //加載資料
        //發送ajax 從背景查詢出來...沒有寫背景 --模拟背景資料 mockjs
        //res就是假資料傳回的結果
        this.$http.post(\'/user/list\',para).then(res=>{
          console.log(res);
          //自動假資料封裝成一個data對象
          //将加資料取出後指派給目前頁面中的users，然後就可以展示了
          this.users = res.data.data;
          //
          this.total = res.data.total;
        });
      },
　　　　//監聽目前頁面的改變
      handleCurrentChange(val){
        //currentPage
        console.log(val);
        //把目前頁 指派給page這個字段
        this.page = val;
        this.getUsers();
      }
    },
    mounted(){
      //頁面加載完之後執行的方法
      this.getUsers();
    }
  };
</script>