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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1102
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

1080
来自专栏Google Dart

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。 它不包括应用程序级别的安全性,如身份验证(此用户是谁?)和授权(此...

902
来自专栏前端吧啦吧啦

手把手教你全家桶之React(一)

1533
来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

1311
来自专栏HTML5学堂

深入剖析iframe跨域问题

HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法——如何使用iframe跨域。讲解了iframe跨域的基本...

1.6K4
来自专栏前端吧啦吧啦

手把手教你全家桶之React(一)

4409
来自专栏生信技能树

请品鉴我的vim配置

背景 本人是生信工程师,主要使用的语言是 python, R, perl, shell,经常要ssh到远程服务器上写代码,因此学习了vim,后来发现了spf13...

5546
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界...

3149
来自专栏LIN_ZONE

谷歌断点调试(转载)

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,...

1204

扫码关注云+社区