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 ...
随机推荐
- dp-LIS LCS 模型
最长上升子序列问题: https://www.cnblogs.com/sxq-study/p/12303589.html 一:两遍LIS问题 1:题目: 怪盗基德是一个充满传奇色彩的怪盗,专门以珠宝为 ...
- C#,使用NPOI，导出excel文件
/// <summary> /// 导出excel文件 /// </summary> /// <param name="dt">Table表数据 ...
- 3.Ceph 基础篇 - RBD 块存储使用
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485253&idx=1&sn=24d9b06a ...
- 使用SkyWalking监控nginx （以openresty为例）
安装使用SkyWalking先看这篇文章,地址:https://www.cnblogs.com/sanduzxcvbnm/p/15829781.html 使用SkyWalking监控nginx借助的是 ...
- 2_爬豆瓣电影_ajax动态加载
爬豆瓣 什么是 AJAX ? AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = Asynchronous JavaScript and XML(AJAX = 异步 ...
- 数据火器库八卦系列之瑞士军刀随APP携带的SQLite
来源:云数据库技术 数据库打工仔喃喃自语的八卦历史 1. 为导弹巡洋舰设计,用在手机上的数据库 2. Small and Simple, and Better 3. 如何看出是自己的娃:产品定位,特点 ...
- TypeScript（一）基本使用
一:导入TypeScript npm i typescript 或者 npm i typescript -g(全局导入) 二:编译Ts文件为Js(道理跟Sass转Css一样) 在当前文件目录终端中输入 ...
- MQ系列6：消息的消费
MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 在之前 ...
- Goland Socket 服务
客户端发送消息 并接收服务端消息 package main import ( "fmt" "net" ) func main() { // conn, err ...
- uni-app 如何优雅的使用权限认证并对本地文件上下起手
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1.起因 最近有一个需求,需要使用自定义插件,来对接硬件功能,需要配合对手机的权限进行判断和提示,并在对接后对本地文件进行操作,这里给大家 ...