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

2


spring
*.do

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

base-package=“com.cupdata.controller”>

将以后的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下配置添加:
 
 

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