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 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

谷歌断点调试(转载)

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

16240
来自专栏Youngxj

js实现网页弹出窗口的代码详细教程

89450
来自专栏技术博客

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争...

15730
来自专栏前端吧啦吧啦

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

45690
来自专栏大前端开发

微信小程序从子页面退回父页面时的数据传递

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数...

13610
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【8.网页中的css/js/image处理】

通常情况下,网页开发时,页面中的样式是通过外部css样式进行处理的,外部的css文件加载在Django中,需要进行简单的处理

9120
来自专栏前端吧啦吧啦

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

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

Fiddler用法整理

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

20310
来自专栏开源项目

项目推荐 | 基于 Vue2.0 的 App 轻量框架

vue app,基于 Vue2.0 开发用于快速搭建 App 的轻量框架。 项目说明 JTaro 是一款基于 Vue2.0 开发的轻量级 SPA(单页应用)框架...

38350
来自专栏HTML5学堂

深入剖析iframe跨域问题

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

2.3K40

扫码关注云+社区

领取腾讯云代金券