前端怎么学,如何从小白变成大牛,一篇文章实现你对前端的看法

个人名言:  没有一个人生下来就是天才,只是别人付出的汗水比你多了罢了,相信只要自己努力,就没有做不到的东西包括学习编程,你我都是黑马

一.什么是前端及前端的介绍

      前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTMLCSSJavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。

      前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2] 

      前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。

优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度!应该具备快速学习能力。

前端开发工程师 不仅要掌握基本的Web前端开发技术,网站性能优化SEO服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性分层语义模板浏览器分级支持等。

 前端工程师至少都要满足四类客户的需求:

  1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可能实现的应用。一般来说,产品经理都追求丰富的功能。
  2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说,UI设计师侯倾向于流畅靓丽、但并不容易实现的用户界面,而且他们经常不满前端工程师造成
1px 的误差。
  3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点,无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化,以及不在升级更新时引入新问题。
  4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道,但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能,以及竞争性产品所具备的功能。

好了,列举了这么多…… 你真的还想学前端么?不后悔吧? 如果真的做好了准备的话,哈哈,那我们就一起享受学习前端的乐趣吧! 

二.前端学习路线

一、基础

想成为前端开发者应该先打好基础:

HTML > CSS > JavaScript > jQuery > ajax> Vue.js> node.js> react> GitHub

不要担心以后会做什么决策,先好好深入学习。
在增值的方向上投资自己,才是最明智的。

学习了HTML、CSS就可以实现一些静态页面,不只是简单的静态页面,应该是稍微复杂一些绚丽一点的页面。

推荐书籍:《黑马程序员》

二、JS

JS可以跟着以下几张思维导图学习(听说是一位名为“阿民”的大师做的图):学习 Javascript 首先要知道这门语言可以做什么,不能做什么,擅长做什么,不擅长做什么!

1.JS

 

深入了解Javascript,需要了解 Javascript 的原理,机制;需要知道他们的本源;需要深刻了解 Javascript 基于对象的本质;还需要深刻了解浏览器宿主下 的 Javascript 的行为、特性。他也有很多缺点,各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题,需要深入了解、学会处理这些缺陷。

推荐书籍:

  初级:
  《JavaScript高级程序设计》
  《JavaScript王者归来》
  
  中级:
  《JavaScript权威指南》
  《JavaScript.The.Good.Parts》Douglas Crockford
  《高性能JavaScript》:Nicholas C. Zakas
  《Eloquent JavaScript》:
  
  高级:
  《JavaScript Patterns 》
  《Pro.JavaScript.Design.Patterns》讲解JavaScript设计模式
  《Developing JavaScript Web Applications》:构建富应用的好书,针对MVC模式有较为深入的讲解,同时也对一些流程的库进行了讲解。

三、后端语言

    如果单纯只是学习前端编程语言、而不懂后端编程语言(Java、PHP、ASP.NET,JSP、Python),也不能算作是优秀的前端工程师,我们还可以学习一门后端语言,这样可以算的上半个全栈工程师了,哈哈哈。

四、学习方法建议
1.限制一次学习的量,并且不断地实践——实际编写代码。

举个例子:就像学习数据结构一样,我有个同学A学习数据结构单纯的把书带到图书馆去看,我问A为什么不带电脑,A回答说光是看就已经看不懂了。能发现问题么?有时候我们可能看不懂代码,但是动手敲一遍可能会更认真的跟着代码的思路走一遍,在运行出来结果或者跟着调试的时候
才会恍然大悟!喔喔!原来是这个样子的!同学A数据结构学了好几遍都没有学好,而另外一个同学B却对数据结构十分熟悉、笔试面试几乎难不倒他,他跟我分享学习经验的时候就告诉我,一定要动手敲!而且不止要敲一遍!

——这也是很多人会走弯路,而很多人只会走捷径的关键。

2.用正确的心态去做练习,当成玩耍或者游戏。

3.写代码的时间魔法,先告诉自己只写10分钟,然而就会陷进去乃至一下午。

4.思考得更慢,学得更快。就像你在去理解别人的代码的时候一样,不要漏掉任何一行!

5.首先用简明的语言来写复杂的代码。这是一种锻炼!

6.定期定目标,每天都看看,想想,保持敏感、紧迫感、期待感。

7.记笔记:

  • 学习过程中搜集的资源链接;
  • 遇到的未决的疑问;
  • 那些很宽而我们用的很窄的知识点;
  • 那些能进一步深入而我们浅尝辄止的知识点;
  • 某个功能可能存在的其它实现方案的蛛丝马迹

 

总体的结构已经为大家规范出来了,前端的学习方向大致应该也就这么多了,还有一些框架和Ajax上面的知识,博主会在后续一一的给大家规范出来,希望这篇文章对大家有所帮助,如果还要什么需要补充的地方,需要修改的地方,请大家在下面评论出来,博主会给大家解答的。

 

 

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是一个简单的代码示例,用于在PetStore系统中增加修改密码的功能。以下代码仅供参考,具体实现可能需要根据实际情况进行调整。 UserController.java: ``` @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @PostMapping("/updatePassword") public ApiResponse updatePassword(@RequestParam("username") String username, @RequestParam("oldPassword") String oldPassword, @RequestParam("newPassword") String newPassword) { // 验证用户身份 User user = userService.findByUsername(username); if (user == null) { return ApiResponse.fail("用户不存在"); } if (!user.getPassword().equals(oldPassword)) { return ApiResponse.fail("原密码不正确"); } // 更新密码 user.setPassword(newPassword); userService.save(user); return ApiResponse.success(null); } } ``` 在UserController中增加了一个updatePassword()方法,用于处理修改密码的请求。该方法接收用户名、原密码和新密码三个参数,并返回一个ApiResponse对象表示操作结果。在该方法中,我们首先验证用户的身份,如果用户名或原密码不正确,则返回相应的错误信息;否则,将新密码更新到数据库中,并返回操作成功的提示。 修改密码的前端界面可以使用HTMLJavaScript实现。以下是一个简单的示例: update-password.html: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改密码</title> </head> <body> <h1>修改密码</h1> <form id="update-password-form"> <label for="oldPassword">原密码:</label> <input type="password" name="oldPassword" id="oldPassword" required><br> <label for="newPassword">新密码:</label> <input type="password" name="newPassword" id="newPassword" required><br> <button type="submit">提交</button> </form> <div id="message"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('#update-password-form').submit(function(event) { event.preventDefault(); var oldPassword = $('#oldPassword').val(); var newPassword = $('#newPassword').val(); $.ajax({ url: '/user/updatePassword', method: 'POST', data: { username: '当前用户的用户名', oldPassword: oldPassword, newPassword: newPassword }, success: function(response) { if (response.code == 200) { $('#message').text('密码修改成功'); } else { $('#message').text(response.message); } }, error: function() { $('#message').text('密码修改失败'); } }); }); }); </script> </body> </html> ``` 在上面的代码中,我们使用了jQuery库来简化AJAX请求的处理。当用户点击提交按钮时,前端代码会将原密码和新密码发送给后端API,并在接收到响应后给出相应的提示。 需要注意的是,上面的代码中的用户名需要根据当前用户的实际情况进行设置。一般情况下,可以从会话中获取当前用户的用户名,或者在登录时将用户名存储在Cookie中,以便后续使用。 以上就是一个简单的示例,用于在PetStore系统中增加修改密码的功能。如果需要更详细的实现代码,可以参考PetStore官方代码库中的实现
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值