实验管理系统springboot+vue+element ui项目开发_springboot elementui-优快云博客

本文链接：https://blog.youkuaiyun.com/YKbsmn/article/details/115346027

实验管理系统

某学院实验老师长期采用人工的形式完成药品试剂的入库、查询、出库的流程。但这种方式存在诸多问题和不便：

1. 在仓库运行流程中效率不高，容易出错。

2. 管理人员不能方便的了解每种物品的状态。

3. 数据量越来越大，难以维护。

因此，为了解决以上问题，提高办公效率，提高人力物力的利用率，对仓库工作进行信息化，规范化管理，结合使用单位的需求，开发出一套适合使用单位进行管理使用的系统。

2021.3.25~2021.4.1

本项目采用前后端分离开发

一、前端开发的环境配置

1.1 安装node.js

首先我们上node.js官网(nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境了。

安装完成之后可以window+r在控制台检查版本信息以及是否安装成功：

配置环境变量

原因：环境配置的目的主要是为了改变安装Nodejs依赖的下载位置，更加方便日后的包管理，以及配置缓存Cache的路径。因为Nodejs在执行安装语句时，会将安装的模块默认安装到C:\Users\用户名\AppData\Roaming\npm，从而占用C盘的空间。

先在node.js安装目录下创建两个文件夹

window+R，输入cmd打开命令窗口。输入：

npm config set prefix "F:\a tool\node.js\node_cache"
npm config set prefix "F:\a tool\node.js\node_global"

点击我的电脑->右键->属性->高级系统设置->高级->环境变量->新建NODE_PATH系统变量

注意:蓝色框部分是后期使用命令自动生成该文件目录,因此如果此时通过浏览目录去选择的话是没有该文件夹(一定不要选错文件目录),所以配置环境变量时务必将其补充上：

\node_modules

修改用户变量path:

1.2 安装vue的环境

window+r打开控制台分别输入以下两条语句，安装淘宝npm，cnpm是为了提高我们安装依赖的速度！！

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli

1.3 用vue ui新建项目

1、首先在我们要保存的项目文件夹里右键点击PowerShell窗口

如果没有PowerShell窗口，则shift+右键即可

2、输入vue ui，如果提示无法加载文件，则可能是vue版本太低的原因，可以去控制台输入vue -V检查版本，vue版本是2.X的输入vue ui是没有反应的。

解决方法：1、安装最新的脚手架，在控制台输入

cnpm i -g @vue/cli

解决方法2：如果上述方法不可行，先将原来的vue卸载掉，在控制台输入

npm uninstall -g vue-cli

然后输入以下命令行，进行高版本的安装：

npm install -g @vue/cli

如果上述方法还不行，那就需要：

以管理员身份运行PowerShell（点开Win10开始菜单，再点开所有应用，再点开Windows系统，找到并右键单击Windows Powershell，右键菜单中点击选择“以管理员身份运行”就可以了！）
执行：get-ExecutionPolicy，如果显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
选择Y

ok，上述三个解决方法总有一个适合你！！

1.4 编译器的选择（这边我们先默认选择idea）

选择idea的话需要先安装插件
- 点击file-settings-plungins，输入vue，安装vue.js。

1.5 安装element-ui

接下来我们引入element-ui组件（element.eleme.cn）

那么，idea怎么安装这个组件呢？

点击idea左下角的Terminal，
输入cnpm install element-ui --save，这里可能会遇到一个小问题，如果显示cnpm不是内部命令，但是在控制台输入cnpm -v有显示信息，那么就是idea默认的cmd配置问题
1. 解决方法
  1. file-settings-Tools-Terminal更改shellpath地址为本地的cmd存储位置即可。
  2. 记住更改完一定要重启idea，重启idea，重启idea！！

安装完成后，我们打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

在全局写入下面代码就可以使用element-ui的组件了

Vue.use(Element)

在idea按如下图片配置，即可通过按钮直接运行而不需要通过命令行npm run serve运行了

1.6 安装axios

我们来安装axios（www.axios-js.com/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

安装命令

cnpm install axios --save

main.js中全局引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

二、项目托管的选择

目前用得比较多的就是git（分布式版本控制系统的代表）和svn（集中式版本控制系统的代表）

2.1 那么，两者有什么区别呢

SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而工作的时候，用的都是自己的电脑，所以首先要从中央服务器得到最新的版本，然后工作，完成工作后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作，对网络带宽要求较高。
Git是分布式版本控制系统，没有中央服务器，每个人的电脑就是一个完整的版本库，工作的时候不需要联网了，因为版本都在自己电脑上。协同的方法是这样的：比如说自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，你们俩之间只需把各自的修改推送给对方，就可以互相看到对方的修改了。Git可以直接看到更新了哪些代码和文件！
Git是目前世界上最先进的分布式版本控制系统。

毋庸置疑，我们选择的是Git！！

2.2 git的安装和环境配置

详情可以看我这篇文章手把手教你 Git安装详细版本以及idea配置git_YKbsmn的博客-优快云博客

2.3 git的基本用法

具体可以看码云官网：Git 大全 - Gitee.com

初学者推荐廖雪峰的文档：使用Gitee - 廖雪峰的官方网站

2.4 简单说下git分支

首先在实际开发中，一个仓库（通常只放一个项目）主要存放两条分支：master和develop。master分支是创建git仓库时自动生成的，develop分支需要我们自己创建。

master分支：最稳定的分支，这个分支代表项目处于可发布的状态
develop分支：作为开发的分支，平行于master
feature分支：也就是功能分支，是为了解决某一个问题而设立的，当这个问题解决后，代码会合并回主分支develop后删除。（必须从develop分支创建）

2.5 github和gitee的选择

因为github是国外的，国内访问会很慢，所以推荐还是使用码云gitee！！

2.6 生成SSH公钥

在码云上创建ssh密钥，点击用户头像-设置-ssh密钥，可以看码云官网说明，很详细了，生成/添加SSH公钥 - Gitee.com

2.7 把项目托管到码云上

然后新建仓库，新建完仓库会有以下页面出现

1、首先执行划线的两个句子，如果显示git不是内部命令就是没有安装git或者没有配置git环境变量，具体可以参考下面这篇文章

手把手教你 Git安装详细版本以及idea配置git_YKbsmn的博客-优快云博客

2、操作本地仓库，在自己的项目路径下，shift+右键打开PowerShell窗口或者右键 git bash输入

git status（如果提示：fatal: not a git repository (or any of the parent directories): .git），则先输入git init，在输入git status
git add . （注意最后有个点，是添加全部文件的意思）
git commit -m "add files"
最后再输入 git status，如果显示On branch master
nothing to commit, working tree clean，即操作正确！！

3、把本地仓库上传到码云中

在本地仓库的PowerShell窗口输入（把自己的本地仓库和云端仓库做一个关联）

git remote add origin https://gitee.com/ykbsmn/vue_lab.git（这句话是上面截图的最后一块的第二句，根据自己的内容输入）

在本地仓库的PowerShell窗口输入（第一次需要输入码云的账号密码）
弹出窗口，输入码云的账号密码
最后刷新自己的码云仓库，显示如下即上传成功

三、通过vue-element-admin进行二次开发

3.1 步骤

3.1.1 基础模板下载地址

https://github.com/PanJiaChen/vue-admin-template

或者使用git命令克隆

git clone https://github.com/PanJiaChen/vue-admin-template

3.1.2 导入idea

注意：需要在本地提前安装 node 和 git

3.1.3 安装相应依赖

1、在idea安装依赖，在控制台输入：

npm install --registry=https://registry.npm.taobao.org

2、在idea启动项目，控制台输入：

npm run dev

3.2 框架介绍

3.2.1 前端框架入口

3.2.2 放项目构建的脚本文件

3.2.3 src目录

3.2.4 使用步骤

（1）添加路由（component的import设置路由对应的页面内容地址）

（2）在views创建view页面

（3）在api文件夹创建js文件，定义接口地址和参数

（4）在创建vue页面引入js文件，调用方法实现功能。

2021.4.1~2021.4.8

四、说下git的基本操作

查看分支：git branch
创建分支：git branch <name>
切换分支：git checkout <name>或者git switch <name>
创建+切换分支：git checkout -b <name>或者git switch -c <name>
合并某分支到当前分支：git merge <name>
删除分支：git branch -d <name>

前面也说过了master分支代表可发布的状态，所以说我们在做实际项目的时候，可以先创建一个分支dev，然后再这个分支上面进行内容的修改，修改完成后再进行git add . 提交，再进行git commit -m "xxx"，那么，dev分支的使命也就完成了，这时候就可以切换到master分支，把dev分支合并到master分支。最后再删除dev分支，搞定！！

五、mybatis_plus的简单掌握

具体可以看我另一篇文章

Mybatis plus笔记记_YKbsmn的博客-优快云博客

六、简单说下前后端分离

七、后端项目搭建

工程搭建

八、idea插件准备

file-setting-plugins下载下面两个插件即可

8.1 lombok

还需要导入依赖

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.16</version>
</dependency>

8.2 maven Helper

这个插件可以有效的排除maven依赖！！

九、通过mybatis_plus的代码生成器

9.1 步骤

导入依赖

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.3.2</version>
</dependency>
<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity-engine-core</artifactId>
    <version>2.3</version>
</dependency>

在tset文件夹下面创建生成器插件文件

package com.atguigu;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.DateType;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import org.junit.Test;

/**
 * @author
 * @since 2018/12/13
 */
public class CodeGenerator {

    @Test
    public void run() {

        // 1、创建代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 2、全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        //写入项目的绝对路径********
        gc.setOutputDir("F:\\a大三下学期课程\\springBoot项目\\education\\service\\service_edu" + "/src/main/java");

        gc.setAuthor("zyk");
        gc.setOpen(false); //生成后是否打开资源管理器
        gc.setFileOverride(false); //重新生成时文件是否覆盖

        //UserServie
        gc.setServiceName("%sService");	//去掉Service接口的首字母I

        gc.setIdType(IdType.ID_WORKER_STR); //主键策略
        gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型
        gc.setSwagger2(true);//开启Swagger2模式

        mpg.setGlobalConfig(gc);

        // 3、数据源配置*************
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/education?serverTimezone=GMT%2B8");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("686868");
        dsc.setDbType(DbType.MYSQL);
        mpg.setDataSource(dsc);

        // 4、包配置
        PackageConfig pc = new PackageConfig();
        pc.setModuleName("eduservice"); //模块名
        //包  com.atguigu.eduservice
        pc.setParent("com.atguigu");
        //包  com.atguigu.eduservice.controller
        pc.setController("controller");
        pc.setEntity("entity");
        pc.setService("service");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 5、策略配置
        StrategyConfig strategy = new StrategyConfig();

        strategy.setInclude("edu_teacher");

        strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
        strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀

        strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略
        strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作

        strategy.setRestControllerStyle(true); //restful api风格控制器
        strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符

        mpg.setStrategy(strategy);


        // 6、执行
        mpg.execute();
    }
}

常见bug

java.lang.NoSuchMethodError: com.baomidou.mybatisplus.core.toolkit.StringUtils.isNotEmpty(Ljava/lang

注意：报以上bug通常都是因为mybatis-plus 版本不兼容问题，之前我的>mybatis-plus-generator版本是3.0.5就报这个bug，改成3.3.2就不会了

9.2 统一返回的json时间格式

默认情况下json时间格式带有时区，并且是世界标准时间，和我们的时间差了八个小时。所以在application.yaml下配置：

spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

十、Swagger2介绍

前后端分离开发模式中，api文档是最好的沟通方式。
Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务。

步骤：

先创建maven子模块common，在common模块里面再创建maven子模块service_base，

然后再创建和service模块下的service_edu同级的包放配置文件SwaagerConfig

package com.atguigu.config;

import com.google.common.base.Predicates;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

/**
 * @author
 * @date 2021/4/7 0007 - 上午 11:12
 */
@Configuration//配置类
@EnableSwagger2 //swagger注解
public class SwaggerConfig {

    @Bean
    public Docket webApiConfig(){
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("webApi")
                .apiInfo(webApiInfo())
                .select()
                .paths(Predicates.not(PathSelectors.regex("/admin/.*")))
                .paths(Predicates.not(PathSelectors.regex("/error.*")))
                .build();

    }

    private ApiInfo webApiInfo(){

        return new ApiInfoBuilder()
                .title("网站-课程中心API文档")
                .description("本文档描述了课程中心微服务接口定义")
                .version("1.0")
                .contact(new Contact("java", "http://atguigu.com", "1123@qq.com"))
                .build();
    }
}

在service子模块下引入依赖service_base依赖

<dependency>
    <groupId>com.example</groupId>
    <artifactId>service_base</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</dependency>

在service子模块下的service_edu下的EduApplication加入注解@ComponentScan设置包扫描规则

@SpringBootApplication
@ComponentScan(basePackages = {"com.atguigu"})
public class EduApplication {

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

十一、统一

11.1 统一返回格式

因为在实际开发中并不是我们一个人单独开发一个项目，而是一个团队在一起协作开发，那么每个人的习惯不同就会照成数据表达方式的不同，所以统一返回格式就可以解决上述问题。项目中我们会将响应封装成json返回，一般我们会将所有接口的数据格式统一，使前端（iOSAndroid，Web）对数据的操作更一致、轻松。
一般情况下，统一返回数据格式没有固定的格式，只要能描述清楚返回的数据状态以及要返回的具体数据就可以。但是一般会包含状态码、返回消息、数据这几部分内容。

步骤：

定义统一的返回数据格式和数据返回状态码

@Data
public class R {
    @ApiModelProperty(value = "是否成功")
    private Boolean success;

    @ApiModelProperty(value = "返回码")
    private Integer code;

    @ApiModelProperty(value = "返回消息")
    private String message;

    @ApiModelProperty(value = "返回数据")
    private Map<String ,Object> data=new HashMap<String, Object>();

    //构造方法私有化
    private R(){}

    public static R ok(){
        R r=new R();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }

    public static R error(){
        R r=new R();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }

    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

    public R data(Map<String, Object> map){
        this.setData(map);
        return this;
    }
}

public interface ResultCode {
    Integer SUCCESS=20000;
    Integer ERROR=20001;
}

controller层的返回数据统一为R类型即可！！

11.2 统一异常

11.2.1 全局异常处理

步骤：

创建一个统一异常处理类，添加全局异常处理规则

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)//指定出现什么异常时执行这个方法
    @ResponseBody//可以返回数据
    public R error(Exception e){
        e.printStackTrace();
        return R.error().message("程序员正在加班改bug中......");
    }
}

2021.4.8~2021.4.15

11.2.2 特定异常处理

特定异常实际用得不是特别多，实则就是定向指定遇到什么异常执行什么操作。（springboot会先查找是否有特定异常，没有的话再执行全局异常）

//特定异常处理
@ExceptionHandler(ArithmeticException.class)
@ResponseBody
public R error(ArithmeticException e){
    e.printStackTrace();
    return R.error().message("执行了ArithmeticException异常");
}

11.2.3 自定义异常处理

第一步：创建自定义异常类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ZykException extends RuntimeException{

    private Integer code;//状态码
    private String msg;//异常信息
}

第二步：在统一异常类（全局异常类那里已经创建了）添加规则

//自定义异常处理
@ExceptionHandler(ZykException.class)
@ResponseBody
public R error(ZykException e){
    e.printStackTrace();
    return R.error().code(e.getCode()).message(e.getMsg());
}

第三步：因为这个异常不是系统自带的，所以系统是不认识它的，需要我们主动去抛出它。

try {
    int i=10/0;
}catch (Exception e){
    throw new ZykException(20001,"执行了自定义异常处理");
}

11.3 统一日志处理

11.3.1 配置日志级别

日志记录器（Logger）的行为是分等级的。如下表所示：
分为：OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL（后面的会包含前面的信息，比如日志级别为FATAL,那么他会包含OFF的信息）
默认情况下，spring boot从控制台打印出来的日志级别只有INFO及以上级别，可以配置日志级别，怎么配置呢？在application.yaml输入一下信息

logging:
  level: info

注意：这种方式的日志只能打印在控制台上

11.3.2 LogBack

spring boot内部使用Logback作为日志实现的框架，可以把日志输出到文件和控制台。和log4j很相似

步骤：

删除application.yaml的日志配置文件
在resources下创建logback.xml文件

十二、vsCode

12.1 vsCode创建工作区

步骤：

先创建一个空文件夹
再用vscode打开这个文件夹
然后再另存为工作区
然后再用vscode打开工作区即可

12.2 取消eslint

如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.js 文件。进行如下设置 lintOnSave: false 即可。

//lintOnSave: process.env.NODE_ENV === 'development',
lintOnSave: false,

十三、前端知识的简单掌握

十四、前后端对接出现的问题

前端使用ajax请求连接后端接口，取得需要的数据，然后在前端进行渲染。

14.1 跨域问题

通过一个地址去访问另外一个地址，这个过程中如果有三个地方中的任何一个不一样，就会产生跨域问题，这三个地方分别为：

访问协议：http https ip地址：192.168.1.1172.11.11.11 端口号：9528 8080

解决方法：

（1）在后端接口controller加入@CrossOrigin

（2）使用网关解决

14.2 前端设置访问的接口地址

在vue.config.js文件，在module.exports括号下面增加下面代码：

proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // 解决跨域问题： 当你请求是以/admin开头的接口，则我帮你代理访问到      http://localhost:8007
      // '/admin/*': {
      //   target: 'http://localhost:8007', // 你接口的域名
      //   // secure: false, // 如果是https接口，需要配置这个参数
      //   changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      // }
      // ,
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8007`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

14.3 改完访问接口之后原来的登陆失效了的解决方法

（1）在后端controller创建一个模拟登陆类

@RestController
@RequestMapping("/adminService/user")
@CrossOrigin
public class staffLoginController {

    @PostMapping("login")
    public R login(){
        return R.ok().data("token","admin");
    }

    @GetMapping("info")
    public R info(){
        return R.ok().data("roles","[admin]").data("name","admin");
    }

}

（2）前端的src/api/user.js，把login方法的url地址改成我们后端模拟登陆的地址即可

export function login(data) {
  return request({
    url: '/adminService/user/login',
    method: 'post',
    data
  })

十五、前端页面实现的逻辑

15.1 条件查询

（1）通过element-ui组件实现，在列表上面添加条件输入表单，使用v-model双向绑定数据。

（2）查询调用getList()方法即可

15.2 逻辑删除

（1）需要在src/api/labStaff.js定义删除接口的地址

deleteLabStaffId(id) {
    return request({
      url:`/adminService/lab_staff/${id}`
      method: 'delete'
    })
  }

（2）在views/lab/labStaff/list.vue引入/labStaff.js，添加弹窗组件提高用户体验感

（3）在弹窗组件方法中的then添加逻辑删除方法，成功删除返回提示信息，并重新显示数据刷新页面。

15.3 修改实验人员

（1）点击修改按钮，进入表单界面，根据id回显数据

（2）通过路由跳转进入数据回显页面，在index.js添加隐藏路由

{
  path: 'edit/:id',  //:id相当于占位符，里面要传参数
  name: 'labStaffEdit',
  component: () => import('@/views/lab/labStaff/save'),
  meta: { title: '编辑实验人员', noCache: true },
  hidden: true  //****** 隐藏路由
}

在list.vue调用这个路由：

<router-link :to="'/labStaff/edit/'+scope.row.id">
  <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>

（3）在src/api/labStaff.js定义根据id查找实验人员接口地址

getLabStaff(id){
    return request({
      url:`/adminService/lab_staff/getLabStaff/${id}`,
      method:'get'
    })
  }

（4）在save.vue里面调用（3）的方法实现数据回显方法，但是这个方法还没调用到哦！！

（5）页面加载前调用的方法只能在created里面调用

created() {
  //判断路径有id值,做修改（$route.params表示路由中的参数）
  if(this.$route.params&&this.$route.params.id){
    //从路径获取id值
    const id=this.$route.params.id
    //调用根据id查询的方法
    this.getInfo(id)
  }else{//路径没有id值，做添加
    //清空表单
    this.labStaff={}
  }
},

注：因为我们这里添加和修改用的是同一个save页面，所以需要进行判断区分，因为只有修改的时候才会传入id进行数据回显，所以如果有id就执行修改方法，没有则执行添加方法

saveOrUpdate(){
  //判断修改还是添加
  //根据labStaff是否有id
  if(this.labStaff.id){
    //修改
    this.updateLabStaff()
  }else{
    //添加
    this.saveLabStaff()
  }
},

2021.4.15 ~ 2021.4.22

十六、阿里云对象存储oss

详情看我这篇文章：阿里云对象存储oss上传头像_YKbsmn的博客-优快云博客_阿里云上传头像

十七、niginx

详情看我这篇文章：niginx反向代理_YKbsmn的博客-优快云博客_nigix反向代理

十八、整合EasyExcel

详情看我这篇文章：EasyExcel的简单使用_YKbsmn的博客-优快云博客_easyexcel使用

2021.4.23 ~ 2021.4.29

十九、供货商模块

19.1 添加完成之后怎么实现自动刷新页面

还是简单的增删查改，但是有一个需要注意的地方：

问题：就是添加完成之后页面不会自动刷新显示添加之后的数据。怎么解决？

分析：因为我们这里的添加是用对话框的形式打开的，本质上还是在同一个页面，而Created()方法在多次跳转到同一个页面的时候只会执行一次。

解决方法：在弹窗消息的关闭的时候顺带更新页面数据

addData(){
  manufacturerApi.addManufacturer(this.manufacturer)
    .then(response => {
      this.$message({
        type: 'success',
        message: '添加成功!!',
        onClose:()=>{
          this.getList() //刷新页面数据
        }
      });
    })
  this.dialogFormVisible = false
},

19.2 表单验证

（1）定义验证规则（required为true表示这个值必定要填，trigger为blur表示鼠标失去焦点的时候会显示message的内容

rules:{
  name:[
    {required:true,message:'请输入供货商',trigger: 'blur'}
  ],
  person:[
    {required: true,message: '请输入供货商负责人',trigger: 'blur'}
  ],
  phone:[
    {required: true,message: '请输入手机号码',trigger: 'blur'}
  ],
}

（2）在表单项添加prop属性，值和上面规则定义的名字一一对应

<el-form-item label="供货商名字" prop="name">
  <el-input v-model="manufacturer.name"></el-input>
</el-form-item>

（3）注意在表单添加model和ref！！

<el-form ref="form"  :model="manufacturer" :rules="rules"  label-width="100px">

注意

这里的:model不要写成v-model，v-model是双向绑定。不然会报[Element Warn][Form]model is required for validate错误。然后这个model的值写的是你表单项的内容传递给的对象
ref可以理解为这个表单的一个id，后面方法可以引用他表示引用整个表单

（4）按钮

<el-button type="primary" @click="addData('form')">确 定</el-button>

（5）添加方法

addData(formName){
  this.$refs[formName].validate((valid) =>{
    if(valid){
      manufacturerApi.addManufacturer(this.manufacturer)
        .then(response => {
          this.$message({
            type: 'success',
            message: '添加成功!!',
            onClose:()=>{
              this.getList()
            }
          });
        })
      this.dialogFormVisible = false
    }else{
      return false;
    }
  });
},

2021.4.29 ~ 2021.4.30

二十进货信息模块

20.1 简单说明

进货信息和供应商信息以及物品信息都是有关联的
进货信息表包含供应商id和物品id，通过id获取他们的名字显示在表格中
添加进货信息之后不会马上增加库存，需要经过进货审核成功之后才会增加库存。
进货信息再没有审核之前是可以修改和删除的

20.2 进货信息批量删除

批量删除的话需要用到element ui的type="selection"属性添加到表格。

（1）表单项添加可勾选属性，表格添加@selection-change="handleSelectionChange" 方法

<el-table-column prop="id" label="编号" width="120" type="selection" >

<el-table :data="list" element-loading-text="数据加载中" border stripe fit highlight-current-row
          style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable">

（2）新增添加data属性

data(){
  return{
    multipleSelection:[],//数组：通过这个数组可以获取勾选到的数组的内容
    delBtnStu:true //批量删除按钮默认为不可选中状态
  }
}

（3）添加批量删除按钮（disable属性为true表示禁用，由（3）知默认delBtnStu属性为true）（注意这里传参要传null，原因看后面这个方法的解释）

 <el-button type="danger" @click="deleteSelection(null)" :disabled="delBtnStu">批量删除</el-button>

（4）定义（1）表格添加的方法，如果数组长度不为0，表明有选项被勾选，那么批量删除按钮就不会被禁止

handleSelectionChange(val) {
  this.multipleSelection = val;
  //通过数组长度来判断是否有选中进货信息
  this.delBtnStu= val.length==0
}

（5）定义批量删除方法

通过是否有id判断是批量删除还是普通删除！！

deleteSelection(id){
  this.$confirm('此操作将永久删除选中文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    var ids=[]
    if(id){ //如果id不为空表明是单条数据删除
      ids.push(id)
    }else{ //如果id不为空表明是批量删除,需要遍历multipleSelection数组获取所有id
      this.multipleSelection.forEach( row => {
        ids.push(row.id)
      })
    }
    importApi.delSelected(ids)
      .then(response => {
        //提示信息
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        //刷新数据
        this.getList()
      })
  })
}

2021.4.3. ~ 2021.5.6

21. 单点登录

21.1 单点登录逻辑

https://blog.youkuaiyun.com/YKbsmn/article/details/116231374?spm=1001.2014.3001.5501

21.2 前端登录逻辑

可以看这篇文章，内容讲得很细致

https://www.cnblogs.com/codeluojay/p/13123494.html

2021.5.6 ~2021.5.13

22. 图片验证码

22.1 验证码逻辑

客户端发起一个请求，进入 Security 过滤器链。
当到 LogoutFilter 的时候判断是否是登出路径，如果是登出路径则到 logoutHandler ，如果登出成功则到 logoutSuccessHandler 登出成功处理。如果不是登出路径则直接进入下一个过滤器。
当到 UsernamePasswordAuthenticationFilter 的时候判断是否为登录路径，如果是，则进入该过滤器进行登录操作，如果登录失败则到 AuthenticationFailureHandler ，登录失败处理器处理，如果登录成功则到 AuthenticationSuccessHandler 登录成功处理器处理，如果不是登录请求则不进入该过滤器。

使用用户名密码来登录的，然后我们还想添加图片验证码，那么security给我们提供的UsernamePasswordAuthenticationFilter能使用吗？

首先security的所有过滤器都是没有图片验证码这回事的，但其实这里我们可以灵活点，如果你依然想沿用自带的UsernamePasswordAuthenticationFilter，那么我们就在这过滤器之前添加一个图片验证码过滤器。当然了我们也可以通过自定义过滤器继承UsernamePasswordAuthenticationFilter，然后自己把验证码验证逻辑和认证逻辑写在一起，这也是一种解决方式。

我们这次解决方式是在UsernamePasswordAuthenticationFilter之前自定义一个图片过滤器CaptchaFilter，提前校验验证码是否正确，这样我们就可以使用UsernamePasswordAuthenticationFilter了，然后登录正常或失败我们都可以通过对应的Handler来返回我们特定格式的封装结果数据。

权限管理器

security的ProviderManager会去委托AuthenticationProvider的时候，会根据UserDetailService的实现类（我们自己定义的），去委托给DaoAuthenticatioonProvider去搜索我们的数据库

常见bug总结

1.1 可能是springboot版本和spring-boot-starter版本不一致

10:33:58.146 [main] DEBUG org.springframework.boot.context.logging.ClasspathLoggingApplicationListen

解决方法：改成版本统一即可。

1.2 生成的Mapper代码没有进行@Mapper映射。

org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'labStaffServiceImpl': Unsatisfied dependency expressed through field 'baseMapper';

解决方法：在mapper代码上加@Mapper，但是mapper文件多的话就比较麻烦。所以推荐可以创建一个专门放配置的包放配置类。（不要觉得麻烦，以后的插件什么的都可以放到这个类里面）

@Configuration
@MapperScan("com.zyk.adminService.mapper")
public class LabConfig {
}

1.3 前后端对接时候，前端数据显示超时

后端报下面这个错误

Caused by: java.io.EOFException: Unexpected EOF read on the socket

之所以会报这个错误的原因：

前端mock把requestBody给使用掉了，导致传到后端的时候没有body，后端在解析的时候发现request请求头的content-length是59，就一直等待接收数据，与此同时，前端也在等待后端返回结果。1分钟后，前端等待超时，前端发EOF请求，后端收到以后，发现和预期的消息不一致，就报了EOF这个错误。

解决方法：

在vue.config.js文件下找到

before: require('./mock/mock-server.js')

ctrl+点击mock-server.js

把这两句话注释掉即可！！

1.4 @postMapping报错

前端页面报这个错误

org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported

解决方法：

将@POSTMapping改为@RequestMapping
@GetMapping
用于将HTTP GET请求映射到特定处理程序方法的注释。具体来说，@GetMapping是一个作为快捷方式的组合注释
@RequestMapping(method = RequestMethod.GET)。

@PostMapping
用于将HTTP POST请求映射到特定处理程序方法的注释。具体来说，@PostMapping是一个作为快捷方式的组合注释@RequestMapping(method = RequestMethod.POST)。

@RequestMapping:
一般情况下都是用@RequestMapping（method=RequestMethod.），因为@RequestMapping可以直接替代以上两个注解，但是以上两个注解并不能替代@RequestMapping，@RequestMapping相当于以上两个注解的父类！

1.5 前端报is not defined

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "captchaImg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

错误的主要原因是我的captcha没有在data里面定义就直接用了

解决方法：在data里面定义captcha即可

1.6 security的默认登陆表单和自定义表单提交方式的不同

Access to XMLHttpRequest at 'http://localhost:9001/login' (redirected from 'http://localhost:9528/ucenterService/lab-member/login') from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现这个问题其实还不是因为跨域问题导致的，而是因为我们后端SecurityConfig选用的是formLogin()方式去提交表单

它会提供一个默认的登陆页面，但是现在我们并没有去使用这个默认界面，而是自己定义一个登陆界面。因为我定义的登陆界面是采用json数据提交，而formLogin()默认的提交方式是form表单，所以我们需要把自定义的登陆界面改成form表单的提交形式。

改成

注意：这里的qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

打开控制台输入：npm install qs
在main.js中导入qs插件：import qs from 'qs'
在main.js中配置全局属性：Vue.prototype.$qs = qs
之后在任意组件内可以使用this.$qs获取qs对象

1.7 跨域问题

在配置类写如下配置文件

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addExposedHeader("Authorization");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
//          .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }

}

在SecurityConfig配置文件下写如下代码：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //解决跨域
        http.cors().and().csrf().disable();
    }
}

1.8 数据格式问题

org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

原因：提交json字符串自动绑定到pojo入参时，类型需要是"application/json;charset=UTF-8"，否则会抛"not supported"异常。

解决方法：

（1）后端模块添加下面语句转换类型即可

response.setContentType("application/json;charset=UTF-8");

（2）注意：@RequestBody接受的是一个json对象的字符串，而不是Json对象，在请求时往往都是Json对象，前端用JSON.stringify(data)的方式就能将对象变成json字符串。

前端请求传Json对象则后端使用@RequestParam；

前端请求传Json对象的字符串则后端使用@RequestBody。

或者前端方法请求头里面添加：headers: { "Content-Type": "application/json;charset=utf-8" }

1.9 unknown mutation type: SET_TOKEN

前端报

 unknown mutation type: SET_TOKEN

再store/index.js下面添加mutations:模块的声明

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  mutations: {  //在这个模块里面添加报错unknown的名字
    SET_TOKEN: (state, token) => {
      state.token = token
      localStorage.setItem("token", token)
    },
  },
  getters
})

1.10 版本问题

Caused by: java.lang.NoClassDefFoundError: org/springframework/boot/context/properties/Configuration

出现上面bug一般都是springboot和其他依赖之间版本的不对应。

我这里报错是因为Spring Cloud Alibaba和Spring Cloud以及 Spring Boot的版本对应问题

Spring Cloud Alibaba 项目都是基于 Spring Cloud，而 Spring Cloud 项目又是基于 Spring Boot 进行开发，并且都是使用 Maven 做项目管理工具，以下为我们使用的版本列表：

名称	版本
JAVA JDK	1.8.0_211
Spring Boot	2.1.6.RELEASE
Spring Boot Admin	2.1.5
Spring Cloud	zhi'yGreenwich.SR2
Spring Cloud Alibaba	0.9.0.RELEASE

1.11 前端页面报302错误，终极bug

前端页面可以登录，但是其他请求后端的接口报302的错误。

原因分析：

报302一般都是因为后端使用了springsecurity框架，需要经过登录之后才能访问相应的内容，那么可以登录但是确不可以访问后端接口，只有一个原因，你配置springsecurity的端口和后端业务不在同一个端口里面，但是这两个端口你都导入了spring-boot-starter-security包，只要导入 spring-boot-starter-security 启动器后，Spring Security 就已经生效，默认拦截全部请求，如果用户没有登录，跳转到内置登录页面。但是你登陆那个地方有进行配置所以才可以通过拦截成功访问，而另一个端口你并没有进行相应的配置。

解决方法：

只需要在一个端口导入spring-boot-starter-security启动器包就行了，这是很重要的一点，我就是因为把spring-boot-starter-security放入了公共模块里面，其他业务模块又去引入这个公共模块，导致每个端口都有spring-boot-starter-security启动器，进而导致前端的业务无法访问后端。

1.12 xml文件无法加载或者启动器没有扫描到mapper.xml

 Property ‘mapperLocations‘ was not specified ＆Invalid bound statement

原因分析：

Idea默认是不解析xml的，我在配置文件中配置了mybatis-plus.mapper-locations=classpath*:**/mapper/xml/*.xml，但启动器一直没扫描到，之后百度了一下才知道是IDEA 默认不会编译源码文件夹（即src/main/java）中的 XML 文件。果然我在pom.xml中没有指明解析xml,在启动后生成的target 目录下文件的mapper包下没有找到相应的xml。

解决办法：

首先，配置文件加入如下：

注意！Maven 多模块项目的扫描路径需以 classpath*: 开头（即加载多个 jar 包下的 XML 文件）比如：

mybatis-plus:
  mapper-locations: classpath*:com/zyk/ucenterService/mapper/xml/**Mapper.xml

然后：对于 Maven 项目，可指定 POM 文件的 resource。

<build>
  <resources>
      <resource>
          <!-- xml放在java目录下-->
          <directory>src/main/java</directory>
          <includes>
              <include>**/*.xml</include>
          </includes>
      </resource>
      <!--指定资源的位置（xml放在resources下，可以不用指定）-->
      <resource>
          <directory>src/main/resources</directory>
      </resource>
  </resources>
</build>

如果上述都解决不了的话，在每个mapper接口上加上注解