标准管理系统Vue项目

系列文章目录

	JavaSE
基础知识、数据类型学习	万年历项目	代码逻辑训练习题
代码逻辑训练习题	方法、数组学习	图书管理系统项目
面向对象编程：封装、继承、多态学习	封装继承多态习题	常用类、包装类、异常处理机制学习
集合学习	IO流、多线程学习	仓库管理系统JavaSE项目
员工管理系统、多表查询、反射实现DBHelper学习	DML、DDL、数据库对象学习
	JavaWeb
网络编程、各种标签、CSS学习	ECMAScript、BOM学习	DOM、jQuery学习
Servlet、JSP、Cookie、Ajax学习	融资管理系统JavaWeb项目
	框架
MyBatis框架学习	逆向工程、Spring框架IOC、AOP学习	SpringMVC框架学习
SpringBoot框架学习	招聘网站框架项目	Vue介绍、窗体内操作、窗体间操作学习
Vue路由配置、网络请求访问框架项目、element组件介绍学习	标准管理系统Vue项目
	微服务
Linux安装、Nginx反向代理、负载均衡学习	Docker学习	Jenkins学习
Nexus学习	Spring Security学习	RabbitMQ学习
Redis学习	MongoDB学习	MongoDB学习
Nacos学习	Spring Session学习	Spring Gateway学习
JSR 303学习	OpenFeign学习	Hystrix学习

---

---

前言

本文我们将介绍Vue做前端的三大框架整合项目：标准管理系统
需要注意的是，此处标准指一条信息的名字
主要使用到的知识点有：
1、三层架构
2、MyBatis框架
3、Spring框架
4、SpringMVC框架
5、SpringBoot框架
6、Vue框架
通过网盘分享的文件：标准管理系统
链接: https://pan.baidu.com/s/1R8DaR37ruVt6BD8NqNAdJA?pwd=bhv9 提取码: bhv9
标准管理系统

世界征服，谢谢大家！

---

一、项目需求

1. 实现功能

①全部标准信息查询
②标准信息模糊查询
③标准信息修改
④标准信息新增
⑤标准信息删除

2. 数据库表

数据库名：standard
表名：standard
表中字段：

创建表的sql语句：网盘压缩包中有转存的sql文件

/*
 Navicat Premium Data Transfer

 Source Server         : yyts
 Source Server Type    : MySQL
 Source Server Version : 50622
 Source Host           : localhost:3308
 Source Schema         : standard

 Target Server Type    : MySQL
 Target Server Version : 50622
 File Encoding         : 65001

 Date: 18/09/2024 21:46:36
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for standard
-- ----------------------------
DROP TABLE IF EXISTS `standard`;
CREATE TABLE `standard`  (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT '标准id',
  `std_num` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '标准号',
  `zhname` varchar(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '中文名称',
  `version` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '版本',
  `keys` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '关键字、词',
  `release_date` date NULL DEFAULT NULL COMMENT '发布日期',
  `impl_date` date NOT NULL COMMENT '实施日期',
  `package_path` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '附件路径',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `stdunique`(`std_num`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of standard
-- ----------------------------
INSERT INTO `standard` VALUES (1, 'GB 6657.1-2014', '玩具安全 第1部分:基本规范', '1', '玩具/安全', '2014-05-06', '2016-01-01', 'D:\\for_books\\a.txt');
INSERT INTO `standard` VALUES (2, 'GB 6657.2-2014', '玩具安全 第2部分:机械与物理性能', '2', '玩具/安全', '2014-05-07', '2016-01-01', 'D:\\for_books\\b.txt');
INSERT INTO `standard` VALUES (3, 'GB 6657.7-2014', '玩具安全 第7部分:易燃就是爆炸', '7', '玩具/安全', '2014-05-29', '2015-11-11', 'D:\\for_books\\c.txt');
INSERT INTO `standard` VALUES (4, 'GB 6657.4-2014', '玩具安全 第4部分:特定元素的迁移', '4', '玩具/安全', '2014-05-09', '2016-01-01', 'D:\\for_books\\d.txt');
INSERT INTO `standard` VALUES (5, 'GB 6657.5-2014', '玩具安全 第5部分:基本规范', '5', '玩具/安全', '2014-05-10', '2016-01-01', 'D:\\for_books\\e.txt');
INSERT INTO `standard` VALUES (6, 'GB 6657.6-2014', '玩具安全 第6部分:易燃高级玩法', '6', '玩具/安全', '2014-05-10', '2016-01-01', '');

SET FOREIGN_KEY_CHECKS = 1;

3. 页面说明

3.1 查询页面

实现功能
1、页面加载时，会进行全查
2、在上方输入框内输入数据，点击提交检索后，按照中文名称或标准号模糊查询（在一个输入框里输入一个数据，用or同时于中文名称、标准号匹配）
3、根据第一列的单选框选中，进行标准信息删除
4、点击新增标准按钮，跳转新增标准页面
5、根据数据的id，跳转修改标准页面

3.2 新增页面

1、实现新增功能

3.3 修改页面

2、实现修改功能

二、项目分析

1. 查询界面

1.1 全查功能

很简单，全部查询输出罢了
唯一需要注意的是，我在获取每条数据的同时，给每条数据增加了一个imgSrc属性，用于加载选中图片

mounted() {
    axios.post("/api/standard/select")
        .then(mess => {
            this.showData = mess.data.result.map(element => ({
                ...element,
                imgSrc: this.notAim // 添加 imgSrc 属性
            }));
        })
        .catch(err => {
            console.log(err); // 输出错误信息
        });
}

1.2 模糊查询功能

我认为难点主要在sql语句上（也没多难），因为我们要动态查询+模糊查询，我们使用Mybatis提供的sql语句拼接方法，能够做到正确的查询。
1、有判断id是因为我们在修改功能当中，需要提前显示所有未被修改的数据，所以需要根据id查
2、本查询语句可以做到全查

<select id="select" parameterType="standard" resultType="standard">
        select * from standard
        <where>
            <if test="zhname != null">
                and std_num like concat('%', #{zhname}, '%') or zhname like concat('%', #{zhname}, '%')
            </if>
            <if test="id != null">
                and id = #{id}
            </if>
        </where>
    </select>

1.3 删除功能

我认为难点在于：如何获取选中列的id，我给每一列加了一个click事件调用如下方法，能够实现选中按钮的更新，以及选中列id的获取

getAimed(id, index) {
    this.showData.forEach((element, i) => {
        if(i == index){
            element.imgSrc = this.Aim;
        }
        else{
            element.imgSrc = this.notAim;
        }
    });
    this.aimed = id;
}

1.4 跳转添加功能

跳转方法：

jumpToInsert() {
    this.$router.push("/insert");
}

1.5 跳转修改功能

跳转方法**需要传id**：

jumpToUpdate(id) {
    this.$router.push({
        path: "/update",
        query:{
            id: id
        }});
}

2. 新增界面

3. 修改界面

标准管理系统

---

总结

本文我们介绍了Vue做前端的三大框架整合项目：标准管理系统
主要使用到的知识点有：
1、三层架构
2、MyBatis框架
3、Spring框架
4、SpringMVC框架
5、SpringBoot框架
6、Vue框架
标准管理系统

世界征服，谢谢大家！