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 ...
随机推荐
- Linux 压缩、解压缩命令
Linux 压缩.解压缩命令 tar 语法命令 tar [options-] [files] options: 选择 描述 -A 追加tar文件至归档 -c 创建一个新文档 -d 找出归档和文件系统的 ...
- Java Socket底层实现浅析
最近在学Java的socket编程,发现Java可以很简单的通过socketAPI实现网络通信,但是我一直有个疑问,Java的socket的底层是怎么实现的? 如果没记错的话Java的底层是C和C++ ...
- Python数据科学手册-机器学习: 决策树与随机森林
无参数 算法 随机森林 随机森林是一种集成方法,集成多个比较简单的评估器形成累计效果. 导入标准程序库 随机森林的诱因: 决策树 随机森林是建立在决策树 基础上 的集成学习器 建一颗决策树 二叉决策树 ...
- ProxySQL(10)：读写分离方法论
文章转载自:https://www.cnblogs.com/f-ck-need-u/p/9318558.html 不同类型的读写分离 数据库中间件最基本的功能就是实现读写分离,ProxySQL当然也支 ...
- 通俗易懂理解 MySQL B+树、数据存储、索引等知识
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485630&idx=1&sn=681c9c0d ...
- 6.使用nexus3配置yum私有仓库
yum相较于rpm,能够更好地解决安装软件时的依赖包问题,使用yum安装更简单更方便.搭建本地YUM源服务器,可以避免升级安装软件时占用公网带宽:有了本地YUM源服务器,可以解决无法连接Interne ...
- 使用Receiver接收告警信息
告警接收器可以通过以下形式进行配置: receivers: - <receiver> ... 每一个receiver具有一个全局唯一的名称,并且对应一个或者多个通知方式: name: &l ...
- 关于linux的一点好奇心（五）：进程线程的创建
一直以来,进程和线程的区别,这种问题一般会被面试官拿来考考面试者,可见这事就不太简单.简单说一点差异是,进程拥有独立的内存资源信息,而线程则共享父进程的资源信息.也就是说线程不拥有内存资源,所以对系统 ...
- 详解JS中 call 方法的实现
摘要:本文将全面的,详细解析call方法的实现原理 本文分享自华为云社区<关于 JavaScript 中 call 方法的实现,附带详细解析!>,作者:CoderBin. 本文将全面的,详 ...
- Node.js（二）express
npm init -y(初始化项目) npm install express(引入express) npx express-generator -e(自动生成模板.添加对 ejs 模板引擎的支持) a ...