vue+springboot 登录练习

idea 新建springboot项目，内建vue模块

 

 springboot

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.14</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.shrimpking</groupId>
    <artifactId>springboot-vue-test01</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-vue-test01</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.3.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.properties

server.port=8089

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=mysql123

user.java

package com.shrimpking.pojo;

import lombok.Data;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 10:27
 */
@Data
public class User
{
    private Integer id;
    private String userName;
    private String password;

}

result.java

package com.shrimpking.utils;

import lombok.AllArgsConstructor;
import lombok.Data;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 10:29
 */
@Data
@AllArgsConstructor
public class Result
{
    private Integer code;
}

loginController.java

package com.shrimpking.controller;

import com.shrimpking.pojo.User;
import com.shrimpking.utils.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

import java.util.Objects;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 10:30
 */
@Controller
public class LoginController
{
    @CrossOrigin
    @PostMapping("/api/login")
    @ResponseBody
    public Result login(@RequestBody User user)
    {
        String userName = user.getUserName();
        userName = HtmlUtils.htmlEscape(userName);

        if(Objects.equals(userName,"admin") && Objects.equals(user.getPassword(),"1234")){
            return  new Result(200);
        }
        else {
            String message = "账号或密码错误";
            System.out.println("test" + message);
            return new Result(400);
        }
    }
}

Vue

vue.config.js

module.exports = {
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from "axios";
import router from '@/router'

axios.defaults.baseURL = "http://localhost:8089/api";
Vue.prototype.$http = axios;

Vue.config.productionTip = false;

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

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>

</style>

router index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import Login from "@/components/Login";
import AppIndex from "@/components/AppIndex";

Vue.use(VueRouter);

export default new VueRouter({
    routes:[
        {
            path:'/',
            redirect:'/login'
        },
        {
            path:'/login',
            name:'Login',
            component:Login
        },
        {
            path: '/index',
            name: 'Index',
            component: AppIndex
        }
    ]
});

login.vue

<template>
    <div>
        账号：<input type="text" v-model="loginForm.username" placeholder="请输入用户名"><br>
        密码：<input type="password" v-model="loginForm.password" placeholder="请输入密码"><br>
        <button @click="doLogin">登录</button>
    </div>
</template>

<script>
    export default {
        name: "loginPage",
        data(){
            return {
                loginForm:{
                    username:'',
                    password:''
                },
                responseResult:[]
            }
        },
        methods:{
            doLogin(){
                this.$http.post('/login',{
                    userName: this.loginForm.username,
                    password: this.loginForm.password
                }).then(successResponse => {
                    if(successResponse.data.code === 200){
                        this.$router.push('/index');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

appindex.vue

<template>
    <div>
        hello
    </div>
</template>

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

<style scoped>

</style>