首頁>PHP源碼>其他類別
下載

how-wonderful-the-cain-design

簡介

how-wonderful-the-cain-design是繼v1版本後的一個升級版的後台模板，基於vue.js和element 。目前模板項目中集成了登陸，權限驗證，路由配置， ajax請求， mock ，圖表， 404頁面， 401頁面以及若干個模板頁面。解決服務端人員開發後台管理頁面的痛處。接下來會好好介紹使用該項目之前要做的準備，以及如何使用該項目，望能幫助到一些前端基礎較為薄弱的伙伴~

本項目參考vue-admin-element

注意：本項目中使用[email protected]+版本，以及[email protected]+

前序

環境

本地要安裝node(8.0+)，可以直接下載安裝版，按照步驟即可。安裝完成後，驗證是否安裝成功。 

 node -v
npm -v

出現版本號即成功

技術棧

項目中主要有以下技術點：

  • es2015+
  • vue
  • vuex
  • vue-router
  • element-ui
  • less
  • echarts
  • mockjs
  • eslint
  • axios
  • babel-polyfill

對服務端開發來說，以上只需要關注vue語法、element-ui組件庫，axios請求寫法，eslint代碼規範，如果有用到圖表，也要關注echarts。

**著重說明：**項目中強制使用了eslint，目的在於規范代碼的書寫，剛開始接觸可能會覺得很噁心，要到官網中查明語法出了哪些問題，要怎麼修改。但對於後期維護來說，是及其有價值的投入。故不要覺得煩瑣，習慣了就好^-^

代碼結構

 // 结构树
|- build/  ------------------- 组件webpack区
|- config/  ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/  --------------------- 组件源代码
	|- api/  ----------------- 接口编码区
	|- assets/  -------------- 图片区
    |- components/  ---------- 组件编码区
    |- icons/  --------------- 菜单icon svg图标区
    |- mock/  ---------------- 模拟接口区
    |- permission/  ---------- 路由权限编码区(可以不用修改)
    |- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
    |- store/  --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
    |- styles/  -------------- 公共样式区
    |- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
    |- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
    |- App.vue --------------- 启动的vue文件
    |- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/  ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc  ----------------- babel 配置文件
|- .eslintignore  ------------ eslint ignore配置文件
|- .eslintrc.js  ------------- eslint配置文件
|- .gitignore  --------------- git忽略提交文件配置
|- .postcssrc.js  ------------ postcss配置文件
|- index.html  --------------- HTML 模板
|- package-lock.json  -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json  ------------- npm 配置文件
|- README.md  ---------------- 项目帮助文档

實際開發人員開發頁面最需要關注的目錄是**/src/views和/src/router** 前者編寫頁面，後者編寫對應頁面的路由信息，路由中的name在模板中用來充當權限判斷字段，即服務端返回的權限數組其實是和name做比較，匹配得到的才是用戶擁有的權限頁面，否則返回401頁面或404頁面。

項目展示

image-20180422220114480

dashboard

chart

main

開發

開發前提

該項目目前設置了兩個用戶：admin和ChartUser。主要目的用於測試權限。

登錄可以不用輸入密碼，但是必須要輸入賬號。 

步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤

開發事項

element-ui組件引用

以button組件為例，當需要引入button組件時，需要有以下幾個步驟

  1. 當官網中找到對應的組件，拷貝對應的代碼

     <el-button>默认按钮</el-button>

  2. 按需引入該組件到/src/index.js中，若不清楚要怎麼引入，可參照全量組件的按需引入，找到對應的組件引入即可

  3. 認真閱讀該組件的使用方式，官網文檔會介紹的很清楚

用戶登錄接口修改

模板項目中的登錄用的是mockjs模擬登錄的，模板中的登錄具體實現步驟是

  1. 登錄頁，路徑：/views/login/index.vue

login-step1

注意：

  1. if判斷中的賬號不存在需要修改，模板中總共有三個用戶名，分別對應三個用戶權限，為了寫法簡便，我是這麼寫的，實際應該是調接口後接口的返回提示。
  2. this.$store.dispatch('Login', ...)是vuex的語法，目的是調用/src/store/modules/user.js中的Login方法去請求服務端接口，返回對應的用戶數據存儲在全局緩存中，便於全局調用。
  3. 注意參數的格式，對象內參數固定為params，params的值又是一個對象，對象內可以放axios允許使用的各種參數，因為此處模擬的是get請求，所有隻需要用到params參數就行，更多的參數見axios config
  1. store全局緩存Login 路徑：/src/store/modules/user.js

login-step2

當點擊登錄時，會調用以上的方法，方法體實際調用的是/scr/api/api.js中的getInfo接口，獲取對應的用戶數據，其中push的四個路由是無論哪個權限的人員都應該能訪問的路由，先插入到路由數組中，接著緩存權限、用戶信息和token信息。

  1. getInfo接口路徑：/src/api/api.js

login-step3

接著調用getInfo接口，此處用到async（es6）,這裡需要注意result.code，根據服務端接口設置的格式來設定，有可能是state，或status，或code，因人而異。

  1. Mock模擬接口請求路徑：/src/mock/login.js

login-step4

注意userMap對象，是我模擬的三個用戶，其中的role字段為權限字段，與路由配置表中的name字段做比較，權限字段中的菜單才是用戶擁有權限的功能頁。

實際開發中，修改登錄接口時，role字段是必須要有，且格式要和上面的數組一致，否則權限系統會無效

經過以上的四步，完成了登錄的整個操作流程

token認證

在開發模板之前，和服務端人員協商好了用戶信息認證用jwt方式

處理流程為登錄時會將token信息保存到全局緩存中，在每次請求接口數據時，框架自動將token信息保存在header中，若失效直接調轉到login頁，註銷登錄信息。

get-token

同樣是登錄接口，其中的**commit('SETTOKEN', 'test')**是處理token值的，在實際項目開發中，應該把這個test替換成由登錄獲得的真實token

auth-token

路徑：/src/api/server.js

注意這裡的res.code===301判斷。之前和服務端人員協商，當token過期，返回的code會設置為301做標識，因此這裡的判斷也依據自己的項目中的設置，可能是code，status，state等，依項目修改。

路由表配置規則

路徑：/src/router/index.js

模板系統中的菜單和路由表是密不可分的，換句話說，菜單的層級結構和路由表是一致的。因此路由表必須要按照規則書寫，否則會影響到菜單的展示！

先要明白設定的規則，菜單不能超過三級，因此路由配置表中的格式就存在三種格式，以下分別介紹

menu

  1. 一級菜單

router-menu1

注意401這個路由參數hidden，當設置為true時，代表菜單樹會過濾掉這個路由不展現

Dashboard路由為一級菜單，一級菜單書寫格式如上，children內有且只有一個路由

meta中的參數title代表菜單上顯示的菜單名

icon為菜單圖標，讀取的是/src/icons/目錄中的svg菜單圖標，因此在做自己的項目時，要讓美工出svg格式的菜單圖標，然後放置在icons目錄內，icon的參數值為icons的文件名

一級菜單的權限匹配name為children內的name

  1. 二級菜單

router-menu2

二級菜單和一級菜單的唯一區別在於children為大於一個，其他一樣。

  1. 三級菜單

router-menu3

三級菜單格式在children內有children

路由表的配置必須要根據以上的說明配置，否則要的效果會不是你想要的。另外注意name和菜單權限的配對，控制菜單展現。

接口編寫

路徑：/src/api/api.js

頁面中使用到的所有接口都必須定義到這個文件中，目的在於統一管理，方便修改

書寫格式為模板提供的書寫方式。

但是在實際開發中，會遇到多種傳輸參數的方式，如get，post非表單形式，post表單形式，rest形式。以下為這些格式都有對應的書寫模板。

  1. get請求

axios-get

axios-get-async

  1. post表單提交

axios-form-post

axios-form-post-async

注意：若需要傳application/x-www-form-urlenconded的頭參數，參數應該寫成

 const params = {
  data: {},
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
}
  1. post非表單提交

非表單提交和表單提交基本相同，不同之處要把原來給data賦值的修改成給params賦值

  1. rest形式

axios-rest

axios-rest-async

模板框架對rest參數也做了統一封裝處理，傳參形式為截圖方式.

接口代理

實際開發都是本機開發，用npm run dev本地啟動服務，這樣問題就來了，當要請求接口時，該如何處理？

其實很簡單，就是一個配置而已

路徑：/config/index.js 

 proxyTable: {
  '/cloudfs': {
    target: 'http://your_ip_address',
    changeOrigin: true,
    pathRewrite: {
  		'^/cloudfs': '/cloudfs'
	}
  },
  '/api': {
    target: 'http://your_ip_address',
    changeOrigin: true,
    pathRewrite: {
    	'^/api': '/api'
    }
  },
  '/plustek': {
    target: 'http://your_ip_address/plustek',
    changeOrigin: true,
    onProxyReq: function (proxyReq, req, res) {
      console.log('获取到', process.env.eimCookie)
      proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
    },
    pathRewrite: {
    	'^/plustek': ''
    }
  }
}

開發人員可以根據需要自行配置代理

設置cookie信息

若後台系統有自己的認證機制，如jwt。則可以不用考慮cookie信息認證。

若要走cookie，直接在上面的配置代理中，添加onProxyReq的配置，往header信息中塞進Cookie信息，保存重新npm run dev

echarts圖使用
  1. 引入chart-maker組件
 import chartMaker from '@/components/charts/chartMaker';

components: {
	chartMaker,
},
  1. 引入標籤
 <chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
  1. 定義屬性
 getChart1Option() {
      const tmpOption = {};
      tmpOption.title = {
        text: '访问量',
        left: '5',
        top: '10',
      };
      tmpOption.tooltip = {
        axisPointer: {
          lineStyle: {
            color: '#57617B',
          },
        },
        position(point, params, dom, rect, size) {
          if (point[0] < 30) {
            return [0, '50%'];
          } else if (point[0] > (size.viewSize[0] - 80)) {
            return [size.viewSize[0] - 80, '50%'];
          }
          return [point[0] - 30, '50%'];
        },
        formatter: '{b}月: {c}',
      };
      tmpOption.grid = {
        top: 55,
        left: '-8%',
        right: '5%',
        bottom: '2%',
        containLabel: true,
      };
      tmpOption.xAxis = [{
        show: false,
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#475669',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#E3E9EF'],
          },
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      }];
      tmpOption.yAxis = [{
        show: false,
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#475669',
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            color: ['#E3E9EF'],
          },
        },
      }];
      tmpOption.series = [{
        name: '日访问量',
        type: 'line',
        smooth: true,
        // symbol: 'circle',
        symbolSize: 6,
        showSymbol: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        itemStyle: {
          normal: {
            color: '#0086E6',
            borderColor: '#0086E6',
            borderWidth: 2,
          },
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
      }];
      this.chartOption = Object.assign({}, this.option, tmpOption);
    },
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
  1. 調用屬性配置方法
 this.getChart1Option();
// 调用这个方法后，表格就能展现了
eslint代碼規範修改步驟

當你寫完代碼後，興致勃勃的認為已經完成了，於是想發布。結果發現，發布會被駁回，因為當代碼中存在格式問題的話，是不允許提交到服務器上的。

那碰到代碼格式問題要怎麼解決呢？

eslint

  1. 先用npm run lint。無論三七二十一，先執行這個，會很快的消除很多格式上的問題

  2. 若發現還是有很多問題，那就必須一個一個解決。解決方式如下

    1. 錯誤提示中有一個鏈接，如http://eslint.ort/docs/rules/no-var 點擊這個鏈接到eslint的官網，查明報錯的原因，修改成對應的格式。
    2. 若這個錯誤確實不好修改，可以屏蔽這個規範。到根目錄的.eslintrc.js文件中，rules對像中添加對應的規則屏蔽，如上面的no-var規則，配置"no-var": 0 這個規則就被過濾了。

####發布

 npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。

經過上面的教程，相信你已經不僅擁有了使用這個模板的能力，同樣也進入了前端的世界。若文檔還有看的不清楚的，或還想知道哪些相關知識需要補充的，可以隨時聯繫我~

展開
附加信息
相關應用
爲您推薦
相關資訊 全部