前后端vue-springboot项目集成pageoffice

2 篇文章 0 订阅
2 篇文章 0 订阅
  • 后端Springboot项目
  1. 在您项目的pom.xml中通过下面的代码引入PageOffice依赖。

pageoffice.jar的所有Releases版本都已上传到了Maven中央仓库,具体您要引用哪个版本请在Maven中央仓库地址中查看,建议使用Maven中央仓库中pageoffice.jar的最新版本。(Maven中央仓库中pageoffice.jar的地址:https://mvnrepository.com/artifact/com.zhuozhengsoft/pageoffice)

<dependency>
     <groupId>com.zhuozhengsoft</groupId>   
  <artifactId>pageoffice</artifactId>   
  <version>5.3.0.4</version>
</dependency>
  1. 在您项目的启动类Application类中配置如下代码。
@Bean
   public ServletRegistrationBean pageofficeRegistrationBean()  {
com.zhuozhengsoft.pageoffice.poserver.Server poserver = new com.zhuozhengsoft.pageoffice.poserver.Server();
/**如果当前项目是打成jar或者war包运行,强烈建议将license的路径更换成某个固定的绝
*对路径下,不要放当前项目文件夹下,为了防止每次重新发布项目导致license丢失问题。
* 比如windows服务器下:D:/pageoffice,linux服务器下:/root/pageoffice
 */
 //设置PageOffice注册成功后,license.lic文件存放的目录(该目录一定要先创建好)
 poserver.setSysPath(poSysPath);
 //poSysPath可以在application.properties这个文件中配置,也可以直设置文件夹路径,比如:poserver.setSysPath("D:/pageoffice");
  ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
  srb.addUrlMappings("/poserver.zz");
  srb.addUrlMappings("/posetup.exe");
  srb.addUrlMappings("/pageoffice.js");
  srb.addUrlMappings("/jquery.min.js");
  srb.addUrlMappings("/pobstyle.css");
  srb.addUrlMappings("/sealsetup.exe");
  return srb;
  }
  1. 新建Controller并调用PageOffice。例如:
 @RequestMapping(value="/Word")
 @ResponseBody
    public String showWord(HttpServletRequest request) {
        PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
        //设置服务页面,/api是前端vue项目的代理地址
        poCtrl.setServerPage("/api/poserver.zz");
        poCtrl.addCustomToolButton("保存", "Save", 1);
        poCtrl.addCustomToolButton("另存为", "SaveAs", 12);
        poCtrl.addCustomToolButton("打印设置", "PrintSet", 0);
        poCtrl.addCustomToolButton("打印", "PrintFile", 6);
        poCtrl.addCustomToolButton("全屏/还原", "IsFullScreen", 4);
        poCtrl.addCustomToolButton("-", "", 0);
        poCtrl.addCustomToolButton("关闭", "Close", 21);
        //设置保存方法的url
        poCtrl.setSaveFilePage("/api/SimpleWord/save");
        //打开word
        poCtrl.webOpen("/api/doc/SimpleWord/test.doc", OpenModeType.docNormalEdit, "张三");
        return  poCtrl.getHtmlCode("PageOfficeCtrl1");
    }
  • 前端Vue项目
    1. 在您Vue项目的根目录下index.html中引用后端项目根目录下pageoffice.js文件。例如:
<script type="text/javascript" src="http://localhost:8081/samples-springboot-back/pageoffice.js"></script>
  1. 在您要打开文件的Vue页面,通过超链接点击或者按钮点击触发调用POBrowser打开一个新的Vue页面。比如通过超链接打开了一个新的Word.vue的空白页面,代码如下:
<a href="javascript:POBrowser.openWindowModeless('SimpleWord/Word','width=1150px;height=900px;');">
  1. 在Word.vue页面中通过vue的create钩子函数通过axios去调用后端打开文件的controller。
created: function () {
    //由于vue中的axios拦截器给请求加token都得是ajax请求,所以这里建议用axios方式去请求后台打开文件的controller方法
    axios
      .post("/api/SimpleWord/Word")
      .then((response) => {
        this.poHtmlCode = response.data;
      })
      .catch(function (err) {
        console.log(err);
      });
  },
  1. 在Word.vue页面中通过v-html标签将上一步axios请求返回的data输出到当前页面的某个div(这个div用来存放PageOffice控件)中,例如:
  <div style="height: 800px; width: auto" v-html="poHtmlCode" />
  1. 在Word.vue页面的methods方法中添加PageOffice中常用的保存,打印等方法。例如:
methods: {
//控件中的一些常用方法都在这里调用,比如保存,打印等等
/**
 * Save(),callParent()等方法都是/api/SimpleWord/Word这个后台controller中PageOfficeCtrl控件通过poCtrl.addCustomToolButton定义的方法。
 */
Save() {
  document.getElementById("PageOfficeCtrl1").WebSave();
}
},
  1. 在Word.Vue页面的mounted方法中将上一步的PageOffice中的自定义保存挂载到window对象上。比如:
mounted: function () {
// 将PageOffice控件中的方法通过mounted挂载到window对象上,只有挂载后才能被vue组件识别
window.Save = this.Save;
},

在这里插入图片描述

### 回答1: 外卖项目前后端分离是指将项目的前端部分和后端部分进行分离开发,前端使用Vue框架,后端使用Spring Boot框架。 前端使用Vue框架可以提供良好的用户界面和交互体验。Vue具有组件化的特点,使得前端开发更加模块化和可维护。同时,Vue的数据绑定和响应式设计可以帮助实现快速更新页面的功能。通过Vue,用户可以方便地浏览外卖项目的菜单、下单、支付等操作,提升用户的使用体验。 后端使用Spring Boot框架可以提供强大的后台支持。Spring Boot是一种轻量级的Java框架,可以快速搭建和部署项目,减少开发的复杂度。使用Spring Boot,开发人员可以方便地实现外卖项目的后台逻辑,例如订单的处理、菜单的管理、支付的接口等。同时,Spring Boot集成了许多常用且可靠的开源库,为项目提供了高效、稳定的基础设施。 前后端分离的优势在于前端和后端可以并行开发,提高开发效率。前端和后端之间通过定义接口进行通信,降低了耦合度,灵活性更强。同时,单独部署前端和后端也可以提高项目的可维护性和可扩展性。例如,当需要添加新的功能或修改现有功能时,只需要修改相应的前端或后端代码,而不会影响到整个项目。 总之,外卖项目前后端分离以及使用VueSpring Boot框架的设计选择,可以帮助实现一个高效、稳定、可扩展的外卖平台。 ### 回答2: 外卖项目采用前后端分离的架构,前端使用Vue框架,后端采用Spring Boot框架。 前端使用Vue框架可以实现用户界面的可视化设计和交互体验。Vue框架具有简单易用、灵活可扩展、高效性能等特点,适用于构建复杂的单页面应用(SPA)。通过Vue框架,可以实现用户注册、登录、浏览菜单、购物车管理、订单处理等功能的前端设计和开发。前端通过调用后端接口,获取后端处理的数据,并将数据展示在用户界面上。 后端使用Spring Boot框架可以实现业务逻辑的处理和数据存储。Spring Boot框架提供了快速构建、简化配置和集成多种功能的特性,适用于快速开发和维护可靠的应用程序。通过Spring Boot框架,可以处理用户注册、登录验证、菜单管理、订单处理等业务逻辑,并与数据库进行交互,存储与外卖项目相关的数据。后端还需要提供RESTful接口,供前端调用和交互。 前后端分离架构的好处是可以实现前端与后端的解耦,提高开发效率和维护性。前端和后端可以同时进行开发,并可采用不同的技术栈,使得团队成员能够专注于自己的领域。前后端分离还可以实现多端复用,例如可以用同一组后端接口提供给Web端和移动端调用。 总的来说,外卖项目采用前后端分离的架构,借助VueSpring Boot框架实现了用户界面的展示和交互以及业务逻辑的处理和数据存储,从而使得项目开发更加高效和可维护。 ### 回答3: 外卖项目采用前后端分离的架构,前端使用Vue.js框架进行开发,后端使用Spring Boot框架进行开发。 前端使用Vue.js框架的原因是因为Vue.js具有简洁、高效、灵活的特点,能够轻松构建交互式的用户界面。Vue.js还拥有一套完整的生态系统,能够方便地进行组件化开发,并提供了强大的工具来处理数据和状态的变化。 后端使用Spring Boot框架的原因是因为Spring Boot是一个简化了Spring开发的微框架,能够快速构建可独立运行的、生产级的应用。Spring Boot提供了大量的开箱即用的特性,如自动配置、快速开发等,能够极大地提高开发效率。 在外卖项目中,前端负责用户界面的展示和交互逻辑的实现。前端通过Vue.js进行组件化开发,将页面拆分为多个可复用的组件,提高开发效率和代码维护性。前端还通过Vue.js提供的路由功能,实现不同页面之间的跳转和导航。同时,前端还与后端通过HTTP协议进行通信,获取后端提供的数据和服务,并将其展示给用户。 后端负责处理前端发送的请求,并根据业务逻辑进行相应的处理,最终返回数据给前端。后端还负责与数据库交互,对数据进行增删改查操作。后端使用Spring Boot提供的RESTful风格的API,能够轻松构建出符合规范的接口。同时,后端还可以利用Spring Security进行权限管理,确保只有具备相应权限的用户才能访问特定的接口。 综上所述,外卖项目采用前后端分离的架构,前端使用Vue.js框架进行开发,后端使用Spring Boot框架进行开发,能够提高开发效率和代码的可维护性,同时还能够满足用户对于界面交互和数据操作的需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值