vue-backend-systemgithub地址一直想把之前学过的相关知识总结一下，方便以后查看和复习。最近刚抽空研究了点东西，计划是对后台不熟悉。本来打算用node和mongodb来实现的。资料不是很清楚，所以索性爬下了我的博客，主要是研究前后端的整体结合。过程。下载项目gitclone或者直接下载文件安装依赖cd到项目根目录下运行npminstall安装依赖即可使用淘宝镜像cnpminstall（需要先安装淘宝淘宝镜像，runnpminstall-gcnpm--registry=https://registry.npm.taobao.org）运行vue项目npmrundev（开发环境运行，访问localhost:8081/）npmrunserver（运行后台服务，后台端口为8888）做笔记简单总结一下自己遇到的问题，学习主要是基于对这个项目的简单总结，一个是关于vue相关的内容，一个是关于node相关的知识.Vue相关总结Vue总结笔记这里主要记录Vue的相关内容。主要是根据这个项目和项目中用到的知识做一个大概的总结，方便以后复习。如果看的话，最好把相关的文档大致看一下。我这里只是简单的介绍和记录大概的步骤，方便以后复习和使用。更深层次的，只需要自己去阅读相关文档即可。参考文档vue2.0中文文档vuex中文文档element-ui官方文档axios使用说明vue-router技术要点vuevuexvue-routeraxioselement-uiecharts搭建工程步骤直接使用vue-cli快速搭建工程结构vue-cli脚手架安装使用cnpminstallvue-cli-g(全局安装vue-cli)vue(运行vue查看是否安装成功)vueinitwebpackprojectname(创建webpack模板项目，这一步是快速创建vue项目,按照提示一步步完成安装)D:\shanll\js\vue\vue-all-system>vueinitwebpackvue-backend-system创建项目A更新版本的vue-cli可用。最新：2.9。3安装：2.9.1？项目名称vue-backend-system这是项目名称?项目描述项目描述项目描述?作者作者作者？安装vue路由器？是的我用的是项目路由选择yes，创建项目后可以选择no安装路由？使用ESLint来检查你的代码？没有代码检查？设置单元测试没有单元测试？使用Nightwatch设置端到端测试？没有自动化测试？我们应该在项目创建后为您运行npminstall吗？(推荐)no这里是是否现在安装依赖vue-cli生成了“test”。#项目初始化完成！#==========================开始：接下来要执行的步骤cdvue-backend-systemnpminstall（或者如果使用纱线：纱线)npmrundev文档可以在https://vuejs-templates.github...cdvue-backend-system(到项目和目录)cnpminstall(安装依赖)npmrundev(运行项目，默认进入localhost:8080/)本项目的基本结构建立完成路由是一个后台管理项目，首先是页面的结构，根据页面的结构设计路由设计参考src/router/index.js为页面结构的最终路由结构#引入vue和vue-router#Vue.use(Router)注册路由插件#exportdefaultrouter导出router对象#InstantiateVueinsrc/main.js进入routerobject#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-uicnpminstall--saveelement-ui然后引入插件，使用Vue.use(ElementUI)注册使用，下面的每个组件都可以用到它。各组件中传参使用vuex在各组件之间传参cnpminstall--savevuex，我把vuex相关代码写到src/vuex/文件夹下，大家可以参考一下，最后直接进入store.js即可到main.js，然后在vue实例化中引入。可以参考main.js中的使用。vuex中使用了vuex-presist插件。这个主要是为了解决缓存的问题。关于上面vuex-presist的使用页面设计的原因是左边的导航栏对应不同的路由，不同页面的切换，以及对应的active样式。这些是一一对应的。请参考router.js中的参数配置。meta字段中有一个index是用来控制页面左侧导航栏对应的地址和active样式的，但是active每次刷新都会是默认的初始值。为了解决这个问题，必须要用到缓存，所以引入了vuex-presist插件，然后把active对应的字段和index字段建立连接就可以了，也就是传数据通过vuex到导航栏对应的active.vuex-presist。具体使用可以参考sotre.js的使用方法。关于vuex项目，在使用vuex的过程中，只有state和assignmentmutations的定义。最简单的方法就是直接使用state属性，然后在各个组件中引入vuex来使用。参考views/Index/left.vue文件，引入import{mapMutations,mapState}from'vuex'，如果使用，可以在computed和mathods中使用。如果你使用它，你可以使用数组方法。该方法中名称必须与views/Index/left.vue文件中store.js,...mapState的变量名一致。另一种方法是使用对象，例如views/Index/left.vue文件中的...mapMutations。要使用mapMutations中的变量来更改状态的值，您必须使用$store.commit()。可以参考vuex文档。原本的设计是只有/home页面不需要登录，其余页面需要登录才能访问，所以需要进行权限判断。这只是一个登录效果的模仿。登录固定后，只有管理员可以登录。关键是如何处理令牌，确定登录权限。路由配置参考router.js，通过meta.login判断是否需要登录访问。Router有路由守卫，可以单独写在组件里，也可以全局写。这里是全局路由守卫beforeEach，to即将进入页面，来自哪个页面，具体可以看stroe.js中的代码。其中登录超时的判断在前台进行判断。登录时设置一个时间点，每次切换路由或刷新页面时设置一个新的时间点。这些时间之间的时间段用来判断是否超时。当然，一般情况下这个超时由后台来判断是比较合适的。后台判断是否超时返回不同的字段就可以了。它还处理登录情况。对象中的查询和参数将返回它来自哪个页面。在登录页面处理登录成功即可。页面数据问题组件的页面数据来自我的gitpage博客。想熟悉node的使用。之前用过node写过东西，所以干脆用node爬虫爬下我的页面。根据抓取到的数据作为请求数据返回给本地请求。本地请求使用axios，在main.js中安装插件导入，然后在vue的prototype中定义一个属性，引入axios的使用。另外，由于请求的服务在8888端口，会存在跨域问题，所以使用Vue的代理请求方式来处理跨域问题。参考config/index.js下的属性proxyTable匹配所有/node请求和目标代理的地址。pathRewrite将所有/nodes替换为空，这是前端请求接口比后台接口拥有更少的/node字段。总结：至此，vue简单的搭建工程就差不多完成了。主要是要走一个整体的流程。即便是一般的项目可以这样开始，后续就是增加功能，完善业务，再进行一些具体的处理。界面上的处理是下一篇。主要是关于节点相关的内容。请参考node的学习记录。节点相关总结节点相关知识总结这里主要介绍节点相关知识。简单介绍节点服务创建和请求接口的写法，由于数据源的问题，最终还是采用了爬虫的方式来获取数据，顺便记录一下节点是如何实现爬虫的。参考链接节点中文文档express官方文档superagent中文参考文档cheerio参考文档开始建立服务所有接口和爬虫内容都在server目录下，大家可以自行参考，这里是建立服务的express框架，详细express的内容大家可以参考上面的链接，这里简单介绍下使用这个项目时写代码的过程//index.jsconstexpress=require('express')constapp=express()app.listen(8888)console.log('nodeserverisrunningatport8888')在该目录下运行nodeindex.js启动服务，在本项目中可以运行npmrunserver启动服务，因为配置在package.json中的script属性，可以使用快捷方式启动服务，配置使用nodemon的一个插件。全局安装没问题。主要原因是服务可以实时启动。每次修改保存后无需手动重启服务。插件保存后会自动重启服务。这里将各个功能的部分模块化到单独的文件中，引入各个模块，然后通过app.use(模块名)来注册和使用模块。主界面模块api.js是主要的文章界面模块，爬取文章列表和分类，然后编写相应的接口进行接口注册。将不同功能的接口模块化，主要介绍接口多的时候如何处理。api接口的通用模板参考server/api.js//server/api.jsconstexpress=require('express')constrouter=express.Router()//使用路由中间件就是使用router。usetocall相关处理的中间件其实相当于一系列的函数.js引入路由器对象，通过app.use注册使用。getrequest//server/api.jsrouter.get('requestinterface',(req,res)=>{//callback})superagent，cheerio请求并处理网站数据使用superagent插件请求网络数据，根据对返回的网站信息获取网站代码，解析网站代码获取你想要的信息，并提取出来。一般的爬虫规则都是基于这种情况。这是最简单的爬虫，操作方法都是一样的。后续就是对爬取的内容进行数据处理。使用cheerio处理传出请求。它的api和jQuery的api基本一样，直接使用jQuery即可。一般使用//server/api.js//引入constsuperagent=require('superagent')//使用superagent.get(requestaddress).end((err,response)=>{if(err){//Handlingerrors}//这里是对获取到的内容进行处理，使用cheerio定义一个变量，可以参考cheerio的使用let$=cheerio.load(reponse.text)//下面是对获取到的内容进行处理，getwhatyouwant把想要的数据保存到变量中letobj={}//这一步是把数据返回给请求的接口，也就是前端可以拿到的数据res.send({data:obj})})其中server/userInfo.js中的代码和上面的一样，请求页面获取不同的信息返回给前端。这样就可以通过接口获取想要的数据，前端获取数据，并将数据渲染到页面。至此，关于这个项目中使用的节点，我已经说的差不多了。我只是简单介绍一下如何处理前后关系。这是与正面和背面分开进行的。是的，前端处理页面，前端一般不处理数据，用到的时候再渲染。这里也可以替换爬虫获取的数据，使用mongodb操作后台数据库。效果是一样的。这个我之前试过，但是复杂的业务逻辑不好写。一些简单的增删改查，查询还是很容易的，可以参考我之前写的项目vue-node-mongodb
