vue整合dorado框架

Dorado 整合前端框架vue.js的开发和配置
一.搭建vue工程
• 开发的环境:node.js( v10.16.2) ,npm( v6.11.2)
通过Vue.js 提供一个官方命令行工具，可用于快速搭建应用。

在使用npm run dev启动前,我们可以将项目的启动端口改成8088,在my-project的config/index.js中修改

这样一个vue应用搭建好了,在浏览器中输入localhos:8088,出现vue的界面

二.在dorado后台整合springmvc处理请求
因为dorado本身封装springmvc,所以不需要引进其他包,只需配置springmvc的请求拦截即可
在WEB-INF/web.xml中添加servlet

spring org.springframework.web.servlet.DispatcherServlet

contextConfigLocation
/WEB-INF/spring-servlet.xml

spring
*.do

并在WEB-INF添加springmvc的相应的bean的配置文件spring-servlet.xml

<context:annotation-config />

<context:component-scan
base-package=“com.cupdata.controller”></context:component-scan>

将以后的controller类放在com.cupdata.controller下

package com.cupdata.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping(“vue”)
public class VueController {
@RequestMapping(“find”)
public String find() {
return “dorado后台的数据”;
}
}
通过在浏览器中直接访问,检查下配置是否成功

三.dorado页面嵌套vue页面
通过组件IframeTab绑定要嵌入的vue页面的访问路径

效果:

四.vue.js发送ajax调用dorado后台方法
首先vue发送ajax 使用axios组件,先在项目中安装axios
在my-project下执行命令
npm install axios

在my-project/src/main.js 引入

因为vuex项目启动是的8088端口,dorado项目使用的8080,它们不在一个域中,想要访问dorado后台方法,涉及到跨域问题,解决办法在my-project.config/index.js 的proxyTable 配置
proxyTable: {
‘/api’: {
target: ‘http://localhost:8080’, // 后台访问地址
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}

},

我们在发送请求时可以用/api代替http://localhost:8080

 还需要注意是,因为dorado有登录校验的权限,为了避免请求被重定向到登录页面,可以访问的请求暴露出来,在dorado-home的datasources.xml下配置添加:<bdf:anonymous-url urlPattern="/vue/find.do"/><bdf:anonymous-url urlPattern="/index.jsp"/>
<bdf:anonymous-url urlPattern="/images/*.*"/>
<bdf:anonymous-url urlPattern="/favicon.ico"/>

这样就可以获得dorado后台的数据

vue整合dorado框架相关推荐

vue 前端商城框架_前端工程师要掌握几个Vue框架
vue是一套用于构建用户界面的渐进式JavaScript框架,简单说Vue是类似于view的前端框架. vue开发核心是关注视图层,同时它更加容易与第三方库结合,再者我们在现有的项目中可以直接整合一起 ...
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
springboot+Vue整合Luckysheet，实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文 ...
SpringBoot基础学习之整合Swagger框架(上篇)
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java半年多时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 这个SpringB ...
视频教程-springboot+Vue整合前后端分离权限后台管理系统-Java
springboot+Vue整合前后端分离权限后台管理系统拥有八年的Java项目开发经验,擅长Java.vue.SpringBoot.springCloud.spring.springmvc.myb ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
【Vuetify】Vue 整合 Vuetify 学习分享
[Vuetify]Vue 整合 Vuetify 学习分享 Vuetify Material 风格演示 Vuetify 实乃设计废福音,他的颜值目前来讲是所有框架中我最喜欢的→_→ 大家可以先点击上方的 ...
java b2b2c shop 多用户商城系统源码- eureka集群整合hystrix框架
继之前项目继续整合hystrix框架,hystrix框架为Netflix的模块,是一个容错框架.当用户访问服务调用者的时候,如果服务提供者出现异常导致无法正常返回出现请求超时的情况,而服务调用者并不知 ...
SpringBoot2.0 整合 JWT 框架，解决Token跨域验证问题
SpringBoot2.0 整合 JWT 框架,解决Token跨域验证问题参考文章: (1)SpringBoot2.0 整合 JWT 框架,解决Token跨域验证问题 (2)https://www. ...

vue整合dorado框架

vue整合dorado框架相关推荐

最新文章

热门文章