X Studio
loading...

网页开发完整过程是怎样的?

现在的网页开发,都是前后端分离开发的。

也就是需要同时掌握前端和后端的知识。


前端知识:

一、html

作为网站开发知识中基础中的基础,html标签没有什么学习难度。html标签有各自的作用,可以从:div,span,a,p,ul, il,button,br,strong 等入手学习。接着进阶学习canva,video,audio等多媒体标签。可以把html标签理解成一个元素单元,页面内的基本结构,后面的只是都只是在修改和优化html的内容和样式。

二、css

css是html标签的美妆师。修改html标签的样式,常用的是容器属性:display,position,样式属性:font,color,background,border等。 可以从这些先入手学习,后面再拓展去了解动画,过渡等。

三、JavaScript(简称js)

学习js,先从语法入手,了解变量,运算符,函数,对象,事件等,编写简单的功能,然后理解语言的特性,事件驱动和单线程异步。js可以操作html的内容和样式,也可以ajax提出网络请求获取数据,canvas绘画等等。

四、mvvm框架

直接使用原生js来编程还不够,原生js的接口要实现需求可能需要大量代码,这时就需要使用vue,react,angular等mvvm框架来提高工作效率了。mvvm的基础理念就是数据驱动元素。所有的元素渲染都可以根据数据的变化来实时高效地更新渲染。通常mvvm框架会配搭nodejs搭建本地服务器,数据的请求会通过反向代理来完成。

后端知识:

一、优先选择nodejs作为后端开发语言。

nodejs 实际上也是JavaScript,语法跟前端使用的js是一样的。只是运行的底层环境不同,所以提供的底层接口也不同。可以理解成同一个工具,在前端和后端环境里都能自如使用。而学习过js语法后的我们,可以直接查看nodejs的文档,一边编写一边查阅即可。

二、数据库操作

了解学习数据库的基本使用原理。可以先从mysql,mongoDB中选择一种来开启学习之路。数据库是存储数据的地方。增删改查的操作可以完成90%的需求。并且npm已经提供了nodejs对这两种数据库的操作库,根据文档的使用规则,就可以轻松调用数据库了。

三、websocket(长连接)

websocket可以实现比如聊天室,通知等等功能。一般的ajax网络请求完毕之后就结束,但websocket则是可以在连接期间自由地跟服务器做实时交流,第一时间获取到最新数据。

四、fs文件系统

文件的操作,比如视频、音频、文本等文件,都可以通过fs函数进行操作。实现比如复制、修改、删除文件等等功能。

五、express,koa 框架

该类框架已经封装好请求和路由等等常用功能,一键即可部署。无需再次使用原生接口进行二次封装即可开箱即用。

工具/材料:

一、代码编辑

个人推荐使用vscode,里面有海量插件,且完全免费。

二、远程操作服务器工具

Xshell : 命令行工具。 FileZilla:文件传输工具

三、服务器 域名购买

最好选择大品牌,保证质量和售后服务。

开发流程:

产品经理确定好要实现的产品模型,并将模型交给设计师进行优化设计,并同时交给后台做数据库设计。设计师完成设计后,会整理出相关ui设计图,切图并整理给到前端开发人员。后台开发人员做服务器实现逻辑,并与前端开发商定接口规范。前端开发人员拿到设计图后开始做前端页面,并使用后端提供的接口实现业务逻辑。等到前端和后端的开发完成之后,即可进入测试阶段,测试并发布产品。

所以产品经理、设计师、前端开发、后端开发都是必不可少的岗位。而如果产品想要大卖火热,则需要推广和营销,做好市场活动和推广方案,也是一个产品必不可少的一部分。

若想了解更多开发知识干货或有定制需求: 火猫网络

感谢您的阅读,若对您有用,请不要吝啬你的赞赞赞!