7 天开发后台系统技术小结

Wesley13
• 阅读 380

在确定了后台系统的详细规划和整体功能以后,花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站 魚立说 的经验,整理了在开发后台系统过程可能会遇到的各种技术要点。

本文来源:魚立说。本文链接:https://www.yulisay.com/d/endskills.html,支持微信浏览器打开。

更多精彩文章,请移步 魚立说个人网站 翻看。欢迎欣赏,吐槽不足之处。


涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 end-skills 目录,若觉得有用,请分享并 star 。

1 后台开发小结

下面对后台系统的开发技术要点依次进行概括,包括必要的说明和资源引导。

1.1 后台系统模板

搭建后台系统,为了省时省力,可以选用一些流行的后台系统模板。关于这部分,可以阅读本站整理的《流行的后台管理系统模板》一文。

考虑到技术的流行性和后台功能的完善,本站使用了基于 Vue.js 和 Element-UI 实现的 vue-admin-template 作为参考,进行了后台系统的搭建和二次开发。

参考 vue-element-admin 后台系统模板,最终的后台系统效果将如图所示:

7 天开发后台系统技术小结

1.2 vue-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/vue-element-admin/commit/3057489cc66e17b97a77512c1e3621b96c37a4ba 修复此 bug。具体修改:

      1. 把 package.json 文件中的 "tui-editor" 依赖替换成 "@toast-ui/editor";
      2. 使用参考中的 src/components/MarkdownEditor/index.vue 文件内容替代你本地的文件内容。
    
  • 去除浏览器控制台输出的 async-validator 验证警告:

      将 node_modules/async-validator 目录中的 es/util.js、lib/util.js
      两个文件里的 console.warn(type, errors); 注释掉
    
  • 在编译源码的时候,Eslint 校验失败的时候会进行一些提示:

      Strings must use singlequote. 必须使用单引号,不能使用双引号。
      Trailing spaces not allowed. 需要删除多余的空格。
      Attribute ':sizeOpts' must be hyphenated. 属性有大写,需要使用"-"取代。
    

1.3 Vue.js 使用技巧

  • $nextTick() 会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,可以获取更新后的 DOM。

  • handler() 会在被侦听对象的 property 改变时被调用,不论其被嵌套多深。

  • computed 用来监控自定义变量,可以在页面上进行双向数据绑定展示出结果或作其他处理,比较适合对多个变量或者对象进行处理后返回一个结果值。

  • 报错:Critical dependency: the request of a dependency is an expression. 解决:将 babel-eslint 更换至稳定版本,比如由 "^10.0.3" 更换至 7.2.3。

1.4 Element-UI 使用技巧

  • el-upload 上传组件,可以使用 http-request 自定义上传方法。如下代码做了简略处理:

      <el-upload
        ref="upload"
        accept=".jpg, .jpeg, .png, .gif"
        :http-request="uploadFile"
      >
    
      uploadFile(params) {
        return new Promise((resolve, reject) => {
          const formData = new FormData()
          formData.append('file', file)
          getImage(formData).then(response => {
            this.tempUrl = response.data
            resolve(true)
          }).catch(() => {
            reject(false)
          })
        })
      }
    
  • 调整 $confirm 提示框按钮位置。$confirm 提示框的按钮默认顺序是取消、确定,修改代码进行调整:

      # CSS 调整
      .el-btn-custom-cancel {
        float: right;
        margin-left: 10px;
      }
    
      # 设置 $confirm 按钮样式
      this.$confirm(
          ……
          cancelButtonClass: 'btn-custom-cancel',
          ……
      }
    
  • 报错:Uncaught (in promise) cancel. 因为 this.$msgbox 没有使用 .catch(),无法捕获到取消操作。可以这么写:

      this.$msgbox({
          ……
      }).catch(error => error)
    

2 更多有用的网站

  • Vue.js :一套用于构建用户界面的渐进式 JavaScript 框架,遵循 MIT 开源协议。网址:https://cn.vuejs.org/

  • Element :网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。网址:https://element.eleme.cn

  • npm :JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。网址:https://www.npmjs.com/

  • Webpack :一个静态模块打包器(module bundler),会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。网址:https://www.webpackjs.com

  • axios :一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。网址:http://www.axios-js.com/

3 参考链接

vue-element-admin 项目引导网站

Markdown components can not preview html content · Issue #3308 · PanJiaChen/vue-element-admin

element $confirm 提示框按钮位置调整 - 简书

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Wesley13 Wesley13
2年前
5 天开发接口系统技术小结
在确定了接口系统的详细规划和整体功能以后,花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站魚立说(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.yulisay.com)的经验,整理了在开发接口系统过程可能会遇到的各种技术要点。本文来源:魚立说。本文链接:
可莉 可莉
2年前
10 天开发前台系统技术系列
在确定了前台系统的详细规划和整体功能以后,花费时间更多的其实是对技术细节的打磨。本篇文章是一个对前台开发技术进行概要整理,也会对其他的分主题进行一些引导。本文来源:魚立说。本文链接:https://www.yulisay.com/d/frontskill.html(https://www.oschina.net/action/GoToLink?url
Python进阶者 Python进阶者
8个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这