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

分頁

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。