SpringBoot+Vue前后端分离开发案例

最新推荐文章于 2024-05-31 10:14:06 发布

听夜雨声烦

最新推荐文章于 2024-05-31 10:14:06 发布

阅读量1.7k

点赞数 61

本文链接：https://blog.csdn.net/qq_41818882/article/details/136511514

版权

1.后端准备工作

准备sql

CREATE DATABASE demo CHARSET 'utf8';
USE demo;
CREATE TABLE whitelist_setting
(
    id           BIGINT      NOT NULL AUTO_INCREMENT,
    `name`       VARCHAR (150) NOT NULL COMMENT '用户名',
    PASSWORD     VARCHAR (150) NOT NULL COMMENT '密码',
    role_id      BIGINT COMMENT '用户角色id',
    is_enabled   BOOL         NOT NULL DEFAULT 1 COMMENT '是否启用',
    is_deleted   BOOL         NOT NULL DEFAULT 0 COMMENT '是否删除',
    gmt_created  TIMESTAMP   NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    gmt_modified TIMESTAMP   NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (id)
);
INSERT INTO whitelist_setting(`name`,`password`) VALUE('test','123456');

创建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.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</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.1.4</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </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>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</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>

删除原配置文件application.properties,创建新配置文件application.yml并添加数据库配置

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://172.16.0.3:3306/demo?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull
    username: root
    password: admin

创建项目包结构与文件在这里插入图片描述具体文件内容如下
WhitelistSettingController.java

package com.example.demo.controller;

import com.example.demo.entity.WhitelistSetting;
import com.example.demo.service.WhitelistSettingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/whitelistSetting")
public class WhitelistSettingController {
   @Autowired
   private WhitelistSettingService whitelistSettingService;

   @PostMapping("login")
   public WhitelistSetting login(@RequestBody WhitelistSetting whitelistSetting){
       WhitelistSetting user = whitelistSettingService.login(whitelistSetting);
       return user;
   }
}

WhitelistSetting.java

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.extension.activerecord.Model;
import lombok.Data;
import lombok.experimental.Accessors;

import java.time.LocalDateTime;

@Data
@Accessors(chain = true)
public class WhitelistSetting extends Model<WhitelistSetting> {

    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    private String name;

    private String password;

    private Long roleId;

    @TableField(value = "is_enabled")
    private Boolean enabled;

    @TableField(value = "is_deleted")
    @TableLogic
    private Boolean deleted;

    private LocalDateTime gmtCreated;

    private LocalDateTime gmtModified;

}

WhitelistSettingMapper.java

package com.example.demo.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.WhitelistSetting;

public interface WhitelistSettingMapper extends BaseMapper<WhitelistSetting> {

}

WhitelistSettingServiceImpl.java

package com.example.demo.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.entity.WhitelistSetting;
import com.example.demo.mapper.WhitelistSettingMapper;
import com.example.demo.service.WhitelistSettingService;
import org.springframework.stereotype.Service;

@Service
public class WhitelistSettingServiceImpl extends ServiceImpl<WhitelistSettingMapper, WhitelistSetting> implements WhitelistSettingService {
    @Override
    public WhitelistSetting login(WhitelistSetting whitelistSetting) {
        QueryWrapper<WhitelistSetting> wrapper = new QueryWrapper<>();
        wrapper.eq("name",whitelistSetting.getName())
                .eq("password", whitelistSetting.getPassword())
                .eq("is_enabled", 1);
        WhitelistSetting user = baseMapper.selectOne(wrapper);
        return user;
    }
}

WhitelistSettingService.java

package com.example.demo.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.WhitelistSetting;

public interface WhitelistSettingService extends IService<WhitelistSetting> {
    WhitelistSetting login(WhitelistSetting whitelistSetting);
}

DemoApplication.java

package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.mybatis.spring.annotation.MapperScans;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan({"com.example.demo.mapper"})
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

WhitelistSettingMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mybatisplus.mapper.WhitelistSettingMapper">

</mapper>

前端准备

创建vue项目并下载axios与element-ui依赖

npm add axios
npm i element-ui -S

在 main.js 中写入以下内容：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
 
Vue.use(ElementUI)

配置跨域

在 config\index.js 中，找到 proxyTable 位置，修改为以下内容:

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',// 要代理的域名
        changeOrigin: true,// 允许跨域
        pathRewrite: {
          '^/api': '/api' 
        }
      }
    }

创建Login.vue

<template>
 <div class="loginbody">
   <div class="logindata">
     <div class="logintext">
       <h2>登录界面</h2>
     </div>
     <div class="formdata">
       <el-form>
         <el-form-item>
           <el-input
             v-model="user.name"
             clearable
             placeholder="请输入用户名"
           ></el-input>
         </el-form-item>
         <el-form-item>
           <el-input
             v-model="user.password"
             clearable
             placeholder="请输入密码"
             show-password
           ></el-input>
         </el-form-item>
       </el-form>
     </div>
     <div class="butt">
       <el-button type="primary" @click="login">登录</el-button>
     </div>
   </div>
 </div>
</template>

<script>
import axios from 'axios'
export default {
 name: 'login',
 data () {
   return {
     user: {
       name: '123',
       password: '123'
     }
   }
 },
 methods: {
   login () {
     axios.post('/api/whitelistSetting/login', this.user).then(res => {
      if (res.data) {
         this.$message({
           message: '登录成功',
           type: 'success'
         })
       } else {
         this.$message({
           message: '用户名或密码错误或账号被禁用',
           type: 'warning'
         })
       }
     })
   }
 }
}
</script>

<style scoped>
 .loginbody {
   width: 100%;
   height: 100%;
   min-width: 1000px;
   background-image: url("../assets/loginbg.jpeg");
   background-size: 100% 100%;
   background-position: center center;
   overflow: auto;
   background-repeat: no-repeat;
   position: fixed;
   line-height: 100%;
   padding-top: 150px;
 }

 .logintext {
   margin-bottom: 20px;
   line-height: 50px;
   text-align: center;
   font-size: 30px;
   font-weight: bolder;
   color: white;
   text-shadow: 2px 2px 4px #000000;
 }

 .logindata {
   width: 400px;
   height: 300px;
   transform: translate(-50%);
   margin-left: 50%;
 }

 .tool {
   display: flex;
   justify-content: space-between;
   color: #606266;
 }

 .butt {
   margin-top: 10px;
   text-align: center;
 }

 .shou {
   cursor: pointer;
   color: #606266;
 }

 /*ui*/
 /* /deep/ .el-form-item__label {
   font-weight: bolder;
   font-size: 15px;
   text-align: left;
 }

 /deep/ .el-button {
   width: 100%;
   margin-bottom: 10px;

 } */
</style>