确定后台系统的详细规划和整体功能后,需要更多的时间打磨技术细节。本课题借鉴了我开发个人网站语力说的经验,整理了后台系统开发过程中可能遇到的各种技术点。涉及的代码已经整理到https://github.com/yulis-say/...的end-skills目录下,如果觉得有用,欢迎分享和star。1后台开发总结下面依次总结后台系统开发技术要点,包括必要的说明和资源引导。1.1后台系统模板搭建后台系统,为了省时省力,可以选择一些流行的后台系统模板。关于这部分,您可以阅读本站整理的文章《流行的后台管理系统模板》。考虑到技术的普及和后台功能的完善,本站借鉴基于Vue.js和Element-UI的vue-admin-template,进行了后台系统的搭建和二次开发。参考vue-element-admin后台系统模板,最终后台系统效果如图:1.2vue-admin-template使用技巧配置代理请求,解决跨域问题。做如下修改:修改.env.development文件,VUE_APP_BASE_API表示某个前缀:VUE_APP_BASE_API='/api'修改vue.config.js文件,当遇到以VUE_APP_BASE_API开头的请求时,会增加target字段:devServer:{...proxy:{[process.env.VUE_APP_BASE_API]:{target:'http://api.com',//你自己的域名secure:false,//配置https接口changeOrigin:true,//是否跨域pathRewrite:{['^'+process.env.VUE_APP_BASE_API]:'/api'//替换配置中的前缀}}}}修复Markdown排版样式。使用tui.editor作为新的编辑器,请参考https://github.com/PanJiaChen...来修复这个bug。具体修改:将package.json文件中的“tui-editor”依赖替换为“@toast-ui/editor”;将本地文件的内容替换为参考中src/components/MarkdownEditor/index.vue文件的内容。去掉浏览器控制台输出的async-validator验证警告:注释掉console.warn(type,errors);在node_modules/async-validator目录下的es/util.js和lib/util.js这两个文件编译源码时,Eslint会在验证失败时给出一些提示:Stringsmustusesinglequote。必须使用单引号,不能使用双引号。不允许尾随空格。需要删除多余的空格。属性“:sizeOpts”必须用连字符连接。属性是大写的,需要用“-”代替。1.3Vue.js提示$nextTick()会在下一个DOM更新周期结束后执行延迟回调。修改数据后立即使用此方法获取更新后的DOM。handler()会在被监听对象的属性发生变化时被调用,无论嵌套多深。Computed用于监控自定义变量。它可以在页面上进行双向数据绑定,以显示结果或进行其他处理。它更适合处理多个变量或对象并返回一个结果值。错误:关键依赖:依赖的请求是一个表达式。解决方法:将babel-eslint换成稳定版,比如“^10.0.3”换成7.2.3。1.4Element-UI使用技巧el-upload上传组件,可以使用http-request自定义上传方式。下面的代码已经简单处理过:resolve,reject)=>{constformData=newFormData()formData.append('file',file)getImage(formData).then(response=>{this.tempUrl=response.dataresolve(true)}).catch(()=>{reject(false)})})}调整$confirm提示框的按钮位置。$confirm提示框的按钮默认顺序是取消,确认,修改代码调整:CSSadjustment.el-btn-custom-cancel{float:right;margin-left:10px;}设置$confirm按钮的样式......cancelButtonClass:'btn-custom-cancel',...}Error:Uncaught(inpromise)cancel.因为this.$msgbox没有使用.catch(),所以无法捕捉到cancel操作。您可以这样写:this.$msgbox({...}).catch(error=>error)2更多有用的网站Vue.js:一个用于构建用户界面的渐进式JavaScript框架,遵循MIT开源许可证。URL:https://cn.vuejs.org/.Element:WebsiteRapidPrototypingTool,一个面向开发者、设计师和产品经理的基于Vue2.0的桌面组件库。URL:https://element.eleme.cn.npm:JavaScriptWorld包管理工具,是Node.js平台默认的包管理工具。通过npm,您可以安装、共享、分发代码以及管理项目依赖项。网址:https://www.npmjs.com/。Webpack:一种静态模块打包模块打包器会递归地构建一个依赖图(dependencygraph),其中包含应用程序需要的每一个模块,然后将所有这些模块打包成一个或多个bundle。网址:https://www.webpackjs.com.axios:一个基于promise的HTTP库,可以在浏览器和Node.js中使用。网址:http://www.axios-js.com/。3参考链接①vue-element-admin项目指南网站②Markdown组件无法预览html内容·Issue#3308·PanJiaChen/vue-element-admin③element$confirm提示框按钮位置调整-简书
