一点点进击前端--vue3.0资金权限管理系统

文章说明

本文主要是对我在b站上学的一个视频的一个笔记记录

初始化项目

创建入口文件index.js

全局安装nodemon(实现后台热部署)

cnpm install nodemon -g

热部署的启动方式

npm run server

需要安装的依赖

npm install express  # node的服务器插件
npm install bcrypt   # 给密码进行加密的插件
npm install express
npm install express
npm install express
npm install express
npm install express

想mongo db中出入数据

//注册接口
router.post('/register',(req,res)=>{
    User.findOne({email:req.body.email})
        .then((user)=>{
            if(user){
                return res.status(400).json('邮箱已被注册!')
            }else{
               // const url = gravatar.url(req.body.email, {s: '200', r: 'pg', d: 'mm'});
                const newUser = new User({
                    name:req.body.name,
                    email:req.body.email,
                    password:req.body.password,
                    identity:req.body.identity
                })
                //密码加密
                bcrypt.genSalt(10, function(err, salt) {
                    bcrypt.hash(newUser.password, salt, (err, hash)=> {
                        if(err) throw err;
                        newUser.password = hash;
                        newUser.save()
                            .then(user=>res.json(user))
                            .catch(err=>console.log(err))
                    });
                });
            }
        })
})

使用jwt（token方式进行登录）

 //jwt.sign("规则","加密名字(密钥)","过期时间","箭头函数")
   jwt.sign(rule,'secret',{ expiresIn:3600 },(err,token)=>{}

原来项目的网站地址

https://github.com/ly1994lyy/vue-node-manager

后台测试地址

前台项目搭建

vue create client

使用body-parser遇到的坑

extended选项允许是使用nodejs的内置内置对象querystring来解析字符串----它只能解析简单的字符串（如键值对，不能解析对象字符串），而qs它是querystring的升级版，能解析复杂的对象字符串
但是我们需要设置extend的值为false，以为默认是使用querystring来解析参数的

querystring.parse("name=henry&age=30") => { name: 'henry', age: '30' }
     //解析出来的结果正确，结果也是我们想要的
querystring.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
  { 
    'info[name]': 'henry',
    'info[age]': '30',
    'hobby[1]': 'sport',
    'hobby[2]': 'coding'
  }
//解析出来的结果错误，结果并非我们想要的

qs.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
  {
    info: {
      name: 'henry',
      age: '30'
    },
    hobby: [ 'sport', 'coding' ]
  }
  //解析出来的结果正确，结果是我们想要的

携带token进行测试

localstorage和cookie的区别

localstorage是5M，永久存储，可存于磁盘，也可存于内存（敏感性信息–就在本次会话生效就好了，放在sessionStorage里面）
h5用了localstorage取代了cookie

权限管理细粒化到按钮