后台使用freeMarker和前端使用vue的方法及遇到的问题

一：freeMarker的使用

1：java后台使用freeMarker是通过Model，将值传给前端：

如：

@Controller
public class MobileNewsFreeMarkerController {
　　@RequestMapping("page/test")
　　public String Test(Model model,HttpServletRequest request){
　　　　//获取项目路径　　
　　　　String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath()+"/";
　　　　//将页面路径通过model传给前台
　　　　model.addAttribute("basePath", basePath);
　　　　//通过HttpServletRequest 获取url中的值，如code值
　　　　String code = request.getParameter("code");
　　　　//将获取的code参数传给前台
　　　　model.addAttribute("code ", code );
　　　　//页面跳转
　　　　return "page/test";
　　}
}

2：前端页面获取后台传输的值（freeMarker传输的值只能在html页面获取）

注：这里是结合vue

第一步：在js中定义vue的相关参数：

var vm = new Vue({
　　el: '#rrapp',
　　data: {
　　　　basePath:"", //项目路径
　　　　code : "", // code参数
　　},
..........（vue后面内容省略）

第二步：再在页面接收后台传输的值

<head>
　　<script type="text/javascript">
　　　　$(document).ready(function() {
　　　　　　<#if basePath??>
　　　　　　　　vm.basePath="${basePath}";
　　　　　　</#if>
　　　　　　<#if userId??>
　　　　　　　　vm.code ="${code }";
　　　　　　</#if>
　　　　});
　　</script>
</head>

二：使用中主要遇到的问题

1：Vue存在调用的先后顺序，虽然html页面将后台传输的值付给vue的data中的参数，但是在mounted中是无法使用的时候获取的还是创建的vue的时候data中赋的值，并不会使用html赋的值：

如：

var vm = new Vue({
　　el: '#rrapp',
　　data: {
　　　　basePath: "",
　　　　code :"",
　　},
mounted: function () {
var _this = this;
console.log(_this.basePath);
//输出的还是：""，并不会输出html赋的值，所有在这里无法使用
}

2：但是在vue中methods内的方法是可以直接使用的；初始化如果需要html中传输的参数，可以使用以下方法：

$(function () {
　　vm.getData(vm.basePath,vm.code);
});
var vm = new Vue({
　　el: '#rrapp',
　　data: {
　　　　basePath: "",
　　　　code :"",
　　},
methods: {
　　getData: function (baseUrlFlag,codeFlag) {
　　　　var _this=this;
　　　　_this.basePath= baseUrlFlag;
　　　　_this.code =codeFlag;
　　　　//进行初始化业务操作！
　　},
}

总结

以上所述是小编给大家介绍的后台使用freeMarker和前端使用vue的方法及遇到的问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Freemarker 最简单的例子程序

    Freemarker 最简单的例子程序 freemarker-2.3.18.tar.gz http://cdnetworks-kr-1.dl.sourceforge.net/project/freemarker/freemarker/2.3.18/freemarker-2.3.18.tar.gz freemarker-2.3.13.jar: 链接: http://pan.baidu.com/s/1eQVl9Zk 密码: izs5 1.通过String来创建模版对象,并执行插值处理 执行后,控制台

  • springboot整合freemarker详解

    springboot整合freemarker详解

    前提: 开发工具:idea 框架:spring boot.maven 1.pom文件添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> <version>1.4.1.RELEASE</version> </dependency>

  • java Freemarker页面静态化实例详解

    Freemarker FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与 Web 容器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP.它不仅可以用作表现层的实现技术,而且还可以用于生成 XML,JSP 或 Java 等. 目前企业中:主要用 Freemarker 做静态页面或是页面展示 总结:freemarker 模版引擎,可以使用 Freemarker 模版生成 html 页面. Freemarker 语法 /*

  • Java用freemarker导出word实用示例

    Java用freemarker导出word实用示例

    最近一个项目要导出word文档,折腾老半天,发现还是用freemarker的模板来搞比较方便省事,现总结一下关键步骤,供大家参考,这里是一个简单的试卷生成例子. 一.模板的制作 先用Word做一个模板,如下图: (注意,上面是有表格的,我设置了边框不可见)然后另存为XML文件,之后用工具打开这个xml文件,有人用firstobject XML Editor感觉还不如notepad++,我这里用notepad++,主要是有高亮显示,和元素自动配对,效果如下: 上面黑色的地方基本是我们之后要替换的地

  • springmvc整合freemarker配置的详细步骤

    一.对应的导包(有些包是不必须的) <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  • 详解MyEclipse中搭建spring-boot+mybatis+freemarker框架

    详解MyEclipse中搭建spring-boot+mybatis+freemarker框架

    1.在MyEclipse里创建一个maven项目.File>New>Maven Project: 勾选图中红色部分,然后点击Next. 2.填写下图中红色部分然后点击Finish. 3.此时一个maven项目已经生成,目录结构如下: 4.打开pom.xml在里面编辑如下内容: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSche

  • java、freemarker保留两位小数

     一.Java保留2位小数 double acc = 22.4322; String accX = String.format("%.2f", acc); 二.freemarker保留两位小数 <#if centerFreeSize??> ${centerFreeSize?string("#.##")} <#else> 0.00 </#if> 补充:freemarker保留小数 freemarker保留两位小数 方法一 #{num

  • 后台使用freeMarker和前端使用vue的方法及遇到的问题

    一:freeMarker的使用 1:java后台使用freeMarker是通过Model,将值传给前端: 如: @Controller public class MobileNewsFreeMarkerController { @RequestMapping("page/test") public String Test(Model model,HttpServletRequest request){ //获取项目路径 String basePath = request.getSche

  • 一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $lis

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu

  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    目录 前言 RBAC模型 代码实现 登录 菜单信息 动态路由筛选 总结 前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由.这就是我们通常所说的动态路由权限,实现路由权限的方案有多种,比较常用的是由前端使用addRoutes(V3版本改成了addRoute)动态挂载路由和服务端返回可访问的路由菜单这两种.今天主要是从前端角度,实现路由权限的功能. RBAC模型 前端实现路由权限主要是基于RBAC模型. RBAC(Role-Based Access Contr

  • 小白教程|一小时上手最流行的前端框架vue（推荐）

    小白教程|一小时上手最流行的前端框架vue（推荐）

    前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架.相比angular和react,vue更加轻巧.高性能.也很容易上手.大家也可以移步vue官网,看一下它的介绍和核心功能介绍.简单粗暴的理解就是:用vue开发的时候,就是操作数据,然后vue就会处理,以数据驱动去改变DOM.使用vue,我们可以集中精力于如何处理数据上,数据改变后,页面显示也会随之改变.相比jquery那种操作DOM元素的开发方式,能有效提高开发效率,个人觉

  • 前端框架Vue父子组件数据双向绑定的实现

    目录 一.父子组件单向传值 1.父向子传值 2.子向父传值 二.父子组件数据双向绑定 实现思路: 父 向 子 组件传值:使用 props 属性.( props 是property[属性] 的复数简写 ) 子 向 父 组件传值:使用自定义事件. 一.父子组件单向传值 1.父向子传值 父向子组件传值,子组件接收到数据之后,保存到自己的变量中. //父组件写法 <cld :numP="num" ></cld> //子组件定义以及数据 components:{ cld:

  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    目录 1.直接使用 2.设置默认值 3.多个slot用法 4.作用域插槽 5.动态插槽名 1.直接使用 新建组件 Article <template> <div> 日期:2022-01-15 <slot></slot> </div> </template> 新建 Learn,并在 Learn 中使用 Article Learn.vue 和 Article.vue 在同一文件夹下 <template> <div>

  • 前端架构vue动态组件使用基础教程

    前端架构vue动态组件使用基础教程

    目录 1.基本使用 2.配合 keep-alive使用 1.基本使用 新建组件 Article.vue <template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店.予买田其间,因往相田得疾.</p> <p>闻麻桥人庞安常善医而聋.遂往求疗.</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意.</p> <p>余戏之曰:"余以手为口,君以眼为耳,皆一时异人也.&

  • Rainbond对前端项目Vue及React的持续部署

    Rainbond对前端项目Vue及React的持续部署

    目录 前言: 部署前检查 1.1 添加 nodestatic.json 文件 1.2 添加 web.conf 文件 1.3 源码部署Vue项目 常见问题 前言: 以往我们在部署 Vue.React 前端项目有几种方法: 项目打包好之后生成dist目录,将其放入nginx中,并进行相应的访问配置. 将项目打包好放入tomcat中. 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下 直接运行一个前端server,类似本地开发那

  • node后端与Vue前端跨域处理方法详解

    目录 node.js后端跨域解决方案 前端vue项目 前端axios请求 node.js后端跨域解决方案 先看后端的入口文件: app.js const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const expressJWT = require('express-jwt') const app = express(); const

随机推荐