3548人阅读
nodejs（6）
什么是Express
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
不难发现我们可以因此而更快的开发一个网站，而且是在稳定，已经测试的代码之上编写应用程序
Express能做什么
1.基于json的API
2.单页面web应用程序
3.实时web应用程序
但是如果我们创建命令脚本的话，就不会使用他了
安装Express
在上一篇博客（）讨论npm的全局安装，这里就不再介绍了。
再我们执行’npm install -g express’之后出现如下信息，则表示express安装成功。
创建Express站点
1.新建文件夹exress_demo,再文件夹内打开cmd.exe,输入
express epxress_example
我们会发现出现了那么多的create，那么就表示我们的基础站点已经创建成功。
3.当然人家还是很人性话的提示执行
cd express_example &&npm install,这句话的意思是安装运行Express所依赖的模块。
4.执行cd express_example &&npm install出现如下结果。
我们看一下我们的express_demo文件夹下是否又如下文件：
如果有，就表示我们创建成功了，那么我们现在打开app.js文件，在
module.exports = app 这行代码的上边加上app.listen(3000);，这样我们再cmd.exe的窗口中输入node app.js.
打开浏览器，输入,如果看到如下结果，那么恭喜，一个基础的Express我们就创建成功了。
探索Express
如我们的文件结构
用来启动程序的应用程序文件，他包含应用程序的配置信息
package.json
提供运行程序的信息，包含所需依赖的模块
定义应用程序的布局
公共文件夹，我们可以在里边看到js文件，图片等信息，
路由，我们下一篇博客再详细说
6. node_modules
存放package.json依赖的模块
view的jade文件
在view中我们会看到又一些jade文件，他利用Express模版为我们快速生成html文件，jade是基于缩进的模版，什么意思，给大家举个例子
例如我们再jade中写
那么会生成html中的
&html&&/html&
例如我们要给section标记一个ID,写法如下
section#wrapper–&&section id='wrapper' & &/section&
亦或者我们要添加一个class名称或者多个类名称
p.highlight–&&p class='highlight'&&/p&
p.first.second.third–&&p class='first second third'&&/p&
如果体现结构的话，我们需要缩进
&p&&span&&/span&&/p&
Jade的优势是他不仅能够进行文件的结构，还能进行输出数据。
- var menghaibin = 'shuaige'
p I want to be #{menghaibin}
编译后就是I want to be shuaige
例如我们在view中的index.jade加入如下代码
- var menghaibin = 'shuaige'
h1.shuaige#demo 这就是个测试jade的demo
span I want to be #{menghaibin}
然后运行node app.js，但是运行之前大家可以想象一下结果是什么。
脑补完以后我们看一下结果。
生成的html
当然这里的缩进，如果是用的tab,都用tab，如果是空格，都用空格，否则会报错。jade还有循环，内联等，这里就不再一一说明了。
alert('Inline Javascript in Jade')
- beatles = ['John', 'Paul', 'Ringo', 'George']
each beatle in beatles
li #{beatle}
结果什么样，大家可以自己尝试。
这篇博客，我们讨论了Express的作用和安装，我们还说了Jade这个模版的方便和使用，当然这还是入门，我们再说一遍，这篇博客只能是一个入门，但是这个入门非常的简单，相信可以让我们将node.js看成一个孩子吧，如果想让他长大，那么我们的路还很长。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：93806次
积分：4562
积分：4562
排名：第4655名
原创：145篇
评论：1394条
(4)(4)(4)(7)(10)(9)(5)(4)(6)(4)(4)(4)(4)(4)(4)(3)(4)(5)(5)(4)(4)(3)(2)(5)(1)(1)(5)(2)(7)(9)(1)(3)(4)(1)(1)(1)(1)11521人阅读
一、Express环境搭建
&&& Express是Node.js下的一个轻量级Web框架，有了它我们就可以轻松的架构出一个个人小型网站，Express框架安装步骤如下：
1.进入npm目录，执行 npm install express
&&& 这里我有必要说明一下：Expres框架现在已经是4.X版本，在4.X版本中是将命令行工具与模块分开的，我个人不习惯这样，所以我继续安装3.X版本()。安装成功后，会在node_modules文件夹下出现express文件夹，这样express就成为Node.js的一个模块了。在我安装的版本中，express的当前文件夹下会出现一个.bin文件夹，这里就是express的命令工具，现在我们创建一个新的Express项目，步骤如下：
2.cd 进入.bin文件夹目录，执行express myFirstWeb,则会在.bin文件夹下出现一个新的项目工程&myFirstWeb&.
3.在cd进入myFirstWeb，执行npm install,安装myFirstWeb所需要的依赖模块。
这样一个新的Web网站就搭建起来了。
二、Express项目文件夹结构及其含义
1.myFirstWeb文件夹目录结构
2.myFirstWeb文件夹含义
node_modules：
&&& Web项目的模块管理，即你有任何的模块都有应该封装后放在此处，如连接数据库模块。
&&& 该文件夹下还有三个文件夹images,javascripts,stylesheets，含义很明显了，就不说了吧。
&&& 路由规则，即Web的控制器，这个稍后会介绍。
&&& 视图，但是这种视图并不是传统的html文件，而是html的引擎模板，这里默认的模板是jade文件，可以认为是前台UI。
&&& myFirstWeb的入口，packege.json里有定义&&start&: &node app.js&,这里很有必要把app.js代码解读一遍：
* Module dependencies.
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
&此代码中用express模块生成了app对象，app就是此次架设的web实例.
//设定端口
app.set('port', process.env.PORT || 3000);
//设定视图路径
app.set('views', path.join(__dirname, 'views'));
//设定视图引擎模板，还可以设定其他模板，后续介绍
app.set('view engine', 'jade');
//设定路由，该路由的处理交给index.js处理
app.use(app.router);
//设定静态文件路径
app.use(express.static(path.join(__dirname, 'public')));
//若get请求的url为当前路径，则交给路由index入口中的对应函数处理
app.get('/', routes.index);
package.json:
&&& 项目的参数信息。
三、执行myFristWeb
1.cd C:\Program Files\nodejs\node_modules\.bin\myFirstWeb
2.node app
&&& 不出意外则会看到Welcome to Express的字样，下面来解析一下整个运行过程吧：
&&& node app命令启动服务，监听3000端口，在浏览器输入时，客户端向服务器发送了url为'/'的get请求，服务器的事件请求是交给router模块的，并且在app.get('/',routes.index)中设定了该url请求是由入口index来处理的，index.js内容如下：
* GET home page.
exports.index = function(req, res){
res.render('index', { title: 'Express' });
&&& get请求的处理函数所做的事情就是为浏览器返回名为index的前台页面(此处调用的是/Views/index.jade)，由于index.jade中有一个title参数，所以需要传递参数title:'Express',这样就会在给客户端返回index.jade时填充变量，生成标准的index.html给浏览器，ps：模板引擎的好处之一就是替换变量，很方便吧。
&&& 至此，一次交互过程结束，下篇将一步步把这个myFirstWeb搭建的更加完美。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：557155次
积分：5131
积分：5131
排名：第3870名
原创：97篇
评论：208条使用Angular JS + Express JS入门搭建网站
最近，接到了新的任务，跟UI开发有关，用的是Angular JS，Express JS等技术。于是周末顺便学习下新技术。
组里产品UI架构如下：
其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的很多控件以及JQuery，后台主要是Express JS搭建的Web Server，Express JS配合Nginx使用非常方便。
由此在项目不忙的时候，自己于是有时间和兴趣学习一下Angular JS与Express JS。
同时自己实现了一个最简单的Angular JS + Express JS的网站示例。
&一. Angular JS
Angular JS是由谷歌员工开发，后由谷歌维护的一个项目，官网为：https://angularjs.org/。上面有详细的文档，可以下载最新的版本1.4和稳定版1.3.15。
简单来讲，Angular JS是一个作用在前端的Javascript框架。它的两大特点是通过指令扩展了Html，并且通过表达式绑定数据到Html。同时提供了控制器，Filter过滤器，Factory等服务。
Angular JS因为作用在前端，所以可以和任何服务器技术相结合，与Express JS就是很好的结合。
Angular JS的产生为了解决静态网页操作DOM的弊端，适用于开发动态Web应用。
Angular JS的原理可通过下图了解：
网上入门学习的资料也很多，这里不予赘述。但介绍一下Angular JS的几个重要概念：
1. 控制器Controller
要动态操作网页中的数据，我们可以针对Html页面编写控制器，控制器本质是一个Javascript方法，例如我们可以针对每一个HTML页面，写一个对应的Javascript方法做控制器，来控制页面中的数据。如下：
index.html
&!doctype html&
&html ng-app="myApp"&
&script src="lib/angular-1.3.15/angular.js"&&/script&
&script src="lib/angular-1.3.15/angular-route.js"&&/script&
&script src="js/controller.js"&&/script&
&script src="js/angularMainApp.js"&&/script&
&body ng-view&
&p&Hello {{name}}&/p&
这是一个Angular JS控制编写的页面，指定Angular JS的app为myApp，注意看其中的表达式，{{name}}，name就是一个动态变量。那name的值从何而来？就是要在对应的控制器中给name赋值，从来用户访问index.html页面时可看到name真实的值。
controller.js
// Declare angular JS level module wich depends on filters, and services
var myControllers = angular.module('myControllers', []);
// controller
myControllers.controller('indexContrl', ['$scope', function ($scope) {
$scope.name = "Kevin";
在controller.js中，我们定义了一个indexContrl的控制器，这个控制器来给index.html中的name赋值。当然我觉得真实开发中，控制器的代码肯定会很多，建议每一个像indexContrl的控制器单独放在一个JS文件中，这样规范，好维护。
那有一个问题，indexContrl如何与index.html关联起来？Angular JS怎么知道我们要用indexContrl来控制index.html？
这里有两种方式，一是在index.html中直接指定，
&div ng-controller="indexContrl"&
&p&Hello {{name}}&/p&
但这种方式，对于大型网站来说，太麻烦。建议使用另外一种方式，就是用Angular JS的另一个Module ng-route，做路由控制，针对不同的路径，在同一个文件中定义好各自的控制器。如下：
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章设计师如何学习前端？
一个设计师学习前端该从哪里入手？
邀，这个问题大概的确适合我答……（好久没正经答题了 - -）笔者的经历在知乎就可以看到，大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司 offer 是阿里的交互设计，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。也是走过了不少野路子，不过还好有小右哥
这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的 ;)接下来就说说自己的学习建议吧，一个小教程，也是自己走过的流程，仅供参考哈------------背景篇在这个时代学习新东西，一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富，自学能力也尤为重要，尤其是对于学习技术！入门篇（HTML/CSS）说起设计师希望学前端的初衷，大概还是因为各种华丽的网页特效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！”好在，“展示”对于前端技术来说反而是最简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！对于设计师来说，最有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已：&p& p is paragraph! &/p&
p { color:}
是不是非常容易，就跟读英语一样！接下来，你就需要开始自学啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个洒洒水啦推荐几个资源： (中文，一个很 Low 但是又很好的入门学习网站） (Codecademy，如果你英文 OK，强烈建议你使用它进行交互式的学习！里面从 HTML/CSS 到搭建网站的课程都有，免费，生动直观）这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。对于书，我非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了，比如这个作品集/简历： （好久没更新了…丢人现眼）入门篇（JavaScript/jQuery）想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 JavaScript 了！JavaScript 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！举个小栗子：alert("Hello World!")
就这一行，就可以在浏览器里弹出 Hello World 啦！在了解一些基础的 JavaScript 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 JavaScript 代码库），你只要知道它可以显著地降低你编写交互的难度就好了：$('.className').click(function(){
alert("Hello jQuery")
通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”对于没有编程基础的人来说，想要完全掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。我仍然推荐你使用
进行学习。另外，你可以看一看诸如《》 这一类非常实用的书籍，可以让你很快上手做出一些简单的效果来！如果学习得顺利，你还可以尝试使用各种丰富的
jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。比如说，配合
这样的轮播图插件，你可以很轻松的写出
这样的网页相册或者
这样的手机端 App 原型～最后，我想推荐下
，这是世界上最知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且中英文教程都非常健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。有余力的话，你不但可以学习如何使用它，还可以学习它背后的设计思想。转职方向一：前端重构 （Web Rebuild）业内通常把专精 HTML/CSS 的前端从业人员称为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知道怎么做更好。这对你理解 Web 世界非常有帮助，并且能帮助你做出更“系统化”的设计。CSS 的学问很多，你需要开始理解文档流、浮动流等各种定位的方式与原理，理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……这里强烈推荐一本书：《》，虽然前端技术突飞猛进，但这本书的思想永远不会过时。HTML 方面，要开始注重语义化、可访问性与结构的合理，你要开始学习“结构与样式的分离”，这里有一本神书将这种分离做到了极致：《》另外，各种炫酷屌的 CSS 3 属性你一定会喜欢：你可以用媒体查询做响应式网页设计，你可以用 transiton 和 animation 做补间动画与关键帧动画，用 transform 做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒！样样都是设计师的神器！如果你还掌握了 入门篇（JavaScript/jQuery）的知识，那么恭喜你！你已经可以做出很多有趣的网页了！很多 minisite 或者微信上的“H5” 小广告，这个程度的你已经可以轻松完成了！配合上你的设计功力，你可以开始尝试创作一些好玩的东西，比如这种富含交互和动画的网站
，它仍然是基于
实现的！或者给自己做个小小的个人网站试试转职方向二：前端工程师（Front-end Engineer）如果你觉得上述的这些都还满足不了你，你渴望做出更多了不起的交互，甚至你已经喜欢上了编程，想要转行做工程师，或者成为一名全栈设计师，那么你可以朝着这个方向继续发展！这个阶段的最大难度，是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，你还需要了解浏览器，学习 DOM、BOM、CSSOM 的 API，你甚至还需要学习一些网络原理，包括域名、URL、DNS、HTTP 请求都是什么…你可能会被这一大堆名词吓到。确实，想要搞定他们并不容易。但是，你要相信只要你肯花功夫它们也没有那么难，而更重要的是，如果你能拿下他们，你所收获的并不只是这些而已，而是真正跨过了一道大坎 —— 你的世界将因此打开， 你看待世界的方式将因此改变对于这个阶段，你可以继续在
上学习，但是 w3school 已经不够用了，遇到不会的语法，我推荐你查阅 ，这是少数中英文都有的非常专业且友好的网站。同时，你可能需要看一些书本来帮助你学习 JavaScript ： 《 》或 《》，大而全的书只需要一本就够了如果上面这本你觉得太难，你可以先看 《》来过渡一下，这本书比较容易，它会教给你 “优雅降级、渐进增强”的优秀思想如果你能顺利得渡过了这个阶段，我想你已经能做出很多令你自豪的网站了！试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器，或者搜搜“Github Pages”，然后把你的作品挂在网络上让大家欣赏吧！你还可以试着用 JavaScript 写写小游戏，这不但能锻炼你的编程水平还非常有趣～比如这是我刚学 JS 不久后 hack 一晚的产物 —— 用 DOM 实现的打飞机： （不支持手机）入行篇如果你能完成上述所有的学习，你已经是一名非常出色的前端学徒了！对于只是想要丰富技能的设计师或者产品经理来说，接下来的内容可能会让你感到不适 ;( 但如果你铁了心想要真正入行进入大公司从事专职前端开发的工作，那么你可以接着往下看：近几年的前端技术发展迅猛，前端工程师早已不是切切图写写页面做点特效就完事的职位，你需要具备相当完善的工程师素质与计算机知识，成为一名真正的工程师。你需要非常了解 JavaScript 这门语言，包括 闭包、IIFE、this、prototype 及一些底层实现（ES、VO、AO）、熟悉常用的设计模式与 JavaScript 范式（比如实现类与私有属性）。另外，新的 ES6 已经问世，包括 class, module, arrow function 等等你需要非常了解前端常用的网络及后端知识，包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式（JSONP/CORS、HTTP 强缓存/协商缓存，以及如何利用 CDN 、静态网站/动态网站区别、服务器端渲染/前端渲染区别等等你需要学习使用进阶的 CSS，包括熟悉 CSS 3，使用 Scss/Less 等编译到 CSS 的语言，使用 autoprefixer 等 PostCSS 工具，了解 CSS 在 Scope/Namespace 上的缺陷，你还可以学习 CSS Modules、CSS in JS 这些有趣的新玩意你需要非常了解前端的模块化规范，可能在你学习到这里的时候，Require.js/AMD 已经再见了，但是 CommonJS 与 ES6 Modules 你必须要了解。（你可以观看我的分享《》 来学习 JS 模块化的历史）你需要熟悉 Git 与 Shell 的使用，包括基于 git 的版本管理、分支管理与团队协作，包括简单的 Linux/Unix 命令、你要知道大部分程序员的工作可以通过 shell 更快更酷的完成，并且很多“软件”只能通过 shell 来使用。你还可以把你的代码放到 github 上与人分享，并且学习 github 上其他优秀的开源代码你需要熟悉并且习惯使用 Node，包括了解 npm、使用 Grunt/Gulp/Browserify/Webpack 优化你的工作流、对你的代码进行打包、混淆、压缩、发布，你还可以使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域，或者尝试用 Node 做后端渲染优化你的首屏体验你需要了解各种 HTML 5 的新 API，包括 &video&/&audio&，包括 Canvas，webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等等你需要学习 JavaScript 的单线程与异步编程方法，因为它们非常非常常用、包括 setTimeout/setInterval，回调与回调地狱、事件与event loop、还有 Promise 甚至 Async/Await你需要非常了解浏览器，包括主流浏览器的名称、内核与差异、包括私有属性与 -webkit- 等厂商前缀，你需要学习如何使用 Chrome DevTool，你需要了解浏览器渲染的 reflow/repaint 来避免 Jank 并进行有针对性的性能优化你需要专门学习 Mobile Web，因为移动互联网是趋势。包括 viewport、CSS pixel、 touch 事件、iOS/Android 浏览器的差异与兼容、移动端的性能优化、300ms delay 等等…你还需要知道 Hybrid 是什么，包括 Cordova/Phonegap，更复杂的比如和 iOS/Android 通信的机制，比如 URI Scheme 或者 JS Bridge你需要学习一些非常火热的前端框架/库，他们不但能帮助你更快的进行开发、更重要的是他们背后所蕴含的思想。包括 Backbone、Angular、Vue、React、Polymer 等等、了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 思想、Web Component 与组件化等等你需要学习如何构建 web 单页应用，这是 web 的未来，包括利用 history API 或者 hash 实现路由，包括基于 Ajax + 模版引擎或者其他技术的前端渲染、包括组织较为复杂的软件设计等等我还建议你学习更多的计算机知识，它们能对你的代码能起到潜移默化的作用，包括简单的计算机体系结构、更广泛的编程知识（面向对象/函数式等）、栈、堆、数组、队列、哈希表、树、图等数据结构、时间复杂度与空间复杂度以及简单的算法等等你需要了解业内的大神并阅读它们的博客/知乎/微博，比如
等等等等，很多思想和新东西只有从他们身上才能学到。我还推荐你多参加技术交流会，多认识一些可以一起学习的小伙伴，你们可以互相交流并且一起成长你需要具备很强的自学能力、对技术有热情并且不断跟进。因为 JavaScript/前端的社区非常非常活跃，有太多的新东西需要你自己来发现与学习：比如 Universal JavaScript、Isomorphic JavaScript、前端测试、HTML5 页游、WebRTC、WebSocket、CSS 4、SVG、HTTP/2、ES 7、React Native、Babel、TypeScript、Electron 等等等等…虽然一下扯得有点多，但这些确实就是你未来将会遇到的。你并不需要全部掌握它们，但是却多多益善；你也可以专精在某几个方面，这已经足以让你成为非常专业的前端工程师。最后，英语英语英语，无论是学习还是工作，这都是一个决定天花板的重要技能。以上。
坚持不懈的码代码，尽可能的有问题自己解决、要能找到编程的乐趣
作为一名设计出身，工作1年多以后开始自学接触前端的人来说，觉得有必要回答一下这个问题。当年大学的时候，互联网还没起来，或者说我们那边的学校比较闭塞，信息不够，也不知道做哪一块，所以大学毕业去了一家通信公司做GUI方面的东西，但是觉得没什么意思，所以在看了阿里道哥的互联网是怎么赚钱的以后，发现其实原来有互联网，而且核心点在这里，所以当时就想奔着开发出自己产品的思路接触技术，从前端开始学起。不过说来惭愧，后来因为面上了ctrip的交互岗位，所以就过来做UED方面的工作，没有直接转到前端岗位，然后接触到了一些实习生，但是水平可以顶的上传统行业出来的那些前端3年左右的经验（也就是我们说的BAT应届生的级别吧）。所以现在觉得，自己已经做了这几年的设计，而且都毕业2，3年了，后起之秀们实在太猛，比如问题里面的 黄玄，没什么优势，有点放弃往这个方向走，转而觉得将自己的当前的事情做到极致，也是一条不错的选择。 在业余也会写一些代码，当然这些主要还是为了为实现自己的想法而写，而没有花大量的时间去学习前端方面新的技术，因为技术更新太快了。可能我也不单纯算一个设计吧，未来的路可能也是在往产品方向走。所以最后问题还是回来，题中 同学说的很对，题主你是想怎么学，如果是想真正的转前端，那么 黄玄 同学说的就可以满足你的需求，按照这个一点点的学就可以了；如果只是想了解一下或者想对设计更有帮助一点，建议不要耗费太多时间在上面，其实也没什么，不过了解一下也不错，还是要将主要精力放在设计上，毕竟如果不是在念大学的话，还是需要现实一点，将某一个点做到极致，好拿到更多的钱嘛哈哈。最后附上 写的一篇文章：技多真的不压身吗？ 希望对你有所帮助。
从打开编辑器写下第一句代码开始…开个小玩笑楼上的回答已经很好了。现在国内有很多免费的学习网站都很不错，比如慕课。入门可以先去那边看看。如果想更快的，更系统的学习可以找个不错的机构学习。
黄玄的回答很全面了。只想补充说，你是为了做一个更好的设计师而学习前端呢，还是为了转行而学习前端。如果是前者的话，其实不需要特别的，平时工作中和前端一起工作的时候，多问几个为什么，多问几个这个到底是怎么实现的，周末做个hackathon，其实就够了。如果是为了转行的话，无他，做项目而已。加入我们一起做项目吧，
我当时也是设计转开发，但是就没 黄玄 那么顺利了。大一玩了一年，大二开始学习设计，学PS，记得那时候我可是连电脑都玩不转的。各种勉勉强强帮社团做海报，做宣传页。后来可能是真的天赋有限，做的设计颜色总是搭配不好，结构很乱，总被别人喷的生不如死。后来，就慢慢开始学习前端开发。那时候什么都不知道，就从W3C网站开始，学习HTML和CSS。大三的时候，接了一个网站的活，于是就慢慢又学习了JS，想想也惭愧，因为到那时候也接触前端一年了都没有好好看过前端开发的书。不过应付那个网站足够了。那时候不知道知乎，有微博但是没发过几条内容，不知道github，不知道什么是rss，用的编辑器是 notepad++ ，有问题在百度里面找(现在想想真是奇葩，不过也没办法，因为信息的匮乏，身边又没有人可以带我一下)。大三暑假，去了北京实习，那时候的我也有人要，我真的要谢谢这家公司。在公司没做什么事，就是帮一些公司做移动端网站的外包，就是把人家的PC端的网站做成移动端的。那时候就用jQuery Mobile，再加上我那一年的学习，做起来一点也不吃力。然后公司的人都用的是 Sublime ，我就也跟着用，在这里，我第一次见识了 less ，第一次运用了HTML5的新标签，第一次使用css3，才发现这些新东西对于我来说是那么近。实习的那两个月对我的影响是巨大的。大四一回来，我就急着用wordpress搭了自己的一个博客，然后开始找工作。那时候什么都投，BAT、去哪、美团、新浪等等等等什么都投。这里简单说说这些经历：百度，那年前端的笔试题和别的职位的笔试题是不一样的，我记得很容器就通过了，稍有难度的就是垂直、水平居中的问题，现在想想真是简单。腾讯，笔试题所有职位都一样，当我看到 xx 算法、xx寄存器的时候我内心是崩溃的，结果可想而知阿里，那年的阿里笔试是在网上做的，题目好像就5道，也很顺利就通过了美团、去哪和腾讯一样，就不说了上面是笔试，面试就没什么好说的，百度面试一上来就问一道算法题，结果自然是悲剧了。其他的公司面试还好，就不一一说了。然后说说毕业工作后，自己所学的吧：git工作流，知道了在github上找一些好项目张鑫旭的博客刷了一遍，对css有更深的认识，同时看看人家在四五年前就开始考虑的问题，自己真的比不了Linux ，现在只能说是各种命令使用没有问题css书：《CSS权威指南》 《CSS设计指南》 以及期待一下马上要出版的《CSS-Secret》(@CSS魔法
翻译)开始系统学习 CSS3 ，《图解CSS3》开始订阅优秀博客和网站： W3CPlus、FEX 、前端观察等等, 了解了css预编译不仅有less，还有sass，现在还有postCss前端的模块化 seajs和requirejs，项目中使用 seajs + Gulp ，现在在尝试 Webpack移动前端也是一份方向，近一年以来都是做这块的，使用flex布局，我们这边是Hybird，就是在App的Webview里调用App的接口来实现各种功能响应式设计，没什么好说的前端框架，当时Backbone还没好好用，Angular来了，Angular还没学，React又流行了，我现在这块还比较无力，不能多说Node，Node让JS有了更多的可能性，现在的水平只能对着API处理一下文件。。最后推荐一下JS的书：《Javascript权威指南》(当字典用) 《Javascript高级程序设计》(这个可以好好看) 《Javascript忍者秘籍》(刚刚出版)现在毕业一年半了，这是正在做还没有做完的：边学习边写一系列SVG教程，因为现在国内没有系统的教程，应用文章倒是不少。其实SVG我之前也只是应用，不过按照我的习惯，我喜欢系统地学习知识，也喜欢边学习边记录笔记。这样不知不觉地就做成了教程。。使用游戏引擎(egret/cocos)，之前在微信中腾讯做的一个很炫的动画展示，就是很多碎片拼合在一起，然后散开这样效果(网址找不到了)，而且用小米2看一点都不卡。我一看源码是用egret做的，整个网页都是canvas。那时起我就决定要学学这个东西。CSS的3d动画接下来我要做的：React的学习，之后使用React Native制作APP，要有产出Angular的学习，记说Angular2就要出来了系统地学习Node，要有产出，比如制作几个小工具，搭建一个MEAN的网站数据结构和算法，坦白说，这一直是我的痛点，从校招开始萦绕在我心里的痛点，这也是我这个从设计一点点走过来的人的痛点。我努力入个门最后推荐你做一个博客，如果嫌麻烦，可以在github上建立一个项目，用issue写博客，连样式都不需要配置。最后，是我的博客
网易云课程。。。看完自己动手跟着练习下然后照着百度搜索页面用代码看看你能不能实现。。能实现接着换更有难度的网站模仿选择运行的网站是因为你可以审查元素知道你需要怎么做
先是程序员,然后是前端程序员
谢邀。我有一个微信公众号，旨在给没有任何编程经验的朋友，讲解如何做一个简单的APP（包括ios/android/html5)，目前教程连载到了第9课，所以针对于题主的问题，也算有些经验，下面我来分享一下自己的思路：1. 首先要明白，类似于设计师这样没有任何编程基础的职能岗位，要学一门编程语言，是相当困难的，所以如果一开始要从变量、常量、函数，结构体等方面学习，我敢担保，通常不出几天就会选择放弃了；2. 所以我觉得最好的方式应该是：先给他们一个非常简单但又容易变化的例子，让他们自己随便摸着玩，这是什么意思呢？小时候大家应该都玩过模型、积木这样的玩具，这样的玩具千变万化，一开始也不用缜密的逻辑性，只要凭感觉随意拼搭就好，不管拼得好与坏，通过自己的摸索，始终会拼出一个东西来；3. 对照到web前端页面也是如此，我们可以给设计师一个完整的页面例子，让设计师通过编辑器随意修改，改页面标题、文字、图片，甚至于样式（颜色、字号大小、背景色）等等，在一个设置好的可控范围之内，让设计师随意修改，发挥他的想象力，不管怎么样，最终形成的一个页面，都是设计师自己做出来的一个页面，这样能最大程度激发起他们的成就感，同时也能让他们觉得，原来做一个页面出来并不是一件太复杂的事儿；4. 另外一开始的开发环境非常重要，有条件的设计师，最好找程序员兄弟们帮忙，先把所需要的开发环境搭建好，对于web前端开发环境来讲，其实还是比较简单的（通常一个sublime的轻量编辑器+nginx的web服务器就足够了），没条件的设计师，就老老实实参照着视频教程，把环境先搭建好，这是通往学习之路的至关重要的一步，毫不夸张地讲，任何一门语言，当你独立搭建好开发环境，敲下第一个“hello world”，并且运行OK，实际上已经成功了一半了；5. 当设计师们胡乱修改着几个例子，然后自己也鼓捣出几个页面后，最好能拜托程序员兄弟们，把自己做的页面放到服务器上，同时利用微信，把这些页面放到朋友圈或者各种社交平台传播。此时，你的狐朋狗友一定会给你留言：小子，牛逼呀！又能设计，又能写代码，真他妈牛！相信我，此时，你的自信心一定会达到巅峰状态；6. 乘着自己正是巅峰状态，马上打开w3cschool，老老实实再从基础开始学习吧，相信前面的铺垫已经给你树立了非常大的自信心以及对编程的兴趣，接下里只要循序渐进，每天拿出一小时时间学习，相信不出几个月，一定会学有所成！7. 针对于没有编程经验的设计师，这是我能想到的最好学习路径：先在实践中增加自己的自信心，然后再脚踏实地得补上基础，最终达到事半功倍的效果；最后，如果有缘看到此篇文章的朋友，也想学习编程，比如做一个APP（包括ios/android/html5，这些都是我会的技能），但苦于没有任何编程经验，那就跟我来一起学习吧！请搜索微信公众号：互联网老黑PS：我每周都会在微信公众号中连载学习教程，大家有任何问题都可以给我留言，谢谢。
How to make love 简称 HTML
已有帐号？
无法登录？
社交帐号登录}