本工程的目的是学习nodejs express4技术
学习的阶段性目标是山寨一个apple.com的硬件展示网站! 刚八代!
搭建nodejs + express 网站
1.建站指导文档
参考http://blog.fens.me/nodejs-express4
2.配置
学习html前台页面编辑
1.增加全局的header
2.增加三格滑动展示窗
3.底部场景展示
建站流程
###1.需求分析
共有两个页面。
页面1 官网展示
页面2 单个产品详细展示
###2.项目依赖初始化
2.1 在ws中新建工程选择,nodejs+express
2.2 选择模板和引擎
###入口文件编码
###创建视图
exress下EJS使用介绍
整体开发教程
###测试前端流程 ####前端模板引入 假如你想使用一个名为layout_header.ejs的模版只要建立layout_header.ejs后,在你的网页中引入 <% include layoutHeader%>就可以了。
为了实现一个图片轮播教程,引入一个jQuery控件,but 先学下jquery怎么用吧。
jQuery 教程
jQuery是一个js库,用于简化js编程,很易学。
1.jQuery简单测试
<% include header.ejs%>
<script type="text/javascript">
var i= true;
$(document).ready(function(){ //文档就绪函数,避免在文档完全加载钱运行jQ
$("button").click(function(){
if (i) $("p").hide();
else $("p").show();
i=!i;
});
});
</script>
</head>
<body>
<h1><%= title %></h1>
<button type="button">隐藏</button>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<% include footer.ejs%>
2.jQuery基础语法
2.1 基础语法是:$(selector).action()
selector用法:
$(this) | 当前 HTML 元素
$("p") | 所有 <p> 元素
$("p.intro") | 所有 class="intro" 的 <p> 元素
$(".intro") | 所有 class="intro" 的元素
$("#intro") | id="intro" 的元素
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
###样式开发,伪造模板数据
###设计数据库模型
###开发后端逻辑
###配置依赖文件,完成开发
##express 目录介绍: node_modules, 存放所有的项目依赖库。(每个项目管理自己的依赖,与Maven,Gradle等不同) package.json,项目依赖配置及开发者信息 app.js,程序主入口 public,静态文件(css,js,img) routes,路由文件(MVC中的C,controller) Views,页面文件(Ejs模板) nodejs-demo/bin/www (启动文件,用于启动app.js)