vue和token

Token 使用：

1. 下载 npm install --save jsonwebtoken 并且引用
2. 在登录成功之后创建一个token 并且把这个token 发送给前端 前端使用相应的技术保存起来（cookie 本地存储）

//启动服务
var express = require("express");
var app = express();
//3.引入加密模块
var crypto = require("crypto");
//5.引入mongoose模块
var mongoose = require("mongoose");
//10.引入post的解析模块body-parser
var bodyParser = require("body-parser");
//11.使用bodyParse下的解析post功能
var uE = bodyParser.urlencoded({
    extended: false
});
// ***15***token******* 引用下载好的token模块
var jwt=require("jsonwebtoken");
//2.解决跨域
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
    next();
})
//7.定义集合，不能将集合放到路由内部
var dbclt = mongoose.model("no1", {
    uname: String,
    upwd: String
})
//1.得到前台的数据
app.get("/reg", function (req, res) {
    var uname = req.query.uname;
    var upwd = req.query.pwd;
    console.log(uname + "---" + upwd);
    //4.开始加密数据
    var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
    console.log(mb5Pwd);
    //6.连接数据库
    mongoose.connect("mongodb://localhost:27017/mgd", {
        useNewUrlParser: true
    }, function (err) {
        if (err) {
            console.log("数据库连接失败" + err);
        } else {
            console.log("数据库连接成功");
            //8.设置存入的数据
            var userdemo = new dbclt({
                uname,
                upwd: mb5Pwd
            })
            //9.开始存储
            userdemo.save().then(
                (ok) => {
                    res.send({
                        mes: "注册成功",
                        status: 200,
                        linkid: 1
                    })
                },
                (err) => {
                    res.send({
                        mes: "注册失败",
                        status: 200,
                        linkid: 1
                    })
                }
            )
        }
    })
    // res.send("ok");
})
//把解析模块注入到post的路由当中
app.post("/login", uE, function (req, res) {
    //12.开始接受前台传过来的数据
    var uname = req.body.uname;
    var upwd = req.body.upwd;
    console.log(uname + "===" + upwd);
    //13.开始加密当前密码
    var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
    // var md5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
    //14.查询数据库
    mongoose.connect("mongodb://localhost:27017/mgd", {
        useNewUrlParser: true
    }, function (err) {
        if (err) {
            console.log("数据库连接失败" + err);
        } else {
            console.log("数据库连接成功");
            dbclt.find({
                uname: uname,
                upwd: mb5Pwd
            }).then(
                (ok) => {
                    // 在查询的时候成功可能有两种结果 第一种查出来值了 第二种没有查出来但是反悔了一个空数组
                    if (ok.length > 0) {
                        // ******16******token  2 创建token 用来保存用户的登录信息
                        // jwt.sign(要保存的数据，私钥（一堆越乱越好的乱码）)
                        var obj = {
                            loginok: true,
                            uname: uname
                        }
                        var miyao = "qwertyuiop1472583690";
                        var token=jwt.sign(obj,miyao);
                        res.send({
                            mes: "登录成功",
                            status: 200,
                            linkid: 2,
                            token
                        });
                    } else if (ok.length == 0) {
                        res.send({
                            mes: "登录失败",
                            status: 200,
                            linkid: 3
                        });
                    }
                },
                (err) => {
                    res.send({
                        mes: "连接超时，请稍后再试",
                        status: 500,
                        linkid: 4
                    })
                }
            )
        }
    })
})
app.get("/index", function (req, res) {
    // 解密token
    // jwt.verify(验证的token,加密的密文，回调)
    // 得到前台发送过来的token
    var token = req.query.token;
    var miyao = "qwertyuiop1472583690";
    jwt.verify(token, miyao, function (err, data) {
        console.log(data);
        // 判断loginok是否是true
        if (data.loginok == true) {
            res.send({
                status: 200,
                mes: "用户已经登录",
                linkid: 8,
                uname: data.uname
            })
        } else {
            res.send({
                status: 500,
                mes: "没有登录",
                linkid: 9
            })
        }

    })
})
app.listen(3000);

前端存储：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <h1>我是首页 用户必须登录之后再能访问我 所以在页面加载完毕之后我会自动的发送一个ajax到后台
        去查询当前的用户登录状态如果为true那就表明他登录了 反之 帮助用户跳转到登录页面
    </h1>
    <script>
        $(document).ready(function () {
            // 去出token
            var localtoken = window.localStorage.getItem("token");
            // 如果有用从来没有登陆过第一次登陆 token有吗？
            if (localtoken) {
                $.ajax({
                    url: "http://localhost:3000/index",
                    type: "get",
                    data: {
                        token: localtoken
                    },
                    success(data) {
                        console.log(data)
                        if (data.linkid == 8) {
                            alert("欢迎您" + data.uname)
                        } else if (data.linkid == 9) {
                            alert("不好意思当前页面仅对会员开放请您登录后访问");
                            location.href = "login.html"
                        }
                    }
                })
            } else {
                alert("您没有登录请您登录后访问");
                window.location.href = "login.html";
            }
        })
    </script>
</body>

</html>

3. 登录存储token已经完成了 接下来在首页进行身份信息的验证

1.把本地存储中的token取出来
2.发送给后端
3.后端进行解密 然后判断解密出来的数据是否是登陆过的  把结果返回给前台   前台做出相关的界面提示

VUE

Vue.js 是什么

是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

对于Vue是一套渐进式框架的理解

1. 每个框架都会有自己的一些特点，会对开发者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
2. 可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事

对于Vue自底向上增量开发的设计的理解

先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。

Vue.js 目的

Vue.js的产生核心是为了解决如下三个问题

1. 解决数据绑定问题。
2. Vue.js主要的目的是为了开发大型单页面应用。（Angular.js对PC端支持比较好，但对移动端支持就一般，而Vue.js主要是支持移动端，同时也支持PC端。）
3. 支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。
   

vue.js的核心思想

vue.js的核心思想包括：数据驱动和组件化。