Каталог документации
- предисловие
- этап проектирования
- Документация
- Restful api
- Технический отбор
- стадия развития
- Локальная разработка и совместная отладка
- Путь, статус интерфейса, тайм-аут входа, ошибка сервера
- Унифицированная обработка результатов возврата Тайм-аут входа, ошибка строки, другие строки
- Фаза тестирования развертывания
- корневой каталог проекта
- Автоматическое развертывание
- проблема, которую нужно решить
- проблема маршрутизации
- совместное использование состояния
- тест интерфейса
предисловие
За последние два года я попробовал несколько проектов с разделением интерфейса и сервера.Процесс разработки и эффективность не гладкие, а эффективность и качество не были значительно улучшены.Однако большинство из них - это обслуживание и второй этап разработки некоторых старых проектов, и структуру трудно отследить.Во время реализации режима разработки одностраничного приложения я столкнулся со многими проблемами.Недавно я использовал jquery для разделения передней и задней частей небольшой модуль по старому проекту, и сделал запись и резюме. Я надеюсь узнать больше и улучшить, если есть хороший метод реализации, вы можете дать больше указателей.
этап проектирования
1. Документация
В предыдущей и этой разработках одной из проблем, с которыми всегда приходилось сталкиваться, была документация.Внешний интерфейс использует Taobao с открытым исходным кодом.Инструмент управления визуальным интерфейсом RAP, Построенные на нашем собственном сервере интерфейсы определения внешнего интерфейса разделены по страницам, и несколько интерфейсов, соответствующих странице, перечислены под именем страницы.
Но после практики нескольких проектов выяснилось, что разделение труда java-команды отличается от фронтенда.Они разделены в зависимости от реализации функций.Фронтенд-разработка процесса покупки будет разделен на несколько страниц, первый шаг, второй шаг и третий шаг., а затем вызов интерфейса в соответствии с функцией каждой страницы, компиляция форм, проверка и другая разработка бизнес-логики, а внутренняя часть разделена в соответствии с функции, такие как первый шаг, второй шаг и третий шаг внешнего интерфейса, три страницы имеют доступ к соответствующему интерфейсу A. Список \B\C, в разработке, просто проверьте это поле из библиотеку и вернуть ее вам, то аналогичные функции будут возложены на java-инженера, что эффективно для бэкенда, а реализация интерфейса не будет слишком разбросана.
Таким образом, есть два документа интерфейса, один поддерживается Excel в бэкэнде, а другой поддерживается RAP во внешнем интерфейсе.Перед началом разработки внешнего интерфейса фиктивные данные должны быть разделены на страницы в соответствии с интерфейсные документы, предоставляемые серверной частью. Иногда при разработке изменение поля в интерфейсе нужно поддерживать дважды, что очень неудобно, да и эффективность снижается.
2. Restful api
При определении интерфейса нам нужно учитывать множество ситуаций, и в то же время нам нужно хорошо поработать с ограничениями правил.Мы столкнулись лишь с некоторыми из них, и мы кратко их перечислим.
код состояния:Существует много случаев сообщения об ошибках интерфейса, таких как формат данных, ошибка сервера и т. д., необходимо разработать соответствующую подсказку и код состояния.
Отправить тип данныхКогда ajax отправляет данные, это вообще json, а атрибут не может быть массивом.У нас есть внутреннее соглашение, что документ может писать массив, и при отправке массив равномерно конвертируется в строку.
свойства и массивыВсе возвращаемые значения в документе, помеченные как список, возвращаются как массивы, а без меток возвращаются как атрибуты.
возвращаемый тип данныхМы сделали это не очень тщательно, поэтому все возвращаемые типы являются строками, и внешний интерфейс должен единообразно обработать их в формат, который им нужно использовать.
Все входные параметры добавляют параметрысм. код
$.ajax({
url: "separationCommon/getDic.gsp",
type: "POST",
dataType: "JSON",
baseUrl: true,
async: false,
data: {
"params.dicCode": !code ? "DIC_EB_APPNTPROVINCE": code,
"params.searchType": 1
},
success: function (data) {
if(data.status == 200) {
var ARR = data.data.dicList;
window.STR = provinceSelect(ARR, code);
}
}
});
3. Технический отбор
Учитывая, что он будет передан команде java для обслуживания после разработки, мы использовали vue и avalon раньше, но обслуживающий персонал очень проблематичен в обслуживании, поэтому мы напрямую используем jquery+jquer.tmpl. Стоимость обучения jquer.tmpl практически незначительна. С другой стороны, поскольку это старый проект, передняя часть почти сформирована. Слева — это древовидное меню, а справа — загруженная страница jsp. используйте загрузку jquery для загрузки файла HTML.
стадия развития
1. Локальная разработка и совместная отладка
У mock-инструмента есть плагин для перехвата запросов, который может напрямую реализовывать возвращаемые данные,Документация официального сайта RAP
Однако более поздняя совместная отладка также требует пересылки и перехвата, а также симуляции входа в систему, поэтому она бесполезна.Напрямую используйте экспресс + http-proxy-middleware для локальной пересылки
const express = require('express');
const timeout = require('connect-timeout');
const proxy = require('http-proxy-middleware');
const request = require("request");
const cheerio = require("cheerio");
const app = express();
// 超时时间
const TIME_OUT = 30 * 1e3;
// 设置端口
app.set('port', '8080');
// 设置超时 返回超时响应
app.use(timeout(TIME_OUT));
app.use((req, res, next) => {
if (!req.timedout) next();
});
proxyOption = {
target: 'http://ipaddress/mockjsdata/6',
// target: 'http://ipaddress:9527/eb/',
pathRewrite: {
'^/api/' : '/' // 重写请求，api/解析为/
},
changeOrigin: true,
headers:{
'Cookie': ''
}
};
// 静态资源路径
app.use('/', express.static('src/page'));
request('http://192.168.180.87:9527/eb/syEdor/moniLongin.gsp', function(err,res,body){
// 获取cookie
var str = res.headers['set-cookie'][0];
// 设置cookie
proxyOption.headers = {
'Cookie':str
};
if (!err && res.statusCode == 200) {
// 反向代理
app.use('/api/*', proxy(proxyOption));
}else{
console.log('登录失败')
}
});
// 监听端口
app.listen(app.get('port'), () => {
console.log(`server running @${app.get('port')}`);
});
2. Путь, статус интерфейса, тайм-аут входа, ошибка сервера
Единый корневой путь проектаДобавьте перехват ajax, условие решения - options.baseUrl;
// 项目路径拦截
$.ajaxPrefilter(function (options) {
if(options.baseUrl) {
if(options.url.indexOf('/eb/') != -1) {
options.url = options.url;
} else {
options.url = '/eb/' + options.url;
}
options.crossDomain = false;
}
});
Состояние интерфейса, тайм-аут входа, ошибка сервераТак как сообщения об ошибках возникают во многих случаях, оценивается код состояния, возвращаемый обычным интерфейсом.Если он не равен 200, он будет выдаваться единообразно. В настоящее время нет одностраничного механизма токена для входа в систему, и некоторые из них по-прежнему будут переходить на jsp. Некоторые ошибки интерфейса, такие как ошибка 500, также возвращаются в jsp. Результатом возврата jsp является html, и необходимо добавить суждение. Заголовок запроса будет нести информацию о тайм-ауте сеанса.
//ajax请求结束
$(document).unbind('ajaxComplete').bind('ajaxComplete', function(e,xhr,opt){
if(opt.baseUrl){
var str = xhr.responseText;
try {
var obj = JSON.parse(str);
if(obj.status != 200) {
popUp(obj.msg);
}
} catch(e) {
// 通过XMLHttpRequest取得响应头,sessionstatus
var sessionstatus = xhr.getResponseHeader('sessionstatus');
if(sessionstatus == "timeout"){
popUp('登录超时,请重新登录', function(){
window.location.reload();
});
}else if(sessionstatus == "perror"){
popUp('请求的链接地址可能存在非法字符', function(){
window.location.reload();
});
}else{
popUp('404，服务器出错！')
}
}
}
});
Фаза тестирования развертывания
1. Корневой каталог проекта
Локальная разработка и отладка не соответствуют каталогу статической цепочки ресурсов тестового сервера. На странице есть некоторые пути к изображениям и html-файлам, которые упакованы и заменены gulp.
gulp.task('prod:narrowImg', ['prod:narrowJs'], function () {
return gulp.src(Config.html.htmlProphaseLoad)
.pipe(replace(/src=\"\.\.\/images/g, "src=\"\/eb\/static\/images"))
.pipe(replace(/\/api\//g, "\/eb\/"))
.pipe(replace(/load\(\$\(\"#loadjsp\"\)/g, 'load("\/eb"+$("#loadjsp")'))
.pipe(rename({dirname: ''}))
.pipe(gulp.dest(Config.html.distProphaseLoad)); // 替换三期load图片路径
});
2. Автоматическое развертывание
gulp-sftp очень прост в использовании, просто настройте задачу напрямую.
gulp.task('ftp', function () {
return gulp.src('dist/一二期/三期/load/*.*')
.pipe(sftp({
host: 'ipaddress',
user: 'user01',
pass: 'password',
remotePath: '/application/apache9527/apache/htdocs/eb/load'
}));
})
проблема, которую нужно решить
- проблема маршрутизации Первоначально хотел использовать jQuery Hashchange или jqueryRouter для достижения, учитывая предыдущий режим и время разработки, нет замены.
- совместное использование состояния В настоящее время состояние левой и правой кросс-страниц размещается на значении скрытого домена и атрибута div. Позже мы рассмотрим введение Mbox для управления состоянием.
- тест интерфейса При совместной отладке внешнего интерфейса большую часть времени я тратил на тестирование интерфейса, надеясь найти хорошие инструменты тестирования интерфейса и процедуры тестирования.