首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SpringBoot+Vue2.x登陆功能

SpringBoot+Vue2.x登陆功能

作者头像
tanoak
发布2018-06-06 13:18:42
8890
发布2018-06-06 13:18:42
举报
文章被收录于专栏:java闲聊java闲聊

这篇文章只做总结,关于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
  1. 安装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);
  1. 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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.06.03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档