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

参考文档

vue2.0中文文档
vuex中文文档
element-ui官方文档
axios使用说明
vue-router使用

技术点

vue
vuex
vue-router
axios
element-ui
echarts

步骤

####建立项目

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

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

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