springboot整合iview-vue實現簡單的前後端分離項目登錄demo（一）

項目中使用了一些自定義工具類，工具類沒有放在本篇博客上，下篇會把代碼粘出來

後端項目已經放在git上提供參考

https://github.com/qigangye/springboot_vue

一、整合iview與vue

1.首先下載iview

打開事先搭建好的vue項目，這裏本人推薦的IDE使用idea，在idea的terminal中輸入指令，npm install --save iview下載iview

npm install --save iview

2.安裝完成後打開src目錄下的main.js文件，添加三行代碼

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)

二、搭建springboot整合mybaitis框架

1.準備數據庫

注意：數據庫字符集一定要選擇utf8mb4，MySQL的utf8編碼字符集要選擇utf8mb4

嗯嗯，簡單的設計一個表意思一下

2.使用idea新建一個maven項目

file->new->project->maven

一路next最後finish

2.配置pom文件，搭建一個springboot項目

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.gangye</groupId>
    <artifactId>springboot-vue-demo</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>

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

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

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>ojdbc6</artifactId>
            <version>11.1.0.7.0</version>
        </dependency>
    </dependencies>
</project>

3.整體的項目結構

4.配置項目的配置文件application.properties

server.port=8089
#數據庫連接池設置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/spring_vue_demo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=ok

#mybatis的相關配置
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.config-location=classpath:mybatis-config.xml

5.配置mybatis-config.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

    <properties resource="application.properties"></properties>

    <settings>
        <!-- 使全局的映射器啓用或禁用緩存。 -->
        <setting name="cacheEnabled" value="ture" />
        <!-- 全局啓用或禁用延遲加載。當禁用時，所有關聯對象都會即時加載。 -->
        <setting name="lazyLoadingEnabled" value="true" />
        <!-- 當啓用時，有延遲加載屬性的對象在被調用時將會完全加載任意屬性。否則，每種屬性將會按需要加載。 -->
        <setting name="aggressiveLazyLoading" value="true"/>
        <!-- 是否允許單條sql 返回多個數據集  (取決於驅動的兼容性) default:true -->
        <setting name="multipleResultSetsEnabled" value="true" />
        <!-- 是否可以使用列的別名 (取決於驅動的兼容性) default:true -->
        <setting name="useColumnLabel" value="true" />
        <!-- 允許JDBC 生成主鍵。需要驅動器支持。如果設爲了true，這個設置將強制使用被生成的主鍵，有一些驅動器不兼容不過仍然可以執行。  default:false  -->
        <setting name="useGeneratedKeys" value="false" />
        <!-- 指定 MyBatis 如何自動映射 數據基表的列 NONE：不隱射　PARTIAL:部分  FULL:全部  -->
        <setting name="autoMappingBehavior" value="PARTIAL" />
        <!-- 這是默認的執行類型  （SIMPLE: 簡單； REUSE: 執行器可能重複使用prepared statements語句；BATCH: 執行器可以重複執行語句和批量更新）  -->
        <setting name="defaultExecutorType" value="SIMPLE" />

        <setting name="defaultStatementTimeout" value="25" />

        <setting name="defaultFetchSize" value="100" />

        <setting name="safeRowBoundsEnabled" value="false" />
        <!-- 使用駝峯命名法轉換字段。 -->
        <setting name="mapUnderscoreToCamelCase" value="true" />
        <!-- 設置本地緩存範圍 session:就會有數據的共享  statement:語句範圍 (這樣就不會有數據的共享 ) defalut:session -->
        <setting name="localCacheScope" value="SESSION" />
        <!-- 默認爲OTHER,爲了解決oracle插入null報錯的問題要設置爲NULL -->
        <setting name="jdbcTypeForNull" value="NULL" />
        <setting name="lazyLoadTriggerMethods" value="equals,clone,hashCode,toString" />
    </settings>

    <environments default="dev">
        <environment id="dev">
            <transactionManager type="JDBC"></transactionManager>
            <dataSource type="POOLED">
                <property name="driver" value="${spring.datasource.driver-class-name}"></property>
                <property name="url" value="${spring.datasource.url}"></property>
                <property name="username" value="${spring.datasource.username}"></property>
                <property name="password" value="${spring.datasource.password}"></property>
            </dataSource>
        </environment>
    </environments>
    <databaseIdProvider type="org.apache.ibatis.mapping.VendorDatabaseIdProvider">
        <property name="MySQL" value="mysql"></property>
        <property name="Oracle" value="Oracle"></property>
    </databaseIdProvider>
</configuration>

6.定義日誌的配置logback-spring.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration  scan="true" scanPeriod="60 seconds" debug="false">
    <!--輸出到控制檯-->
    <appender name="console" class="ch.qos.logback.core.ConsoleAppender">
        <encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
            <pattern>%d{yyy-MM-dd HH:mm:ss.SSS} %p %t - %m%n</pattern>
            <charset class="java.nio.charset.Charset">UTF-8</charset>
        </encoder>
    </appender>

    <!--輸出到文件-->
    <appender name="DefaultAppender"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <append>true</append>
        <rollingPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedRollingPolicy">
            <fileNamePattern>logs/logback-%d{yyyy-MM-dd}.%i.log
            </fileNamePattern>
            <maxFileSize>300MB</maxFileSize>
            <maxHistory>300</maxHistory>
            <totalSizeCap>90GB</totalSizeCap>
        </rollingPolicy>
        <encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
            <pattern>%d{yyy-MM-dd HH:mm:ss.SSS} %p %t - %m%n</pattern>
            <charset class="java.nio.charset.Charset">UTF-8</charset>
        </encoder>
    </appender>

    <logger name="com.cscrb.mapper" level="DEBUG" additivity="false">
        <appender-ref ref="console" />
    </logger>

    <root>
        <level value="info" />
        <appender-ref ref="console" />
        <appender-ref ref="DefaultAppender" />
    </root>

</configuration>

7.創建項目的實體類UserInfo.java

package com.cscrb.entity;

/**
 * @Classname UserInfo
 * @Description 用戶基本信息
 * @Date 2020/3/4 16:50
 */
public class UserInfo {
    private Integer id;

    private String userName;

    private String passWd;

    private String address;

    public Integer getId() {
        return id;
    }

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

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWd() {
        return passWd;
    }

    public void setPassWd(String passWd) {
        this.passWd = passWd;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

8.創建數據訪問層

package com.cscrb.mapper;

import com.cscrb.entity.UserInfo;

import java.util.List;

/**
 * @Classname UserMapper
 * @Description 用戶信息mapper層接口
 * @Date 2020/3/4 16:51
 */
public interface UserMapper {
    //展示所有用戶
    List<UserInfo> showAllUser();

    //根據用戶信息返回用戶
    UserInfo findByUser(UserInfo userInfo);

    //根據主鍵查看用戶信息
    UserInfo selectByPrimary(Integer id);

    //新增用戶
    void addUser(UserInfo userInfo);

    //修改用戶信息
    void updateUserInfo(UserInfo userInfo);
}

9.創建對應的mapper.xml配置文件注意大小寫，文件名與mapper層中的java文件名一致

<?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.cscrb.mapper.UserMapper">
    <select id="showAllUser" resultType="com.cscrb.dto.UserInfoDto">
        select id,username,address from user_info
    </select>

    <select id="findByUser" parameterType="com.cscrb.entity.UserInfo" resultType="com.cscrb.entity.UserInfo">
        select * from user_info where username = #{userName} and passwd = #{passWd}
    </select>

    <select id="selectByPrimary" parameterType="java.lang.Integer" resultType="com.cscrb.dto.UserInfoDto">
        select id,username,address from user_info where id = #{id}
    </select>

    <insert id="addUser" parameterType="com.cscrb.entity.UserInfo">
        insert into user_info
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="userName != null">
                username,
            </if>
            <if test="passWd !=null">
                passwd,
            </if>
            <if test="address !=null">
                address,
            </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id,jdbcType=INTEGER},
            </if>
            <if test="userName != null">
                #{userName,jdbcType=VARCHAR},
            </if>
            <if test="passWd != null">
                #{passWd,jdbcType=VARCHAR},
            </if>
            <if test="address != null">
                #{address,jdbcType=VARCHAR},
            </if>
        </trim>
    </insert>

    <update id="updateUserInfo" parameterType="com.cscrb.entity.UserInfo" >
        update user_info
        <set>
            <if test="userName != null and userName != ''">username = #{userName},</if>
            <if test="passWd != null and passWd != ''">passwd = #{passWd},</if>
            <if test="address != null and address != ''">address = #{address},</if>
        </set>
        where id = #{id}
    </update>

</mapper>

9.創建服務層、controller層

package com.cscrb.service;

import com.cscrb.entity.UserInfo;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Classname UserService
 * @Description 用戶的service層
 * @Date 2020/3/4 16:57
 * @Created by gangye
 */
public interface UserService {
    List<UserInfo> showAllUserInfo();

    UserInfo findUser(UserInfo userInfo);

    UserInfo selectByPrimary(Integer id);

    void insertUser(UserInfo userInfo);

    void updateUserInfo(UserInfo userInfo);
}

package com.cscrb.service.impl;

import com.cscrb.entity.UserInfo;
import com.cscrb.mapper.UserMapper;
import com.cscrb.service.UserService;
import com.cscrb.utils.SHAPwd;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Classname UserServiceImpl
 * @Description UserSercice層的實現類
 * @Date 2020/3/4 17:00
 */
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<UserInfo> showAllUserInfo() {
        return userMapper.showAllUser();
    }

    @Override
    public UserInfo findUser(UserInfo userInfo) {
        return userMapper.findByUser(userInfo);
    }

    @Override
    public UserInfo selectByPrimary(Integer id) {
        return userMapper.selectByPrimary(id);
    }

    @Override
    public void insertUser(UserInfo userInfo) {
        userInfo.setPassWd(SHAPwd.signature(userInfo.getPassWd()));
        userMapper.addUser(userInfo);
    }

    @Override
    public void updateUserInfo(UserInfo userInfo) {
        userMapper.updateUserInfo(userInfo);
    }
}

package com.cscrb.controller;

import com.cscrb.entity.UserInfo;
import com.cscrb.service.UserService;
import com.cscrb.utils.*;
import org.slf4j.Logger;
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;

import java.util.List;

/**
 * @Classname UserController
 * @Description userController
 * @Date 2020/3/5 9:21
 */
@RestController
@RequestMapping(value = "/userController")
public class UserController {
    private Logger logger = LogUtils.get(UserController.class);

    @Autowired
    private UserService userService;

    //展示所有用戶
    @PostMapping("/userList")
    public Response getAllUserList(){
        List<UserInfo> userInfoList = userService.showAllUserInfo();
        Response response = Response.newResponse();
        return response.setData(userInfoList);
    }

    //用戶註冊
    @PostMapping("/registerUser")
    public Response registerUser(@RequestBody UserInfo userInfo){
        Response response = Response.newResponse();
        try {
            if (StringUtils.isNotEmpty(userInfo.getUserName()) && StringUtils.isNotEmpty(userInfo.getPassWd())) {
                userService.insertUser(userInfo);
                return response.OK();
            } else {
                return response.setError(ErrorEnum.account_password_null);
            }
        } catch (Exception e){
            logger.info("用戶註冊失敗");
            return response.setCodeAndMessage(9999,"用戶註冊失敗");
        }
    }

    //用戶登錄
    @PostMapping("/userLogin")
    public Response login(@RequestBody UserInfo userInfo){
        Response response = Response.newResponse();
        String pwd = SHAPwd.signature(userInfo.getPassWd());
        userInfo.setPassWd(pwd);
        if (StringUtils.isNotEmpty(userService.findUser(userInfo).getId())){
            return response.OK();
        }
        return response.setError(ErrorEnum.account_password_err);
    }

    //根據id查詢用戶信息
    @PostMapping("/showUserInfo")
    public Response showUserInfo(Integer id){
        Response response = Response.newResponse();
        UserInfo userInfo = userService.selectByPrimary(id);
        return response.setData(userInfo);
    }

    //更改用戶信息
    @PostMapping("/updateUserInfo")
    public Response updateUserInfo(@RequestBody UserInfo userInfo){
        Response response = Response.newResponse();
        if (StringUtils.isNotEmpty(userInfo.getId())){
            if (StringUtils.isNotEmpty(userInfo.getPassWd())){
                userInfo.setPassWd(SHAPwd.signature(userInfo.getPassWd()));
            }
            userService.updateUserInfo(userInfo);
            return response.OK();
        }
        return response.setCodeAndMessage(9999,"更改信息失敗！");
    }
}

10.創建啓動類

package com.cscrb;

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

/**
 * @Classname StartApplication
 * @Description 項目啓動類
 * @Date 2020/3/4 16:35
 */
@SpringBootApplication
@MapperScan("com.cscrb.mapper")
public class StartApplication {
    public static void main(String[] args) {
        SpringApplication.run(StartApplication.class ,args);
    }
}

此處的MapperScan註解是掃描對應包下的文件

11.搭建完畢使用postman測試

事先使用註冊接口測試了幾個數據

查看日誌

控制檯顯示debug日誌，日誌文件記錄信息

測試一下登錄接口：

查看返回結果狀態值(nice)

結合日誌(密碼使用自定義工具加密了)