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 ...
随机推荐
- CMU 15-445 Project 0 实现字典树
原文链接:https://juejin.cn/post/7139572163371073543 项目准备 代码.手册 本文对应 2022 年的课程,Project 0 已经更新为实现字典树了.C++1 ...
- 002从零开始入门Entity Framework Core——DbContext生存期、配置和初始化
阅读须知:本文为入门介绍.指引文章,所示代码皆为最简易(或仅为实现功能)的演示示例版本,不一定切实符合个人(企业)实际开发需求. 一.DbContext生存期 DbContext 的生存期从创建实例时 ...
- 【项目实战】CNN手写识别复杂模型的构造
感谢视频教程:https://www.bilibili.com/video/BV1Y7411d7Ys?p=11 这里开一篇新博客不仅仅是因为教程视频单独出了1p,也是因为这是一种代码编写的套路,特在此 ...
- Elasticsearch启动https访问
Elasticsearch上操作 前提:已设置密码访问 ./bin/elasticsearch-certutil ca # 生成elastic-stack-ca.p12文件 ./bin/elastic ...
- 第一章：模型层 - 10：不返回QuerySets的API
以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...
- Docker搭建kafka及监控
环境安装 docker安装 yum update yum install docker # 启动 systemctl start docker # 加入开机启动 systemctl enable do ...
- 为什么 MES 管理系统是智能制造的核心？
不能说MES 管理系统是智能制造的核心,只能说MES管理系统是智能制造的核心的一部分,并且是一小部分.智能制造的核心的为高端制造装备和工业互联网平台,引用工信部赛迪研究院软件所所长潘文的话" ...
- Linux+Wine玩GTA5指南
如果你的系统没有Wine先装Wine和winetricks,Wine在各大发行版的源都能找到.记住32位和64位的Wine都要装 安装wget后,输入指令 sudo -s cd /opt mkdir ...
- sql查数据库表中的条数
select count(*) from <>表名 例 select count(*) from user_info
- Upscayl，免费开源的 AI 图像增强软件
有的时候我们找遍了全网却难以找到一张模糊图片的原图,这时候我们想如果能够一键将图片变成高清的就好了.其实这正是计算机视觉的一大研究反向--图形增强,通过AI计算将模糊的图片增强,将几百kb的低像素图片 ...