vue&element項目實戰

1.背景

 

 

1.1.爲什麼要講這課程

跟上時代....

雖然我們主要講解的課程是java後端課程...

但是很多技術是設計到前端展示的...我們也需要跟上時代....

不能java後端技術將得很深入很前言,但是前端還是使用很老的技術...

這樣就成了上身穿西裝,鞋子穿草鞋.....不協調

1.2.講課方式

主要講解如何快速的搭建一個後端管理系統的前端框架,在這個框架下快速的實現增刪改查業務......

可以說是站巨人的肩上做二次開發...實際生產中大多是也是這樣的.....

因此首先我們要感謝一下開源的項目模板.....

1.3.課件與視頻資料下載

視頻:

視頻,代碼與資料下載:

 百度網盤下載

2.項目模板

2.1.開源模板項目下載與啓動

課程中使用的模板是實際開發中用得比較多的後端管理項目模板

 

 拉取與下載方式

# vue-admin-template

# 克隆項目

git clone https://github.com/PanJiaChen/vue-admin-template.git

# 進入項目目錄

cd vue-admin-template

# 安裝依賴

npm install (這步不要執行,會很慢的)

# 建議不要直接使用 cnpm 安裝以來，會有各種詭異的 bug。可以通過如下操作解決 npm 下載速度慢的問題

npm install --registry=https://registry.npm.taobao.org

# 啓動服務

npm run dev

```

瀏覽器訪問 [http://localhost:9528](http://localhost:9528)

步驟一:模板拉取

 

 步驟二:安裝依賴

步驟三:啓動服務

 

初始項目頁面

 2.2.項目簡單處理

1.項目結構簡單介紹

官方使用文檔:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

2.刪除模板中的案例菜單

 刪除後保存啓動,界面如下圖:

 

 2.3.添加路由與菜單

添加菜單:

 菜單內容爲: 每個菜單的內容都是這樣的模板,

這裏只是構建結構,後面在這個結構中寫就可以了

<template>

  <h1>用戶管理</h1>

</template>

<script>

export default {

  name: 'UserInfo'

}

</script>

<style lang="scss">

</style>

添加路由:

 {
    path: '/sys',
    component: Layout,
    name: 'sys',
    meta: { title: '系統管理', icon: 'el-icon-user' },
    children: [
      {
        path: 'user_info',
        name: 'user_info',
        component: () => import('@/views/user/user_info'),
        meta: { title: '用戶管理' }
      },
      {
        path: 'dic_info',
        name: 'dic_info',
        component: () => import('@/views/dic/dic_info'),
        meta: { title: '字典管理' }
      }
    ]
  },
  {
    path: '/channel',
    component: Layout,
    name: 'channel',
    meta: { title: '渠道管理', icon: 'el-icon-data-board' },
    children: [
      {
        path: 'up_channel_info',
        name: 'up_channel_info',
        component: () => import('@/views/up_channel/up_channel_info'),
        meta: { title: '上游渠道' }
      },
      {
        path: 'up_channel_product',
        name: 'up_channel_product',
        component: () => import('@/views/up_channel/up_channel_product'),
        meta: { title: '上游產品' }
      },
      {
        path: 'down_channel_info',
        name: 'down_channel_info',
        component: () => import('@/views/down_channel/down_channel_info'),
        meta: { title: '下游渠道' }
      },
      {
        path: 'down_channel_product',
        name: 'down_channel_product',
        component: () => import('@/views/down_channel/down_channel_product'),
        meta: { title: '下游產品' }
      }

    ]
  }

保存啓動後頁面顯示:

3.登錄與退出登錄

3.1.接口代理配置

重要提醒:修改了路由後要重啓(npm run dev)vue項目,路由纔會生效.

    // 配置代理跨域

    proxy: {

      '/dev-api': {

        target: 'http://localhost:6001', // 接口路由

        pathRewrite: { '^/dev-api': '' }

      }

    }

修改通用請求工具類:

swagger接口文檔:

注意需要自己下載代碼部署

3.2.將英文改爲中文

  3.3.登錄接口修改

 測試:

登錄頁面點擊登錄如下圖說明登錄成功

3.4.獲取用戶信息

主要實現原理是通過路由守衛實現

  // get user info

  getInfo({ commit, state }) {

    console.log('token=' + state.token)

    return new Promise((resolve, reject) => {

      getInfo(state.token).then(response => {

        console.log('response=', response)

        commit('SET_NAME', response.data.userName)

        // 用戶頭像,實際中應該從response.data 中取

        commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')

        resolve(response)

      }).catch(error => {

        reject(error)

      })

    })

  },

3.5.退出功能實現

完美!