Axios +Vue + themeleay

时间 2021-08-14

标签 javascript css html vue java ios spring json axios api 栏目 JavaScript 繁體版

原文原文链接

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.htmljavascript

<!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请求：css

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请求:html

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特别处理并发请求：vue

axios.all || axios.spreadjava

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数据ios

this.A = this.B； //会有指针绑定效应spring

**this.A = {...this.B}; //ES6 解构赋值 ||| this.A = [...this.B]; ** //深度拷贝不存在指针影响前提是对象json

若是是字符串使用结构赋值：会把字符串解构成每一个字符的数组；axios

字符串解构：=JSON.parse(JSON.stringify(this.invoiceInfo.accNbr));api