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

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

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

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'

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

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 () {
    return {
      msg: 'Welcome to Your Vue.js App',
      username:"",
      password:""
    }
  }

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

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=>{
      })
    }

<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>

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

 @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);
        }
    }

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=>{
      })
    }
  }
}