基于Flask 的一个简单前端框架，Vue.js + Bootstrap4

       首先，本人是一个小白。上个月来到现在的公司，接手了公司内部的业务管理系统，负责前端。之前公司是前后端都做，但个人更感兴趣前端。

       先简单说下接手的项目吧。项目很冗余，python写的后台主要就是2个文件。一个view.py处理所有页面的请求，没有按功能模块分开，model.py处理sql语句。所有的业务功能都在这2个文件里面，每次打开都会很头疼......后台基本没有用到任何优化措施，大量的重复代码，对于返回给前台的数据，全是数据库查出来没经过任何处理的Array，这对于我来说简直是奔溃的。而前端的页面也没有使用到mvvm框架，全是jquery操作,同时伴随着大量的Jinjia2模板语言在前端，几乎没法阅读下去，后台也拼了很多Dom在里面,可读性极差，而且修改起来无从下手。同时也导致稍微复杂点的业务页面在浏览器解析后达到万行级别。（开发该项目的同事以前是专门做数据这一快的，功能业务多，就2人，现在前后台的坑多也是ok的，慢慢填坑优化吧）

      前端页面结构如下:公共模板

子页面

上图中active_page是当前路由页面的变量，他的值是页面引用的js的名字，从而传给模板页面实现动态加载页面js;

变量后跟的random其实是发现引用的js放在项目结构其他地方引用不到，而只能放在static下。放在static下就会导致浏览器一直缓存js,每次需要手动清理缓存，所以从后台传了个随机数，这样避免浏览器缓存修改的js。(有解决办法欢迎留言)

项目结构如下图

附上之前的页面

页面基本就是穿插各种模板语言，和后台拼好的模板给前台引用。这样的页面很乱，前后端耦合太严重了，css也不好控制。

前端结构基本就是这样子了，接下来还要优化后台分页，以及后台数据格式化，将数据封装成前端需要的对象，增删改查自动化。之前页面都是把所有数据从数据库取到，然后在前台分页。