vue权限项目（一）创建vue项目，实现登录功能，登录页面的代码的介绍

一写代码就开心

发布于 2021-08-18 17:20:31

7070

发布于 2021-08-18 17:20:31

文章被收录于专栏：java和python

创建vue项目

实现登录功能

创建登录组件页面

创建路由 // @ 这个自动会到src文件夹下在vue项目里面 @ 代表的就是src目录

以上写完，启动项目，就可以到这个登录页面了

登录页面样式

我们首先把elementUI官网里面的表单样式复制过来，把登录的按钮也复制过来。开始写公共的样式，在这个文件夹下写样式

只是写了公共的样式，如何让所有的vue页面都使用，在main.js里面进行导入

// 导入全局样式
import './assets/css/global.css'

只要在main.js里面写上面那个，所有的vue页面就有了这个样式了

我们在登录的时候使用axios 进行调用路径

因为我们的后端项目是在我们本地进行启动的，所以基本地址路径就是本地的

// 本机地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

以后在vue页面写路径的时候，就会拼接这个路径

      // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
        //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 2、通过编程式导航跳转到后台主页, 路由地址为：/home
        this.$router.push('/home')

  // this.$http.post('login', this.loginForm): 返回值为promise
        // 返回值为promise，可加await简化操作 相应的也要加async
        const { data: res } = await this.$http.post('login', this.loginForm)
         console.log(res)

const {} 这个写法就是接受后端传到前段的数据，里面的写法和后端的格式一样，那么前段就可以直接拿字段了