本文由图雀社区成员灿若星空撰写。欢迎加入图雀社区，打造精彩的免费技术教程，为编程行业的发展赋能。写在前面，本文是一个说明文档，不是教你从零开始搭建后台管理系统，而是结合一个实际项目，搭建了一个后台管理系统的基本框架，教你如何快速开发自己的后台管理系统，让读者在掌握一些基础知识的同时，快速入门vue后台开发。只有接触到项目，才能更好地理解所学知识的意义，将死知识点转化为举一反三、可以学以致用的技能。先运行#克隆项目gitclonehttps://github.com/tuture-dev/vue-admin-template.git#进入目录cdvue-admin-template#安装依赖npminstall--registry=https://registry.npm.taobao.org#运行npmrundev本文涉及的源码放在Github上。如果你觉得我们的文笔还不错，希望你能给这篇文章点个赞+Github仓库star??~新增侧边导航新建文件。在src/views/新建一个空白文件夹test，并在该目录新建一个文件test.vue，用于添加路由。打开src/router/index.js，这是项目的后台路由配置文件。在constantRoutes数组中，添加路由的格式如下：{path:'/test',//urlpathcomponent:Layout,//这里不要动，这是全局统一的布局文件children:[{path:'test',//二级路径名:'test',component:()=>import('@/views/test/test'),//懒加载，这里写添加文件的路径meta:{title:'Test',icon:'plane'//Configurationoptions可以配置测试名称和图标}}]}，我们可以自定义图标，文件的格式，可以用iconfont下载，然后放在src/icons/svg目录下也就是二级导航可以这样配置。{path:'/material',component:Layout,redirect:'/material/upload',meta:{title:'素材管理',//meta信息，一级导航图标名称：'plane'//元信息，导航图标名称},children:[{path:'check-template',name:'check-template',component:()=>import('@/views/material/check-template'),meta:{title:'CheckTemplate',}},{path:'logo',name:'logo',组件:()=>import('@/views/material/check-logo'),meta:{title:'Viewlogo',}},{path:'generate',name:'generate',component:()=>import('@/views/material/generate'),meta:{标题:'生成材料',}},{path:'check',name:'check',component:()=>import('@/views/material/check'),meta:{title:'查看材料',}},]}，此配置完成后，框架会根据路由配置文件自动生成侧边导航项。我们只需要根据业务需要，一个一个的编写vue组件，将内容填充到框架中就OK了。使用ElementUI组件ElementUI提供了很多可重用的组件，对于一般的后台应用，这些组件完全可以满足需要。如果对个性化要求不高，我们可以做一个“复制粘贴”工程师，也就是所谓的“CV”工程师，进行快速开发。对于每个组件，其文档中都有效果示例和代码，只需选择需要的组件，将其代码粘贴到我们的代码文件中，稍作修改即可。网络请求整个框架搭建完成后，前端程序员的主要工作就是发起请求和渲染数据。现在让我们完整地过一遍这个过程。基本配置配置代理。由于跨域资源请求的问题，所有与后端交互的网络请求在开发阶段都由底层的node.js代理。相关文档打开根目录下的vue.config.js文件//代理所有以'/admin'开头的网络请求proxy:{'/admin':{target:`http://localhost:8886/`,//后台服务地址changeOrigin:true,pathRewrite:{}}}配置地址生产环境和开发环境通常有不同的服务地址。编辑.env.development和.env.production这两个文件，修改其中的VUE_APP_BASE_API配置项，以开发环境为例：VUE_APP_BASE_API='/admin'配置拦截器打开src/utils/request.js，这个文件封装了一个axios请求对象，系统中的网络请求都是基于这个对象进行处理的。我们可以在发送网络请求之前和服务器响应之后做一些通用的工作。比如根据服务器的状态码判断请求是否正常，如果不正常则给出相应的提示。service.interceptors.response.use(response=>{constres=response.data//如果服务器的状态码不是200，说明请求异常，应该给出错误提示。if(res.code!==200){Message({message:res.msg||'错误检查你的令牌或方法',type:'error',duration:2*1000})returnPromise.reject(newError(res.msg||'Error'))}else{returnres}},error=>{console.log('err'+error)//用于调试Message({message:error.message,type:'error',duration:2*1000})returnPromise.reject(error)})挂载请求对象首先在src/main.js中导入网络请求对象，挂载到vue全局对象中，这样可以直接引用在每个组件中就可以了，不用再导入了。importrequestfrom'@/utils/request'Vue.prototype.req=requestrequestandrendering构建一个简单的节点服务仅供教程使用lethttp=require('http');letquerystring=require('querystring');letmy_result=[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'普陀区金沙江路1519弄District,Shanghai'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}]letserver=http.createServer((req,res)=>{letpost='';req.on('data',function(chunk){post+=chunk;});req.on('end',function(){res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'})post=querystring.parse(post);console.log('post-data:',post);if(post){让结果={code:200,//msg:“服务器错误”data:my_result}res.end(JSON.stringify(result));}else{letresult={code:'0',msg:'Nodatareceived'}res.end(JSON.stringify(result));}});});server.listen(8886)//可以在命令行运行nodeserver.js发起请求this.req({url:"getInfo?id=6",//写入url这里对应不同的业务，框架会自动与baseURL数据进行拼接：{},method:"GET"}).then(res=>{//请求成功后的处理console.log("res:",res);},err=>{//请求失败后的处理console.log("err:",err);});根据最佳实践，网络请求应该被提取到一个文件中，然后服务器数据应该在每个特定页面上进行处理。处理如下形式，首先创建文件src/api/test.js，和将测试组件中需要用到的网络请求全部写入该文件。//src/api/test.jsimportrequestfrom'@/utils/request'exportfunctiongetList(params){returnrequest({url:'getTableData',method:'get',params})}incomponenttest.vue引入请求方法import{getTableData}from"@/api/test.js";......mounted:function(){//统一处理网络请求getTableData().then(res=>{console.log("apitableData:",res);this.tableData=res.data;},err=>{console.log("err:",err);});//网络请求直接写入文件this.req({url:"getTableData",data:{},method:"GET"}).then(res=>{console.log("tableData:",res);this.tableData=res.data;},err=>{console.log("err:",err);});}，在控制台可以看到网络数据流，我们的请求地址是localhost:9528，后台服务的地址是本地主机：8886。为什么不同？我们用一张流程图来说明，应用上线后，前端可以通过类似的方案（Nginx反向代理）解决CORS跨域资源访问问题。HelloTable下面我们使用ElementUI提供的Table组件在test.vue中编写一个表格数据展示页面。进入ElementUITable组件的文档，复制粘贴相应的代码。框架在全局引入了ElementUI，因此这些组件可以开箱即用。如果是另外一个第三方组件，我们需要自己引入才可以使用。
