springboot+vue简单demo

后台

创建spring boot 项目

打开软件idea,新建项目->左侧选择Spring Initializr ,创建项目,依赖选择spring web。

User

新建entity文件夹在下面新建User实体类

package indi.xzw.spring_vue.entity;

public class User {
    int id;
    String username;
    String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

Result

entity文件夹在下面新建Result实体类

package indi.xzw.spring_vue.entity;

public class Result {
    //响应码
    private int code;

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

}

LoginController

新建controller文件夹在下面新建LoginController类

package indi.xzw.spring_vue.controller;


import indi.xzw.spring_vue.entity.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import indi.xzw.spring_vue.entity.User;

import java.util.Objects;

@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
        // 对 html 标签进行转义,防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}

测试

使用postman发送login请求

90

前端

创建vue项目

创建项目
vue create spring_vue
创建项目的时候选择自定义方式创建项目,选上 vuex(vue状态管理)模块以及Router模块

Login.vue

删除自动创建的HelloWorld,右键 src\components 文件夹,新建Login.vue。

<template>
  <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/api/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

AppIndex.vue

右键 src\components 文件夹,新建AppIndex.vue。

<template>
    <div>
      Hello World!
    </div>
</template>

<script>
  export default {
    name: 'AppIndex'
  }
</script>

<style scoped>

</style>

配置页面路由

修改router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
  // 下面都是固定的写法
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})


安装axios

npm install --save axios

修改mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
var axios = require('axios')
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

前后端整合

方式一

前端执行npm build serve会在dist文件夹下生成静态文件,将dist里面的文件拷贝到spring 的springboot_vue\springboot\src\main\resources\static文件夹下。

91

访问127.0.0.1:8080/#/login,中间这个#是因为vue路由使用了Hash模式

92

用户名admin密码123456,登入后进入index页面

方式二(跨域 )

有时候我们需要前后端分离部署或调试方式一就不适用,我们可以使用跨域

在vue项目的跟目录下新建vue.config.js

module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080

93

填入用户名密码后也能登入成功

虽然发送的请求是8081端口但被代理到了8080

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×