不请自来，我只是一只菜鸟。
假定题主的问题是为自身技术的提升而问，请继续看下去。
如若题主的问题是为了做一个普通的网站，请绕道别处吧。
===
既然有人点赞，就继续补充吧，努力骗更多的赞~\(≧▽≦)/~！
===
【一、语言、工具：工欲善其事，必先利其器。
各种各样的语言为实现功能而服务，作为一只很菜的前端汪，当然是选择自己最熟悉也最容易掌握的语言了——什么爪哇（Java）请走开好么？！NodeJS显然是首选~\(≧▽≦)/~啦啦啦，(别跟我说Golang，那玩意是初学者可以轻松掌握の？那结构难道不是很丑？！)
一个用着舒服的编辑器( ⊙o⊙ )千真万确可以提升写作的速度和效率，推荐如下：
Visual Studio Code >> 如何评价 Visual Studio Code？ - 微软（Microsoft）
Sublime >> Sublime Text 有哪些实用技巧？ - 前端开发
IDEA/WebStorm >> 前者集成环境适用于各种语言的开发，后者专注前端 (IntelliJ IDEA - 话题精华
【二、知识、技能：哎哟，忘词了！
基础CSS知识( CSS 教程)基础HTML(HTML 教程)
基础Javascript(JavaScript 教程)数据库操作(db) (SQL 教程)网络请求(ajax/http)(AJAX 教程)
文件读写(io.file)(如果你不是和我一样要用文件存储，那么db几乎是必需的了...)
2.1 数据库：
2.1.1 表建立(我们做博客么，自然最重要的额就是文章了，那么post字段如下：
id
title
subtitle
content
category
author
date需要其他表的，自行换成想要的样子，反正需求简单，就随便写吧。
2.1.2 表操作
为什么我们要说这个问题呢，你自己建啊，又是学习啊，不懂SQL以后玩毛？！
2.2 文件操作
别怪我废话，文件操作真的很重要，但是吧，但是吧你不会可以搜索( ⊙ o ⊙ )啊！类似file.read()、file.write() 这样的东西一定要知道一些。就算不知道，好吧，假设我们已经确定了用node的情况下，require()——也差不多勉强可以用了，反正人工约定也不是不可以~
【三、预期、需求：最起码你得知道自己要做个什么吧？
看到有人说自己做做着做着就成了博客，实名反对好么？
但是呢，不得不说，其实学会了做博客，其他的，基本差不多的样子T.T ？
为什么这么说呢？
就目前大多数普通网站的后端主要功能就是更删改查。
后端：
查询数据并Return : html(通过模板引擎渲染)/Json验证数据并Return : 同上
前端：
(⊙v⊙)嗯，那我们先来做个博客吧！
【四、书写、建站：说了那么多废话，终于可以动工了。
假设我们要建立的如上的网站，主要模块分为：
（个人习惯，在代码组织上以功能为模块，受angular影响了...）
index
about
blog
doc
labs
fm
4.1 Backend
博客我们说过了，需要动用数据库，需要进行 增删改查这四个基础功能。
以我的mongodb为例吧，实现文末 *附1 的几个功能就好了（自己懒得写了就去copy（不对！借用别人的...）
add()
put()
del()
get()
getAll()
当然了，前端还要显示对吧，所以页面呢，其实差不多，也就是个静态页，然后最后把数据render到html上就好。怎么玩随你。实现不想写页面直接用res.send()也可以。
4.2 Frontend static
index&about基本就是静态页，不需要什么东西，所以，请动用最初说的html/css基础做一个你喜欢的页面吧（丑也没关系！虽然我确实很难接受...），然后留着备用喽~
对了，忘了说，其实更好呢，是规划一下你这个网站未来的布局、样式、板块呀什么的，但是对初学者来说这些balalala的东西估计也听不懂，后面再改去吧~
这里如果能规划下去，大概坑填的差不多的时候就可以建立一套自己的UI库了。
4.3 Frontend dynamic
可能我设计不太合理，分类不明确，但是我感觉吧，前面那些都很简单，
后端的基础功能是很好实现的对吧？之前那段代码（*附1）基本就是核心了。
我是把路由（访问的url）也包含在这个分类了
（lue挑，链接难看的实现接受不了t..t），我的路由一般是这样：
http: //http://www.domain.com/
Fe：
/blog
/blog/posts
/blog/post/postName
Be:
/api/blog/add
/api/blog/put
/api/blog/del
/api/blog/get/pid
/api/blog/getAll
前端与后端都是通过api这个接口来实现类似无更新刷新页面之类的功能，准确说，这么做就是为了我前端后台的angular服务的....(AJAX 教程)
4.4 Frontend interactive
JS大法好，放到最后就是因为js的玩法太多了，所以真不好怎么说，但凡在网站上能看到的效果都可以和它擦出爱情的火花( ⊙ o ⊙ )啊！什么WebGl / Canvas / ( ⊙ o ⊙ )啊！各种神奇的效果都是通过它来做呀！当然了，还有各种神奇的技术，那就是前端汪的最爱( ⊙ o ⊙ )啊！
来看！
A 3D FPS concept using HTML and CSS3 transforms by Keith Clark
A 3D engine built using HTML and CSS 3D transforms by Keith Clark
看看这些神奇的效果，不心动么...再来？
Video/Canvas Demo 1
D3.js - Data-Driven Documents
( ⊙ o ⊙ )啊！我去，好像已经偏离了方向，但是没关系( ⊙ o ⊙ )啊！真的很好玩好么！
===
有时间再补充，╮(╯▽╰)╭，一入前端深似海，从此节操不好买！
对了，顺便贴小广告：MT-Libraries/MT-Notes · GitHub
===
附1 (postService):
/**
* Created by thonatos on 15/1/12.
*/
var Post = require('../model/post');
exports.postService = {
add: function (post, callback) {
var _post = new Post(post);
console.log(_post);
_post.save(function (err) {
if (err) {
callback(err);
return;
}
callback({
auth: true,
data: {
req: '/post',
res: 'success',
msg: post.name + " Added."
}
});
});
},
put: function (pid, post, callback) {
Post.findById(pid, function (err, oldPost) {
if (err) {
callback(err);
}
oldPost.name = post.name;
oldPost.desc = post.desc;
oldPost.tags = post.tags;
oldPost.date = post.date;
oldPost.author = post.author;
oldPost.content = post.content;
oldPost.save(function (err) {
if (err) {
callback(err);
}
callback({
auth: true,
data: {
req: '/post/' + pid,
res: 'success',
msg: post.name + " Updated."
}
});
});
});
},
del: function (pid, callback) {
Post.remove({
_id: pid
}, function (err, post) {
if (err) {
callback(err);
}
callback({
auth: true,
data: {
req: '/post/' + pid,
res: 'success',
msg: pid + " Removed."
}
});
});
},
get: function (pid, callback) {
Post.findById(pid, function (err, post) {
if (err) {
callback(err);
return;
}
callback({
post: post
});
});
},
getAll: function (currentPage, perPageNum, callback) {
var perPageNum = perPageNum;
var currentPage = currentPage;
Post.count(function (err, totalRecords) {
if (err) {
callback(err);
}
Post.find().skip(( currentPage - 1 ) * perPageNum).limit(perPageNum).sort('-date').exec(function (err, posts) {
if (err) {
callback(err);
return;
}
var pageCount = ( totalRecords - totalRecords % perPageNum ) / perPageNum;
pageCount = ( totalRecords > pageCount * perPageNum ) ? ( pageCount + 1 ) : pageCount;
callback({
pageCount: pageCount,
currentPage: currentPage,
perPageNum: perPageNum,
posts: posts
});
});
});
}
}; |
窥视卡
雷达卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
