Node项目
后台管理
Cookie
- 在客户端保存数据的一种方式
- 保存少量数据4k左右，客户端和服务器都可以读写cookie
- 如果只是存储数据，可以使用localStorage替换，可以存储5M
- 不可以跨域
-
服务端写Cookie
-
存储在内存
res.setHeader("Set-Cookie","name=zhangsan1"); -
存储在文件
res.setHeader("Set-Cookie","name=zhangsan1; path=/; domain=.tt.com; max-age=180"); -
参数
- path 设置路径，哪个路径可以访问cookie
- expires 设置过期时间，是日期，服务器的日期可能和客户端的日期不一样
- max-age 设置过期时间，秒，第一次访问的时间开始
- domain 设置可以跨子域访问cookie
-
-
封装读取cookie
let cookie = module.exports;
cookie.getCookie = (req,key)=>{
var Cookies = {};
req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {
var parts = Cookie.split('=');
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
});
return Cookies[key];
}
Session
- 保持会话状态
- 服务端+客户端实现
- 模拟Session的实现
const express = require("express");
const cookie = require("../tools/cookie");
let demo = module.exports = express.Router();
demo.prefix = "/session";
let session = {sids:[]};
//{sids:["1111","222"], "1111": {name:zhangsan},}
demo.get("/get", (req, res) => {
res.send(req.headers.cookie);
});
demo.get("/login/:name",(req, res) => {
let sid =cookie.getCookie(req, "sid");
//第一次登录，判断是否有sid，如果没有sid生成一个，并跳转会当前页面
if(!sid) {
//唯一标示一个客户端
sid = Math.random();
//模拟登录
res.setHeader("Set-Cookie","sid="+ sid + "; path=/session");
session.sids.push(sid);
res.redirect(req.originalUrl);
//console.log(req.originalUrl);
}else{
//模拟登录
res.setHeader("Set-Cookie","name="+req.params.name+"; path=/session");
session[sid] = {name: req.params.name};
res.send("<a href='/session'>到首页</a>");
}
});
demo.get("/",(req, res) => {
//req.headers.cookie
//判断是否登录成功，先获取sid，根据sid获取当前的登录信息
let sid =cookie.getCookie(req, "sid");
//根据sid获取 登录信息
let obj = session[sid];
//模拟权限的判断
if(obj && obj.name) {
res.send("后台首页")
}else{
res.send("请先登录");
}
});
-
使用express-session简化session开发
- 安装 npm install express-session --save
-
使用，在设置路由之前
app.use(session({ secret: '12345', resave: true, saveUninitialized: true, //maxage 单位毫秒 cookie: { maxAge: 3600000 } })) //然后就可以使用session req.session.userinfo = user; -
参数
- secret：用来对session数据进行加密的字符串.这个属性值为必须指定的属性。
- name：表示cookie的name，默认cookie的name是：connect.sid。
- maxAge：cookie过期时间，毫秒。
- resave：是指每次请求都重新设置session cookie，假设你的cookie是6000毫秒过期，每次请求都会再设置6000毫秒。
- saveUninitialized： 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid。
登录
- 路由
- 控制器
- 登录成功转到首页
- 添加session
-
md5加密
-
安装md5的包
- npm install blueimp-md5 --save
-
服务端使用代码
//4297f44b13955235245b2497399d7a93 let md5 = require("blueimp-md5"); console.log(md5("123123")); -
客户端使用
<script src="/assets/vendor/md5.js"></script> console.log(md5("123123"));
-
管理首页
- 管理首页获取数据
account.getindex = (req, res) => {
if(req.session.userinfo) {
//获取帖子
req.models.post.find({},{limit:5},["id","A"],(err,blogs)=>{
if(err) throw err;
res.render("admin/index",{user:req.session.userinfo,blogs:blogs}, (err,html)=>{
if(err) throw err;
res.send(html);
});
})
}else{
res.send("<script>alert('请先登录!'); location.href='/admin/login'</script>");
}
}
-
修改首页模板
-
帖子的列表
- 删除帖子
- 修改帖子
模板重构
- 父亲模板 parent.html
<!doctype html>
<html>
<head>
<meta name="charset" content="utf-8" />
<title>{{title}}</title>
{{{block ("head")}}}
</head>
<body>
{{{block ("body")}}}
</body>
</html>
- 子模板 index.html
{{extend ("./parent")}}
{{#block ("head")}}
<link type="text/css" href="test.css" rev="stylesheet" rel="stylesheet"/>
{{/block}}
{{#block ("body")}}
<h2>{{title}}</h2>
{{/block}}
- 渲染和以前一样
用户管理
UEditor
- 获取ueditor
- 引入js
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
- 页面上添加
<script type="text/plain" id="content" style="height:300px"></script>
- 配置ueditor
var ue = UE.getEditor('content',{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['Source', 'Undo', 'Redo','bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//更多其他参数，请参考ueditor.config.js中的配置项
});
-
获取内容
var content = ue.getContent();
-
设置内容
ue.setContent('欢迎使用ueditor', isAppendTo);