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

2,852 阅读6分钟

vue-backend-system

github地址

一直想把以前所学的相关知识进行总结归纳,方便以后查看复习,正好最近最近抽时间研究点东西,打算是做前后台的,对后台这块不熟悉,本来是打算用node加mongodb实现,数据自己弄的不是很清楚,就干脆爬下自己的博客,主要是研究下前后台一起结合着来做的整个流程。

步骤

下载项目

git clone 或者直接下载文件

安装依赖

cd到项目根目录下运行 npm install安装依赖 使用淘宝镜像 cnpm install(需要先安装淘宝淘宝镜像,运行npm install -g cnpm --registry=https://registry.npm.taobao.org)

运行vue项目

npm run dev(开发环境运行,访问localhost:8081/) npm run server(运行后台服务,后台端口是8888)

记录笔记

简单总结下自己遇到的问题,学习到的东西,主要是根据这个项目进行简单的总结,一个是vue相关的内容,另一个是node相关的知识。

Vue相关总结

Vue总结笔记

这个主要是记录Vue的相关内容,主要是根据这个项目,在项目中用到的知识,进行一个 大致的总结,以方便以后进行复习查看,大家看的话,最好把相关的文档都大致看下,我这里只是简单介绍下记录下大致的步骤,方便自己以后复习来用的,稍微深点的只是都需要大家自行阅读相关的文档。

参考文档

技术点

  • vue
  • vuex
  • vue-router
  • axios
  • element-ui
  • echarts

步骤

####建立项目

项目直接使用了vue-cli快速搭建了项目结构

vue-cli脚手架安装使用

  1. cnpm install vue-cli -g (全局安装vue-cli)

  2. vue (运行vue查看是否安装成功)

  3. vue init webpack 项目名称 (创建webpack模板项目,这一步是快速创建vue项目,按照提示一步步完成安装)

D:\shanll\js\vue\vue-all-system>vue init webpack vue-backend-system 创建项目
A newer version of vue-cli is available.
latest: 2.9.3
installed: 2.9.1
? Project name vue-backend-system 这个是项目名称
? Project description 项目描述 项目描述
? Author 作者 作者
? Install vue-router? Yes 项目路由我用到了选择了yes,可以选择no建立项目后在安装路由
? Use ESLint to lint your code? No 代码检查
? Set up unit tests No 单元测试
? Setup e2e tests with Nightwatch? No 自动化测试
? Should we run npm install for you after the project has been created? (recommended) no 这个是是否现在就安装依赖
vue-cli · Generated "test".
# Project initialization finished!
# ========================
To get started: 接下来要执行的步骤
cd vue-backend-system
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at
https://vuejs-templates.github.io/webpack

  1. cd vue-backend-system (到项目跟目录下)
  2. cnpm install (安装依赖)
  3. npm run dev (运行项目, 默认访问localhost:8080/)

到此项目的基本架构建立完成

路由

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

  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