ElementUI基本介绍及登录注册案例演示2-阿里云开发者社区

ElementUI基本介绍及登录注册案例演示2

2023-09-27 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ElementUI基本介绍及登录注册案例演示2

三.Element完成登录注册

1. 环境配置及前端演示

1.1 安装Element-UI模块

在终端执行以下命令进行下载

npm install element-ui -S

当我们下载完成后可以在目录static/package.json下面的dependencies中找到

1.2 安装axios和qs(发送get请求和post请求)

npm i axios -S

npm i qs -S

1.3 导入依赖

// 新添加1
import ElementUI from 'element-ui' 
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

将依赖导入项目的目录src/main.js文件中

注：我们在导入依赖和样式的时候一定要放在import App from './App'之前

将Vue实例与element进行挂载

// 新添加3
Vue.use(ElementUI)   
Vue.config.productionTip = false

2 页面布局

2.1组件与界面

我们可以在Element官网上找到组件，寻找自己需要的组件，直接复制代码粘贴使用即可

也可以根据上面提供的代码进行自定义修改获取自己的组件

当界面布局好后，我们也需要去配置好自己的路由

在router/index.js中进行配置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    },
  ]
})

当然，我们也需要进行导入视图界面

import Login from '@/view/Login.vue'
import Register from '@/view/Register.vue'

3.方法实现功能数据交互

3.1 通过方法进行页面跳转

（1）在组件上定义点击的方法

<el-link type="primary" @click="gotoRegister()">用户注册</el-link>

（2）在js代码的方法中进行定义

export default {
  name: 'Login',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
  ,methods:{
    gotoRegister(){
      this.$router.push('/Register');
    }
  }
}

代码只演示了登录跳转注册，反之同理

演示效果

3.2 axios发送get请求

（1）将后端项目运行

（2）将安装好的axios导入项目

import axios from 'axios'

（3）前端编写方法向后端发送请求

doSubmit(){
      let url = "http://localhost:8080/user/userLogin";
      let params = {
        username:this.username,
        password:this.password
      };
      axios.get(url,{params:params}).then(r=>{
      if(r.data.success){
        this.$message({
                  message: '登录成功',
                  type: 'success'
                });
      }else{
        this.$message.error('登录失败，账号或密码错误');
      }
      }).catch(e=>{
      })
    }

注：发送请求之前需要在data值中定义好参数

data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      username:"",
      password:""
    }
  }

3.2 对后端发送登录请求效果演示

4.导入接口管理模块，将vue实例和配置进行挂载

4.1在api包中配置所有接口地址

在api包中定义action.js，配置接口地址

export default {
  'SERVER': 'http://localhost:8080/', //服务器
  'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
  'SYSTEM_USER_DOREG': '/userAction.action', //注册
  'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    return this.SERVER + this[k];
  }
}

4.2 将所有所需要的模块进行统一管理

在api包中定义http.js,将所需模块全部放置统一进行管理全局配置

安装整合依赖

npm i vue-axios -S

将实例与全局配置进行挂载

在main.js中加入以下代码

import axios from '@/api/http'                 
import VueAxios from 'vue-axios' 
Vue.use(VueAxios,axios)

配置到这里我们可以节省上面之前写过的代码，在定义前端方法向后端发送请求中可以改为以下代码

doSubmit(){
      let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
      let params = {
        username:this.username,
        password:this.password
      };
      this.axios.get(url,{params:params}).then(r=>{
      if(r.data.success){
        this.$message({
                  message: '登录成功',
                  type: 'success'
                });
      }else{
        this.$message.error('登录失败，账号或密码错误');
      }
      }).catch(e=>{
      })
    }

5.前后端分离实现注册

5.1前端模板

<template>
  <div class="login-wrap">
      <el-form class="login-container">
        <h1 class="title">用户注册</h1>
        <el-form-item label="">
          <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
        </el-form-item>
        <el-row style="text-align: center;margin-top:-10px">
          <el-link type="primary">忘记密码</el-link>
          <el-link type="primary" @click="gotoLogin()">用户登录</el-link>
        </el-row>
      </el-form>
    </div>
</template>

5.2 接口定义的方法

int Register(User record);

5.3 后端进行实现接口

@Override
    public int Register(User record) {
        return userMapper.insertSelective(record);
    }

5.4 Controller层方法

 @RequestMapping("/userRegister")
    @ResponseBody
    public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response){
        userVo.setId("10");
        int i = userService.Register(userVo);
        if(i>0){
            return new JsonResponseBody<>("用户注册成功！",true,0,null);
        }else{
            return new JsonResponseBody<>("用户注册失败！重新输入",false,0,null);
        }
    }

5.5 前端向后端发起请求

export default {
  name: 'Register',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      username:"",
      password:""
    }
  },
  methods:{
    gotoLogin(){
      this.$router.push('/Login');
    },
    doSubmit(){
      let url = this.axios.urls.SYSTEM_USER_DOREG;
      let params = {
        username:this.username,
        password:this.password
      }
      this.axios.post(url,params).then(r=>{
        console.log(r)
      if(r.data.success){
        this.$message({
                  message: '注册成功',
                  type: 'success'
                });
      }else{
        this.$message.error('注册失败');
      }
      }).catch(e=>{
      })
    }
  }
}

5.6 效果演示

当注册完成后查看数据库，出现刚刚注册的用户时说明注册成功