前后端分离项目实践（一次尝试）

前言：

这次项目是学长的一个项目，由我和光岚负责，光岚负责后端，我负责前端，两个人撑起这个项目，绝了。。。（还好项目不大），在项目开发的过程中，也遇到了不少问题，同时也收获了不少。

经验总结：

1.前后端如何交互？

通过浏览器调用接口，拿到后台的数据，再做前端的数据渲染。

2.接口调用方式采用axios或者fetch方式，我用的是axios。

3.具有restful格式的URL：

HTTP请求方式：

①get 用来查询

②post 用来添加

③put 修改

④delete 删除

4.关于axios的响应结果。

data：响应数据

headers：响应头信息

status：响应状态码

statusText：响应状态

5.对于axios的全局设置。

// 超过3秒没响应，返回服务器出错

axios.defaults.timeout = 3000;

// 配置请求的基准URL地址，后面请求会拼接

axios.defaults.baseURL = 'http://localhost:3000/';

// 配置请求头信息

axios.defaults.headers['mytoken'] = 'hello';

axios.get('axios-json').then(function(ret){

    console.log(ret.data.uname)

})

6.前端可以成为项目沟通的中心，所以比后端更合适承担主导的角色。

我会受到客户或者管理员的直接影响：这个地方应该放个按钮，那个操作应该这么进行……；

我需要与原型图（美工）对接——这样的设计不好实现，是否可以改成那样？光岚要求必须这么操作，但是这个设计做不到。。。

前端还要跟后端对接，对于某些应用，甚至是多个后端。。

7.接口传过来的参数要么是表单，要么是JSON类型。

8.接口文档很重要，可是我们最后才确定下来，是个错误的决定。

9.前后端分离注重的是MVC，不过View层和Control层都是我来搞。

10.展示的数据就是Json来渲染上去的，注意json内容是字符串！！！即使你给个数组，它也会给你个数组字符串。。。要注意转换。

11.前后端的跨域问题！！！

什么是跨域？

浏览器在解析js代码时，发现js代码请求了了一个不属于当前服务器的资源，这时就称为跨域访问。

类似于下图：

跨域样例

出现"Access-Control-Allow-Origin"或者"not allowed access"一般都是出现了跨域的问题。

这个问题只要前端或者后端其中之一解决了就没问题了，但是vue前端解决这个有点麻烦，因此后端解决是个好点子。

12.合理的表单验证模式应该是双向验证的。前端在用户输入的过程中就需要实时的检查是否带有特殊符号等等，而不是等用户填写完内容后提交，由后端来告诉用户说：“你的用户名不符合规范”。但是，后端在收到前端的数据后，不管我有没有验证，后端不是都应该按照你的逻辑进行验证吗？

13.前端技术：Vue.js框架，使用了ElementUI。后端技术：Go框架,整合了mysql数据库。

14.开发前需求一定要确定好，快要结束的时候，光岚才发现原型图上少了两个功能，搞得我后来还要填上。。。

15.vue.js学的太快了，有些东西没学到或者忘了，需要再补补。

16.vue.js中图片上传的问题没有解决。。。

总结项目流程（补充参考的）：

1.需求人员向项目组提出需求，然后给项目组的所有人进行需求讲解，大家一起探讨需求中各项细节的可行性。（Done）

2.当开发人员和需求人员一起确定没有问题的时候，开发人员返讲一遍需求，当双方都没问题的时候需求才可以定下来。(Undone)

3.需求确定以后，开发人员进行分工调整，然后订制开发设计概要和Api，后端Api中一般包括一些接口，需要的参数，需要和前端确定访问路径以及传递的参数和数据格式。（Done 80%）

4.在设计api的过程中，需要前后端各自设计好后互相讲解，讲解中要达到相关重要点的意见一致。(Done 50%)

5.需要有测试人员编写测试用例，验证是否可行。(Done 50%)

6.前后端开发人员自己需要有测试用例，在测试中不断修改和优化自己的代码使其代码更加简洁。(Undone)

7.当双方都测试没问题后，进行联调，进一步确定功能没有问题。(Done 20%)

8.打包部署到服务器，测试人员测试。（Undone）

结语总结:

我能体会到前后端分离并不是一种开发模式，而是一种架构模式(MVC)。前端需要关注页面的样式与动态数据的解析和渲染。现在存在的问题就是我完成了页面，但是后端的文档没出来，我也只能是后端写啥我要啥，效率都变慢了，开发人员就我和光岚，用了两个星期项目大概成型，但是我这边就等后端接口了，还有就是自己的代码封装的不太好，导致几个页面的代码进行了复用，产生一些冲突。这次实践就暂时到这吧。后面复习专业课。。。