nodejs day6 path模块 案例(路由设计,表单处理,登录注册session)

` # 案例

路径操作模块path

在cmd中输入node可以开启服务
在这里插入图片描述

path.basename

获取路径当中的一个文件名部分
在这里插入图片描述
path.basename(‘a/b/app.js’,’.js’)表示删除末尾的js
path.basename(‘a.app.html’,’.html’)表示删除 html

path.dirname

获取路径

path.parse方法

解析路径
root:根路径名
dir:l路径
base:文件名
ext:文件类型
name:不包含类型过的文件名
在这里插入图片描述
返回一个对象

path.join(’’,’’)

将两个路径拼接起来

path.resolve(’’,’’)

也是将两个路径拼接起来
在这里插入图片描述

filename和__dirname

__filename: 动态的获取当前文件的绝对路径
__dirname:动态获取获取当前文件模块所属目录的绝对路径,(不受node命令影响)

fs,readfile()中的路径是相对于执行终端的路径

在这里插入图片描述

在文件操作中使用相对路径是不可靠的

在node中文件操作的路径设计为相对于执行node所处的路径

文件操作中的路径都用绝对路径

在这里插入图片描述

当吧项目发给别人时又必须要用动态绝对路径

就可以用__dirname和__filename来写文件操作路径
在这里插入图片描述

模板语法 art-template里的include extend block

include语法

可以在任意html文件中插入其他html文件

{{include './list.html'}}
 <h3>hello{{name}}</h3>
    {{include './footer.html'}}

block语法 模板继承 所有子模板会继承模板页的所有内容 再通过block进行部分修改 只需要在模板里引入Jquery和boostrap后面的子模板都会引入

在父页面中写个坑 就是block
在这里插入图片描述
在子页面中写入继承extend
在这里插入图片描述
子页面就会继承父页面的所有内容 子页面可以对天坑处进行修改
在这里插入图片描述

父模板需要给子模板留多个坑 这样子模板就可有自己的css和js

在这里插入图片描述

模板继承的案例应用

_layouts文件夹储存了父模板,父模板中留了head body script的坑 并且还include了_partials中的部件
在这里插入图片描述
后面的各页面就可以继承父模板了

路由设置

在这里插入图片描述

路由

如果路由过多可以对路由进行分类
在这里插入图片描述

设计用户数据模型

将数据模型都放到models文件夹中
要设置昵称密码,邮件,登陆时间,最后一次更改时间等内容

var mongoose = require('mongoose')
var schema = mongoose.Schema();

var Userschema = new schema({
    email: {
        type: String,
        required: true
    },
    nickname: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    create_time: {
        type: Date,
        default: Date.now //这里不要写date.now因为会立即调用
            //可以用date.now自动得到当前时间
    },
    last_modified_time: {
        type: Date,
        default: Date.now
    },
    //头像,保存了链接
    avatar: {
        type: String,
        default: '/public/img/avatar-default.png'
    },
    //介绍
    bio: {
        type: String,
        default: ''
    },
    gender: {
        type: Number,
        //可选择的
        enum: [-1, 0, 1],
        default: -1
    },
    birthday: {
        type: Date
    },
    //状态  是否可以评论  是否可以登录   1不可以评论,2不可以登录
    status: {
        type: Number,
        enum: [0, 1, 2],
        default: 0 //没有任何权限
    }
})
module.exports = mongoose.model('User', Userschema);

表单异步提交数据

 $('#register_form').on('submit', function(e) {
            e.preventDefault()
            var formData = $(this).serialize()
            $.ajax({
                url: '/register',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        // window.alert('注册成功!')
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/'
                    } else if (err_code === 1) {
                        window.alert('邮箱已存在!')
                    } else if (err_code === 2) {
                        window.alert('昵称已存在!')
                    } else if (err_code === 500) {
                        window.alert('服务器忙,请稍后重试!')
                    }
                }
            })
        })

注册处理请求

 //思路:
//1获取表单信息
//2确定是否已经存在账户
//3如果存在,不允许注册
//如果不存在,添加该账户到数据库
//4.发送响应

因为表单提交时用的AJAX规定了服务器需要返回一个json'文件所以 用到了express的json()方法将字符串自动转化为对象
在这里插入图片描述

router.post('/register', function(req, res) {
    //思路:
    //1获取表单信息
    //2确定是否已经存在账户
    //3如果存在,不允许注册
    //如果不存在,添加该账户到数据库
    //4.发送响应
    var body = req.body;
    User.findOne({
        email: body.email
    }, function(err, data) {
        if (err) {
            //状态码500表示服务端错误
            return res.status(500).json({
                success: false,
                message: '服务端错误'
            })
        }
        if (data) {
            return res.status(200).json({
                success: true,
                message: '用户已存在'
            })
        }
        //如果不存在
        new User(body).save(function(err, data) {
            if (err) {
                return res.status(500).json({
                    success: false,
                    message: '服务端错误'
                })
            }
            return res.status(200).json({
                success: true,
                message: '用户创建成功'
            })
        })
    })
})

mongoose中查询两个条件的方法 $or

User.findOne({ $or: [{ email: body.email }, { nickname: body.nickname }] }, function(err, data) {}

客户端通过error_code来对服务器返回的数据处理

 $('#register_form').on('submit', function(e) {
            e.preventDefault()
            var formData = $(this).serialize()
            $.ajax({
                url: '/register',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    var err_code = data.err_code;
                    if (err_code == 0) {
                        window.alert('账户创建成功')
                    } else if (err_code == 1) {
                        window.alert('账户已经存在')
                    } else if (err_code == 500) {
                        window.alert('服务器错误,请刷新重试')
                    }
                }
            })
        })

为账户密码进行加密 --md5

npm i blueimp-md5

在这里插入图片描述
在这里插入图片描述

表单同步提交与表单异步提交

表单同步提交会锁死浏览器,无论服务器相应的是什么都会直接覆盖当前页面,而异步提交浏览器会跟没事一样

早期前端解决表单同步提交

前端也可以不用异步提交也可以完成不锁死浏览器
方法:表单提交后服务端返回一个新的有提示信息的注册页面
优点:更安全,但是更麻烦,全部都是服务端在做
AJAX更加灵活花样更多

服务器重定向对于异步请求无效,只能客户端去重定向

服务端重定向只针对同步请求(get,post等)
设置的是注册之后就登录跳转到首页
在这里插入图片描述

通过session保持登陆状态

cookie小纸条

在这里插入图片描述

Session

超市>电子服务柜(服务端)
你(客户端)持有小票(开箱凭证)
将敏感的数据保存到服务端

node中使用session–express-session

1.下载

npm i express-session

2.配置

var session = require('express-session')

https://www.npmjs.com/package/express-session
配置一定要在app.use(router)之前

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}))

3.使用设置session成员
通过req.session来设置
添加session数据:req.session.foo =‘true’
访问session数据:req.session.foo

session长期化存储

session是在内存中存储的,服务器已重启session就会丢失

登陆之后对页面进行修改

在这里插入图片描述
再在header.html中将登陆用户信息写入,header就可以使用usr的信息
在这里插入图片描述
在这里插入图片描述
登陆和注册按钮需要隐藏
利用模板语法进行修改
{{if user}}
登陆成功显示内容
{{else}}
没有登陆显示内容
{{/if}}
在这里插入图片描述

session配置语句解读

app.use(session({
    secret: 'secret',
    resave: false,
    saveUninitialized: false
}));

secret是加密字符串,增加密码的安全性,防止客户端恶意伪造,相当于密码的加密md5(password+‘secret’)
saveUninitialized: false 表示是否默认给一把session,不管是否在session中存贮

处理登陆

login中和register一样
在这里插入图片描述
服务端页面:
//获取表单数据
//判断账号密码是否正确
//如果正确告诉客户端正确并重定向
//如果不正确重新输入

注意:如果存在账户就需要将user添加给session

router.post('/login', function(req, res) {
    //获取表单数据
    //判断账号密码是否正确
    //如果正确告诉客户端正确并重定向
    //如果不正确重新输入
    var body = req.body;
    User.findOne({
        email: body.email,
        password: md5(body.password)
    }, function(err, user) {
        if (err) {
            //状态码500表示服务端错误
            return res.status(500).json({
                err_code: 500,
                message: 'server is wrong'
            })
        }

        if (user) {
            req.session.user = user
            return res.status(200).json({
                err_code: 0,
                message: 'ok'
            })
        }

        if (!user) {
            return res.status(200).json({
                err_code: 1,
                message: 'server is invalid'
            })
        }

    })

})

退出登录状态

// 清除session状态
//重定向到登录页

router.get('/logout', function(req, res) {
    // 清除session状态
    //重定向到登录页

    req.session.user = null;
    res.redirect('/login')
})

案例步骤

1.创建目录结构
2.整合静态页面-模板页
*include
*extend
*block
3.路由设计
4.用户注册
先处理好客户端的内容(可以加一些表单验证
服务端
在这里插入图片描述

5.用户登录
6.用户退出

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…