IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      H5大咖分享:使用Vue搭建中后台框架流程

      • 发布时间:
        2020-08-31
      • 版权所有:
        云和教育
      • 分享:

      后台框架搭建过程

      1.1创建一个Vue项目

      vue create 项目名

       

      1.1.1选择合适的选项进行安装

      · default

      · Manually select features

      等待一段时间,项目创建完成

       

      1.2.删除原有的demo

      1.2.1src/views

      · about.vue

      · home.vue

       

      1.2.2 App.vue

       删除对应的nav和style样式

      <div id=”nav”>

      <router-link to=”/”>Home</router-link> |

      <router-link to=”/about”>About</router-link>

      </div>

       

      1.2.3 src/router/index.js

      引入home的代码,和相关的路由配置全部删除
       

      1.2.4 src/components

      删除HelloWord.vue

      基于以上操作后,项目才会变成空白项目

       

      1.3 搭建环境

      1.3.1 UI框架

      · ElementUI

      · iview

      · antDesign

      具体的框架选择,可以选择该网站作为参考

      FE

      拿iview做例子

       

      1.3.1.1 @vue/cli3/4

      vue add vue-cli-plugin-viewui

      直接运行,不需要在进行多余的配置

       

      1.3.1.2 如果使用传统方式

      安装iview

      npm i –save view-design

      在main.js中引入iview

      import ViewUI from ‘view-design’

      import ‘view-design/dist/styles/iview.css’

      Vue.use(ViewUI)

      如果我们需要在一个css中对iview进行重置,则需要去创建一个css并且在main.js引入

      在assets中创建css/reset.css,在main.js中引入(需要放在UI组件的css的下面)

      import ‘./assets/css/reset.css’

       

      1.3.2 axios

      1.3.2.1 安装axios

      npm i –save axios

      # 或者

      yarn add axios

       

      1.3.2.2 创建一个新的axios实例进行配置,并作为模块导出

      在src下新建文件utils/server.js

      server.js

      import axios from ‘axios’

      // 调用axios的create方法创建一个新的axios

      const instance = axios.create({

      // 公共的请求前缀

      baseURL: ‘https://some-domain.com/api/’,

      // 请求超时时间

      timeout: 1000,

      // 设置默认的header信息

      // headers: {‘a’: ‘1’}

      })

      // 创建axios的请求拦截器(一般设置的是401的问题)

      instance.interceptors.request.use(config => {

      // 在发送请求之前做些什么

      // 一般配置config中的headers添加token

      return config;

      }, error => {

      // 对请求错误做些什么

      return Promise.reject(error);

      });

      instance.interceptors.response.use(response => {

      // 对响应数据做点什么

      return response;

      }, error => {

      // 对响应错误做点什么

      return Promise.reject(error);

      });

      // 最后将实例导出,未来作为模块使用

      export default instance

       

       

      1.3.3.接口配置

      我们应该对接口进行统一的管理

      · GET /books?page=1&limit=10 获取第一页的信息

      · GET /books/:id 获取某本书的信息

      · POST /books  新建一本书{title: “”,ISBN: “”,author: “”,price: “”}

      · PUT /books/:id 更新书本全部内容{title: “”,ISBN: “”,author: “”,price: “”}

      · PATCH /books/:id 更新书本部分内容{title: “”,ISBN: “”,author: “”,price: “”}

      · DELETE /books/:id 删除某本书

      · POST /login{username: ”,password: ”}

       

      1.3.3.1. 创建文件夹api

      在src下创建api文件夹,对应的统一模块的数据应该放在api下的模块.js中,模块中有相应模板

      src/api/books.js

      // 引入axios的实例

      import axios from ‘@/utils/server’

      /*

      请求的函数最终返回的一定是一个Promise对象(axios.xxx())

      */

      // 获取很多图书信息

      /* {

      page: 1,

      limit: 10

      } */

      export const getBooks = params => axios.get(‘/books’, {params})

      // 获取某一本书

      export const getBook = id => axios.get(`/books/${id}`)

      // 创建一本书

      export const postBook = data => axios.post(‘/books’, data)

      // 更新一本书

      export const putBook = (id, data) => axios.put(`/books/${id}`, data)

      export const patchBook = (id, data) => axios.patch(`/books/${id}`, data)

      // 删除一本书

      export const deleteBook = id => axios.delete(`/books/${id}`)

      src/api/user.js

      import axios from ‘@/utils/server’

      export const login = data => axios.post(‘/login’, data)

       

       

      1.3.4  路由配置

      根据左侧导航菜单进行路由的配置
      · Dashboard

      · 主控台

      · 监控页

      · 工作台

      · 表单页面

      · 基础表单

      · 高级表单

      · 列表页面

      · 基础列表

      · 用户列表

      · 搜索页面

      · 文章列表

      · 项目列表

      // 这里的相关path没有按要求写,只是个例子

      const routes = [

      {

      path: ‘/Dashboard’,

      component: Layout,

      children: [

      {

      path: ‘主控台’,

      }, {

      path: ‘监控页’

      }, {

      path: ‘工作台’

      }

      ]

      }, {

      path: ‘/表单页面’,

      component: Layout,

      children: [

      {

      path: ‘基础表单’

      }, {

      path: ‘高级表单’

      }

      ]

      }

      ]

      src/router/Dashboard.js

      import Layout from ‘Layout路径’

      export default {

      path: ‘/Dashboard’,

      redirect: ‘/Dashboard/主控台’,

      component: Layout,

      children: [

      {

      path: ‘主控台’,

      component: () => import(‘组件路径’)

      }, {

      path: ‘监控页’,

      component: () => import(‘组件路径’)

      }, {

      path: ‘工作台’,

      component: () => import(‘组件路径’)

      }

      ]

      }

      src/router/表单页面.js

      import Layout from ‘Layout路径’

      export default {

      path: ‘/表单页面’,

      redirect: ‘/表单页面/基础表单’,

      component: Layout,

      children: [

      {

      path: ‘基础表单’,

      component: () => import(‘组件路径’)

      }, {

      path: ‘高级表单’,

      component: () => import(‘组件路径’)

      }

      ]

      }

      这个时候我们就可以在router/index.js中引入对应的路由模块

      import Dashboard from ‘Dashboard.js’

      import 表单页面 from ‘表单页面.js’

      const routes = [

      Dashboard,

      表单页面

      ]

      如果我们还有新增的菜单,我们可以继续

      1. 新建文件src/router/菜单.js

      2. 在对应的文件中配置对应的路由

      import Layout from ‘Layout路径’

      export default {

      path: ‘/一级菜单路径’,

      redirect: ‘/一级菜单路径/二级菜单路径’

      component: Layout,

      children: [

      {

      path: ‘二级菜单路径’,

      component: () => import(‘组件路径’)

      }

      ]

      }

      3. 把这个对象在src/router/index.js中引入

      import Dashboard from ‘Dashboard.js’

      import 表单页面 from ‘表单页面.js’

      import 菜单 from ‘菜单.js’

      const routes = [

      Dashboard,

      表单页面,

      菜单

      ]

       

       

      1.3.4.1 添加路由后自动渲染菜单

      该功能需要我们自己实现,在我们的菜单组件中,获取到对应的路由配置,根据路由配置的数组遍历得到菜单结构

      先在src/router/index.js导出routes

      export const routes = [

      //…

      ]

      在对应的菜单组件中,引入对应的routes

      在渲染时,我们发现,缺少必要的信息,例如

      import Layout from ‘Layout路径’

      export default {

      path: ‘/一级菜单路径’,

      component: Layout,

      meta: {

      title: “一级菜单”,

      icon: “ios-xxx”

      },

      children: [

      {

      path: ‘二级菜单路径’,

      component: () => import(‘组件路径’),

      meta: {

      title: “二级菜单”

      }

      },

      {

      path: ‘二级菜单路径(不需要渲染到菜单)’,

      component: () => import(‘组件路径’),

      meta: {

      title: “二级菜单”,

      hidden: true

      }

      }

      ]

      }

      {

      “title”: “”,

      “icon”: “”

      }

      这些自定义信息,我们可以添加到meta中

      src/components/Sider.vue

      <template>

      <Menu :theme=”theme2″ :active-name=”$route.path”>

      <!– 根据顶级路由生成Submenu –>

      <template v-for=”parent in routes”>

      <Submenu :name=”parent.path” :key=”parent.path” v-if=”!parent.meta.hidden”>

      <template slot=”title”>

      <Icon :type=”parent.meta.icon” />

      {{parent.meta.title}}

      </template>

      <!– 根据children生成MenuItem –>

      <template>

      <MenuItem :key=”child.path” :name=”parent.path + ‘/’ + child.path” v-for=”child in parent.children” :to=”parent.path + ‘/’ + child.path”>{{child.meta.title}}</MenuItem>

      </template>

      </Submenu>

      </template>

      </Menu>

      </template>

      <script>

      import {routes} from ‘@/router’

      export default {

      data () {

      return {

      routes

      }

      }

      }

      </script>

       

      1.3.5 路由组件创建

      src/views中存放我们的路由组件,原则上,一个模块应该分别在一个文件夹

      – views

      – dashboard

      – 总控台.vue

      – 监控页.vue

      – 工作台.vue

      – 表单

      – 普通表单.vue

      – 高级表单.vue

      如果是属于路由组件中的普通组件

      – components

      – 路由组件名(文件夹)

      – 普通组件.vue

       

      1.3.6 vuex

       

      vuex最好使用modules,在配置时,添加对应模块在src/store/modules

      – modules

      – dashboard.js

      – 表单.js

      在每个js中结构都是相同的

      demo.js

      export default {

      namespaced: true,

      state: {},

      mutations: {},

      actions: {}

      getters: {},

      modules: {}

      }

      再把模块js放置在src/store/index.js中

      index.js

      import 模块 from ‘模块路径’

      const store = new Vuex.Store({

      state: {},

      mutations: {},

      actions: {},

      getters: {},

      modules: {

      模块

      }

      })

      如果我们要用到请求,那么在对应模块中引入,并在action里调用

      如果我们想要在vuex中使用Message、router等相关的对象

      直接引入即可

      import {Message} from ‘view-design’

      import router from ‘@/router’

      在vue中有一些东西是一样

      this.$store === new Vue.Store()

      this.$router === new VueRouter()

      文/云和数据高级H5开发工程师