SpringBoot+MyBatis+vue-cli+ElementUI分享篇

技术分享

SpringBoot讲解

介绍SpringBoot

我们在使用SpringBoot之前首先需要想一下我们为什么需要使用这个框架，它给我们开发当中带来的便利是什么
先说一下没使用SpringBoot之前
拿Spring来说话：
第一点：Spring框架需要进行大量的配置
第二点：项目的依赖管理冲突

优缺点

优点：
（1）
从字面理解，Boot是引导的意思，因此SpringBoot帮助开发者快速搭建Spring框架，Spring 项目引导页面可以在几秒构建一个项目
（2）
Spring Boot 内置了多种种强大的测试框架，只需要在项目中引入spring-boot-start-test依赖包
（3）
代码少了、配置文件少了、不需要对第三方框架烦恼了、项目精简了，对整个团队的开发及维护来说，更大的节约了成本。
缺点：
（1）
版本迭代速度很快，一些模块改动很大。
（2）
由于不用自己做配置，报错时很难定位。
（3）
网上现成的解决方案比较少。

MyBatis讲解

介绍MyBatis

在介绍MyBatis之前先简单了解几个概念：ORM，JPA。
JPA在我的首页文章有过相应的代码展示，那么我们来说说什么是JPA
（1）
JPA（Java-Persistence-API）：是Java持久化接口的意思，它是JavaEE关于ORM思想的一套标准接口，仅仅是一套接口，不是具体的实现。
（2）那么我们的ORM又是什么？当前我们所使用的的ORM框架有两个Hibernate和MyBatis，下面我来说说他们之前的一个区别

MyBatis

MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code，并且改名为MyBatis 。2013年11月迁移到Github。MyBatis是一个优秀的持久层框架，它对jdbc的操作数据库的过程进行封装，使开发者只需要关注 SQL 本身，而不需要花费精力去处理例如注册驱动、创建connection、创建statement、手动设置参数、结果集检索等jdbc繁杂的过程代码Mybatis通过xml或注解的方式将要执行的各种statement（statement、preparedStatemnt、CallableStatement）配置起来，并通过java对象和statement中的sql进行映射生成最终执行的sql语句，最后由mybatis框架执行sql并将结果映射成java对象并返回。

Hibernate

Hibernate对象/关系映射能力强，数据库无关性好，对于关系模型要求高的软件（例如需求固定的定制化软件）如果用hibernate开发可以节省很多代码，提高效率。但是Hibernate的学习门槛高，要精通门槛更高，而且怎么设计O/R映射，在性能和对象模型之间如何权衡，以及怎样用好Hibernate需要具有很强的经验和能力才行。

总结

总之，按照用户的需求在有限的资源环境下只要能做出维护性、扩展性良好的软件架构都是好架构，框架只有适合才是最好。

Vue-Cli实战

vue-cli的讲解在上期博客中已经讲解了大概安装与部署，现在直接上实战
讲解链接：https://blog.csdn.net/UncleFujii/article/details/109900593

代码展示

我这边呢已经把项目实战的样子做出来了，就直接上代码了，然后我把主要的几个在SpringBoot所需的依赖包告诉大家,下面的是我在pom.xml中所有的依赖，可参考

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.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.plant</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-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

application.yml

#mysql
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/plant?characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: root

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.plant.demo.model


server:
  port: 9090

后端

我使用的照样还是我喜欢用的IDEA工具来完成后端的实现，测试的话我直接去掉了service层，直接调用DAO层，下面是代码展示

实体类

实体类：一级菜单分类（Main）、二级菜单分类（Sub）、分页（QueryInfo）、机器类（Robat）、用户类（User）
一级菜单分类

package com.plant.demo.pojo;

import java.util.List;

/**
 * 一级菜单分类
 * @author uncletj6b
 * @Date 2020/11/23 23:48
 */
public class Main {
    private int id;
    private String title;
    private String path;
    private List<Sub>sList;

    public Main() {
    }

    public Main(String title, String path, List<Sub> sList) {
        this.title = title;
        this.path = path;
        this.sList = sList;
    }

    public int getId() {
        return id;
    }

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public List<Sub> getsList() {
        return sList;
    }

    public void setsList(List<Sub> sList) {
        this.sList = sList;
    }

    @Override
    public String toString() {
        return "MainMenu{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", path='" + path + '\'' +
                ", sList=" + sList +
                '}';
    }
}

二级菜单分类

package com.plant.demo.pojo;

/**
 * 二级菜单分类
 * @author uncletj6b
 * @Date 2020/11/23 23:50
 */
public class Sub {
    private int sid;
    private String stitle;
    private String spath;

    public Sub() {
    }

    public Sub(String stitle, String spath) {
        this.stitle = stitle;
        this.spath = spath;
    }

    public int getSid() {
        return sid;
    }

    public void setSid(int sid) {
        this.sid = sid;
    }

    public String getStitle() {
        return stitle;
    }

    public void setStitle(String stitle) {
        this.stitle = stitle;
    }

    public String getSpath() {
        return spath;
    }

    public void setSpath(String spath) {
        this.spath = spath;
    }

    @Override
    public String toString() {
        return "Sub{" +
                "sid=" + sid +
                ", stitle='" + stitle + '\'' +
                ", spath='" + spath + '\'' +
                '}';
    }
}

分页

package com.plant.demo.pojo;

/**
 * 分页
 * @author uncletj6b
 * @Date 2020/11/24 11:03
 */
public class QueryInfo {
    private String query;   //查询信息
    private int pageNum;    //当前页
    private int pageSize;   //每页最大数

    public QueryInfo(){

    }
    public QueryInfo(String query, int pageNum, int pageSize) {
        this.query = query;
        this.pageNum = pageNum;
        this.pageSize = pageSize;
    }

    public String getQuery() {
        return query;
    }

    public void setQuery(String query) {
        this.query = query;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    @Override
    public String toString() {
        return "QueryInfo{" +
                "query='" + query + '\'' +
                ", pageNum=" + pageNum +
                ", pageSize=" + pageSize +
                '}';
    }
}

机器类

package com.plant.demo.pojo;

/**
 * 机器类
 * @author uncletj6b
 * @Date 2020/11/24 0:54
 */
public class Robat {
    private int id;//机器编号
    private String rname;//机器名称
    private String content;//机器描述

    //无参构造函数
    public Robat(){}

    //有参构造函数
    public Robat(int id, String rname, String content) {
        this.id = id;
        this.rname = rname;
        this.content = content;
    }

    //封装
    public int getId() {
        return id;
    }

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

    public String getRname() {
        return rname;
    }

    public void setRname(String rname) {
        this.rname = rname;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

用户类

package com.plant.demo.pojo;

/**
 * 用户表实体类
 * @author uncletj6b
 * @Date 2020/11/23 22：52
 */
public class User {
    private int id;     //用户ID
    private String name;    //用户名
    private String password;    //用户密码

    //无参构造函数
    public User(){}

    //有参构造函数
    public User(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    //封装
    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

DAO层

这个层主要是去做一些方法实现的处理我们这个层使用MyBatis需要在Mapper.xml进行SQL映射，废话不多说上代码
导航栏类

package com.plant.demo.dao;

import com.plant.demo.pojo.Main;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * 导航栏查询
 * @author uncletj6b
 * @Date 2020/11/23 23:53
 */
@Repository
public interface MenuDao {
    public List<Main>getMenus();
}

机器类方法

package com.plant.demo.dao;

import com.plant.demo.pojo.Robat;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * 机器类方法
 * @author uncletj6b
 * @Date 2020/11/24 1:17
 */
@Repository
public interface RoBatDao {

    //1、查询机器内容
    public List<Robat>getAllRobat(@Param("rname")String rname, @Param("pageStart")int PageStart
            , @Param("pageSize")int pageSize);

    //2、获取所有机器个数
    public int getRobatCount(@Param("rname")String rname);

    //3、添加机器
    public int addRobat(Robat robat);
}

用户方法类

package com.plant.demo.dao;

import com.plant.demo.pojo.User;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;

/**
 * 用户方法类
 * @author uncletj6b
 * @Date 2020/11/23 22.55
 */
@Repository
public interface UserDao {

    //1.登录方法
    public User getUserByMessage(@Param("name") String name, @Param("password") String password);
}

Mapper.xml

这边既然聊到DAO层次了，那么我们直接把和DAO有关系的Mapper.xml上代码吧
（1）MainMapper.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.plant.demo.dao.MenuDao">
    <!-- 关系映射-->
    <resultMap id="menuMap" type="com.plant.demo.pojo.Main">
        <id column="id" property="id"></id>
        <result column="title" property="title"></result>
        <result column="path" property="path"></result>
        <collection property="sList" ofType="com.plant.demo.pojo.Sub">
            <id column="sid" property="sid"></id>
            <result column="stitle" property="stitle"></result>
            <result column="spath" property="spath"></result>
        </collection>
    </resultMap>

    <select id="getMenus" resultMap="menuMap">
        select mm.*,sm.id as sid,sm.title as stitle,sm.path as spath
        from mainmenu mm,submenu sm where mm.id = sm.mid
    </select>
</mapper>

（2）RoBatMapper.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.plant.demo.dao.RoBatDao">

    <select id="getAllRobat" resultType="com.plant.demo.pojo.Robat">
        select * from robat
        <if test="rname !=null">
            where rname like #{rname}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </select>

    <select id="getRobatCount" resultType="java.lang.Integer">
        select count(*) from robat
        <if test="rname !=null">
            where rname like #{rname}
        </if>
    </select>

    <insert id="addRobat">
    INSERT INTO `plant`.`robat` (`rname`, `content`)
    VALUES (#{rname}, #{content});
    </insert>
</mapper>

（3）UserMapper.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.plant.demo.dao.UserDao">

    <select id="getUserByMessage" resultType="com.plant.demo.pojo.User">
             select * from user where
             name=#{name} and password=#{password}
    </select>
</mapper>

做到这里要注意一个地方这个注解一定要加上，就加在启动类的里面就好了

@MapperScan("com.plant.demo.dao")

上面的大致方法都差不多了，那么我们就来实现吧，直接使用Controller层上代码，所谓不讲武德，讲文德

Controller

（1）LoginController

package com.plant.demo.controller;

import com.alibaba.fastjson.JSON;
import com.plant.demo.dao.UserDao;
import com.plant.demo.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;

/**
 *登录实现类
 * @author uncletj6b
 * @Date 2020/11/23 11:58
 */
@RestController
public class LoginController {

    @Autowired
    private UserDao userDao;

    @RequestMapping("/login")
    public String login(@RequestBody User user){
        String flag = "error";
        User us =userDao.getUserByMessage(user.getName(),user.getPassword());
        HashMap<String,Object> res = new HashMap<>();
        if (us!=null){
            flag ="ok";
        }
        res.put("flag",flag);
        res.put("user",user);
        String res_json = JSON.toJSONString(res);
        return res_json;
    }

    @RequestMapping("/test")
    public String test(@RequestBody User user){
        System.out.println("user"+user);
        return "ok";
    }
}

（2）MenuController

package com.plant.demo.controller;

import com.alibaba.fastjson.JSON;
import com.plant.demo.dao.MenuDao;
import com.plant.demo.pojo.Main;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;

/**
 * 导航实现类
 * @author uncletj6b
 * @Date 2020/11/24 1:00
 */
@RestController
public class MenuController {

    @Autowired
    MenuDao menuDao;

    @RequestMapping("/menus")
    public String getAllMenus(){
        HashMap<String,Object> data= new HashMap<String,Object>();
        int status =404;    //错误：404，成功：200
        List<Main> menus = menuDao.getMenus();
        if (menus!=null){
            data.put("menus",menus);
            data.put("flag",200);
        }else{
            data.put("flag",404);
        }
        String s = JSON.toJSONString(data);
        return s;
    }
}

（3）RoBatController

package com.plant.demo.controller;

import com.alibaba.fastjson.JSON;
import com.plant.demo.dao.RoBatDao;
import com.plant.demo.pojo.QueryInfo;
import com.plant.demo.pojo.Robat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;

/**
 * 机器实现类
 * @author uncletj6b
 * @Date 2020/11/24 1:21
 */
@RestController
public class RoBatController {

    @Autowired
    private RoBatDao roBatDao;

    /**
     * 查询机器，并实现模糊查询
     * @param queryInfo
     * @return
     */
    @RequestMapping("/robatall")
    public String getRoBatsList(QueryInfo queryInfo){
        //1.获取最大列表数和当前编号
        int numbers = roBatDao.getRobatCount("%"+queryInfo.getQuery()+"%");
        int pageStart =(queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        List<Robat> robats = roBatDao.getAllRobat("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
        HashMap<String,Object> res= new HashMap<>();
        res.put("numbers",numbers);
        res.put("data",robats);
        String res_string = JSON.toJSONString(res);
        return res_string;
    }

    /**
     * 添加机器
     * @param robat
     * @return
     */
    @RequestMapping("/robatadd")
    public String addRobat(@RequestBody Robat robat){
        int i =roBatDao.addRobat(robat);
        return i>0?"success":"error";
    }
}

前端

前端项目已经在上期有讲解，直接点上方链接过去查看就好，继续上代码，我这边使用的工具是WebStorm
登录页

<template>
    <div class="login_contet">
            <div class="login-from">
                <!--项目名称-->
                <h1 class="login_h1">登录</h1>
                <!--表单内容-->
                <el-form ref="loginFromRef" :model="LoginFrom" :rules="LoginRules" class="login_from">
                    <!--用户名-->
                    <el-form-item prop="name">
                        <el-input v-model="LoginFrom.name"></el-input>
                    </el-form-item>
                    <!--密码-->
                    <el-form-item prop="password">
                        <el-input v-model="LoginFrom.password" type="password"></el-input>
                    </el-form-item>
                    <!--按钮-->
                    <el-form-item class="login_button">
                        <el-button type="primary" @click="login" round>提交</el-button>
                        <el-button type="info" @click="resetLoginFrom()" round>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                LoginFrom: {
                    name: "admin",
                    password: "123456"
                },
                //验证对象
                LoginRules:{
                    //校验用户名
                    name:[
                        { required: true, message: '用户名为必填项', trigger: 'blur' },
                        { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
                    ],
                    //效验密码
                    password:[
                        { required: true, message: '密码为必填项', trigger: 'blur' },
                        { min: 6, max: 10, message: '长度在 6~10 个字符', trigger: 'blur' }
                    ],
                },
            }
        },
        methods:{
            //重置表单内容
            resetLoginFrom(){
                this.$refs.loginFromRef.resetFields();
            },
            //登录
            login(){
                this.$refs.loginFromRef.validate(async valid=>{
                    if(!valid)return;
                    const {data:res}=await this.$http.post("test",this.LoginFrom);
                    if(res=="ok"){
                        this.$message.success("登陆成功！");
                        this.$router.push({path:"/index"});
                    }else{
                        this.$message.success("登录失败！");
                    }
                })
            },
        }
    }
</script>
<style lang="less" scoped>
    .login_h1{
        position: absolute;
        left: 46%;
        top: 20%;
        letter-spacing:25px;
    }
    .login_contet{
        background-color: #2b4b6b;
        height: 820px;
    }
    .login_from{
        width: 300px;
        position: absolute;
        left: 40%;
        top: 35%;
    }
    .login_button{
        position: absolute;
        left: 120px;
    }
</style>

整体框架

<template>
    <el-container>
        <!--头部-->
        <el-header>
            工厂机器模拟
            <el-button type="info" @click="logout">安全退出</el-button>
        </el-header>
        <!--主体部分-->
        <el-container>
            <!--侧边栏-->
            <el-aside width="200px">
                <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" :router="true">
                    <!--一级菜单-->
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span style="color: #b3d4fc">{{item.title}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item :index="it.spath" v-for="it in item.sList" :key="it.sid">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{it.stitle}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--主体内容-->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default{
  created(){
      //查询menuList
        this.getMenuList();
  },
  data(){
      return{
          //菜单列表
          menuList:[],
      }
  },
    methods:{
      //获取导航栏
        async getMenuList(){
            const {data:res}=await this.$http.get("menus");
            console.log(res);
            if(res.flag != 200)return this.$message.error("获取列表失败！！！");  //访问失败的错误信息
            this.menuList =res.menus; //数据回填
        },
        //安全退出
        logout(){
            window.sessionStorage.clear();//清除session
            this.$router.push("/login");//回到首页
        },
    }
}
</script>
<style lang="less" scoped>
    //布局器样式
    .el-container{
        height:780px;
    }
    //头部样式
    .el-header{
        background-color: #373d41;
        display: flex;
        justify-content: space-between;//左右贴边
        padding-left:0%;//左边距
        align-items: center;
        color: #fff;
        font-size:20px;
        >div{
            display: flex;
            align-items: center;
            span{
                margin-left:15px;
            }
        }
    }
    //侧边栏样式
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
        .el-menu{
            border-right: none;
        }
    }
    //主体样式
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
</style>

进入初始页（这个啥也没搞，只是测试就没必要搞这么花里胡哨）

<template>
    <h2>欢迎进入机器管理</h2>
</template>
<script>
    export default{

    }
</script>
<style lang="less" scoped>

</style>

机器添加与机器列表展示

<template>
    <el-card>
    <el-table :data="robatList" border stripe style="line-height: 32px">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="机器名称" prop="rname"></el-table-column>
        <el-table-column label="机器说明" prop="content"></el-table-column>
    </el-table>
        <!--分页-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageSize"
                    :page-sizes="[1, 2, 5, 100]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="line-height: 50px">
            </el-pagination>
        </div>

        <el-row :gutter="25">
            <!--搜索区域-->
            <!--搜索添加-->
            <el-col :span="10">
                <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getRobatList">
                    <el-button slot="append" icon="el-icon-search" @click="getRobatList"></el-button>
                </el-input>
            </el-col>

            <!--添加按钮-->
            <el-col :span="4">
                <el-button type="primary" @click="addDialogVisiable= true">添加机器</el-button>
            </el-col>
        </el-row>

        <!--新增新机器-->
        <el-dialog title="添加机器"  width="50%" :visible.sync ="addDialogVisiable" @close="addDialogClosed">
            <el-form  :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <!--机器名-->
                <el-form-item label="机器名" prop="rname">
                    <el-input v-model="addForm.rname"></el-input>
                </el-form-item>
                <!--机器说明-->
                <el-form-item label="说明" prop="content">
                    <el-input v-model="addForm.content"></el-input>
                </el-form-item>
            </el-form>
            <!--内容底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addRobat">确认</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
<script>
export default{
    created(){
        this.getRobatList();
    },
    data(){
        return {
            //查询信息实体
            queryInfo: {
                query: "",//查询信息
                pageNum: 1,//当前页
                pageSize: 5,//每页最大数
            },
            robatList: [],
            total: 0,
            addDialogVisiable: false,//对话框状态
            //添加表单验证
            addForm: {
                rname:'',
                content:'',
            },
            //添加表单验证
            addFormRules: {
                rname: [
                    {required: true, message: '请输入机器名称', trigger: 'blur'},
                    {min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur'}
                ],
                content: [
                    {required: true, message: '请输入机器说明', trigger: 'blur'},
                    {min: 6, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur'}
                ],
            },
        }
    },
    methods:{
        //获取所有机器信息
        async getRobatList(){
            const {data:res}=await this.$http.get("robatall",{params:this.queryInfo});
            this.robatList = res.data;
            this.total = res.numbers;
        },
        //最大数
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getRobatList();
        },
        //pageNum的触发
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getRobatList();
        },
        //监听添加机器
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },
        addRobat(){
            this.$refs.addFormRef.validate(async valid=>{
                    if(!valid)return;
                    const {data:res} = await this.$http.post("robatadd",this.addForm);
                    if(res!="success"){
                        return this.$message.error("操作失败！！！");
                    }
                    this.$message.success("操作成功！！！");
                    this.addDialogVisiable = false;
                    this.getRobatList();
                }
            );
        }
    },
}
</script>
<style lang="less" scoped>

</style>

机器信息

<template>
    <div style="width:700px; float:left;">
    <el-card class="box-card">
        <el-card v-for="item in robatList" :key="item.id">
            <p style="line-height: 32px">机器名称:{{item.rname}}<br/>
                机器说明：{{item.content}}</p>

        </el-card>
    </el-card>
    </div>
</template>
<script>
    export default{
        created(){
            this.getRobatlimit();
        },
        data(){
            return{
                //查询信息实体
                queryInfo: {
                    query: "",//查询信息
                    pageNum: 1,//当前页
                    pageSize: 10,//每页最大数
                },
                robatList: [],//机器列表
            }
        },
        methods: {
            //获取所有机器信息
            async getRobatlimit(){
                const {data: res} = await this.$http.get("robatall", {params: this.queryInfo});
                this.robatList = res.data;//列表数据封装
                this.total = res.number_score;//总封装
            },
        },
    }
</script>
<style lang="less" scoped>
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 400px;
        height: 700px;
        list-style:none;
        float:left;
    }
</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
Vue.prototype.$axios = axios
import Login from '../components/Login.vue' //引入Login页面
import Index from '../components/index.vue'//引入主界面
import Welocom from '../components/Welocom.vue'//引入首页
import State from '../components/State.vue'//引入机器状态
import Message from '../components/Massage.vue'//引入机器列表

Vue.use(VueRouter)

const routes = [
    {
      path:"/",
        redirect:"/login",
    },
    {
      path:"/login",
        component:Login
    },
    {
      path:"/index",
        component:Index,
        redirect:"/wolocom",
        children:[
            {path:"/wolocom",component:Welocom,},
            {path:"/state",component:State,},
            {path:"/message",component:Message,},
        ]
    },

]

const router = new VueRouter({
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

//导入axios
import axios from 'axios'
//挂载axios
Vue.prototype.$http =axios
//设置访问根路径
axios.defaults.baseURL= "http://localhost:9090"

Vue.config.productionTip = false

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

App.vue

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

<script>

</script>

<style>

</style>

分离讲解

那么我们这个项目是前后端分离的，那么我们怎么进行前端跨域连接呢，当我们去使用多重性模块我们可以考虑使用nginx，但是这个是单体模块的话可以直接继承WebMvcConfigurerAdapter，我也直接上代码了

package com.plant.demo.utils;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 1. 与访问路径
     * 2. 请求来源
     * 3. 方法
     * 4. 允许携带
     * 5. 最大时间
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("Http://localhost:8080","null")
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

总结

这篇文章的代码我也是使用了一天的时间进行编写完毕，所使用的的技术分别分为
后端：
SpringBoot
MyBatis
前端：
Vue-cli
ElementUI组件
数据库
MySQL
注：数据库就根据我的实体类去自己设计就好了，我这里就不做展示了

整体效果图

说了这么多，最想看到的还是成品图吧，我这个也只是测试，所以说美观程度是肯定比不上正式项目的，就别再这方面纠结了，耗汁尾汁！
登录页

首页

工厂信息

工厂状态

这期就到这里了，希望可以对正在研究的你有所帮助！