В последний месяц увольнения я подал заявление на повышение зарплаты двум коллегам, точнее заявление на повышение зарплаты послужило спусковым крючком, меня задержали за повышение зарплаты коллегам, чтобы увеличить себе зарплату. Ударившись о стену, воспламенив давно сдерживаемое желание уйти, вождь возделывал себя четыре или пять лет, чтобы не высказываться, и согласился уйти тихо.
Когда я ушел, в проектах компании оставалось еще много проблем. Сейчас я все еще работаю над Vue и анимационными проектами. Сейчас, возможно, предыдущие проблемы были решены, но я все еще записывал идеи, и это правильно, что я ушел. тихо. Это вещь, я видел фотографии, на которых вы выиграли награду «Отличная команда», это здорово, я вам всем желаю 👍👏👏👏.
Автоматическое развертывание
Здесь gitLab используется в качестве git-сервера. Вы можете настроить функцию ловушки фиксации для реализации автоматического развертывания и онлайн-публикации. Это эквивалентно серверу, отслеживающему вашу отправку. После фиксации сервер автоматически выполняет ее.npm run build, поместите его в соответствующий каталог тестового сервера, файл конфигурации находится в корневом каталоге.gitlab-ci.ymlфайл, работает следующий фрагмент кода,scriptЭто сценарий Linux, который копирует файлы в указанный каталог CDN статического ресурса и каталог веб-сервера.gitlab-ci 持续集成, можно обратить внимание, у svn должна быть аналогичная конфигурация, пусть эксплуатация и обслуживание помогут ей соответствовать.
npm-build-test:
image: cdn路径
stage: build
cache:
untracked: true
paths:
- node_modules/
before_script:
- export BI_ENV="test"
script:
- "npm install --registry=http://代理地址 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/"
- "npm run build"
- "rsync -auvz dist/index.html ip::服务器开发分支目录/trunk/resources/views/index/"
- "rsync -auvz dist/* 静态资源cdn目录/trunk/bi/"
only:
- master 分支名称
Управление версиями
Раньше у нас такая ситуация была часто, требования v0.1 запущены, требования v0.2 протестированы, требования v0.3 находятся в разработке, теперь нужно исправить онлайн баги v1. 0, с помощью svn Можно обновить починенные файлы до трех веток, чтобы продолжить разработку, а обновления приходят и уходят.lock.
Если вы используете git для управления версиями, это намного удобнее, согласно спецификации ветки обычно используются четыре ветки.Developветка непрерывного развития,Releaseветка версии,Hotfixплотно закрепите ветки,MasterОсновная ветка онлайн-версии,
может видетьGitFlow工作流Информацию действительно намного проще использовать, чем ветку svn.
Модернизация и оптимизация строительных лесов
В настоящее время мы используем webpack 4.0 и vue-cli3.0, и компиляция выполняется очень быстро. Рекомендуется обновиться. Помните, что предыдущий проект долгое время использовал vue-cli2.0 для компиляции и упаковки.
Глобальные настройки Ajax
Исходный проект, используемыйjQuery.ajaxметод, на самом деле его тоже можно настроить глобально на перехват, мы используемaxios,существуетmain.jsуказанный в, наборкорневой путь, код состояния, токен, время ожиданияи другие глобальные настройки, код выглядит следующим образом:
// 引入axios
import axios from 'axios'
// axios配置
Vue.prototype.$http = axios
// 配置默认axios参数
axios.defaults.baseURL = '/'
axios.defaults.timeout = 1000000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
let token = localStorage.getItem('token')
if(token== null && router.currentRoute.path == '/login'){// 本地无token,不为登录 跳转至登录页面
router.push('/login')
}else{
if(config.data==undefined){
config.data = {
"token":token
}
}else{
Object.assign(config.data,{"token":token})
}
}
return config
}, function (error) {
iView.Message.error('请求失败')
return Promise.reject(error)
})
// 返回结果拦截
axios.interceptors.response.use(function (response) {
if(response.hasOwnProperty("data") && typeof response.data == "object"){
if(response.data.code === 998){// 登录超时 跳转至登录页面
iView.Message.error(response.data.msg)
router.push('/login')
return Promise.reject(response)
}else if (response.data.code === 1000) {// 成功
return Promise.resolve(response)
}
} else {
return Promise.resolve(response)
}
}, function (error) {
// 请求取消 不弹出
if(error.message != '0000'){
iView.Message.error('请求失败')
}
// 请求错误时做些事
return Promise.reject(error)
})
Асинхронные операции и обход данных
Первоначальный проект — это страховой проект, и у всех нет опыта работы в бизнес-системе, разделяющей фронт и бэкенд.Самый простой интерфейс, каждый интерфейс берется из словаря данных, а бизнес-логика выносится на передний план,Вызывает множество последовательных и параллельных асинхронных операций на внешнем интерфейсе., запрашивать различные интерфейсы, затем проходить и объединять различные данные, последовательные и параллельные, которые мы используемpromiseПишите, проблема асинхронной работы решена, данные операции используемlodash.js, оперативность быстрее почерка, эти две штуки можно углубить.
initializationTab(obj){
let This = this
return new Promise((resolve, reject) => {
This.$http
.post('/api/show/ograde-header',obj)
.then(function(response) {
return resolve(response.data.datas)
})
.catch(function(error) {
//数据丢失的状态
This.isContent=false //是否展示加载后内容
This.isLoading=false //是否展示loading
This.isContentError=true
This.isReady = false //是否展示数据准备中状态
reject(error)
});
})
}
Авторизоваться
Первоначальный вход в проект заключается в переходе на страницу входа jsp, а затем обратно на статическую страницу,sessionIDсохранить вcookie, установить сеанс,также можетFormОтправить, чтобы войти,Пройдите интерфейс нормально, он тоже будет вcookieсохранить вsessionIDУстановить сеанс.
Конечно, лучше всего разделить переднюю и заднюю части.JWTсхема, сгенерированнаяtokenставитьredisв, построить事务,tokenАвтоматически удалять по истечении срока действия,Если ты уйдешь раньше, тебя переоденутtokenотмечено, не проходите мимоtokenВы можете пройти,Обновление также легко решить, еслиtokenДоступ за 5 минут до истечения срока действия, создать новыйtokenВернуться к интерфейсу, для истекающегоtokenОтметьте его и удалите автоматически, когда истечет срок его действия.
Анимация H5
Мы сделали много попыток в анимации H5, теме Smurfs Minsheng Bank, арендной плате, наборе 3D, Xiaoxiaole и т. д., накопили определенное количество адаптации, временной шкалы, карты спрайтов, производительности анимации и т. д. my В редакторе MWeb, пожалуйста, обновите его позже, если у вас будет время.
Перед тем, как анимация Смурфиков должна быть использованаTweenMax.jsиgkaСгенерированная анимация кадра CSS делает такой сложный эффект, и производительность не особенно хороша.В конце концов, она работает с DOM.Если есть больше требований к анимации, вы должны быть более знакомы с ней.PIXI.js+TweenMax.jsДва инструмента, я только что сделал требование с ними,PIXI.jsСуществует множество вспомогательных инструментов, таких как загрузчики, спрайты, фильтры, физические движки, аудио и видео и т. д., с помощью которых можно добиться большинства эффектов H5, которые мы видим в кругу друзей.PIXI.jsслужба поддержкиcanvasиwebGLДва рендеринга.
Читать через API
Последний проект - полка vue, построенная мной, и функции и сценарии постепенно усложняются.Все еще необходимо читать больше API и документов и понимать принципы, чтобы легко использовать эти инструменты и эффективно завершать разработку. задачи, такие как рекурсия компонентов vue, кэш, принудительное обновление, микширование, фильтрация, конфигурация Axios по умолчанию, CancelToken и т. д. Сводка недавних заметок по проекту еще не завершена, сначала опубликуйте каталог и надейтесь на прогресс.
Если вы еще работаете над фронтендом, забудьте друг о друге в реках и озерах🤣😂.