vue-backend-system
github 地址 https://github.com/dragonnahs/vue_node_study_record
一直想把以前所学的相关知识进行总结归纳, 方便以后查看复习, 正好最近最近抽时间研究点东西, 打算是做前后台的, 对后台这块不熟悉, 本来是打算用 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 相关总结 https://github.com/dragonnahs/vue_node_study_record/blob/master/Read/Vue总结.md
Vue 总结笔记
这个主要是记录 Vue 的相关内容, 主要是根据这个项目, 在项目中用到的知识, 进行一个 大致的总结, 以方便以后进行复习查看, 大家看的话, 最好把相关的文档都大致看下, 我这里只是简单介绍下记录下大致的步骤, 方便自己以后复习来用的, 稍微深点的只是都需要大家自行阅读相关的文档.
参考文档
vue2.0 中文文档 https://vuefe.cn/v2/guide/
vuex 中文文档 https://vuex.vuejs.org/zh-cn/intro.html
element-ui 官方文档 http://element.eleme.io/#/
axios 使用说明 https://www.kancloud.cn/yunye/axios/234845
vue-router 使用 https://router.vuejs.org/zh-cn/installation.html
技术点
- 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 相关总结 https://github.com/dragonnahs/vue_node_study_record/blob/master/Read/Node总结.md
node 的相关知识总结
这里主要是 node 相关的知识, 简单的介绍下 node 的服务创建, 请求的接口的写法, 由于数据来源问题, 最后 采用的是爬虫的方式来获取数据, 顺便记录下 node 是怎么实现爬虫的.
参考链接
node 中文文档 http://nodejs.cn/ express 官方文档 http://www.expressjs.com.cn/ superagent 中文参考文档 http://cnodejs.org/topic/5378720ed6e2d16149fa16bd cheerio 的参考文档 http://cnodejs.org/topic/5203a71844e76d216a727d2e
起步建立服务
所有接口和爬虫内容都在 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 https://github.com/dragonnahs/vue_node_mongodb
来源: https://juejin.im/post/5ad54b216fb9a028ca537574