我的Web前端开发从零开始详细手把手教程（一）

在一些技术社区的讨论里，常听到一种观点：前端开发门槛低，不如C/C++底层开发有技术含量、有前途、受重视，因为太容易上手了。但经过这些日子的实践和学习，一个清晰的认识浮出水面——前端开发并没有他们想象的那么简单，它是一份综合素质要求极高的工作，绝不是会了HTML、CSS和Ja vaScript就能成为一名优秀的前端开发工程师。

一位优秀的Web前端开发工程师，在知识体系上既要有广度，又要有深度：既要让网站的界面完美呈现给用户，又要让用户用得方便、舒服。从这个角度看，前端工程师应该同时具备设计师、用户体验师和软件工程师的素养。

Web前端开发的核心技术包括HTML、CSS和Ja vaScript。但随着RIA的流行和普及，Flash/Flex、Silverlight、XML以及服务器端语言也成了前端工程师需要掌握的技能。简单说，HTML负责页面的架构，CSS负责美化布局，Ja vaScript则实现数据传递和页面插件的编写。

根据近期的项目实践，Web开发主要涵盖以下几个方面：

1. 构建数据结构：根据项目需求设计合适的数据结构。
2. 设计页面布局。
3. 用HTML、CSS呈现第二步设计的样式。
4. 用Ja vaScript实现数据的传递。
5. 数据存储和传递的安全性——这部分目前仍在摸索中，期待有经验的朋友不吝赐教。

下面用一个具体例子来展开：我们要构建一个简单的博客网站，包含用户、博客、留言三个核心模块。

1. 构建数据库——对应三个类：User、Blog、Message。

View Code

public class User : BusinessObject {
    public string LoginName { get; set; }
    public string LoginPassword { get; set; }
    public DateTime LastLogin { get; set; }
}
public class Blog: BusinessObject {
    public string Title { get; set; }
    public string Content { get; set; }
    public string Background { get; set; }
    [ScriptIgnore][IgnoreDataMember]
    public User BelongsTo {
        get { return GetValue("User"); }
        set { SetValue("User", value); }
    }
    [ScriptIgnore][IgnoreDataMember]
    public List Messages {
        get { return GetValues("Messages"); }
        set { SetValues("Messages", value); }
    }
}
public class Message: BusinessObject {
    public string Content { get; set; }
    [ScriptIgnore][IgnoreDataMember]
    public User BelongsTo {
        get { return GetValue("User"); }
        set { SetValue("User", value); }
    }
}

2. 设计页面布局——包括用户注册、用户登录、用户编辑、写博客、编辑博客、展示所有博客（包含留言）等页面，用图片做出样式。

3. 用HTML、CSS呈现以上页面。

4. 实现数据传递——通过ViewData、ViewBag、Model把后台数据传递给页面，用submit()或ajax把页面数据提交给后台。

5. 安全问题尚未完全解决，欢迎大家一起探讨——网站的安全问题一般怎么处理？