Node项目-->后台管理

时间 2019-12-16

标签 node 项目后台管理繁體版

原文原文链接

Node项目

后台管理

在客户端保存数据的一种方式
- 保存少许数据4k左右，客户端和服务器均可以读写cookie
- 若是只是存储数据，可使用localStorage替换，能够存储5M
- 不能够跨域
服务端写Cookiejavascript
- 存储在内存css
```
res.setHeader("Set-Cookie","name=zhangsan1");
```
- 存储在文件html
```
res.setHeader("Set-Cookie","name=zhangsan1; path=/; domain=.tt.com; max-age=180");
```
- 参数java
  - path 设置路径，哪一个路径能够访问cookie
  - expires 设置过时时间，是日期，服务器的日期可能和客户端的日期不同
  - max-age 设置过时时间，秒，第一次访问的时间开始
  - domain 设置能够跨子域访问cookie
封装读取cookienode

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开发express
- 安装 npm install express-session --save
- 使用，在设置路由以前npm
```
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的包cookie

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);

Node项目-->后台管理

Node项目

后台管理

Cookie

Session

登陆

管理首页

模板重构

用户管理

UEditor

分页