Vue + SpringBoot + Mybatis 框架开发 (二)

任务

实现SpringBoot和Mybatis的三层架构开发

步骤

mapper文件

<?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.yanshuai.sys.mappers.UserMapper">
  <resultMap id="BaseResultMap" type="com.example.yanshuai.sys.pojo.UserV">
    <!--
      WARNING - @mbggenerated
    -->
    <id column="id" jdbcType="INTEGER" property="id" />
    <result column="name" jdbcType="VARCHAR" property="name" />
    <result column="sex" jdbcType="VARCHAR" property="sex" />
    <result column="age" jdbcType="INTEGER" property="age" />
    <result column="classes" jdbcType="VARCHAR" property="classes" />
  </resultMap>

  <select id="login" parameterType="java.lang.String" resultType="java.lang.Integer">
    SELECT
    COUNT(id)
    FROM
    t_user
    WHERE
    name = #{name}
  </select>
</mapper>

UserMapper类（持久层）

package com.example.yanshuai.sys.mappers;


import org.apache.ibatis.annotations.Param;

/**
 * @Author yanshuai
 * @Date 2021/2/26/026 16:32
 */
public interface UserMapper {
   int login (@Param("name")String name);
}

UserService类（业务层）

package com.example.yanshuai.sys.service;

import com.example.yanshuai.sys.mappers.UserMapper;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestParam;

import javax.annotation.Resource;

/**
 * @Author yanshuai
 * @Date 2021/3/1/001 8:09
 */
@Service
public class UserService {

    @Resource
    private UserMapper userMapper;

    /**
     * 登录接口
     * @param name
     * @return
     */
    public String login (@RequestParam String name) {

        int count=userMapper.login(name);
        String msg = "登录失败";
        if(count > 0 ) {
            msg = "登录成功";
        }
        return  msg;
    }
}

UserController类（控制层）

package com.example.yanshuai.sys.controller;

import com.example.yanshuai.sys.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author yanshuai
 * @Date 2021/2/26/026 16:19
 */
@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    UserService userService;
    @RequestMapping("/login")
    public String login (@RequestParam String name) {
        return userService.login(String.valueOf(name));
    }
}

User类（实体类）

package com.example.yanshuai.sys.pojo;


import javax.persistence.Table;
import java.io.Serializable;

/**
 * @Author yanshuai
 * @Date 2021/2/26/026 16:28
 */
@Table(name = "t_user")
public class User implements Cloneable,Serializable {
    private static final long serialVersionUID = 1L;

    private Integer id;
    private String name;
    private String sex;
    private Integer age;
    private String classes;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getClasses() {
        return classes;
    }

    public void setClasses(String classes) {
        this.classes = classes;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", sex='" + sex + '\'' +
                ", age=" + age +
                ", classes='" + classes + '\'' +
                '}';
    }
}

参数配置

application.properties文件：
mybatis.mapper-locations= classpath:mapper/*Mapper.xml
mybatis.type-aliases-package=com.example.first.entity

pom.xml文件：

<resources>
    <resource>
        <directory>src/main/resources</directory>
        <filtering>true</filtering>
        <includes>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
    </resource>
    <resource>
        <directory>src/main/profile/${profiles.active}</directory>
        <filtering>false</filtering>
        <includes>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
        <excludes>
            <exclude>*.yml</exclude>
        </excludes>
    </resource>
</resources>   #配置在build中

前端代码

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li>

        <a href="https://vuejs.org" target="_blank"> Core Docs </a>

      </li>

      <li>

        <a href="https://forum.vuejs.org" target="_blank"> Forum </a>

      </li>

      <li>

        <a href="https://chat.vuejs.org" target="_blank"> Community Chat </a>

      </li>

      <li>

        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>

      </li>

      <br />

      <li>

        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">

          Docs for This Template

        </a>

      </li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li>

        <a href="http://router.vuejs.org/" target="_blank"> vue-router </a>

      </li>

      <li>

        <a href="http://vuex.vuejs.org/" target="_blank"> vuex </a>

      </li>

      <li>

        <a href="http://vue-loader.vuejs.org/" target="_blank"> vue-loader </a>

      </li>

      <li>

        <a href="https://github.com/vuejs/awesome-vue" target="_blank">

          awesome-vue

        </a>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      msg: "Welcome to Your Vue.js App",

    };

  },

  mounted: function () {

    this.login();

  },

  methods: {

    test() {

      var that = this;

      this.$http

        .get("api/test")

        .then(function (response) {

          that.$data.msg = response.data;

          console.log(that.$data.msg);

        })

        .catch(function (error) {

          console.log(error);

        });

    },

    login() {

      var that = this;

      this.$http

        .get("api/login",{

          params :{

            name : "123"

          }

        })

        .then(function (response) {

          that.$data.msg = response.data;

          console.log(that.$data.msg);

        })

        .catch(function (error) {

          console.log(error);

        });

    },

  },

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1,

h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

实现效果

难点痛点：

越写越心惊，我发现我真的是撒也不会，面向搜索引擎编程，没网就没了方向，还是想坚持下去，目标是自己能写出来一套前后端完备的框架起码数据权限、菜单权限、用户管理、角色管理等基础模块。

今天一直报错问题指向是Dao层和mapper文件连接指向问题

第一步：在启动Application方法上增加

扫描路径

第二步：确定UserMapper和UserMapper.xml的命名是相同

第三步：application.properties文件配置问题 我刚刚检查了很久

其实application.properties和application.yml配置是有不同的，application.properties中的配置是=号链接 application.yml都是 ：号来连接的所以需要注意此处

第四步：可能会出先扫描不到.xml的情况所以我们需要将pom.xml进行配置

展望

我看他们都是用yml作为配置文件然后配置多个环境配置，感觉贼酷，然后我也尝试了然后就扑街了，所以下次更新就是关于配置文件，关于application.properties与application.yml的不同我也会在下次好好研究

一波。