Node——six

- node中 path方法

可以查看node.js官网帮助文档查看
在这里插入图片描述
在这里插入图片描述
root:根路径 dir:目录 base:包含后缀名的文件名
ext 后缀名 name:不包含后缀名的文件名

path.join()
在这里插入图片描述
两个路径拼接成一个路径,两个反斜杠等于一个反斜杠
在多个路径之间添加路径分隔符
多杆少杆都可以
在这里插入图片描述

- __dirname 和 __filename

  • path 模块
  • __dirname 和 __filename
  • 动态的 获取当前文件或者文件所处目录的绝对路径
  • 用来解决文件操作路劲的相对路径问题
  • 因为在文件操作中,相对路径相对于执行 node 命令所处的目录
  • 所以为了尽量避免这个问题,都建议文件操作的相对路劲都转为:动态的绝对路径
  • 方式:path.join(__dirname, '文件名')
  • art-template 模板引擎(include、block、extend)
  • include
  • extend
  • block
  • 表单同步提交和异步提交区别
  • 以前没有 ajax 都是这么干的,甚至有些直接就是渲染了提示信息出来了
  • 异步提交页面不会刷新,交互方式更灵活
  • Express 中配置使用 express-session 插件
  • 概述案例中注册-登陆-退出的前后端交互实现流程

__dirname 可以用来获取当前文件模块所属目录的绝对路径 两个都是动态的
__filename 可以用来获取当前文件的绝对路径

在这里插入图片描述

- 案例起步

初始化

npm init -y

在这里插入图片描述

git init

在这里插入图片描述
安装核心部件
在这里插入图片描述
安装核心包

npm i art-template express-art-template

在这里插入图片描述
简单例子验证
在这里插入图片描述

相关代码在这里插入图片描述
在网页中显示结果
在这里插入图片描述

- art-template

https://aui.github.io/art-template
模版
在这里插入图片描述
在这里插入图片描述
https://aui.github.io/art-template/docs/index.html#Feature
在这里插入图片描述
使用 模版

<body>
{{ include './header.html' }}

{{ block 'content'}}
<h1>默认内容</h1>
{{ /block }}

{{ include './footer.html' }}
</body>

在这里插入图片描述
显示内容
在这里插入图片描述
添加语句block 修改内容
在这里插入图片描述
在这里插入图片描述
安装bootstrap和jquery
在这里插入图片描述
引入样式

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">

<body>
    {{ include './header.html' }}

    {{ block 'content'}}
    <h1>默认内容</h1>
    {{ /block }}

    {{ include './footer.html' }}
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/bootstrap/dist/bootstrap.js"></script>
</body>

引入成功
在这里插入图片描述

在index.html中 根据留空的block:head 以及 block:script 进行补充

{{ extend './layout.html' }}

{{ block 'head'}}
	<style>
		body{
			background-color: skyblue;
		}
	</style>
{{ /block }}

{{ block 'content'}}
	<div>
		<h1>index页面 补充内容</h1>
	</div>
{{ /block }}

{{ block 'script'}}
	<script>
		window.alert('index 页面自己的js脚本')
	</script>
{{ /block }}

在这里插入图片描述

- 一些注意点

  • 在 Node 没有全局作用域,它是文件模块作用域
  • 模块是独立,不能因为 a 加载过 fs 了 b 就不需要,这是错误的理解
  • 正确的做法应该是,a 需要 fs 则 a 就加载 fs ,b 需要 fs 则 b 就加载 fs

为什么需要用session?

我们知道Internet 通过协议分为stateful和stateless两类,而http是stateless协议,客户端发送请求到服务端建立一个连接,请求得到响应后连接即中断,服务器端不会记录状态,因此服务器端想要确定是哪个客户端提交过来的请求,就必须要借助一些东西去完成:session和cookies。

express-session
session存在于服务器端,需要cookies的协议协助才能完成,服务器端和客户端通过session id来建立联系。
express中可以用中间件来使用session,expres-session可以存在内存中,也可以存在mongodb、redis等中。

body-parser
把客户端发送的HTTP请求体里本应是纯文本的内容,
转换为方便的对象(req.body)的形式供你的路由调用呗
body Parser
体分析器

express 框架
http://www.expressjs.com.cn/

Zepto
Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库, 它与jquery 有着类似的api。 如果你会用 jquery,那么你也会用 zepto。
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上。

jQuery和Zepto.js的区别
(1)jQuery更多是在PC端被应用,因此,考虑了很多低级浏览器的的兼容性问题;而Zepto.js则是直接抛弃了低级浏览器的适配问题,显得很轻盈;
(2)Zepto.js在移动端被运用的更加广泛;更注重在移动端的使用
(3)jQuery的底层是通过DOM来实现效果的,zepto.js 是用css3来实现的;
(4)Zepto.js可以说是阉割版本的jQuery。
https://www.jianshu.com/p/262d36c1e13e

猜你喜欢

转载自blog.csdn.net/Zjaun/article/details/87534294
six