前言:
这次项目是学长的一个项目,由我和光岚负责,光岚负责后端,我负责前端,两个人撑起这个项目,绝了。。。(还好项目不大),在项目开发的过程中,也遇到了不少问题,同时也收获了不少。
经验总结:
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)。前端需要关注页面的样式与动态数据的解析和渲染。现在存在的问题就是我完成了页面,但是后端的文档没出来,我也只能是后端写啥我要啥,效率都变慢了,开发人员就我和光岚,用了两个星期项目大概成型,但是我这边就等后端接口了,还有就是自己的代码封装的不太好,导致几个页面的代码进行了复用,产生一些冲突。这次实践就暂时到这吧。后面复习专业课。。。