Одностраничная практика "Jingdong E-Dimension" на основе VUE+Webpack

В этой статье мы расскажем о нашем недавнем проекте — электронной платформе Jingdong, которая представляет собой систему обработки рабочих заданий, специально разработанную для инженеров по эксплуатации и техническому обслуживанию. Задача, которую он должен взять на себя, — инициировать запрос отчета о проблемах через платформу E-Dimensional для компьютеров, сетей, программного обеспечения и других проблем, с которыми сталкиваются все сотрудники компании во время работы. С помощью этой системы инженеры могут выполнять такие операции, как захват заказов, решение инцидентных заказов, передача аварийных заказов, возврат к квадрату запросов и приостановка аварийных заказов в соответствии со срочностью заявленного рабочего задания.Эта система сыграла роль в улучшении офиса. эффективность в определенной степени.

После общения с продуктом и R&D мы выяснили, что в основном все интерактивные части этого проекта размещены во фронтенде, а R&D предоставляет только интерфейсы, которые могут разделять фронтенд и бэкенд. Поэтому после группового обсуждения было решено использовать для его реализации Vue. Основываясь на единообразии визуального проекта платформы Jingdong E-Dimension, с меньшим количеством страниц и сильной корреляцией, а также на предыдущемУчастник программы ПЛЮСОсновываясь на опыте и уроках использования Vue + Webpack в этом проекте, мы решили попробовать разработку в одностраничном режиме разработки Vue.

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

Запрос площади страницы:

Моя страница мероприятия:

Страница сведений об инциденте:

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

Структура одностраничного документа Vue+Webpack и метод построения

Структура каталогов сборки проекта выглядит следующим образом:

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

Далее, функции файлов в каталоге src следующие:

♦ компонент используется для хранения функциональных компонентов

♦ css для хранения всех файлов стилей

♦ изображение используется для хранения изображений

♦ view хранит каждый компонент vue page в одном файле в бизнесе.

♦ app.js — файл входа

♦ app.vue Экспортный файл vue, используемый для визуализации компонентов, соответствующих маршруту верхнего уровня.

♦ шаблон страницы index.html

♦ router.js — это файл маршрутизации, в котором настраивается различная информация о переходах.

1. Первый файл конфигурации package.json Мы сделали некоторые общие настройки следующим образом (название, описание, версия, автор):

"name": "jdme_ew",
"description": "jdme_ew",
"version": "1.0.0",
"author": "",

Список зависимых пакетов показан на рисунке ниже, включая те, которые обрабатывают компиляцию SCSS, те, которые обрабатывают Es6, те, которые обрабатывают Ajax-запросы Vue, те, которые обрабатывают проблемы совместимости с CSS и так далее:

"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "vue-loader": "^12.1.0",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.6.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }

Пользовательская команда npm выглядит следующим образом (npm run dev запускает сервер разработки локально, а npm run build создает файл в каталоге dist):

"scripts": {
    "clean": "rm -rf dist",
    "dev": "npm run clean && webpack-dev-server -d --open --progress",
    "build": "npm run clean && cross-env NODE_ENV=production webpack -p --hide-modules --progress"
  },

2. Конфигурационный файл webpack.config.js:

В последнее время Webpack очень популярен, и отчасти причина в том, что многие функции в повседневных проектах можно выполнять, ссылаясь на различные плагины. Затем открываем наш конфигурационный файл, там много основных элементов: вход, выход, модуль, плагины. Ниже приведена часть кода конфигурационного файла:

webpackConfig.entry = {
  app: './src/app.js',
};

webpackConfig.output = {
  path: path.resolve(__dirname, 'dist'),
  filename:'[name].js'
};

webpackConfig.module = {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader','postcss-loader']
      }),
    },

webpackConfig.plugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),

Компонент Vue с одним файлом

В этом проекте для разработки используется однофайловый компонент Vue, поэтому сначала поговорим об однофайловом компоненте vue.js. Во многих проектах Vue мы используем Vue.component для инкапсуляции глобальных компонентов, а затем используем new Vue({el: '#container'}) для указания элемента-контейнера на каждой странице. В более сложных проектах станут очень очевидными некоторые недостатки такого подхода, такие как обязательное требование не повторять именование в каждом компоненте, отсутствие подсветки синтаксиса шаблонов String, отсутствие поддержки CSS, невозможность использования устройство предварительной компиляции и так далее.

Однофайловый компонент Vue.js может решить вышеуказанные проблемы. Проще говоря, однофайловый компонент Vue может записывать Html, CSS и JS в один файл и генерировать файл, оканчивающийся на .vue, что эквивалентно инкапсуляции всего компонента в файл.Его шаблон кода выглядит следующим образом. :

<template>
    <div class="common-wrapper">
        <div class="problem-desc">
            <h3>问题描述</h3>
        </div>
    </div>
</template>
 
<script>
import '../css/detail.scss' 
export default {
   data: function() {
        return {
            url: {
                
            },
        }
    },
    mounted: function() {
        this.getDetail();
    },
    methods:{
        getDetail(){
        }
    }
}
</script>
 
<style>
 
</style>

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

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

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

Vue-router

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

Как было сказано выше, каждый файл .vue — это компонент, то есть страница, каждый компонент мы суммируем в роутер, задаем путь доступа для роутера и сопоставляем путь и компонент. Когда пользователь заходит на страницу, домашняя страница Vue инициализирует маршрутизатор вызовов, отображает первый компонент пути, а затем переключает страницу в соответствии с действиями пользователя. Это примерно рабочий процесс Vue-router.Следует отметить, что переключение страниц здесь - это не переход страницы в виде гиперссылки на традиционную страницу, а переключение путей, то есть переключение разных компонентов, они все на одной странице реализованы выше. Мы можем посмотреть на фактическую работу в проекте:

1. Определите компоненты

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

① Создайте тег для определения навигационной ссылки, как показано ниже:

<div class="mi-l">
     <router-link :to="'mydetail/'+item.eventNum+'/'+item.categoryCode"><h3>{{item.description}}</h3></router-link>
     <p>{{item.currentPosition}}</p>
</div>

Использование эквивалентно созданию тега на странице, за которым следует «:to» — это путь к компоненту vue, к которому вы хотите перейти, и вы также можете указать параметры в соответствии с потребностями проекта, переход, показанный на рисунке. Путь является компонентом mydetail, и ему передаются два параметра.

② router.push(…) Программная навигационная ссылка, как показано ниже:

ctlResolve(){
     this.$router.push('/resolve/'+this.$route.params.eventNum);
},

router.push эквивалентен , но router-link является декларативным, а router.push — программным. Из рисунка видно, что при вызове метода ctlResolve страница перейдет на страницу компонента с путем /resolve и передаст ей данные параметра eventNum.

2. Определите политики маршрутизации и создайте экземпляры маршрутизации

Глядя на путь перехода только из файла Vue, мы не знаем, к чему относится этот путь, поэтому давайте взглянем на router.js, как показано ниже.

import Vue from 'vue';
import VueRouter from 'vue-router';
 
import Square from './view/square.vue';
import Detail from './view/detail.vue';
import myDetail from './view/mydetail.vue';
import Filter from './view/filter.vue';
import Resolve from './view/resolve.vue';
import Suspend from './view/suspend.vue';
import Transfer from './view/transfer.vue';
import me from './view/me.vue';
import Return from './view/return.vue';
 
Vue.use(VueRouter);
 
const routes = [ 
  { path: '/', component: Square },
  { path: '/detail/:eventNum', component: Detail },
  { path: '/mydetail/:eventNum/:categoryCode', component: myDetail },
  { path: '/filter', component: Filter },
  { path: '/resolve/:eventNum', component: Resolve },
  { path: '/suspend/:eventNum/:categoryCode', component: Suspend },
  { path: '/transfer', component: Transfer },
  { path: '/me', component: me },
  { path: '/return/:eventNum/:categoryCode', component: Return },
];
 
const router = new VueRouter({routes});
 
export default router;

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

3. Смонтируйте маршрут

Наконец, мы вызываем маршрутизатор в app.js, чтобы реализовать монтирование маршрута, как показано на следующем рисунке:

import Vue from 'vue';
import App from './app.vue';
import router from './router.js';
import VueResource from 'vue-resource';
 
Vue.use(VueResource);
window.erpCode = document.getElementById('erpCode') && document.getElementById('erpCode').value || '';
const app = new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

В окончательном экспортированном файле app.js мы видим, что он вводит router.js и вызывает router при создании экземпляра Vue, а затем переключает страницы в соответствии с входным путем пользователя. Таким образом, в основном проходит весь одностраничный процесс, и весь компонент Vue-router играет ключевую роль.

Интерфейс и проблемы с данными

1. Проблема запроса интерфейса

Проблема с маршрутизацией ключей решена, проблема с интерфейсом передачи данных тоже нас беспокоит. Как обычно, мы рефакторим страницу и готовимся к доступу к Vue и интерфейсу данных. Однако, в связи с некоторыми форс-мажорными обстоятельствами, разработка интерфейса не была завершена! Не знаю точное время завершения! ! Должны ли мы просто пассивно ждать? Конечно нет.К счастью, R&D предоставляет структуру данных интерфейса.В соответствии со структурой данных интерфейса мы моделируем данные для разработки части взаимодействия с данными. Мы нашли инструмент для имитации данных и прямого создания интерфейсного соединения для заданных поддельных данных.Когда мы запрашиваем эту интерфейсную ссылку, мы можем напрямую получить доступ к данным. Можно сказать, что этот гаджет экономит нам время на ожидание интерфейса отладки внутреннего интерфейса, решает дилемму пассивной разработки внешнего интерфейса и повышает эффективность нашей разработки.

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

getDetail(){
   this.$http.post('//json.diao.li/596db329e6da184a056ce98a',{id:this.$route.params.id}).then(response => {
        this.dtlInfo = response.body;
        console.log(this.dtlInfo);
   }, response => {
        // error callback
   });
}

После фиктивных данных мы в принципе можем пробежаться по всему проекту, но при замене реального разработанного интерфейса возникает междоменная проблема. Хотя окончательный запуск проекта равномерно развертывается стороной R&D, междоменных проблем не будет, но в ранней среде разработки, если мы откроем интерфейс R&D локально, мы обязательно столкнемся с междоменными проблемами. В ответ на эту проблему, учитывая, что система E-Dimension является проектом мобильного терминала и нет проблем совместимости с браузерами с низкими версиями, CORS в новую эру междоменного совместного использования ресурсов будет очень полезен. Ниже приведен скриншот использования плагина CORS для Chrome:

Video Playerзагрузить файл

Когда CORS не включен, страница загружает только статическую страницу, часть, которая требует js-рендеринга, не отображается, а консоль сообщает об ошибке «сбой запроса интерфейса», но когда мы включаем CORS, страница обновляется.

2. Вызов данных

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

this.$http.post('//rtfewm.jd.com/event/jMe/catchEvent',{eventNum:eventNum,erp:erpCode,token:'7cf48cf0495193d0440431844f43a614'},{emulateJSON:true}).then(response => {
                /*console.log(response.body.code)*/
                if(response.body.code == '01'){
                    this.isclose = true;
                }else if(response.body.code == '11'){
                    alert(response.body.msg);
                }; 
                
 
            }, response => {
                console.error('接口请求失败！');
            });

Добавьте поле заголовков в экземпляр vue, то есть добавьте параметр {emulateJSON:ture}. Vue-resource был предустановлен. По умолчанию установлено значение false, если установлено значение true.

EЭффект реализации размерной платформы

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

Video Playerзагрузить файл

Как видно из изображения выше, весь наш проект состоит из двух частей:

1. «Квадрат запроса», вы можете просмотреть заказ на работу, щелкнуть заказ на работу, чтобы просмотреть детали заказа на работу, нажать кнопку заказа на захват, чтобы получить заказ, а также иметь функцию поиска заказов на работу и загрузки дополнительных заказов на работу. .

2. Это раздел «Мои события», где вы можете просматривать заказы, которые вы захватили, и выполнять такие операции, как выполнение заказов, возврат их в поле запроса и приостановка заказа инцидента.Если инженер с разрешением также может передать заказ-наряд.

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

Как только платформа Jingme E-Dimension была запущена, она получила хороший отклик.Отзывы о продукте Инженеры JD.com по всей стране обрабатывали заказы на Jingme.Появление системы E-Dimensional значительно повысило эффективность их работы по сравнению с прошлое.

Суммировать

При разработке платформы Jingdong E-Dimension мы впервые попытались использовать режим разработки Vue.js + Webpack + Vue-router, чтобы шаг за шагом реализовать разработку одностраничного проекта Vue.

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

Это помогло нам в определенной степени вырасти, реализовать наши способности, укрепить наши деловые навыки и укрепить наши знания о Vue. Хотя E-Dimension все еще имеет много недостатков, в настоящее время он отвечает только текущим потребностям, но с увеличением более позднего бизнеса мы продолжим его оптимизировать и улучшать.