vue+springboot+mybatisplus 登录练习

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

 

 

mysql数据库 

drop table if exists e_user;
create table e_user(
	id int(11) not null auto_increment primary key comment '',
	username varchar(255) default null comment '',
	password varchar(255) default null comment ''
) comment '用户表';

insert into e_user(username,password) values('admin','1234');
insert into e_user(username,password) values('sa','1234');

springboot

user.java

package com.shrimpking.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 14:58
 */
@Data
@TableName("e_user")
public class User
{
    private Integer id;
    @TableField("userName")
    private String userName;
    private String password;

}

UserMapper.java

package com.shrimpking.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.shrimpking.pojo.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 15:17
 */
@Mapper
public interface UserMapper extends BaseMapper<User>
{
}

UserService.java

package com.shrimpking.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.shrimpking.pojo.User;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 15:18
 */
public interface UserService extends IService<User>
{
}

UserServiceImpl.java

package com.shrimpking.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.shrimpking.mapper.UserMapper;
import com.shrimpking.pojo.User;
import com.shrimpking.service.UserService;
import org.springframework.stereotype.Service;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 15:42
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService
{
}

UserController.java

package com.shrimpking.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.shrimpking.pojo.User;
import com.shrimpking.service.UserService;
import com.shrimpking.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
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;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/24 15:44
 */

@Controller
public class UserController
{
    @Autowired
    private UserService userService;

    @CrossOrigin
    @PostMapping("/login")
    @ResponseBody
    public Result login(@RequestBody User user)
    {
        String userName = user.getUserName();
        userName = HtmlUtils.htmlEscape(userName);

        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<User>();
        wrapper.eq(User::getUserName,user.getUserName());
        wrapper.eq(User::getPassword,user.getPassword());
        User user1 = userService.getOne(wrapper);

        if(user1 == null){
            return new Result(400);
        }
        else
        {
            return new Result(200);
        }
    }
}

Result.java

package com.shrimpking.utils;

import lombok.AllArgsConstructor;
import lombok.Data;

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

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

#默认日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#数据库表前缀
mybatis-plus.global-config.db-config.table-prefix=e_
#主键自增策略，mysql自增
mybatis-plus.global-config.db-config.id-type=auto
#配置别名
mybatis-plus.type-aliases-package=com.shrimpking.pojo

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-test02</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-vue-test02</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>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </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>

Vue

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';
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 Index from "@/components/Index";

Vue.use(VueRouter);

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

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:''
                }
            }
        },
        methods:{
            doLogin(){
                this.$http.post('/login',{
                    userName: this.loginForm.username,
                    password: this.loginForm.password,
                }).then( result =>{
                    if(result.data.code === 200){
                        this.$router.push('/index');
                    }
                    else
                    {
                        alert('账号或密码错误');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

index.vue

<template>
    <div>Hello</div>
</template>

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

<style scoped>

</style>