[ 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组件