SpringBoot+Vue2.x登陆功能

这篇文章只做总结，关于Vue的具体使用不涉及，因此你需要具备Vue的基础知识，使用Vue搭配Element-ui以及axios，看官方文档10分钟基本就能上手，学习成本很低。

1. 首先初始化一个Vue项目，使用Vue-cli插件

#已安装忽略
npm install -g vue-cli
vue init webpack newFile
cd newFile
# 下载依赖 ，可忽略
npm install
# 调试模式
npm run dev
# 打包成静态文件
npm run build

2. 安装Element-ui

npm i element-ui -S
#在main.js文件中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. axios使用(AJax)

# 在main.js文件中添加
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
axios.defaults.baseURL="http://localhost:8082/"

最后的视图

这里要注意一个细节，在使用vue-cli的时候会提示安装测试组件，安装后会导致一些不必要的错误产生，看到错误就有点强迫症，可以关闭它的检测,也可以选择不安装，这样就可以少些烦恼了

安装完依赖就开始写登录页面，使用Elemen-ui就可以快速编写样式了，简直是后台开发的福音，Element-ui还提供了个性化的定制主题，有兴趣的可以深入了解

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Vue 登录Demo</h2>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <el-row :gutter="20">
      <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple">
            <el-form-item label="账号：">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          </div>
        </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple">
            <el-form-item label="密码：">
            <el-input v-model="formLabelAlign.pass"></el-input>
          </el-form-item>
          </div>
        </el-col>
    </el-row>
  </el-form>
</el-form>
  </el-row>
     <el-button v-on:click="getTest">登录</el-button>
  </div>
</template>

<script>
//方法命名不规范，仅做Demo
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      labelPosition: 'right',
        formLabelAlign: {
          name: '',
          pass: ''
        }
    }
  },
  methods:{

    getTest(){ //方法
      console.log(this.formLabelAlign);
      let name = this.formLabelAlign.name;
      let pass = this.formLabelAlign.pass ;
      if(""!=name&&""!=pass){
        this.$http.post("login",{
          "username": this.formLabelAlign.name,
          "password": this.formLabelAlign.pass,
        }).then((response) => {
            console.log(response.data)
            if(response.data.flag==true){
              alert("登录成功")
            }else{
              alert("登录失败")
            }
        })
      }
    }

}
}
</script>

github地址：https://github.com/tanoak10/loginVue.git
开始后台编写，项目采用的是SpringBoot，这里涉及到一个跨域的概念。
跨域：指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
同源：域名，协议，端口均相同。
深入了解跨域可以参考这篇博文：https://www.imooc.com/article/19869?block_id=tuijian_wz
springBoot处理跨域非常简单，一个注解搞定@CrossOrigin，但是要注意加上域名限制，不然网站会很危险

@RestController
@CrossOrigin
public class TestController {
    @PostMapping("login")
    public Map<String,Object> login(@RequestBody User user){
        Map<String,Object> map = new HashMap<>(6) ;
        if("123".equals(user.getUsername())&&"123".equals(user.getPassword())){
            map.put("flag",true) ;
            map.put("msg","登录成功") ;
            return map ;
        }
            map.put("flag","false") ;
            map.put("msg","用户名或密码错误") ;
            return map ;
    }
}

项目地址：https://github.com/tanoak10/vueServer.git
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=n3ejw4zayvus