how wonderful the cain design

как-замечателен-дизайн-каина

Введение

How-wonderful-the-cain-design — это обновленная версия серверного шаблона после версии v1, основанная на vue.js и element . В настоящее время проект шаблона объединяет вход в систему , проверку полномочий , настройку маршрутизации , ajax-запрос , макет , диаграммы , страницу 404 , страницу 401 и несколько страниц шаблонов . Решите проблемы серверного персонала, разрабатывающего серверные страницы управления. Далее я расскажу о подготовке к использованию этого проекта и о том, как его использовать. Надеюсь, это поможет некоторым партнерам со слабой внешней базой~.

Этот проект относится к vue-admin-element

Примечание . В этом проекте используются версии [email protected]+ и [email protected]+.

Предисловие

среда

Чтобы установить узел (8.0+) локально, вы можете напрямую загрузить установочную версию и следовать инструкциям. После завершения установки проверьте, прошла ли установка успешно.

 node -v
npm -v

Успех происходит, когда появляется номер версии.

стек технологий

Проект в основном включает в себя следующие технические моменты:

• es2015+
• вид
• вюекс
• vue-маршрутизатор
• элемент-UI
• меньше
• электронные диаграммы
• макеты
• эслинт
• аксиомы
• Вавилон-полифилл

Для разработки на стороне сервера вам нужно обратить внимание только на синтаксис 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**. Первый записывает страницу, а второй записывает информацию о маршрутизации соответствующей страницы. маршрутизация используется в качестве поля оценки разрешений в шаблоне, то есть массив разрешений, возвращаемый сервером, фактически сравнивается с именем, и результатом сопоставления является страница разрешений, принадлежащая пользователю, в противном случае страница 401 или страница. Будет возвращена страница 404.

Отображение проекта

развивать

Предпосылка развития

В настоящее время в проекте настроено два пользователя: admin и ChartUser. Основная цель — проверка разрешений.

Вы можете войти в систему без ввода пароля, но необходимо ввести номер своего счета.

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

вопросы развития

Ссылка на компонент element-ui

Если взять в качестве примера компонент кнопки, то когда вам нужно представить компонент кнопки, вам необходимо выполнить следующие шаги:

1. Когда соответствующий компонент будет найден на официальном сайте, скопируйте соответствующий код.

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

2. Внедрите компонент в /src/index.js по требованию. Если вы не знаете, как его внедрить, вы можете обратиться к разделу «Введение всех компонентов по требованию» и найти соответствующий компонент для импорта.

3. Прочтите внимательно, как использовать этот компонент, официальная документация сайта очень подробно это объяснит.

Модификация интерфейса входа пользователя

Вход в проект шаблона использует макеты для имитации входа. Конкретные этапы реализации входа в шаблон:

1. Страница входа, путь: /views/login/index.vue

Уведомление:

1. Учетная запись в решении if не существует и ее необходимо изменить. Всего в шаблоне есть три имени пользователя, которые соответствуют трем правам пользователя. Чтобы упростить написание, я написал это так. быть приглашением возврата интерфейса после настройки интерфейса.
2. this.$store.dispatch('Login', ...) — это синтаксис vuex. Цель состоит в том, чтобы вызвать метод входа в /src/store/modules/user.js для запроса интерфейса сервера и возврата соответствующего пользователя. данные, хранящиеся в глобальном кеше, удобны для глобальных вызовов.
3. Обратите внимание на формат параметров. Параметры в объекте зафиксированы в params, а значение params является объектом. В объект можно поместить различные параметры, разрешенные axios, поскольку здесь моделируется только запрос на получение. необходим параметр params. Дополнительные параметры см. в конфигурации axios.

2. Хранить глобальный кеш. Путь входа в систему:/src/store/modules/user.js.

Когда вы нажмете кнопку входа в систему, будет вызван вышеуказанный метод. Тело метода фактически вызывает интерфейс getInfo в /scr/api/api.js для получения соответствующих пользовательских данных. Среди них следует использовать четыре маршрута push. персонал независимо от полномочий. Доступные маршруты сначала вставляются в массив маршрутов, а затем кэшируются разрешения, информация о пользователе и информация о токене.

3. Путь к интерфейсу getInfo:/src/api/api.js

Затем вызовите интерфейс getInfo. Здесь используется Async (es6). Здесь нужно обратить внимание на result.code. Он задается в соответствии с форматом настройки интерфейса сервера. Он может быть состоянием, статусом или кодом. от человека к человеку.

4. Путь запроса интерфейса имитации моделирования:/src/mock/login.js

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

В реальной разработке при изменении интерфейса входа в систему должно присутствовать поле роли, а формат должен соответствовать приведенному выше массиву, иначе система разрешений будет недействительной.

После четырех вышеуказанных шагов весь процесс входа в систему завершен.

аутентификация по токену

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

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

Это также интерфейс входа в систему, в котором **commit('SETTOKEN', 'test')** обрабатывает значение токена. В реальной разработке проекта этот тест должен быть заменен реальным токеном, полученным при входе в систему.

Путь:/src/api/server.js

Обратите внимание на решение res.code===301 здесь. После предварительного согласования с персоналом сервера, когда срок действия токена истечет, возвращаемый код будет установлен на 301 для идентификации. Таким образом, решение здесь также основано на настройках вашего собственного проекта, которые могут быть кодом, статусом, состоянием и т. д. ., который может быть доработан под проект.

Правила настройки таблицы маршрутизации

Путь:/src/router/index.js

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

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

1. Меню первого уровня

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

Маршрутизация информационной панели представляет собой меню первого уровня. Формат написания меню первого уровня аналогичен приведенному выше. В дочерних элементах имеется только один маршрут.

Заголовок параметра в мета представляет имя меню, отображаемое в меню.

icon — это значок меню, а то, что читается, — это значок меню svg в каталоге /src/icons/. Поэтому при создании собственного проекта вам нужно попросить художника создать значок меню в формате svg, а затем разместить его. он находится в каталоге значков. Значение параметра icon — это имя файла значков.

Разрешения меню первого уровня соответствуют имени в дочерних элементах.

2. Вторичное меню

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

3. Меню третьего уровня

Формат меню третьего уровня имеет дочерние элементы внутри дочерних элементов.

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

Написание интерфейса

Путь:/src/api/api.js

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

Формат записи — это метод записи, предусмотренный шаблоном.

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

1. получить запрос

2. отправить форму отправки

Примечание. Если вам нужно передать параметр заголовка application/x-www-form-urlenconded, этот параметр следует записать как

 const params = {
  data: {},
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
}

3. опубликовать подачу без формы

Отправка без формы по сути аналогична отправке через форму. Разница в том, что исходное присвоение данным должно быть изменено на присвоение параметрам.

4. форма отдыха

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

Интерфейсный прокси

Фактическая разработка — это локальная разработка. Используйте 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 непосредственно в прокси-сервер конфигурации выше, вставьте информацию о файлах cookie в информацию заголовка, сохраните ее и снова запустите npm run dev.

использование диаграммы Echarts

1. Внедрение компонента создания диаграмм

 import chartMaker from '@/components/charts/chartMaker';

components: {
	chartMaker,
},

2. Введение тегов

 <chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新

3. Определить свойства

 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属性，传入到组件

4. Метод настройки атрибута вызова

 this.getChart1Option();
// 调用这个方法后，表格就能展现了

Этапы изменения спецификации кода eslint

Когда вы заканчиваете писать код, вы с радостью думаете, что все готово, и хотите опубликовать его. Оказалось, что пресс-конференция была отклонена, поскольку при проблемах с форматированием в коде ее нельзя отправить на сервер.

Так как же решить проблему формата кода?

1. Сначала используйте npm run lint. Несмотря ни на что, если вы выполните это первым, вы быстро устраните многие проблемы с форматированием.

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

   1. В сообщении об ошибке есть ссылка, например http://eslint.ort/docs/rules/no-var. Щелкните эту ссылку, чтобы перейти на официальный сайт eslint, выяснить причину ошибки и изменить ее. соответствующий формат.
   2. Если эту ошибку действительно сложно исправить, вы можете заблокировать эту спецификацию. Перейдите к файлу .eslintrc.js в корневом каталоге и добавьте соответствующее правило защиты к объекту правил, например правило no-var, указанное выше. Настройте «no-var»: 0, и это правило будет фильтроваться.

####выпускать

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

Я полагаю, что после приведенного выше руководства вы не только сможете использовать этот шаблон, но и войдете в мир интерфейсов. Если документ все еще неясен или вы все еще хотите узнать, какие соответствующие знания необходимо дополнить, вы можете связаться со мной в любое время~