整合用户登录和注册前端(准备)

235 阅读1分钟

1、安装前端插件

(1)右键点击vue-edufront目录,然后在终端打开,执行下面的命令安装插件。 1)安装element-ui插件。

  npm install element-ui

2)安装vue-qriously插件。

`加粗样式``java npm install vue-qriously


## 2、修改配置文件使用插件

**(1)打开vue-edufront/plygins目录下的nuxt-swiper-plugin.js文件。**
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201020220911724.png#pic_center)


**(2)添加下面的配置**

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
import VueQriously from 'vue-qriously'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
Vue.use(VueQriously)
Vue.use(VueAwesomeSwiper)

## 3、在api下创建login.js和register.js,实现登录和注册功能的接口

**(1)register.js文件。**
import request from '@/utils/request'
export default {
  //根据手机号发送验证码
  sendMsmPhone(phone){
    return request({
      url: `/edumsm/msm/send/${phone}`,
      method: 'get'
    })
  },
  //注册
  register(registerVo){
    return request({
      url: `/ucenterservice/ucenter/register`,
      method: 'post',
      data:registerVo
    })
  }

}


**(2)login.js文件**

import request from '@/utils/request'
export default { 
  //登录
  loginUser(loginVo){
    return request({
      url: `/ucenterservice/ucenter/login`,
      method: 'post',
      data:loginVo
    })
  },
   //根据token字符串获取用户信息
   getInfoToken(){
    return request({
      url: `/ucenterservice/ucenter/getInfoToken`,
      method: 'post'
    })
  }
}