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还提供了个性化的定制主题，有兴趣的可以深入了解

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 login(@RequestBody User user){
        Map 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