标准管理系统Vue项目

系列文章目录

第一章 基础知识、数据类型学习
第二章 万年历项目
第三章 代码逻辑训练习题
第四章 方法、数组学习
第五章 图书管理系统项目
第六章 面向对象编程：封装、继承、多态学习
第七章 封装继承多态习题
第八章 常用类、包装类、异常处理机制学习
第九章 集合学习
第十章 IO流、多线程学习
第十一章 仓库管理系统JavaSE项目
第十二章 员工管理系统、多表查询、反射实现DBHelper学习
第十三章 DML、DDL、数据库对象学习
第十四章 网络编程、各种标签、CSS学习
第十五章 ECMAScript、BOM学习
第十六章 DOM、jQuery学习
第十七章 servlet、jsp、Cookie、Ajax学习
第十八章 融资管理系统JavaWeb项目
第十九章 MyBatis框架学习
第二十章 逆向工程、Spring框架IOC、AOP学习
第二十一章 SpringMVC框架学习
第二十二章 SpringBoot框架学习
第二十三章 招聘网站框架项目
第二十四章 Vue介绍、窗体内操作、窗体间操作学习
第二十六章 Vue路由配置、网络请求访问框架项目、element组件介绍学习
第二十五章 标准管理系统Vue项目

---

---

前言

本文我们将介绍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框架
标准管理系统

世界征服，谢谢大家！