Element admin初體驗

MYSUN 2022-01-07 16:08:06 阅读数:669

element admin

Element admin初體驗

用過了ant design admin之後,這次網站項目的後臺,我選擇了Element admin這個開箱即用的後臺系統模板,因為網站項目較為簡單,所以選擇了vue-admin-template這套,與admin的版本差別不是非常大,代碼和頁面精簡了不少,相對來說,比較適合二開。

當然如果需要的功能較多,可以使用admin的版本來進行二開,畢竟不需要自己去重新安裝插件。

**Element admin官網地址:**https://panjiachen.github.io/vue-element-admin-site/zh/

以下是官網的建議:

![image-20220101181715574](Element ui admin初體驗.assets/image-20220101181715574.png)

1.下載安裝

官網給的是git的下載地址,如果下載比較慢,下面我把gitee的地址掛上去,大家也可以直接下載zip包,然後解壓後使用npm命令安裝。

# git克隆地址
# admin
git clone https://github.com/PanJiaChen/vue-element-admin.git
# template
git clone https://github.com/PanJiaChen/vue-admin-template.git

# gitee克隆地址
https://gitee.com/panjiachen/vue-element-admin.git

# 不用懷疑,這個是我自己傳的自己的gitee倉庫裏的,因為我沒找到別個的
https://gitee.com/musungit/vue-admin-template.git

克隆到本地之後就是,安裝依賴,然後運行起來

npm install
npm run dev

跑起來進入登陸頁面,則證明安裝完成,不要使用cnpm 會出現莫名其妙的問題,這裏說一下,推薦使用vscode自帶終端運行,不要問為什麼,問就是翻車的幾率小。

進入之後,使用登錄頁面提示的賬號和密碼,即可登錄進去。

2.修改初始化配置

element ui的初始化配置相比較於ant vue少了太多,完全符合vue2.0的項目構建,熟悉vue的同學能够很快上手。

先看main.js中的配置

先講mock關閉,方便後面配置代理,然後根據注釋,使用中文版本,相對來說,elementadmin是比較好上手的。

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui,按如下方式聲明
Vue.use(ElementUI)

vue.config.js

這裏主要修改proxy的配置項,來進行代理

  devServer: {
    port: port,
    opentrue,
    proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target'http://域名/'// 後臺接口域名
        changeOrigintrue,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    overlay: {
      warningsfalse,
      errorstrue
    },
    // before: require('./mock/mock-server.js')
  },

.env.production

# just a flag
ENV = 'production'

# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = ''

這裏要注意,修改完之後,最好,重新啟動一次項目

正常啟動之後,因為關閉了mock,是無法直接登錄,進去的,所以我們先掉登錄的接口

找到src/api/user.js改成自己的接口地址

export function login(data{
  return request({
    url'/user/login',
    method'post',
    data
  })
}

接著找到utils/request.js

這裏判斷了,token存在的話,將其直接添加到請求頭中,當然這裏如果在做加密更好

if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    config.headers['X-Token'] = getToken()
}

request.js中還要將判斷的狀態碼改成真實後端返回的成功狀態碼,一般都是200

    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type'error',
        duration5 * 1000
      })

最後找到store/modules/user.js

這裏是登錄的actions,可以看到登錄請求回來的是token,然後講token提交到了SET_TOKEN,後端返回的token如果在data下,則不需要修改,要是數據結構有變化,再進行相應的修改

  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

以上配置都沒有問題,那麼登錄接口就基本沒問題了,不過此時還進不去主頁。

這裏請求完登錄之後,再跳轉首頁的時候,請求了info接口,因此,還需要一個用戶信息的接口,這裏只需要講api/user.js中的user/info接口改成自己的便可,注意前後端字段要對上,如此,便能進入首頁。

3.修改頁面設置項

找到src/views/settings.js

module.exports = {
  title'Vue Element Admin'//網站標題
  showSettingstrue,//是否展示頁面設置
  tagsViewtrue,//是否展示標簽頁
  fixedHeaderfalse,//是否固定頭部
  sidebarLogofalse,//是否在左側導航展示logo
  supportPinyinSearchtrue,
  errorLog'production'
}

總結

總體來說,admin版本的功能較為齊全,很多插件都不需要自己裝,只需要將其複制到自己要使用的頁面即可,像生成pdf文件,md編輯器,json編輯器,七牛雲上傳圖片的前端配置等,一些比較常用的功能。

但是這個版本略微臃腫,如果容易造成代碼冗餘,因此如果是小項目,或者是不需要那麼多功能的後臺管理,建議使用template版本。

版权声明:本文为[MYSUN]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071608056370.html