全栈开发学习(Node+Vue+Mongodb)(七)——登录页面

1 新建管理员账户模块

  • 新建管理员模型,需要提前在server中安装模块bcryptjs: npm i bcryptjs,用于密码散列
const schema=new mongoose.Schema({
   
    //字段以及字段类型
    username:{
   type:String},    
    password:{
   
        type:String,
        select:false,//密码默认查不出来
        set(val){
   
            return require('bcryptjs').hashSync(val,12)  //设置密码散列
        }
    },    
})
  • 后台管理页面添加新增/编辑管理员、管理员列表页面,这里不再赘述

2 登录页面搭建

  • 新建login路由,和Main平级
 {
    path: '/login', name: 'login', component: Login, meta: {
    isPublic: true } }
  • 新建Login组件,前端页面搭建这里不详细说明,说一下执行前端请求的login()函数
async login(){
   
     const res=await this.$http.post('login',this.model);
    //将后台返回的token写入浏览器的存储,下次打开浏览器仍然存在;用sessionStorage下次打开就不存在
     localStorage.token=res.data.token  
     //清空浏览器保存的token 用localStorage.clear
     this.$router.push('/')
     this.$message({
   
       type:'success',
       message:'登录成功'
     })
    }

3 全局捕获错误

我们登陆页面的前端发送的请求都先经过我们的http拦截器,拦截器的写法参考axios官方文档。

  • http-request拦截器

    http
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django和Vue.js是两个非常流行的开发框架,它们结合使用可以实现开发。下面给出一个关于Django Vue3开发学习文档的简要说明。 首先,学习文档应该从基础开始,介绍Django和Vue.js的基本概念和用法。对于初学者来说,可以先学习Django的核心概念,比如模型、视图和模板。然后,学习如何使用Django建立数据模型、创建RESTful API,并且如何将数据渲染到模板中。 接下来,学习文档应该逐步介绍Vue.js的基础知识,包括Vue的实例、组件和指令等。学习者可以通过编写简单的Vue组件来加深对Vue.js的理解,并学习如何使用Vue.js来处理前端的交互逻辑。 然后,学习文档可以介绍如何将Django和Vue.js结合起来进行开发。这包括如何在Django中配置前后端分离的开发环境,如何使用Django提供的API来处理数据的增删改查操作,以及如何使用Vue.js来渲染和处理前端界面。 除了基础知识外,学习文档还应该提供一些实践项目来帮助学习者巩固所学知识。这些项目可以是基于Django和Vue.js的实际应用,比如一个简单的博客系统或一个任务管理应用。通过实际项目的实践,学习者可以更好地理解和运用所学知识。 最后,学习文档应该补充一些额外的资源和参考资料,比如官方文档、书籍和在线教程等,以帮助学习者进一步扩展自己的知识。 总而言之,一本Django Vue3开发学习文档应该从基础概念开始,逐步引导学习者掌握Django和Vue.js的用法,并通过实践项目和额外资源提供进一步的学习支持。希望以上的回答对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值