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

2024年2月3日 96次阅读 来源: dragonnahs

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 <font color=’red’>创建项目</font>

A newer version of vue-cli is available.

latest: 2.9.3

installed: 2.9.1

? Project name vue-backend-system <font color=’red’>这个是项目名称</font>

? Project description 项目描述 <font color=’red’>项目描述</font>

? Author 作者 <font color=’red’>作者</font>

? Install vue-router? Yes <font color=’red’>项目路由我用到了选择了yes，可以选择no建立项目后在安装路由</font>

? Use ESLint to lint your code? No <font color=’red’>代码检查</font>

? Set up unit tests No <font color=’red’>单元测试</font>

? Setup e2e tests with Nightwatch? No <font color=’red’>自动化测试</font>

? Should we run
npm install for you after the project has been created? (recommended) no <font color=’red’>这个是是否现在就安装依赖</font>

vue-cli · Generated “test”.

# Project initialization finished!

# ========================

To get started: <font color=’red’>接下来要执行的步骤</font>

cd vue-backend-system

npm install (or if using yarn: yarn)

npm run dev

Documentation can be found at

https://vuejs-templates.githu…

  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.js的router的childredn下的路由匹配的组件,transition是过度标签，具体的使用可以参考官网
  4. 可以根据路由和页面参考布局，基础的概念和知识可以参考下方官方文档链接。

编写代码的过程记录

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

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

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

使用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

    原文作者：dragonnahs
    原文地址: https://segmentfault.com/a/1190000014423108
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞