前后端分离项目的源码结构

一、目录划分先看什么

前后端分离项目结构怎么看？先看目录：前端一个目录、后端一个目录，各自有独立的依赖清单，这是最基本的形态。两个目录混在一起、共用一个配置文件的，多半只是把页面拆了出去，不算真正的分离。

前后端分离架构的价值就在边界：视图层改界面不用重启接口服务，接口层改逻辑不用动前端构建。边界清楚，两边就能各改各的。卓创源码网整理的这类项目，目录说明写清楚的优先。目录看完了再看依赖清单：前端的构建工具版本、后端的框架版本，两者对不上的话，本地装依赖时就会卡住。

二、接口层与视图层的边界

前后端分离项目源码读到这一层，先确认边界在哪：前端只负责渲染和交互，数据与业务判断全在后端接口里。

Vue前后端分离项目源码常见的做法是接口地址集中管理：一处配置、多处引用，换环境只改一处。地址散落在各个页面里的，换部署环境时要改几十处。前后端分离项目开发时先把地址收拢，后面会省事很多。卓创源码网整理的这类源码里，地址集中管理的项目换环境基本不用改代码。

三、接口文档怎么看

前后端分离接口文档怎么看？看四样：接口地址、请求方式、参数含义、返回结构。四样齐全，前端才能照着写。

前后端分离接口项目源码里，文档跟代码同步是最难得的。改了字段不更新文档，前端按旧文档写，联调时才发现对不上。文档里还要写清错误码：哪一类是参数问题、哪一类是权限问题、哪一类是服务端问题，写清楚前端才好分别处理。卓创源码网整理时发现，文档放在代码仓库里、跟着提交一起更新的项目，这类问题少得多。

四、本地怎么联调

前后端分离本地怎么联调？三种做法：一是前端起服务、把接口转发到后端；二是前后端同端口部署，前端构建产物放进接口服务的静态目录；三是本地起两个服务，前端配完整地址。

三种都行，关键是团队统一。卓创源码网整理的分离项目里，第一种用得最多，改前端不用来回重启，调试时也更好定位是前端的问题还是接口的问题。

五、部署时的变化

分离之后部署分两步：前端构建出静态文件，后端单独发布接口服务。构建产物放哪、接口地址怎么配，这两项要在部署说明里写清，不然换台服务器就得重新猜。

还有一处容易漏：跨域与来源限制。前端和后端不同域时，后端要放行前端的来源，否则请求会被直接挡掉，页面上只看到一片空白。构建产物要不要压缩、静态资源走不走缓存，这两项也影响上线后的加载表现，最好在部署说明里一并写清。

六、前后端分离有哪些注意事项

前后端分离有哪些注意事项？三条：接口文档要跟代码同步、错误信息要统一格式、权限判断要放在后端。错误信息统一还有个好处：排查时能直接从返回码判断是哪一层的问题，不用两边一起翻日志。

第三条最要紧。把权限判断写在前端页面上，等于没做权限，接口照样能被直接调用。卓创源码网整理这类问题时，几乎都是权限放错了位置，而不是架构本身有问题。

七、怎么选与靠不靠谱

前后端分离项目怎么选？看三样：接口文档全不全、边界清不清楚、联调方式说没说明白。

前后端分离靠谱吗？架构本身没有问题，靠不靠谱取决于文档跟不跟得上代码。文档跟不上，分离反而多一层沟通成本。卓创源码网挑这类资源时，先看文档再看目录。

八、下载后怎么跑起来

前后端分离项目下载后怎么跑起来？先跑后端：导入数据、改配置、确认接口能正常返回；再跑前端：装依赖、配接口地址、启动服务。两边都通了再谈改造。

前后端分离源码下载下来之后，先确认包里前后端是不是各有一份依赖清单，缺一份就得先补上，否则本地装依赖时就会报错。前后端分离源码哪里有？下面几类源码在目录说明与环境标注上写得比较清楚，适合作为对照参考：工具导航页源码、在线图片编辑器源码、净化炭企业网站模板。卓创源码网整理的这几类，说明里写了运行环境与目录结构，照着核对能少走弯路。