使用node爬虫做了一个vue小项目记录使用笔记

bigdataway 提交于 周二, 04/17/2018 - 18:49

做的是一个后台管理的项目,首先是页面的结构,根据页面的结构设计路由。

  1. 设计页面结构

  2. 最终的路由结构参考 src/router/index.js

    # 引入vue 和vue-router
    # Vue.use(Router)注册路由插件
    # export default router 导出router对象
    # src/main.js 中实例化Vue时传入router对象
    # router是实例化的路由对象,路由配置都在这个对象中

    router对象中的参数:

    path 路由路径, name 路由的名称, component 路由变量(引入的路由模块), children 子路由, meta 路由传递的信息(一般在这里的信息可以处理访问权限等)

  3. 页面解析 主页面是 views/Index/index.vue ,一些样式直接使用element-ui的样式,element-ui的使用参考 src/main.js 的全局引入并注册。分为顶部、左侧导航栏,右侧的主题三部分,在该 index.vue 中使用了 router-view 标签,大致相当于一个容器,渲染路由对应的组件,在这个项目中大致就相当于 router.jsrouterchildredn 下的路由匹配的组件, transition 是过度标签,具体的使用可以参考官网

  4. 可以根据路由和页面参考布局,基础的概念和知识可以参考下方官方文档链接。

编写代码的过程记录

  1. 过程中使用了element-ui做ui上面的处理,安装element-ui

cnpm install --save element-ui 然后引入插件,使用Vue.use(ElementUI)注册使用,下面就可以在各个组件中进行使用了。

  1. 各个组件中的参数传递

使用vuex进行各个组件之间进行参数传递 cnpm install --save vuex ,我把vuex相关代码写入 src/vuex/ 文件夹下,大家可以参考 使用,最后只要把 store.js 进入到 main.js 中,然后在vue实例化中引入就ok,可以参考 main.js 中的使用,在vuex中使用了 vuex-presist 插件,这个主要是解决缓存的问题.

关于上面的 vuex-presist 使用的原因

关于页面的设计左侧的导航栏对应不同的路由,切换不同的页面,也有对应的 active 样式,这些是一一对应的,大家参考 router.js 中的参数配置,meta字段中有个index是为了控制页面左侧导航栏对应的地址和 active 样式,但是每次刷新 active 都会是默认的初始值,为了解决这个问题就要使用缓存,所以引入了 vuex-presist 插件,然后把 active 对应的字段和 index 字段建立联系就ok了,就是通过vuex把数据传递给导航栏对应的 active . vuex-presist 的具体使用可以参考 sotre.js 的使用方法。

  1. 关于vuex项目中只使用到了定义 state 和赋值 mutations

使用vuex的过程中,最简单的就是直接使用state属性,然后在各个组件中引入vuex进行使用,参考 views/Index/left.vue 文件,引入 import { mapMutations, mapState } from 'vuex' ,使用的话可以再computed和mathods中使用。使用的话可以使用数组的方式,这种方法的话名字必须和 store.js 的变量名字一样, views/Index/left.vue 文件中的 ...mapState 。另一种方式是使用对象的方式,像 views/Index/left.vue 文件中的 ...mapMutations ,要使用 mapMutations 中的变量改变state的值,必须使用 $store.commit() 进行使用,可以参考vuex文档。

  1. 最初的设计是只有 / 首页页面的是不用登陆的,其余页面是需要登录才能访问的,因此需要做权限判断,这里只是模仿了登录的效果,登录固定只有admin才能登录,重点是在如何处理 token ,登录权限判断。

参考 router.js 在路由的配置用有 meta.login 判断是否需要登录访问,router有个路由守卫,可以在组件中分开写也可以在全局中写,这里用的是全局路由守卫 beforeEach ,to即将进入的页面,from从哪个页面过来,具体的可以看下 stroe.js 中的代码。其中登录超时的判断是在前台进行判断的,在登录的时候设置一个时间点,每次切换路由或者刷新页面的时候一个新的时间点,这之间的时间段来进行判断是否超时,当然一般这个超时有后台判断更合适点,后台判断是否超时来返回不同的字段就ok。为登录情况也做了处理,对象中的 query 跟的参数是为了返回从哪个页面过来的,在 login 页面进行登录成功的处理就好了。

  1. 页面的数据问题

组件的页面数据来源于我的git page博客,想来熟悉node的使用,之前用过node写点东西,所以就干脆用node的爬虫来爬去下我的这个页面,根据爬取到的数据作为请求的数据返回给本地的请求。本地请求用的是 axios ,安装插件并在 main.js 中引入,然后在vue的原型中定义一个属性来引入使用axios,另外由于请求的服务是在 8888 端口,因此会出现跨域的问题,因此用到了vue的代理请求的方式处理跨域问题,参考 config/index.js 下面的属性 proxyTable ,匹配所有 /node 请求, target 代理的地址, pathRewrite 是把所有的 /node 替换为空,就是前台的请求接口比着后台的接口是要少 /node 字段的。

总结: 到这里vue的简单构建项目差不多就写完了,主要是走一个整体的流程,一般项目这样就算是能开头了,后续就是加功能,完善业务,然后就是一些具体的处理。

接口上的处理就是下一篇文章了主要是node相关的内容大家参考node的学习记录

node的相关知识总结

这里主要是node相关的知识,简单的介绍下node的服务创建,请求的接口的写法,由于数据来源问题,最后 采用的是爬虫的方式来获取数据,顺便记录下node是怎么实现爬虫的。

参考链接

node中文文档 express官方文档 superagent中文参考文档 cheerio的参考文档

起步建立服务

所有接口和爬虫内容都在 server 目录下,大家可以自行参考,这里使用的是 express 框架建立服务,关于 express 的详细内容大家可以参考上面的链接,这里简单介绍下这个项目使用时代码编写的过程.

// index.js

const express = require('express')
const app = express()

app.listen(8888)
console.log('node server is running at port 8888')

在该目录下运行 node index.js 启动服务,在这个项目中可以运行 npm run server 来启动服务,因为在 package.json 中的 script 属性中进行了配置,能够使用快捷启动服务,配置用使用的是 nodemon 这个事一个插件,全局安装就ok主要是可以实时启动服务,不用每次修改保存都要手动重启服务,插件会保存的时候自动重启服务。

在这里把各个功能的部分进行了单独文件模块化,引入各个模块,然后使用 app.use(模块名) 注册使用模块。

主要接口模块

api.js 这是主要的文章接口模块,对文章列表和分类进行爬虫,然后然后编写相应接口进行接口注册。把不同功能的接口进行模块化,主要是介绍怎么在接口比较多的时候如何进行处理。

api接口的一般模板参照 server/api.js

// server/api.js
const express = require('express')
const router = express.Router()

// 路由中间件的使用,就是可以使用router.use来调用相关处理的中间件,其实相当于一系列的函数
router.use((req, res, next) => {
    next()
})

module.exports = router

对外包路router对象,在 server/index.js 中引入router对象,通过 app.use 进行注册使用。

get 请求

// server/api.js

router.get('请求接口', (req, res) => {
    // callback
})

superagent,cheerio请求和处理网站数据

使用 superagent 插件请求网络数据,根据返回的网站信息获取网站代码,分析网站代码获取自己想要的信息,进行提取。一般的爬虫规则就是基于此种情况,这是最简单的爬虫,操作手法都是相同的,后续是处理爬取到的内容进行数据处理。

使用 cheerio 对请求回来的出去进行处理,其api和jQuery的api基本一致,会使用jQuery可以直接使用。

一般使用:

// server/api.js

// 引入
const superagent = require('superagent')

// 使用
superagent.get(请求地址).end((err, response) => {
    if(err){
        // 处理错误
    }
    // 这里对获取的内容进行处理,使用cheerio定义一个变量,可以参考cheerio的使用 
    let $ = cheerio.load(reponse.text)

    // 下面就是对获取的内容进行处理了,获取自己想要的数据保存到一个变量中
    let obj = {}

    // 这步是把数据返回给请求的接口,这是前端能够拿到的数据
    res.send({data: obj})

})

其中 server/userInfo.js 这里面的代码是和上面一至的,请求页面获取不同的信息,返回给前端。这样一来通过接口就能调取到想要的数据,前端拿到数据,将数据渲染到页面。

到这里关于这个项目里面用到的node的东西都说的差不多了,只是简单介绍下,是怎么处理前后台的关系的,这种是前后台分开来做的,后台处理业务逻辑 server 文件夹下的,前端进行页面方面的处理,前端一般不对数据进行处理,拿来就行进渲染。这里也可以把爬虫获取的数据换掉,使用mongodb进行后台数据库的操作,效果是一样的,之前做过这方面的尝试,复杂的业务逻辑不好写,一些简单的增删改查还是很容易的,需要的可以参考我之前写的项目 vue-node-mongodb

标签
分类