vue前端+java后端

最新推荐文章于 2024-03-10 22:43:05 发布
最新推荐文章于 2024-03-10 22:43:05 发布
阅读量6.2w 收藏 49
点赞数 13
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010772673/article/details/60473477
版权

方案一: 

在jsp里写vue 也就是所把jquery换成vue就行 (不知道这样能做spa吗? 能用vue-router吗? 好像也能做, 感觉会很乱, 适合微型项目)

java后端什么时候适合vue呢

写起来就发现了，展示型网站写进这些前端框架里实在太蠢了，又没什么页面内交互（一点击就要换页面），原生html还得照着这些框架的规矩改写，又累又没什么意义，完全跟后台模板没法比。
jsp渲染慢?，后台java运行慢？上消息队列把能异步的都异步啊，上负载均衡啊，上...。前台渲染慢？js/css等等静态文件上缓存上CDN啊。
中后端管理平台是很适合这些前端框架的



方案二:

既然使用vue，那就不要使用jsp了，jsp是后端渲染，生成页面发给浏览器，使用vue用浏览器渲染；

使用vue和java做单页面网站，浏览器第一次访问该网站，java把静态html页面和js等发给浏览器，浏览器点击跳转时前端模拟路由，然后js使用fetch,ajax这些发送HTTP请求数据，java接收HTTP请求后将数据返回后，vue接收请求获取数据，重新渲染显示页面。
因为无需渲染页面，java只负责使用rest收发json数据，性能肯定更高了
Wakamiya
关注
  • 13
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
专栏目录
html+CSS+js+VUE+element+java后台项目示例
08-20
包含html-CSS-javascript-vue-element等多项基础知识课件详解，为web开发提供基础技术。并包含一个web项目的示例代码，利于掌握Java后台和前端的程序设计流程。
vue前端与java后端交互
yuliang20171205的博客
12-26 2万+
前端写法:  后端布局:
【java+vue】前后端项目架构详细流程
最新发布
weixin_68266674的博客
03-10 1079
1.在磁盘上创建文件（web），并移到Vscode的工作区2.进入该文件的终端3.检测node和vue是否正常，若不显示版本号，则自行下载4.生成vue1.执行命令：vue create project按空格选择，回车则进行下一步保存本次配置（y）取个合适的名字，下次创建vue的时候就可以选择这个名，会默认使用这次的配置等待下载。。。。。下载完成如下如图所示。
Java+Vue项目部署到服务器
qq_31315703的博客
05-27 615
以上是Java+Vue项目部署到服务器上的基本步骤，具体实现细节还需要根据具体的项目和服务器环境来进行调整。在服务器上安装并配置Nginx服务器，将Vue项目打包成静态资源，并将静态资源放到Nginx服务器中。启动Tomcat和Nginx服务器，访问服务器的IP地址或域名，就可以访问Java+Vue项目了。配置Nginx服务器反向代理Tomcat服务器，以便Java和Vue项目能够一起运行。在服务器上安装并配置Tomcat服务器，将Java项目部署到Tomcat服务器中。
Vue（使用webpack）与java后端（使用springmvc与tomcat8）整合测试与部署方案
热门推荐
燃烧杯的博客
11-01 3万+
最近学习了一下基于vue和webpack的前端开发，于是就想着用Vue重写一遍我个人网站的代码，但是我的后端是老早以前就用java写好的(springmvc)，这就涉及到Vue与java后端进行整合开发的问题，我尝试着去网上找了找相关资料，确实在有的技术问答下面看到有人成功尝试过，但是还是比较小众的，没什么人贴出这其中遇见的问题和解决方案，我这里通过自己这几天的折腾来总结一下.
java+vue 前后端项目部署 服务器部署流程 包括nginx软件安装，服务器选择，域名配置
weixin_43500424的博客
05-18 3086
现在的web端项目大多数都是java+vue前后端分离的项目，都需要分开来部署，基本上都是部署在云服务器上的，这就涉及到选择和购买服务器，以及安装环境，本文记录的是在机器上安装软件，不在docker和宝塔上安装。下面请看详细的步骤吧，都是自己在工作中使用过的，本人待的是小公司，所以基本上没有涉及到自动化发布 CI/CD ，如果有需要，下期发docker+jekins 自动发布流程
关于java后端与vue-cli 项目开发项目实际例子
mcazmq的博客
03-06 8530
1、项目介绍：前段vue 采用脚手架进行开发（本人后端不太懂vue的原理什么路由什么的），后端java springmvc mybatis 采用跨域模式，所以前段axios请求方式都是“http://ip:端口号/项目名/接口“ 的形式进行交互。其中存在的问题暂时没发现，必定有弊端之处，还请前辈多指点。2、环境和配置这些不细说，简单贴出一些配置信息一些spring mvc 的配置 以及数据源的配置...
vue前端代码和后台Java代码联调
happy_bigqiang的博客
08-15 1万+
参考博客： Vue（使用webpack）与java后端（使用springmvc与tomcat8）整合测试与部署方案 ：https://blog.csdn.net/qq_33256688/article/details/78418110 前端写好的vue文件，浏览器无法识别，总体思路：需要把前端代码整合到后端的Java程序中，再进行部署才是完整的一套代码。 1、部署Vue前端项目： 命令行下...
前端(vue)联合后端(java)开发
wo_jiao_liukai的博客
05-27 673
遇到的问题首先就是前后端数据的传输，比如拿登录这个功能举例，需要前端把数据传输给后端，后端做第二次判定数据库有没有这个数据。 如下图： useraccout：为后端的对象名 this.ueseraccout:为获取到页面输入的属性值传给后端。 res：为后端传给前端的值 如果后端数据库内写的值，和前端匹配玩成，则为正确 即可登陆成功 。 反之则失败！ ...
【原创】SocketIO使用Vue前端+Java后端做一个后端向浏览器的实时推送功能
DCTANT的博客
08-13 2928
一、创建Socket.io的服务端 官网写的已经非常详细了：https://socket.io/get-started/chat/ 这里为了省事，直接晒代码了： 1、创建package.json { "name": "test_socketio", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified
研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip
10-16
研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程...
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip
01-10
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip...
echarts前端+Java后端数据=生成柱状图
01-08
前端 需注意：需要连接网络才可以使用,因为引入的echarst和vue和jquery都是访问网上的。 柱状图 var vm=new Vue({ el:#main, data:{ name:[中国,美国], type:[2,1] }, methods:{ //...
考拉开源仿微信uniapp前端+JAVA后端IM即时通讯
08-17
考拉开源仿微信uniapp前端+JAVA后端IM即时通讯
List集合使用泛型与不使用泛型有什么区别?
zeron_oo的专栏
02-27 2万+
例如：List lists=new ArrayList();和List lists=new ArrayList();他们两者有什么样区别？ 答: 从list中取出的值不一样，第一种的话取出来是object类型的，需要强制类型转换，而第二个不用，取出来之后直接就是string类型的
Js 添加删除HTML DOM 元素（节点）
zeron_oo的专栏
03-03 7851
添加: 这是一个段落 这是另一个段落 var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(pa
接口中同一个方法不写public，为什么在实现类中一定要写public呢？
zeron_oo的专栏
02-27 5216
首先，接口中所有方法默认都是public，至于为什么要是public，原因在于如果不是public，那么只能在同个包下被实现，可访问权限就降低很多了，那么在实现类中，实现的类相当于子类，子类的访问权限是不能比父类小的，而在java中一个类如果没有权限的修饰符，默认是friendly(同一个包内的其它类才可访问)，所以在实现类中一定要写public 补充: 访问权限   类   包
分页功能实现前端vue+java后端代码
05-31
前端 Vue.js 代码： ``` <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr v-for="product in products" :key="product.id"> <td>{{ product.id }}</td> <td>{{ product.name }}</td> <td>{{ product.price }}</td> </tr> </tbody> </table> <el-pagination v-if="total > 0" :page-size="pageSize" :total="total" :current-page="currentPage" @current-change="handlePageChange" /> </div> </template> <script> import axios from 'axios' export default { data() { return { products: [], currentPage: 1, pageSize: 10, total: 0 } }, mounted() { this.getProducts() }, methods: { getProducts() { axios.get('/api/products', { params: { page: this.currentPage, pageSize: this.pageSize } }).then(res => { this.products = res.data.list this.total = res.data.total }) }, handlePageChange(page) { this.currentPage = page this.getProducts() } } } </script> ``` 后端 Java Spring Boot 代码： ``` @RestController @RequestMapping("/api") public class ProductController { @Autowired private ProductService productService; @GetMapping("/products") public PageResult<Product> getProducts(@RequestParam Integer page, @RequestParam Integer pageSize) { return productService.getProducts(page, pageSize); } } ``` ``` @Service public class ProductServiceImpl implements ProductService { @Autowired private ProductRepository productRepository; @Override public PageResult<Product> getProducts(Integer page, Integer pageSize) { Sort sort = Sort.by(Sort.Direction.DESC, "id"); Pageable pageable = PageRequest.of(page - 1, pageSize, sort); Page<Product> productPage = productRepository.findAll(pageable); List<Product> productList = productPage.getContent(); long total = productPage.getTotalElements(); return new PageResult<>(productList, total); } } ``` ``` public interface ProductService { PageResult<Product> getProducts(Integer page, Integer pageSize); } ``` ``` public interface ProductRepository extends JpaRepository<Product, Long> { } ``` 以上是一个简单的Vue.js + Java Spring Boot实现分页功能的示例，具体实现还需要根据业务需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值