Vue.js写一个本地网址导航网站

使用html+js+css+Vue.js制作网址导航

你是否有过这样的烦恼？有些使用频繁网站总是需要经过搜索筛选才能到达，有些很实用的网站需要时又要重新寻找。尽管浏览器给我们提供了书签功能，可以让我们保存需要的网页，但是随着书签数目的增加，浏览器启动速度也会变慢…

因此我们可以自己制作一个网址导航，来将部分频繁访问的网站和实用网站根据需求分类收集汇总到一起，也可以将他人资源导航汇入囊中。

为了可以在浏览器中运行打开，我们直接用html来实现该需求，也不借助服务器存储数据：

具体思路：

套用模板

直接使用网上的html模板，合理利用网络资源 html模板参考地址：https://templatemo.com/live/templatemo_556_catalog_z

html框架：选用网上模板，然后保留需要的页面、功能及样式
js：实现功能特效页面交互，如上图的左侧导航栏不可避免的需要用到js
css：主要是自定义样式和基于模板样式修改

汇入数据

最开始完成这个项目时，还没有接触vue.js，数据也不是很多，也就纯手动汇入了。但随着积累的资源网站越来越多，发现代码冗余十分严重，增加数据也显得力不从心，还容易出错。这时就需要使用vue.js了，利用vue的特性可以将重复代码剔除，将数据转移到data里面，然后使用json语法构建对象数组，v-for遍历渲染输出。
```
//案例使用vue2版本
new Vue({el: '#app',data() {return {dataList: [id: '', list: [{}]]}}
})
```
Vue.js简单介绍：

Vue本身是一个渐进式的web前端开发框架，其允许我们只在项目中的部分页面中使用Vue进行开发，也允许我们仅仅使用Vue中的部分功能来进行项目开发。
具体实现

具体代码实现不予描述

使用Python进行html爬取和数据写入操作

假设我们已经写好了框架，万事俱备，只缺数据了。那么如何高效写入数据？

1. excel转json

虽然将数据分离出了html，但是对面160多条json格式的数据，纯手写费时费力费心情，心理试想寻找一个文本转json格式的在线网站去帮助我规范格式，我只需要将数据源写入txt、csv、excel文件中就行了。遇事不决先百度：果然找到了一个在线Excel转json工具

使用方法：首行字段（列名）对应json中的key，然后将数据对号入座，保存excel，拖拽到该网站，然后复制需要的json数据。

上述操作相比在data里面直接手动能够大大提升效率。但是新的问题出现了，对于有强迫症的我而言，在js文件中有1000多行的数据代码变相也是一种冗余，因为json格式的数据可以放入到json文件中。

2. vue.js读取json文件

在网上找寻了一番，发现可以使用axios、jquery和jsonp，但是最终结果都是不理想的。因为现实是需要搭建后端服务器才可行，毕竟跨域请求这个问题在vue项目中就够折磨我的了。以下是我的测试过程：

1.在线引入axios

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

loadData () {this.$axios.get('json/data.json').then((res) => {//用axios的方法引入地址this.res=res//赋值console.log(res)})}

测试发现本地无法读取，但使用vscode+live server可以读取

2.使用jquery、ajax，jsonp

在js和vue项目获取本地json文件以及浏览器跨域问题的指导下，测试发现都不行，部分能正常读取但都无法在页面显示

 mounted() {// 这里一定要使用常量 const来引用this，不然可能会出现this指向问题dataList = $.ajax({url: "/json/data.json",//json文件位置，文件名type: "GET",//请求方式为getdataType: "json", //返回数据格式为jsonasync: false,success: function(data) {//请求成功完成后要执行的方法 console.log(data);}}); console.log(dataList.responseJSON);this.dataList = dataList.responseJSON},

总结：由于不打算使用服务器来存储数据，所以分离数据到json文件目前还没有更好的解决办法

3.使用python进行数据操作

当我们从0开始构建我们的导航网站时，每一次数据直接录入excel就大功完成一半了。然而如果我们需要从别人的网站上爬取数据或者（以我目前重构html为例）从本地html文件读取数据来构建我们的数据源，就有点不知所措了，总不能一个个的在查看源代码中重复的进行辅助粘贴吧。细细思考一下，这时就需要用到有着强大的爬虫和数据分析能力的Python了。那么如何用Python爬取本地html文件的数据？

前提：

你需要在电脑上安装python以及相关库，否则无法运行py文件，也就无法实现该需求了。

具体思路：

百度了解python爬取html需要用到的库以及find()和findAll()方法，这里我们用BeautifulSoup库来进行爬取。

下面代码将以我爬取的html文件为例：参考博客链接：Python学习，解析本地HTML文件

截取部分html代码：

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5 show"><figure class="effect-ming tm-video-item"> <img src="img/csdn.jpg" alt="Image" class="img-fluid"><figcaption class="d-flex align-items-center justify-content-center"><h3>CSDN</h3> <a target="_blank" href="https://blog.csdn.net/" target="_blank">Viewmore</a></figcaption></figure><div class="d-flex justify-content-between tm-text-gray"> <span class="tm-text-gray-light">博客</span><span>专业IT技术发表平台</span></div>
</div>
<!---------- -------------->
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5 show"><figure class="effect-ming tm-video-item"> <img src="img/zhihu.jpg" alt="Image" class="img-fluid"><figcaption class="d-flex align-items-center justify-content-center"><h3>知乎</h3> <a target="_blank" href="https://www.zhihu.com/">View more</a></figcaption></figure><div class="d-flex justify-content-between tm-text-gray"> <span class="tm-text-gray-light">知乎</span><span>高质量的问答社区</span></div>
</div>

可以发现：上述代码html框架是一致的，不一样的只有对应位置的数据

核心方法：find() 和 findAll() find(): 查找匹配目标一次 findAll(): 查找匹配所有目标

举个栗子：爬取上面代码中第一个div中img的src值,即img/csdn.jpg 使用find();爬取所有img，使用findAll();

img = soup.find('img').get('src')
img
//输出    'img/csdn.jpg'img = soup.findAll('img')
//此时的img得到的是一个数组，不能直接获取src，需要用for循环将src遍历组成新的数组
img
//输出
[<img alt="Image" class="img-fluid" src="img/csdn.jpg"/>,<img alt="Image" class="img-fluid" src="img/zhihu.jpg"/>]

很显然，基于我们的data中的datalist是一个对象数组，其中还内嵌了一个list对象数组。

分析得知：datalist等价于爬取整个class=“col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5 show”的div，

list等价于每个class=“col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5 show”的div，

所以最终的python爬虫代码如下：有条件的可以使用vscode中的Jupython来实时调试

//引入爬虫库
from bs4 import BeautifulSoup
soup = BeautifulSoup(open('index.html',encoding='utf-8'),features='html.parser')
datalist = []
for content in soup.findAll(class_ = "col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5 show"):img = content.find(class_ = 'img-fluid').get('src')header = content.find('h3').textmlink = content.find('a').get('href')detail = content.find('a').text.replace('\n','').replace(' ','')title =  content.find(class_ = 'tm-text-gray-light').textlink = mlinkfor i in content.find(class_ = 'd-flex justify-content-between tm-text-gray').findAll('span'):describe = i.textlist =[img,header,mlink,title,link,describe,detail]datalist.append(list)

注意12行的代码所代表的含义：爬取第一个（本例中只有一个）class=“d-flex justify-content-between tm-text-gray”的div下的所有span标签的内容，然后进行遍历将最后一个span的值赋值给变量describe，结合上例就是 “高质量的问答社区”

<div class="d-flex justify-content-between tm-text-gray"> <span class="tm-text-gray-light">知乎</span><span>高质量的问答社区</span></div>

数据爬取之后的操作就是保存数据，毋庸置疑我们选择保存为excel

python保存数据到excel中代码：

import xlwt
book = xlwt.Workbook(encoding='utf-8',style_compression=0)
sheet = book.add_sheet('Sheet',cell_overwrite_ok=True)
col = ('img','linkname','mlink','title','link','describe','detail')
for i in range(0,7):sheet.write(0,i,col[i])
for i in range(0,len(datalist)):data = datalist[i]for j in range(0,7):sheet.write(i+1,j,data[j])
savepath = 'data.xlsx'
book.save(savepath)

代码没有做excel是否存在的判断，但整体没有影响，具体详情见python实现将数据写入Excel文件中

结语

功能实现

本质就是用vue写一个单页面应用，将原来纯用html写的冗余代码用vue去优化html页面，然后将数据源从html中分离到vue的data中，数据源直接写入到excel，数据的json格式通过转换工具实现，然后批量复制粘贴到data的datalist中，然后就有了一个属于自己的导航网址网站啦！

资源分享

前端代码需要整理才能分享，需要的可以在评论回复，有时间尽可能分享