Используйте Vue+ElementUI для создания минималистского шаблона для фонового управления.

Vue.js
Используйте Vue+ElementUI для создания минималистского шаблона для фонового управления.

Эта статья была написана членами сообщества Tuque.Кан Руо Звездное небоЭто написано, добро пожаловать в сообщество Tuque, вместе создавайте замечательные бесплатные технические руководства и способствуйте развитию индустрии программирования.

написать впереди

Эта статья является пояснительным документом, не для того, чтобы научить вас создавать систему управления фоном с нуля, а для того, чтобы построить базовую структуру системы управления фоном на основе реального проекта и научить вас, как быстро разработать свою собственную на этой основе. Система управления фоном позволяет читателям начать работу с фоновой разработкой Vue, овладев некоторыми базовыми знаниями. Только связавшись с проектом, вы сможете лучше понять смысл того, что вы узнали, и превратить мертвые очки знаний в навыки, которые вы сможете изучить и использовать по аналогии.

беги первым

# 克隆项目
git clone https://github.com/tuture-dev/vue-admin-template.git
# 进入目录
cd vue-admin-template
# 安装依赖
npm install --registry=https://registry.npm.taobao.org
# 运行
npm run dev

1gdrAf.gif

Исходный код, задействованный в этой статье, размещен вGithubна, если вы считаете, что мы пишем неплохо, надеюсь, вы сможете дать эту статью ❤️подобно+GithubСклад плюс звезда ❤️ о~

Добавить боковую навигацию

  1. создать новый файл. существуетsrc/views/Создайте новую пустую папкуtest, создайте новый файл в этом каталогеtest.vue
  2. Добавьте маршруты. Открытьsrc/router/index.js, этот файл является файлом конфигурации фоновой маршрутизации проекта. существуетconstantRoutesВ этом массиве формат добавления маршрутов следующий:
{
  path: '/test',  //url路径
  component: Layout, // 此处不用动，这个全局统一的一个布局文件
  children: [{
    path: 'test',  // 二级路径
    name: 'test',
    component: () => import('@/views/test/test'), // 懒加载，此处写所添加文件的路径
    meta: {
      title: '测试', icon:'plane' //配置选项可配置测试名称和图标
    }
  }]
},

Мы можем настроить иконку, формат файла, который можно найти вiconfontскачать, а потом вставитьsrc/icons/svgв каталоге

16KUN6.png

Вторичная навигация может быть настроена следующим образом.

1NXiqJ.png

  {
    path: '/material',
    component: Layout,
    redirect: '/material/upload',
    meta: {
      title: '素材管理', //元信息，一级导航的名称
      icon: 'plane' // 元信息，导航图标的名称
    },
    children: [{
        path: 'check-template',
        name: 'check-template',
        component: () => import('@/views/material/check-template'),
        meta: {
          title: '查看模板',
        }
      },
      {
        path: 'logo',
        name: 'logo',
        component: () => import('@/views/material/check-logo'),
        meta: {
          title: '查看logo',
        }
      },
      {
        path: 'generate',
        name: 'generate',
        component: () => import('@/views/material/generate'),
        meta: {
          title: '生成素材',
        }
      },
      {
        path: 'check',
        name: 'check',
        component: () => import('@/views/material/check'),
        meta: {
          title: '查看素材',
        }
      },
    ]
  },

После завершения этой настройки платформа автоматически создаст записи боковой навигации на основе файла конфигурации маршрутизации. Все, что нам нужно сделать, это написать компоненты Vue один за другим в соответствии с бизнес-требованиями и заполнить фреймворк контентом.

Использование компонентов пользовательского интерфейса элемента

Element UIПредоставляет множество повторно используемых компонентов, для общих фоновых приложений эти компоненты могут полностью удовлетворить потребности. Если требования к персонализации не высоки, мы можем быть инженером по «копированию и вставке», также известным как инженер по «резюме», для быстрой разработки.

Для каждого компонента в его документации есть примеры эффектов и коды, просто выберите нужный компонент, вставьте его код в наш файл кода и немного измените его.

сетевой запрос

После того, как вся структура построена, основная работа интерфейсных программистов состоит в том, чтобы инициировать запросы и отображать данные. Теперь давайте пройдем этот процесс полностью.

Базовая конфигурация

  1. Настройте прокси.

Из-за проблемы запросов ресурсов из разных источников все сетевые запросы, взаимодействующие с серверной частью на этапе разработки, проксируются с помощью node.js внизу.Связанная документация

открыть корневой каталогvue.config.jsдокумент

// 代理所有以‘/admin’开头的网络请求
proxy: {
  '/admin': {
    target: `http://localhost:8886/`, //后台服务地址
    changeOrigin: true,
    pathRewrite: {
    }
  }
}
  1. настроить адрес

Производственные среды и среды разработки обычно имеют разные адреса службы. редактировать.env.developmentтак же как.env.productionЭти два файла изменяютVUE_APP_BASE_APIэлементы конфигурации

В качестве примера возьмем среду разработки:

VUE_APP_BASE_API = '/admin'
  1. Настроить перехватчик

Открытьsrc/utils/request.js, этот файл инкапсулирует объект запроса axios, и сетевые запросы в системе обрабатываются на основе этого объекта. Мы можем выполнить некоторую общую работу до отправки сетевого запроса и после получения ответа сервера. Например, по коду состояния сервера определить, является ли запрос нормальным, если нет, будет выдано соответствующее приглашение.

service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果服务器的状态码不为200，说明请求异常，应给出错误提示。
    if (res.code !== 200) {
      Message({
        message: res.msg || 'Error check your token or method',
        type: 'error',
        duration: 2 * 1000
      })
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 2 * 1000
    })
    return Promise.reject(error)
  }
)
  1. смонтировать объект запроса

существуетsrc/main.jsОбъект запроса сначала вводят в сеть, а для монтирования глобального объекта Vue, так что каждая прямая ссылка на сборку, опять же без введения.

import request from '@/utils/request'
Vue.prototype.req = request

запрашивать и оказывать

  1. Создайте простую службу узла

Только для обучения

let http = require('http');
let querystring = require('querystring');
let my_result = [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
}, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
}, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
}]

let server = http.createServer((req, res) => {
    let post = '';
    req.on('data', function (chunk) {
        post += chunk;
    });

    req.on('end', function () {
        res.writeHead(200, {
            'Content-Type': 'application/json; charset=utf-8'
        })
        post = querystring.parse(post);
        console.log('post-data:', post);
        if (post) {
            let result = {
                code: 200,
                // msg: "server error"
                data: my_result
            }
            res.end(JSON.stringify(result));
        } else {
            let result = {
                code: '0',
                msg: '没有接受到数据'
            }
            res.end(JSON.stringify(result));
        }
    });
});
server.listen(8886)
//在命令行 node server.js 即可运行
  1. обратиться с просьбой
this.req({
  url: "getInfo?id=6", // 此处写不同业务对应的url，框架会自动与baseURL拼接
  data: {},
  method: "GET"
}).then(
  res => {
    // 请求成功后的处理
    console.log("res :", res);
  },
  err => {
    // 请求失败后的处理
    console.log("err :", err);
  }
);

В соответствии с передовой практикой сетевые запросы должны быть равномерно извлечены в один файл, а затем данные на стороне сервера должны обрабатываться на каждой конкретной странице. Например, в следующей форме сначала создайте файлsrc/api/test.js, вставитьtestВсе сетевые запросы, используемые в компоненте, записываются в этот файл.

// src/api/test.js
import request from '@/utils/request'

export function getList(params) {
  return request({
    url: 'getTableData',
    method: 'get',
    params
  })
}

в компонентеtest.vueметод запроса

import { getTableData } from "@/api/test.js";
……
mounted: function() {
// 网络请求统一处理
getTableData().then(res => {
  console.log("api tableData :", res);
  this.tableData = res.data;
},err=>{
  console.log("err :", err);
});
// 网络请求直接写在文件中
this.req({
  url: "getTableData",
  data: {},
  method: "GET"
}).then(
  res => {
    console.log("tableData :", res);
    this.tableData = res.data;
  },
  err => {
    console.log("err :", err);
  }
);
},
  1. сетевой поток данных

1Uif9H.png

Как видно в консоли, наш адрес запроса — localhost:9528, а адрес фоновой службы — localhost:8886. Почему это не так? Проиллюстрируем блок-схемой

1UFtKI.png

После запуска приложения проблема междоменного доступа к ресурсам CORS может быть решена на внешнем интерфейсе с помощью аналогичного решения (обратный прокси-сервер Nginx).

Hello Table

теперь мыtest.vueИспользуйте компонент Table, предоставляемый Element UI, для написания страницы отображения табличных данных.

  1. Войдите в пользовательский интерфейс элементаTableДокументация компонента, скопируйте и вставьте соответствующий код. Фреймворк был представлен глобально для пользовательского интерфейса Element, поэтому эти компоненты готовы к использованию. Если это еще один сторонний компонент, мы должны сами представить его перед использованием.
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
  1. Запрос данных при загрузке компонента
  mounted: function() {
    this.req({
      url: "getTableData",
      data: {},
      method: "GET"
    }).then(
      res => {
        console.log("tableData :", res);
        this.tableData = res.data  // 数据渲染
      },
      err => {
        console.log("err :", err); // 当业务逻辑发生错误时 进行处理
      }
    );
  },
  1. фактический эффект

бизнес-логика нормальная

168XP1.png

Когда в бизнесе возникает ошибка, появляется сообщение об ошибке, выдаваемое сервером. Это сообщение появляется в перехватчикеrequest.jsОпределяемый файлом, это унифицированная обработка ошибок бизнес-логики, которая также может обрабатываться индивидуально в каждом запросе.

16JiOU.png

Простой контроль доступа

Этот метод управления разрешениями является статическим, и некоторые сложные динамические управления разрешениями здесь не описываются. Каждый маршрутный переход фреймворка будет проходить черезrouter.beforeEachЧтобы проверить разрешения, мы можем добавить сюда элементы конфигурации. введите файлsrc/permission.js, например, только администраторы могут войти в интерфейс управления пользователями:

if (to.path === '/user/user') {
  let id = JSON.parse(localStorage.getItem('userInfo')).id
  console.log(id)
  if (id > 2) { //id>2位普通用户，无权访问
    next({ path: '/task' })
    window.alert('permission denied')
  }
}

Эпилог

Пока что введены наиболее часто используемые операции в фоновой разработке, чего более чем достаточно для некоторых небольших проектов. Высокие сосны не могут расти в цветочных горшках, а Максиму нельзя практиковать во дворе.Проект, естественно, станет более прозрачным после написания многих вещей. Тысяча читателей - тысяча гамлетов, это всего лишь базовый фреймворк, в процессе разработки нам нужно его самим модифицировать, чтобы он был максимально удобным для вас.

Этот проект является производным от:GitHub.com/pan Джей И.А. Чен/…

Хотите узнать больше интересных практических технических руководств? ПриходитьСообщество ТукеМагазин вокруг.

Исходный код, задействованный в этой статье, размещен вGithubНа, если вы считаете, что наш текст неплох, я надеюсь, что вы можете поставить лайк этой статье ❤️ + звезда репозитория Github ❤️ о

Категории