栏目缓存实现

assets/css/style.css

@@ -46,7 +46,7 @@
                 font-size: 16px;
                 line-height: 1.6;
                 -webkit-font-smoothing: antialiased;
-            }
+                            }
             
             .cannot_selected {
                 -moz-user-select: none;

assets/js/commonVue.js

@@ -95,100 +95,127 @@ var app = new Vue({
     this.requestParams.articleid = this.getQuery('articleid') ? this.getQuery('articleid') : ''
   },
   mounted: function () {
-    
+     
     this.getColumnData()
-
   },
   methods: {
 
-    //获取栏目
+    //获取栏目数据
     getColumnData() {
-      var  _this = this
-      this.columnTypes = []
-      $.ajax({
-        type: 'get',
-        dataType: 'json',
-        url: window.FQDN2 + 'siteCategory/siteCategoryList',
-      }).done(function (res) {
-        _this.loading = false;
-        _this.columnList = res.data;
-        _this.currentPath = window.location.pathname;
-        for (let i = 0; i < res.data.length; i++) {
+      var  _this = this;
+      if(!localStorage.getItem('storeColumnList')||window.location.pathname == '/index.html'||window.location.pathname == '/'){
+        $.ajax({
+          type: 'get',
+          dataType: 'json',
+          url: window.FQDN2 + 'siteCategory/siteCategoryList',
+        }).done(function (res) {
+          _this.columnList = res.data;
+          let expires = Date.now() + 1000 * 60* 30 ;  //半小时过期时间
+          localStorage.setItem('storeColumnList', JSON.stringify({data:  _this.columnList, expires}));
+          _this.loading=false
+          _this.currentPath = window.location.pathname;
+          _this.handleColumnData()
+        })
+      }else{
+        console.log(JSON.parse(localStorage.getItem('storeColumnList')))
+        this.loading = false;
+        this.handleColumnData()  
+      }
+    },
 
-          //栏目处理        
-          if (res.data[i].sname == window.location.pathname) { 
 
-            //进入当前栏目页
-            getSeoCommon()
-           
-            _this.columnTypes = res.data[i].children 
-            _this.colL= _this.columnTypes.childten;
-            if (res.data[i].children.length > 0) {
-              _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('id') : _this.columnTypes[0].id;
-            } else {
-              var objData = _this.columnList.filter(obj => obj.sname == window.location.pathname);
-              _this.requestParams.categoryid=objData[0].id
-            }
-            _this.getArticalData(_this.requestParams) 
-            _this.columnImage = res.data[i].imagePath; 
+    handleColumnData(){
+      this.currentPath = window.location.pathname;
+      this.columnList=JSON.parse(localStorage.getItem('storeColumnList')).data;
+      console.log( JSON.parse(localStorage.getItem('storeColumnList')))
+      console.log( Date.now())
+
+      // 读取并检查是否过期
+     if ( JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
+          localStorage.removeItem('storeColumnList');
+      } else {
+          console.log( this.columnList);
+      }
+     
+
+      var _this=this;
+      for (let i = 0; i < _this.columnList.length; i++) {
+
+        //栏目处理        
+        if (_this.columnList[i].sname == window.location.pathname) { 
+
+          //进入当前栏目页
+
+
+          getSeoCommon()
+         
+          _this.columnTypes = _this.columnList[i].children 
+          _this.colL= _this.columnTypes.childten;
+          if (_this.columnList[i].children.length > 0) {
+            _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('id') : _this.columnTypes[0].id;
+          } else {
+            var objData = _this.columnList.filter(obj => obj.sname == window.location.pathname);
+            _this.requestParams.categoryid=objData[0].id
+          }
+          _this.getArticalData(_this.requestParams) 
+          _this.columnImage = _this.columnList[i].imagePath; 
+          
+        } else { 
+
+          // 进入详情页
+          if (_this.columnList[i].sname == '/product/index.html' && window.location.pathname == '/product/read.html') {
             
-          } else { 
-
-            // 进入详情页
-            if (res.data[i].sname == '/product/index.html' && window.location.pathname == '/product/read.html') {
-              
-              getDetailCommon()
-              getSeoCommon()
-            }
-            if (res.data[i].sname == '/solution/index.html' && window.location.pathname == '/solution/read.html') {
-              getDetailCommon()
-              getSeoCommon()
-            }
-            if (res.data[i].sname == '/news/index.html' && window.location.pathname == '/news/read.html') {
-              getDetailCommon()
-              getSeoCommon()
-            }
-
-            function getDetailCommon(){
-              //获取内容详情
-              _this.getArticalData(_this.requestParams)
-              //获取详情相关数据
-              setTimeout(() => {
-                _this.requestParams.title = ''
-                _this.requestParams.articleid = 0
-                _this.getArticalData(_this.requestParams, 1)
-              }, 100)
-              _this.currentPath = res.data[i].sname //产品详情时栏目高亮
-              _this.columnImage = res.data[i].imagePath; //栏目图片获取
-            }
+            getDetailCommon()
+            getSeoCommon()
           }
-          function getSeoCommon(){
-            $('title').text(res.data[i].categoryName);
-            $('meta[name="description"]').attr('content', res.data[i].metadescription);
-            $('meta[name="keywords"]').attr('content',res.data[i].metakeywords);
+          if (_this.columnList[i].sname == '/solution/index.html' && window.location.pathname == '/solution/read.html') {
+            getDetailCommon()
+            getSeoCommon()
           }
-
-          //首页旧
-
-          if (res.data[i].sname == '/index.html' && (window.location.pathname == '/index.html'||window.location.pathname == '/')) {
-            jQuery.ajax({
-              type: 'POST',
-              dataType: 'json',
-              url: window.FQDN + 'Index/index',
-            }).done(function (res) {
-              // _this.loading = false;
-              _this.homeList = res
-              _this.status = true
-            }).fail(function (err) {});
+          if (_this.columnList[i].sname == '/news/index.html' && window.location.pathname == '/news/read.html') {
+            getDetailCommon()
+            getSeoCommon()
           }
 
-          // 获取反馈弹框类型数据
-          if (res.data[i].sname == '/solution/index.html') {
-            _this.dialogDataArray = (res.data[i].children)
-            _this.ruleForm.platName = _this.dialogDataArray[0].categoryName;
+          function getDetailCommon(){
+            //获取内容详情
+            _this.getArticalData(_this.requestParams)
+            //获取详情相关数据
+            setTimeout(() => {
+              _this.requestParams.title = ''
+              _this.requestParams.articleid = 0
+              _this.getArticalData(_this.requestParams, 1)
+            }, 100)
+            _this.currentPath = _this.columnList[i].sname //产品详情时栏目高亮
+            _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
           }
         }
-      })
+        function getSeoCommon(){
+          $('title').text(_this.columnList[i].categoryName);
+          $('meta[name="description"]').attr('content', _this.columnList[i].metadescription);
+          $('meta[name="keywords"]').attr('content',_this.columnList[i].metakeywords);
+        }
+
+        //首页旧
+
+        if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/index.html'||window.location.pathname == '/')) {
+          jQuery.ajax({
+            type: 'POST',
+            dataType: 'json',
+            url: window.FQDN + 'Index/index',
+          }).done(function (res) {
+            // _this.loading = false;
+            _this.homeList = res
+            _this.status = true
+          }).fail(function (err) {});
+        }
+
+        // 获取反馈弹框类型数据
+        if (_this.columnList[i].sname == '/solution/index.html') {
+          _this.dialogDataArray = (_this.columnList[i].children)
+          _this.ruleForm.platName = _this.dialogDataArray[0].categoryName;
+        }
+      }
     },
 
     //获取内容
@@ -198,7 +225,6 @@ var app = new Vue({
         _this.requestParams.order = ''
       }
 
-      
       $.ajax({
         type: 'GET',
         dataType: 'json',

index2.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta  name="keywords" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="assets/img/favicon.ico">
+    <title></title>
+    <!--====== bootstrap css ====== -->
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
+    <!--====== element css ====== -->
+    <link rel="stylesheet" href="assets/css/element.css">
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="assets/css/default.css" />
+    <!--====== Animation css =======-->
+    <link rel="stylesheet" href="assets/css/animation.css" />
+    <!--====== animate css ======-->
+    <link rel="stylesheet" href="assets/css/animate.min.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="assets/css/style.css" />
+    <!--====== home css ====== -->
+    <link rel="stylesheet" href="assets/css/home.css" />
+    
+</head>
+
+<body>
+ 
+   
+
+  <div style=="font-size:100px">dfdfdfdfd</div>
+
+    </body>
+
+</html>

solution/index.html

@@ -50,7 +50,7 @@
 
         <!--====== COMMON BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
-        </section>
+                </section>
         <!--====== COMMON BREADCRUMB END ======-->
 
         <!--====== SOLUTION TYPE START ======-->