Axios +Vue + themeleay
1.pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.1.15.RELEASE</version>
</dependency>
2.yml
spring:
application:
name: ecscwapinvoice
thymeleaf:
cache: false #关闭缓存，即使刷新 默认 true，关闭之后可以及时刷新页面
mode: HTML5 #默认 HTML5
encoding: UTF-8 # 默认 UTF-8
prefix: classpath:/templates/ #默认 classpath:/templates/
suffix: .html # 默认 .html
template-resolver-order: 1 #设置视图解析器优先级
3.HTML公共依赖抽离：
- 抽取公共依赖
- 全局axios禁用缓存
- 全局axios异步请求进度条
- 全局上下文路径：ctx
- 全局加密公共JS
commonThymeleafByVue.html
<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="unixstamp=${#dates.createNow().time}">
<head th:fragment="common_head(title,links)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script th:src="@{{ctx}/NewPageByVueJs/vue.min.js(v=${#dates.createNow().time},ctx=${staticpath})}"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" th:href="@{{ctx}/NewPageByVueJs/vantIndex.css(ctx=${staticpath},version=${#dates.createNow().time})}"/>
<link rel="stylesheet" th:href="@{{ctx}/NewPageByVueJs/components.css(ctx=${staticpath},v=${#dates.createNow().time})}"/>
<script th:src="@{{ctx}/NewPageByVueJs/vant.min.js(ctx=${staticpath},v=${#dates.createNow().time})}"></script>
<script src="//wapcq.189.cn/static/system/js/rsa/jsencrypt.js"></script>
<!--Axios请求-->
<script th:src="@{{ctx}/NewPageByVueJs/axios.min.js(ctx=${staticpath},v=${#dates.createNow().time})}" type="text/javascript"
charset="utf-8"></script>
<!--引入加载插件-->
<link rel="stylesheet" th:href="@{{ctx}/NewPageByVueJs/nprogress/nprogress.css(ctx=${staticpath},v=${#dates.createNow().time})}">
<script th:src="@{{ctx}/NewPageByVueJs/nprogress/nprogress.js(ctx=${staticpath},v=${#dates.createNow().time})}" charset="utf-8"></script>
<th:block th:replace="${links}"/>
<title th:replace="${title}">Not Vue Static Resource</title>
<script th:inline="javascript">
// 本地可以：var contentPath = [[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort() + #request.getContextPath() + '/'}]]
/*<![CDATA[*/
var contentPath = /*[[${staticpath}]]*/ 'Sebastian';
/*]]>*/
contentPath += "/";
var encrypt = new JSEncrypt(); //Axios get禁用缓存
axios.interceptors.request.use(config => {
/*axios拦截器，请求之前加载*/
NProgress.start(); //开始加载状态
if (/get/i.test(config.method)) { // 判断get 请求
config.params = config.params || {};
config.params.t = Date.parse(new Date()) / 1000;//添加时间搓
config.headers['Cache-Control'] = 'no-cache'; //设置请求头不缓存
}
if (/post/i.test(config.method)) {
config.headers['Cache-Control'] = 'no-cache'; //设置请求头不缓存
}
return config;
}, error => {
return Promise.reject(error);
}) /*axios拦截器，响应之后加载*/
axios.interceptors.response.use(response => {
NProgress.done();//完成之后加满
return response;
}, error => {
return Promise.reject(error);
});
</script>
</head>
4.Vue的JS基本生命周期：
new Vue({
el: '#app',
data: {
thisInvoiceType: "",//是月结发票还是实缴发票
noInvoiceList: false,//未查询到发票
}, created: function () {
this.loadingImage = true;
let InvoiceType = document.getElementById("flagByInvoice").value;
//请求数据
axios.get(contentPath + initUrlData)
.then(resp => {
this.dataHanderBYtime(resp);
}).catch(error => {
console.log(error)
})
},
mounted() {
document.title = this.thisInvoiceType == 1 ? '月度账单发票' : '充值金额发票';
},
watch: { //循环监听-属性
hebingkaipiao(newVal, oldVal) {
console.log(newVal, oldVal)
document.body.style.overflow= newVal ? 'hidden' : ''
}
},
methods: {
back() {
window.location.href = contentPath + "invoice/index?version=" + Math.random();
},
}
});
5.thymeleaf+Html ModelAndView add
<div style="display: none">
<input th:value="${invoiceType}" id="invoiceType">
</div>
6.详细页面使用公共组件
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="NewPageByVue/commonThymeleafByVue :: common_head(~{::title},~{})">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>开具发票</title>
</head>
<script th:src="@{{ctx}/NewPageByVueJs/js/InvoiceVue.js(ctx=${staticpath})}"></script>
<link rel="stylesheet" th:href="@{{ctx}/NewPageByVueJs/css/InvoiceVue.css(ctx=${staticpath})}"/>
7.axios常见使用
get请求：
axios.get(contentPath + "invoice/new/sortVerifyIdentity", {
params: {
sortCode: this.inputmoder1, //验证码
accNumber: this.thisSortTelSend //发送短信的号码
}
}).then(resp => {
if (resp.data.success) {
this.yzmCallbackMsg = "验证码输入成功";
this.Verification = false;//关闭弹窗
} else {
this.yzmCallbackMsg = "验证码输入错误，请重新输入！"
}
}).catch(error => {
console.log(error);
})
post请求:
axios.post(contentPath + 'invoice/new/sendupdateMoreDataBySession', JSON.stringify(sendData), {
headers: {
"Content-TYpe": "application/json;charset=utf-8",
"Cache-Control": "no-cache"
}
}).then(resp => {
if (resp.data.code == 200) {
window.location.href = contentPath + "invoice/new/updateMoreIsTrue?version=" + Math.random();
} else {
this.$dialog.alert({
message: resp.data.desc
})
}
}).catch(error => {
console.log(error); })
axios特别处理并发请求：
axios.all || axios.spread
let arrayAxiosPostRequest = [];//并发请求数组，未知格式
for (let ii = 0; ii < thisInvoiceId.length; ii++) {
let ThisId = thisInvoiceId[ii].id;
let invoiceType = this.invoiceType;
//装配并发请求数组
arrayAxiosPostRequest.push(this.axiosGaoBingFa(ThisId, invoiceType))
}
axios.all(arrayAxiosPostRequest).then(
axios.spread((...resp) => {//可变 ...扩展运算符将数组变成一个参数序列
let flagByRequest = true;//标志位初始化定制false
[...resp].forEach((item, index) => {
if (!item.data.success) {
flagByRequest = false;
}
});
//如果都是成功的就跳转
if (flagByRequest) {
//保存数据 ： 因开票接口有延迟 ： 保存这部分数据，显示开票中
axios.post(contentPath + "invoice/new/invoicingWaitState", this.kaipiaoInfo.data).then(resp => {
//开票成功提示页
window.location.href = contentPath + "invoice/new/invoicingSuceessPage?version=" + Math.random();
})
} else {
this.$dialog.alert({
message: "开票未全部成功"
})
} })
).catch(error => {
console.log(error)
});
axios拷贝双向绑定的data数据
this.A = this.B； //会有指针绑定效应
**this.A = {...this.B}; //ES6 解构赋值 ||| this.A = [...this.B]; ** //深度拷贝不存在指针影响 前提是对象
如果是字符串使用结构赋值：会把字符串解构成每个字符的数组；
字符串解构：=JSON.parse(JSON.stringify(this.invoiceInfo.accNbr));
Axios +Vue + themeleay的更多相关文章
- 前端笔记之Vue（七）Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- mock axios vue的数据传递关系
最近有一个项目要快速出一个前端demo,选择了vue-element框架(虽然其实很想用react,但是为了求快) 本人的基础只有初级的html/css/js知识,和python后端的一些简单工作,和 ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- 前端向服务器请求数据并渲染的方式（ajax/jQuery/axios/vue）
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- axios+vue实现动态渲染员工数据+数据是对象
<style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- vue 之 axios Vue路由与element-UI
一. 在组件中使用axios获取数据 1. 安装和配置axios 默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装. 在项目根目录中使用 npm安装包 npm install ...
- .Net Core WebAPI + Axios +Vue 实现下载与下载进度条
故事的开始 老板说:系统很慢,下载半个小时无法下载,是否考虑先压缩再给用户下载? 本来是已经压缩过了,不过第一反应应该是用户下的数量多,导致压缩包很大,然后自己测试发现,只是等待的时间比较久而已,仍然 ...
- axios + vue导出excel文件
(使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...
- Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
随机推荐
- [Golang] GO 语言工作环境的基本概念
1. GOPATH 和 GOROOT(环境变量) 1. GOROOT go 编译器.标准库等安装的地方,所有我们写的代码其实都是文本文件而已,需要编译器等工具将其加工成可执行文件或者库文件才能使用,每 ...
- 五、frp内网穿透客户端frpc.ini各配置参数详解
[必须]标识头[common]是不可或缺的部分 [必须]frps服务端IPserver_addr = 0.0.0.00.0.0.0为FRP服务端IP,客户端要填写为服务端已配置的对应的IP,或者是服务 ...
- parted创建磁盘分区并创建LVM(Linux合并多块大于2T的磁盘并合并到一个分区)
文章转载自:https://blog.csdn.net/likemebee/article/details/85630808
- 从nuxt开始的SEO之路
故事从一个"美好"的早上开始...... 大清早的来到公司,打开电脑,emm, 还是熟悉的味道,鱼儿被我摸熟了的味道......就在开始准备一天的摸鱼之旅的时候,一种不详的预感涌上 ...
- 高光谱图像分类简述+《Deep Learning for Hyperspectral Image Classification: An Overview》综述论文笔记
论文题目<Deep Learning for Hyperspectral Image Classification: An Overview> 论文作者:Shutao Li, Weiwei ...
- 通用 HTTP 签名组件的另类实现
1.初衷 开发中经常需要做一些接口的签名生成和校验工作,最开始的时候都是每个接口去按照约定单独实现,久而久之就变的非常难维护,因此就琢磨怎么能够写了一个比较通用的签名生成工具. 2.思路 采用链式调用 ...
- fileinput 的总结
fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...
- [Mysql] 两段提交
事务提交 Mysql 默认开启自动提交事务 两段提交 把一个事务分成两个阶段来提交,就是把redolog拆分成了prepare和commit两段 MySQL想要准备事务的时候会先写redolog.bi ...
- 在IDEA中使用Maven将SpringBoot项目打成jar包、同时运行打成的jar包（前后端项目分离）
1.maven教程官网 https://m.runoob.com/maven/ 2.理解Maven的构建生命周期(clean.Package) 3.在项目中使用maven进行打包 4.运行打包好的ja ...
- 二进制安装JDK和Tomcat
Oracle JDK的二进制文件安装 https://www.oracle.com/java/technologies/java-se-glance.html #官网下载地址 [root@rocky8 ...