[ vue ] xxxProject项目杂记

2020.4.9

  • 加入eCharts

2020.4.8

  • 完成article的显示,其间碰到全局路由守卫写的有错误,导致跳转报错。已修复。
  • 加入keep-alive功能,缓存视图数据
  • 疑问:如果在全局组件上使用keep-alive,会导致tinymce出错,如何解决?
    • 方案一:使用keep-alive的include,把需要缓存的组件加进去,会出问题的组件则除外。注意include必须要具名组件!
  • 理清ant-design-vue的表格逻辑,可自行添加功能。下一步实现表格的动态增减。
  • 后端model重构
  • ant-design-vue表格组件,第一次看到这种形式:写在return外面。怎么理解呢?
    •   
      export default {
          data() {
              this.cacheData = data.map(item => ({ ...item }));
              return {
                  data,
                  columns,
              };
          },
      }
  • 数据库关系示例:{项目Project} 1<——>n  {票Bugvote}

    在create_bugvote()中,需要先把projectname写进数据库,再取得其id,在提交bugvote时作为外键值。

    如何在提交了projectname后再取得它的id呢?

    • 答:commit到数据库后就projects对象就已经有id了。参考:https://segmentfault.com/q/1010000004827321
    • 提交project的函数最好卸载models里面。
      @bp.route('/...',methods=['POST'])
      def create_bugvote():
          bugvotes = Bugvote()
          projects = Project.query.filter_by(projectname=data['projectname']).first()
          # 没有projectname则先创建project
          if not projects:
              projects = Project()
              projects.projectname = data['projectname']
              db.session.add(projects)
              db.session.commit()
      
          bugvotes.proj_id = projects.id
      
          bugvotes.from_dict(data)
          db.session.add(bugvotes)
          db.session.commit()
          response = bugvotes.to_dict()
          return jsonify(response)

20204.7

  • 疑问:如何处理vue-router嵌套过深的问题?让路由最多分两级。
  • 疑问:富文本如何储存表格?
    • 答:最后写进数据库是html格式
  • Aricle页面布局
  • 实现酷炫的Title输入框

2020.4.6

  • 修复导航栏的bug,实现导航栏的选中状态随着url的变化而变化。
    • 改用watch来监听路由变化
    • created的时候根据当前路由纠正导航的选中状态
  •  完成导航切换的过渡动画
  •  实现前后端联动
  • 实现根据项目名查询内容,动态显示,动态加载。
  • 修复来回切换导航后数据停止请求的BUG
  • -------------------------------------------------------------------------------------------------------------
  • 完成后端框架配置,连接上MySQL
  • 优化关系模型,完成接口编写
  • 分页有BUG,未修复

2020.4.5

  • 解耦mock,在main.js中只需引入index.js即可。
  • 使用mock接近RESTful规范
  • 解耦vuex,
  • 成功配置tinymce(花的时间最多)
  • 按需引用tinymce组件
原文地址:https://www.cnblogs.com/remly/p/12639630.html