В последнее время я работаю над небольшим проектом, я работал на нескольких системах, в основном используя Extjs и SpringMVC. Vue кое-что знает, и после прочтения официальной документации он чувствует себя довольно хорошо (по сравнению с Extjs, слово «довольно хорошо» на самом деле не может быть выражено...). Поскольку исходная архитектура SpringMVC была построена другими, она была разработана только в соответствии с картиной тыквы, и не было достаточно энергии, чтобы изучить и понять ее в деталях. Затем я определился с планом этого проекта, Vue плюс Springboot, обучение практически с нуля на практике, хотя я находился под большим давлением из-за сжатых сроков, но в итоге разработка была завершена в соответствии с графиком~
Схема архитектуры
внешний интерфейс:Vux Сделать мобильную веб-версию (порекомендовал друг, и она действительно скользкая. Документация относительно полная, но я так и не разобрался, как пользоваться отметками InlineCalendar)
задняя часть:Springboot Обратитесь к колонке @Mr_ рано утром за пошаговой структурой. благодарный!
база данных:MySQL
проверка маршрутизации
1. Определите маршрут: установив мета, чтобы определить, требуется ли проверка, я написал их все
const routes = [
{
path: '/', component: Login},
{
path: '/home',
meta:{auth:true}, // 设置当前路由需要校验 不需要校验的路由就不用写了
component: Home
},{
path: '/Reserve',
meta:{auth:true},
component: Reserve
},{
path: '/Cancel',
meta:{auth:true},
component: Cancel
},{
path: '/WorkInfo',
meta:{auth:true},
component: WorkInfo
},{
path: '/Detail/:type/:date',
meta:{auth:true},
component: Detail
}]
const router = new VueRouter({ routes})2. Перехватывайте каждый запрос через ловушку маршрутизации, чтобы определить, был ли он зарегистрирован.
Здесь есть небольшая яма, я изначально хранил информацию о пользователе в Vuex, а потом пошел ее верифицировать, я с большим энтузиазмом обновил ее, и это был GG. Позже, после проверки данных, обновление данных в Vuex будет очищено, а sessionStorage используется для хранения информации о пользователе для проверки. Он очищается только при закрытии браузера. (Разница между localStorage заключается в базовых знаниях, но я использую его впервые~)
//路由拦截router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)){
var userInfo = JSON.parse(sessionStorage.getItem('userInfo')); // 对路由进行验证
if(userInfo) { // 已经登陆
next() // 正常跳转到你设置好的页面
}
else{ // 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
next({path:'/',query:{ Rurl: to.fullPath} })
}
}
else{
next()
} })междоменный запрос
Разделение фронтенда и бекенда вызовет междоменные проблемы, и мое решение очень грубое.
1. Springboot Controller добавляет аннотации для междоменных ресурсов.
@CrossOrigin(origins = "*", maxAge = 3600)
Не спрашивайте меня, почему, я не знаю, это все равно работает так, разрешая все запросы из разных источников. У Ruan Shen есть статья с подробным введениемПодробное объяснение CORS для совместного использования ресурсов между доменамиЯ не смотрел внимательно.
2. Единый базовый URL
Vux использует axios, я это знаю, но не понимаю в этом серьезно. Я не знаю, как настроить BaseUrl, поэтому использовал глупый метод: глобальные переменные. Я знаю, что Webpack может различать массовое производство и тестовую среду и выделять URL соответственно, но у меня нет времени и сил на его изучение. Давайте изучим его после завершения проекта~
Создано в конфиге интерфейсаglobal.jsФайл (На самом деле, что угодно~)
const BASE_URL ="localhost:8080/"export default{ BASE_URL}Импортируйте его в main.js и добавьте в глобальную переменную Vue:
import global_ from "./../config/global"Vue.prototype.GLOBAL = global_;Затем в компоненте вы можете ссылаться на него следующим образом:
this.$http
.post(this.GLOBAL.BASE_URL+"user/login?id="+this.id+"&password="+this.password)
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log('error'+error);
});Но, при этом, во время сборки будет сообщено об ошибке. Я забыл содержание ошибки. После поиска кажется, что формулировка global неправильно разбирается ES6, и ее нужно разбирать с помощью babel. Решение состоит в том, чтобы изменить файл Webpack.base.conf.js.
Первоначальная конфигурация:
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
。。。Увеличивать resolve('config/global.js')
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('config/global.js')]
},
。。。Развертывание пакета
Я сделал jar-пакет для бэкенда, у Springboot есть свой сервер Tomcat, я чувствую, что нет необходимости делать war-пакет и помещать его в контейнер.
1. Во-первых, я попытался поместить файлы (статический каталог, файл index.html) в папку dist из внешней сборки в разделе resources/static Springboot:
В соответствии с конфигурацией по умолчанию, предоставленной Spring Boot для статического сопоставления ресурсов, само собой разумеется, что /index.html может найти файл index.html в этом каталоге. Но это показывает, что интерфейс не определен и перехвачен. После проверки информации должно оказаться, что в WebConfigurer используется метод перехвата SpringMvc. Так добавлено
registry.addResourceHandler("/static/**").addResourceLocations( "classpath:/static/");Я надеюсь, что смогу получить к нему доступ через /staitic/index.html, чтобы можно было получить доступ к индексу, но файл js заблокирован ~ Я не могу найти решение, поэтому я сдался ~ Это должно быть написано неправильно, Надеюсь боги подскажут. Позже мне понадобился URL-адрес выпуска apk, поэтому я изменил индекс на страницу загрузки apk~ О, загрузка apk также была заблокирована, и конфигурация была изменена, чтобы решить:
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("swagger-ui.html")
.addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("doc.html")
.addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/static/**").addResourceLocations( "classpath:/static/");
registry.addResourceHandler("/app-release.apk").addResourceLocations( "classpath:/static/");
registry.addResourceHandler("/webjars/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/");
super.addResourceHandlers(registry);
}2. Разверните с помощью Nginx
Не используйте localhost для внешнего запроса ajax, используйте IP-адрес напрямую, загрузите Nginx и измените файл конфигурации:
server {
listen 8079; 、、端口号
...
root /front/dist; //dist文件夹路径
index index.html index.htm;
add_header Access-Control-Allow-Origin "*";
...
}Будьте осторожны, чтобы не дважды щелкнуть nginx.exe напрямую, это сделает невозможным перезапуск и остановку nginx после изменения конфигурации, вам необходимо вручную закрыть все процессы nginx в диспетчере задач.
В каталоге nginx.exe откройте инструмент командной строки и используйте команду запустить/остановить/перезапустить nginx
Начало nginx: запустить nginx
нгинкс -s reload : перезагрузка вступает в силу после изменения конфигурации.
нгинкс -s reopen : повторно открыть файл журнала
нгинкс -t -c /path/to/nginx.conf Проверить правильность файла конфигурации nginx
Отключить нгинкс:
нгинкс -s stop : быстро остановить nginx
нгинкс -s quit : полностью и упорядоченно остановить nginx
Эпилог
На данный момент практика разделения фронтенда и бекенда Vue и Springboot в основном завершена.Конечно, остается еще много проблем и знаний, которые нужно усвоить и понять самому. Поскольку и содержание, и технология моей собственной работы на самом деле не имеют к ним отношения, а вложенная энергия ограничена, я могу рассчитывать только на то, что найду время для самостоятельного обучения. Пожалуйста, сообщите о проблемах и недостатках архитектуры. Долго читая Наггетс, я впервые написал статью, и обнаружил, что у меня вообще нет навыков письма в технической области, ха-ха