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

时间 2019-11-17

原文原文链接

vue-backend-system

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

步骤

下载项目

git clone 或者直接下载文件vue

安装依赖

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

运行vue项目

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

记录笔记

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

Vue相关总结git

Vue总结笔记

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

参考文档

技术点

vue
vuex
vue-router
axios
element-ui
echarts

步骤

####创建项目web

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

vue-cli脚手架安装使用

cnpm install vue-cli -g (全局安装vue-cli)
vue (运行vue查看是否安装成功)
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

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

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

路由

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

设计页面结构
最终的路由结构参考 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路由传递的信息(通常在这里的信息能够处理访问权限等)
页面解析主页面是views/Index/index.vue,一些样式直接使用element-ui的样式,element-ui的使用参考src/main.js的全局引入并注册。分为顶部、左侧导航栏，右侧的主题三部分，在该index.vue中使用了router-view标签，大体至关于一个容器，渲染路由对应的组件，在这个项目中大体就至关于router.js的router的childredn下的路由匹配的组件,transition是过分标签，具体的使用能够参考官网
能够根据路由和页面参考布局，基础的概念和知识能够参考下方官方文档连接。

编写代码的过程记录

过程当中使用了element-ui作ui上面的处理，安装element-ui

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

各个组件中的参数传递

使用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的使用方法。

关于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文档。

最初的设计是只有/首页页面的是不用登录的，其他页面是须要登陆才能访问的，所以须要作权限判断，这里只是模仿了登陆的效果，登陆固定只有admin才能登陆，重点是在如何处理token,登陆权限判断。

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

页面的数据问题

组件的页面数据来源于个人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是怎么实现爬虫的。

参考连接

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