前后端分离项目实践(一次尝试)

前言:

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

经验总结:

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容