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 ...
随机推荐
- Object.keys的‘诡异’特性，你值得收藏！
先从'诡异'的问题入手 例1: 纯Number类型的属性 const obj = { 1: 1, 6: 6, 3: 3, 2: 2 } console.log('keys', Object.keys( ...
- Docker与Containerd使用区别
文章转载自:https://cloud.tencent.com/developer/article/1984040 Kubernetes 在 1.24 版本里弃用并移除 docker shim,这导致 ...
- Elasticsearch: 使用URI Search
在Elasticsearch中,我们可以使用_search终端进行搜索.这个在我之前的文章 "开始使用Elasticsearch (2)" 中有很多的描述.针对这种搜索,我们可以使 ...
- fastapi快速入门
fastapi是高性能的web框架.他的主要特点是: 快速编码 减少人为bug 直观 简易 具有交互式文档 基于API的开放标准(并与之完全兼容):OpenAPI(以前称为Swagger)和JSON ...
- k8s中使用到的各种证书图示
- 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
- P1600 [NOIP2016 提高组] 天天爱跑步 （树上差分）
对于一条路径,s-t,位于该路径上的观察员能观察到运动员当且仅当以下两种情况成立:(d[ ]表示节点深度) 1.观察员x在s-lca(s,t)上时,满足d[s]=d[x]+w[x]就能观察到,所以我们 ...
- 基于tauri打造的HTTP API客户端工具-CyberAPI
国庆长假和朋友聚会的时候,和朋友谈起最近这段时间捣鼓tauri,写了一个HTTP API客户端工具.『你写了这么多东西,其实有想过是为了啥不?』为了啥这是一个很大的命题,当初每个项目的时候都想过它应该 ...
- RAID5 IO处理之对齐读代码详解
1 总体流程 当一个读请求的覆盖范围落在一个chunk范围内时为对齐读,流程图如下所示: 2 入口 在RAID5的IO处理函数 make_request() 一开始进行了对齐读的判断和处理,代码如下所 ...
- 齐博x1 APP要实现直播的关键两步
大家务必要注意,缺少这两步,你的APP将不能实现直播, 也即点击直播按钮无法启动直播推流