vue-iview(後臺管理系統)

時間 2019-11-24

標籤 vue iview 後臺管理系統简体版

原文原文鏈接

1、初始化項目而且關聯遠程倉庫

1.建立項目 ( vue init webpack countryside )css

Administrator@PC-20180706NCIX MINGW64 ~/Desktop
$ vue init webpack countrysideYunCang

? Project name (countrysideYunCang)
? Project name (countrysideYunCang) countryside
? Project name countryside
? Project description (A Vue.js project) 鄉間雲倉是一個進貨供貨管理的後臺管理系統（ 學校-供應商 ）
? Author (Smile-lrn <17839193052@163.com>)
? Author Smile-lrn <17839193052@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "countrysideYunCang".


# Installing project dependencies ...
.....................................................
# Project initialization finished!
# ========================

To get started:

  cd countrysideYunCang
  npm run dev

View Code

2.在git上建立遠程倉庫countrysidevue

3.本地倉庫初始化，在本地項目根目錄下執行webpack

$ git init

4.關聯遠程倉庫ios

$ git remote add origin git@github.com:Smile-lrn/countryside.git

5.先pull一下遠程倉庫的內容進行合併git

$ git pull origin master
From github.com:Smile-lrn/countryside
 * branch            master     -> FETCH_HEAD
fatal: refusing to merge unrelated histories

6.執行第5步時，會出現拒絕合併不相關的歷史（refusing to merge unrelated histories）錯誤，此時咱們能夠加上（–allow-unrelated-histories參數）github

$ git pull origin master --allow-unrelated-histories

7.若是沒有衝突，就把本地代碼push到遠程倉庫web

git push -u origin master

2、選擇UI框架及安裝

因爲鄉間雲倉是一個後臺管理系統PC端，在這裏我選擇了主要服務於 PC 界面的中後臺產品的Iview框架。

1.NPM 安裝vue-router

$ npm install iview --save

2.在main.js中引入iviewvuex

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

3、拿到UI圖分析，搭建總體佈局和構造公共組件

這裏咱們是頭部和側邊欄做爲公共組件，而且固定頂部導航，方便頁面切換，使用固定側邊欄爲內容較長提供更好的體驗。npm

1.總體佈局代碼（頂部和側邊欄）

<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <div class="logobox">
                <img src="../assets/imgs/logo.png">
                <span>鄉間雲倉</span>
            </div>
            <Menu :theme="theme2" accordion class="navbox" width="auto" :open-names="[Submenuname]" :active-name="activeName"
             @on-open-change="onOpenChanged">
                <!-- <Menu class="navbox" :active-name="activename" theme="dark" width="auto" :open-names="['1']"> -->
                
                <Submenu name="1">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan-copy"></Icon>
                        <span>概覽</span>
                    </template>
                    <!--                         第一種方式
                    <MenuItem name="3-1" @click.native="choosencomp('Pramaryuser')">普通用戶</MenuItem>
                    <MenuItem name="3-2" @click.native="choosencomp('Otheruser')">董事/總代</MenuItem> -->
                    <!-- 第二種方式   經過設置子路由 -->
                    <MenuItem name="/Overview" @click="onSelected('/Overview','概覽')">概覽</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon>
                        <span>採購管理</span>
                    </template>
                    <MenuItem name="/Goodslist"  @click="onSelected('/Goodslist','貨品清單')">貨品清單</MenuItem>
                    <MenuItem name="/Historylist" @click="onSelected('/Historylist','歷史清單')">歷史清單</MenuItem>
                    <MenuItem name="/Supplier" @click="onSelected('/Supplier','供貨單位')">供貨單位</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon>
                        <span>貨品管理</span>
                    </template>
                    <MenuItem name="/Goodsmanagement"  @click="onSelected('/Goodsmanagement','貨品清單')">貨品清單</MenuItem>
                </Submenu>
                <Submenu name="4">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon>
                        <span>庫存管理</span>
                    </template>
                    <MenuItem name="/Inventorymanagement"  @click="onSelected('/Inventorymanagement','庫存管理')">庫存管理</MenuItem>
                </Submenu>
                <Submenu name="5">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon>
                        <span>食堂資料</span>
                    </template>
                    <MenuItem name="/Canteeninfo"  @click="onSelected('/Canteeninfo','食堂資料')">食堂資料</MenuItem>
                </Submenu>
                <Submenu name="6">
                    <template slot="title">
                        <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon>
                        <span>用戶信息</span>
                    </template>
                    <MenuItem name="/Userinformation"   @click="onSelected('/Userinformation','用戶信息')">用戶信息</MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                <span class="breadcrumbItems">{{breadcrumbItems}}</span>
                <div class="userInfo">
                    <img src="../assets/imgs/logo.png" alt="" class="photo">
                    <span>浙大第一美味食堂</span>
                    <Icon class="l_iconfont l_icondingbudaohang-zhangh"></Icon>
                </div>
            </Header>
            <Content class="contentbox">
                <Card>
                    <div class="incontbox" id="incontbox">
                        <router-view />
                    </div>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                theme2: 'dark', //主題
                Submenuname: '1',
                activeName: '/Overview',
                // navActive: '/Overview', //第一種方式渲染 右側內容區域所須要渲染出的組件,
                breadcrumbItems: '概覽', //麪包屑
                accordion: true //開啓手風琴效果
            }
        },
        methods: {
            // 側邊導航路由跳轉
            onSelected: function(name,breadcrumbItems) {
                console.log(breadcrumbItems)
                // 點擊同一個不作任何操做
                this.activeName = name
                if (this.$route.path == name) {
                    return
                }
                this.$router.push({
                    path: name
                })
                this.breadcrumbItems = breadcrumbItems

            },
            // 默認展開一級菜單時，選中第一項子菜單
            onOpenChanged: function(params) {
                var _this = this
                this.Submenuname = [params[0]]
                switch (params[0]) {
                    case '1':
                        _this.onSelected('/Overview','概覽')
                        return
                    case '2':
                        _this.onSelected('/Goodslist','貨品清單')
                        return
                    case '3':
                        _this.onSelected('/Goodsmanagement','貨品管理')
                        return
                    case '4':
                        _this.onSelected('/Inventorymanagement','庫存管理')
                        return
                    case '5':
                        _this.onSelected('/Canteeninfo','食堂資料')
                        return
                    case '6':
                        _this.onSelected('/Userinformation','用戶信息')
                        return
                }
            }
        },
        watch: {
            $route(to, from) {
                this.activeName = this.$route.path
            }
        },
    }
</script>
<style scoped lang="less">
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;

        /deep/ .ivu-menu {
            width: auto !important;
        }

        /deep/ .ivu-icon-ios-arrow-down:before {
            display: none;
        }

        /deep/ .ivu-menu-submenu-title {
            padding-left: 20px;
            text-align: left;
        }

        /deep/ .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item {
            text-align: left;
            padding-left: 59px !important;

        }

        /deep/ .ivu-layout-header {
            padding-left: 16px;
            font-size: 16px;

        }

        .ivu-menu-submenu-title {
            display: flex;
            align-items: center;

            i,
            span {
                color: #8B97A2;
            }

            i {
                font-size: 26px;
            }
        }

        .ivu-menu-opened {
            background: #0D1A2C;

            i,
            span {
                color: #F9650C;
            }
        }

        /deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
            color: #fff;
            background: transparent !important;
        }

        .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item {
            color: #8B97A2;
        }

        .layout-header-bar {
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        }

        .breadcrumbItems {
            float: left;
        }

        .userInfo {
            float: right;
            display: flex;
            align-items: center;
            font-size: 14px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #ebebeb;
            }

            span {
                margin: 0 10px;
            }
        }
    }

    // logo
    .logobox {
        width: 100%;
        padding-top: 20px;
        padding-left: 20px;
        font-size: 20px;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        // justify-content: center;
        box-sizing: border-box;

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 8px;
        }

        span {
            display: flex;
        }
    }

    // 右側內容板塊
    /deep/ .contentbox {
        width: 100%;
        height: calc(100vh - 64px);
        box-sizing: border-box;
        overflow-y: hidden;
        padding: 16px;

        .incontbox {
            width: 100%;
            max-height: calc(100vh -96px);
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
</style>

View Code

2.安裝vuex

$ npm install vuex --save

3.在src目錄下新建store文件夾,在store問價夾下建立index.js用於引入使用vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

4.在index.js文件中建立vuex實例store並導出store對象

// 建立vuex實例
const store = new Vuex.Store({
    // stat
    state:{
        ...states  //vuex數據源
    },
　　getters,//可對vuex數據進行過濾等操做
})

// 導出store
export default store

5.在store文件夾下建立state.js用於存放vuex數據源，其文件內容以下：

// vuex的數據源 在組件中能夠經過this.$store.state.xx來獲取值
const state = {
    name:'清華大學的美味食堂',
}
// 導出state
export default state

6.在store/index.js中引入數據源

import states from './state.js'   //導入vuex數據源

7.Vuex 容許咱們在 store 中定義「getter」（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算，因此這裏能夠在store問價夾下新建getter.js,Getter 接受 state 做爲其第一個參數，Getter 會暴露爲 store.getters 對象，咱們能夠在組建中以屬性的形式訪問這些值：`this.$store.getters.xx `,具體文件內容以下：

import state from './state.js'   //導入vuex數據源

const getters = {
    testname: state => {
      return state.name+'我測試下getters'
    }
}
// 導出state
export default getters

同6在其中引入getters

import getters from './getter.js'

8.更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。因此在store文件夾中建立mutation.js　其內容以下

import state from './state.js'   //導入vuex數據源


const mutations = {
    logout: state => {
      state.name=state.name+"成功退出登陸"
    }
}
// 導出state
export default mutations

9.在組件中咱們能夠經過this.$store.commit( mutations.js中的方法名字 )去對vuex數據源進行修改操做。雖然達到了修改store中狀態值的目的，可是，官方並不介意咱們這樣直接去修改store裏面的值，而是讓咱們去提交一個actions，在actions中提交mutation再去修改狀態值，接下來咱們建立actions.js文件，而後定義actions提交mutation的函數。Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象（《==》形參state），所以能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。可是注意這裏的 context 對象並非 store 實例自己。在組建中經過this.$store.dispatch('mutations.js中的方法名字')去使用。其文件內容具體代碼以下：

const actions = {
    logout: context => {
      context.commit('logout')  //可傳第二個參數
    }
}
// 導出state
export default actions

10.不喜歡以上操做習慣，能夠借用輔助函數去寫喲(＾Ｕ＾)ノ~ＹＯ

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。