到位App_jQuery_art-template
- 不写 node 服务器，本地模拟 ajax 获取 json 数据
- 源代码 ---- 参见 ---- 使用 webstorm 运行 index.html
- 本地静态的 data.json
- 前端 index.js
- 写 node 服务器，真实模拟实际情况 获取 json 数据
1. 新建 npm 包管理器 - 服务器名： dao-wei-app
npm init
会产生一个 package.json
2. 下载并导入 express 模块
npm install express
3. /dao-wei-app/下新建 index.js 服务器入口文件
/dao-wei-app/index.js ---- 关于路由 route 参见
const express = require('express'); const app = express(); app.get('/', (request, response)=>{
console.log(request.query);
response.send('Hello Node Express!');
}); app.listen(3000, err=>console.log(err?err:'服务器启动成功: http://localhost:3000'));node index.js
- 注意： 当代码被改动时，运行的脚本不会被终止，需要手动终止，然后重新启动
4. npm install -g supervisor 或者 yarn global add supervisor
在 package.json 添加 start 启动命令
/**** index.js ****/
const express = require('express'); const app = express(); /*
将该文件夹下所有静态资源暴露出去
接受请求，通过分析参数，找到了 public 对应资源就返回响应
*/
app.use(express.static('./public')); //默认调用next /* 解析请求体数据，结果数据挂载到 req.body 上 */
app.use(express.urlencoded({extended: true})); //默认调用next /*
中间件默认能接收并处理所有请求
需要调用 next() 方法，才会接下来处理下面的中间件或者路由，否则卡住了
*/
app.use((request, response, next)=>{
next(); // 调用下一个中间件或者路由
}); app.get('/', (request, response)=>{
console.log(request.querya);
response.send('Hello Node Express!');
}); app.listen(3000, err=>console.log(err?err:'服务器启动成功: http://localhost:3000'));
6.路由器中间件 Router ---- 模块化管理 路由 ---- 参见
- /router/index_router.js ----定义、暴露
/**** index_router.js ****/
const express = require('express');
const {resolve} = require('path'); const indexRouter = new express.Router(); // 实例化一个 路由器 /*************************/
indexRouter.get('/', (request, response)=>{
response.sendFile(resolve(__dirname, '../public/index.html'));
}); /*************************/
module.exports = indexRouter; // 暴露 路由器- /index.js ---- 引入、使用 router 中间件
/**** index.js ****/
const express = require('express');
const indexRouter = require('./router/index_router.js'); // 引入路由器 const app = express(); /*
将该文件夹下所有静态资源暴露出去
接受请求，通过分析参数，找到了 public 对应资源就返回响应
*/
app.use(express.static('./public')); //默认调用next /* 解析请求体数据，结果数据挂载到 req.body 上 */
app.use(express.urlencoded({extended: true})); //默认调用next /*
中间件默认能接收并处理所有请求
需要调用 next() 方法，才会接下来处理下面的中间件或者路由，否则卡住了
*/
app.use((request, response, next)=>{
next(); // 调用下一个中间件或者路由
}); app.use(indexRouter); // 使用路由器 app.listen(3000, err=>console.log(err?err:'服务器启动成功: http://localhost:3000'));
7. Need to konw
响应返回一个页面 response.sendFile(resolve(__dirname, '../../templates/login.html'));
响应数据： response.send({"error":'用户名已被注册'});
页面跳转： response.redirect('/login'); // http://localhost:3000/login
8. 关于 stylus 在 express 中使用 (这一步没必要做，直接用 webstorm 内置的 file watcher 设置一下 stylus 就好)
npm install nib
npm install express-stylus
/index.js
/**** index.js ****/
const express = require('express');
const indexRouter = require('./router/index_router.js'); // 引入路由器 let stylus = require('express-stylus');
let nib = require('nib');
let join = require('path').join;
let publicDir = join(__dirname, '/public'); const app = express(); /*
将该文件夹下所有静态资源暴露出去
接受请求，通过分析参数，找到了 public 对应资源就返回响应
*/
// app.use(express.static('./public')); //默认调用next
app.use(express.static(publicDir)); //默认调用next /* 解析请求体数据，结果数据挂载到 req.body 上 */
app.use(express.urlencoded({extended: true})); //默认调用next /*
中间件默认能接收并处理所有请求
需要调用 next() 方法，才会接下来处理下面的中间件或者路由，否则卡住了
*/
app.use((request, response, next)=>{
next(); // 调用下一个中间件或者路由
}); app.use(stylus({
src: publicDir,
use: [nib()],
import: ['nib']
})); app.use(indexRouter); // 使用路由器 app.listen(3000, err=>console.log(err?err:'服务器启动成功: http://localhost:3000'));
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title></title>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0"/>
<link rel="stylesheet" href="http://127.0.0.1:3000/stylus/index.css">
</head> <body> <script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./js/template-web.js"></script>
</body>
</html>
10. jQuery 知识点复习
注意：
$ele[1] 需要包裹才能使用 jQuery 方法： $($ele[1]).addClass("active")
11. 关于 cors 官方跨域解决方案
配置成 "*" 绝对可以
关于这个 配置，非常严格，浏览器显示的地址是什么，就必须配置成什么
一开始我配置 http://127.0.0.1:3000 都不行，但是 http://localhost:3000 又可以了
如果配置成 "*" 还不行，那就重启下服务器，当时我 node 服务器还卡住了，以为是我自己的问题。
12. 关于 art-template 模版引擎 ---- 参见
建议先将静态样式搞定，然后再使用 art-template 将数据动态实现
1) 上面的 11. 是在 node 服务器定义的一个 路由，用于返回 首页的数据
2) 前端利用 jQuery 发送 ajax 请求数据
/public/js/index.js
$(function () {
/**** ajax 获取首页所有 json 数据 ****/
$.get("http://127.0.0.1:3000/home_data", function(data){
console.log(data)
});
});
3) 使用 art-template 渲染到模板，在将生成的 html ，渲染到页面上
有两种语法，{{}} 和 <% %>
各有也优缺，{{}} 更简洁，<% %> 更强大
注意：
<% for(var i=0; i < data.length; i++){%> 记得在 < 和 > 两边加一个空格，否则可能异常
关于 template 中遇到 img 时，编辑器警告没关系： <img src=" {{$value.imgUrl}}" alt="Service">
- /public/js/index.js
$(function () {
console.log("jQuery--> DOMContentLoaded!"); /**** ajax 获取首页所有 json 数据 ****/
$.get("http://127.0.0.1:3000/home_data", function(response){
if(response.code === "200"){
console.log(response.data);
$(".banner_box .banner_nav1").html(template("banner_nav",{data: response.data}));
}
});
});- /public/index.html
... ...
<ul class="banner_nav1 clearfix">
<!--<li >-->
<!--<p><span class="nav1_title">家庭保洁</span><span class="iconfont icon-jiantou"></span></p>-->
<!--<ul class="banner_nav2">-->
<!--<li>空调清洗</li>-->
<!--<li>油烟机清洗</li>-->
<!--<li>洗衣机清洗</li>-->
<!--<li>空调清洗</li>-->
<!--<li>油烟机清洗</li>-->
<!--<li>洗衣机清洗</li>-->
<!--<li>空调清洗</li>-->
<!--<li>油烟机清洗</li>-->
<!--<li>洗衣机清洗</li>-->
<!--</ul>-->
<!--</li>-->
</ul> <script id="banner_nav" type="text/html">
<% for(var i=0; i < data.length; i++){ %>
<li>
<p>
<span class="nav1_title">
<%= data[i].serviceIndex %>
</span>
<span class="iconfont icon-jiantou"></span>
</p>
<ul class="banner_nav2">
<% for(var j=0; j < data[i].serviceType.length; j++){ %>
<li><%= data[i].serviceType[j]%></li>
<% } %>
</ul>
</li>
<% } %>
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/template-web.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</body>
13. art-template定义模板方法
// 时间格式化
template.defaults.imports.dateFormat = function(time) {
return dateFormat(time)
}
// 4.0之前用的是这种方式
template.helper('formatPrice', function(price, type) {});
// 使用 - 函数定义了参数就一定要传参，否则报错
<%= $imports.formatDate($value.timeStamp) %>/**
* 对日期进行格式化，
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有：
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
function dateFormat(date, format) {
date = new Date(date);
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
};
// ---------------------
// 作者：luckystar2008
// 来源：CSDN
// 原文：https://blog.csdn.net/qincidong/article/details/82252298
// 版权声明：本文为博主原创文章，转载请附上博文链接！
14. art-template 内置默认变量： $value 和 $index 是 {{ each xxx}} ......{{ /each }} 循环中中的变量
到位App_jQuery_art-template的更多相关文章
- c++ 设计模式3 （重构技法 Template Method）
1. 重构 面向对象设计模式是“好的面向对象设计”,所谓“好的面向对象设计”指的是那些可以满足 “应对变化,提高复用”的设计. 设计模式的要点是“寻找变化点,然后在变化点处应用设计模式,从而更好地理解 ...
- 为.NET Core项目定义Item Template
作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- 2000条你应知的WPF小姿势 基础篇<69-73 WPF Freeze机制和Template>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
- tornado template
若果使用Tornado进行web开发可能会用到模板功能,页面继承,嵌套... 多页应用模板的处理多半依赖后端(SPA就可以动态加载局部视图),就算是RESTfull的API设计,也不妨碍同时提供部分模 ...
- 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)
今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...
- C++泛型编程：template模板
泛型编程就是以独立于任何特定类型的方式编写代码,而模板是C++泛型编程的基础. 所谓template,是针对“一个或多个尚未明确的类型”所编写的函数或类. 使用template时,可以显示的或隐示的将 ...
- 新手入门Underscore.js 中文（template）
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
随机推荐
- 搭建企业git代码版本管理所需工具
此片文章纯属记录一下使用gitlab搭建私有git版本管理的一些工具及概念. 先记录一下概念 git 是一种版本控制系统,是一个命令,是一种工具 github 是一个基于git实现 ...
- pysvn 相关
sudo apt-get install python-svn sudo apt-get install svn-workbench 安装过程中如果缺少相关依赖下载好在执行这两条语句 安装好之后的界面 ...
- [转] 图解Seq2Seq模型、RNN结构、Encoder-Decoder模型 到 Attention
from : https://caicai.science/2018/10/06/attention%E6%80%BB%E8%A7%88/ 一.Seq2Seq 模型 1. 简介 Sequence-to ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》2
20175204 张湲祯 2018-2019-2<Java程序设计>2 必做课下作业MyCP 要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP ...
- m3u8下载转码一次完成
最近看到有部分网站开始加入视频解析服务,虽然这种服务会损害土豆优酷等视频托管商的权益,但是,烦人的广告也让我们开始寻找有没有什么比较靠谱的解决方法~实际上很多网站都在使用m3u8文件格式,里面都是视频 ...
- nyoj 633 幂
幂 nyoj 633 应用数学 幂 时间限制:3000 ms | 内存限制:65535 KB 描述 在学习循环的时候,我们都练习过利用循环计算a的k次方.现在给定整数k和一个整数m,请你求出对 ...
- 四， 判断语句； 循环； 使用dict和set
1) 练习 小明身高1.75,体重80.5kg.请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数: 低于18.5:过轻 18.5-25:正常 25-28:过重 28- ...
- 关于element-ui表单验证（自定义验证规则）
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-widt ...
- No grammar constraints (DTD or XML Schema) referenced in the document.
问题描述 web.xml 使用 Servlet4.0 版本,No grammar constraints (DTD or XML Schema) referenced in the document. ...
- mysql5.7版本开始创建用户需要create user
mysql5.7版本开始创建用户需要create user 5.7版本之后,直接使用:grant select on MySQL.test01 to hug@localhost; 是不行的,会报错: ...