详细介绍解决vue和jsp结合的方法

emm...实训后的小组作业是做一个培训基地的网站，但是老师教了一个学期的jsp后台..
但我不想用jsp写前端...太傻了，遂决定用vue-cli+jsp的方式做这个项目。

首先，vue-cli基于node监听端口进行调试，也就是Localhost:8080，但同时tomcat监听的端口也是8080，我选择把tomcat的端口改成8081来防止两者冲突。（改端口的方法一搜一大把）

这个api中的地址（因为是8080向8081发出请求，所以会引起跨域），需要反向代理一下，在config/index.js下，修改一下proxy：

然后在vue中，通过axios发出异步get请求

得到数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何在vue项目中嵌入jsp页面的方法(2种)

    今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本:但是发现并非想象的那么简单 创建一个server.vue组件加载jsp页面 1 .第一种(使用 v-html进行jsp 渲染) server.vue <template> <div class="docker-server"> <div v-html="pageContent"></div> </di

  • 详细介绍解决vue和jsp结合的方法

    emm...实训后的小组作业是做一个培训基地的网站,但是老师教了一个学期的jsp后台.. 但我不想用jsp写前端...太傻了,遂决定用vue-cli+jsp的方式做这个项目. 首先,vue-cli基于node监听端口进行调试,也就是Localhost:8080,但同时tomcat监听的端口也是8080,我选择把tomcat的端口改成8081来防止两者冲突.(改端口的方法一搜一大把) 这个api中的地址(因为是8080向8081发出请求,所以会引起跨域),需要反向代理一下,在config/inde

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • Android 通过Intent使用Bundle传递对象详细介绍

    Android 通过Intent使用Bundle传递对象详细介绍

    Android 通过Intent使用Bundle传递对象 Android开发中有时需要在应用中或进程间传递对象,下面详细介绍Intent使用Bundle传递对象的方法. 被传递的对象需要先实现序列化,而序列化对象有两种方式:java.io.Serializable和android.os.Parcelable Java中使用的是Serializable,而谷歌在Android使用了自定义的Parcelable. 两种序列化方式的区别: 1.在使用内存的时候,Parcelable比Serializa

  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的. 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类.还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎

  • vue中使用cropperjs的方法

    用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">

  • vue 动态绑定背景图片的方法

    vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div> 1.backgroundImage <div

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

随机推荐