代码拉取完成，页面将自动刷新
/*
Navicat Premium Data Transfer
Source Server : lena
Source Server Type : MySQL
Source Server Version : 50734
Source Host : 39.96.59.198:3306
Source Schema : weblog
Target Server Type : MySQL
Target Server Version : 50734
File Encoding : 65001
Date: 06/09/2021 13:44:56
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for catagory
-- ----------------------------
DROP TABLE IF EXISTS `catagory`;
CREATE TABLE `catagory` (
`catagoryId` int(11) NOT NULL AUTO_INCREMENT,
`userId` int(11) NULL DEFAULT NULL,
`catagoryName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`passageNum` int(11) NULL DEFAULT 0,
`isDisplay` int(11) NULL DEFAULT 0,
`isTop` int(11) NULL DEFAULT 0,
`deleted` int(11) NULL DEFAULT 0,
`isCollect` int(11) NULL DEFAULT 0,
PRIMARY KEY (`catagoryId`) USING BTREE,
INDEX `userId`(`userId`) USING BTREE,
CONSTRAINT `catagory_ibfk_1` FOREIGN KEY (`userId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 48 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of catagory
-- ----------------------------
INSERT INTO `catagory` VALUES (1, 1001, '默认分类', 1, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (2, 1001, 'SSM', 0, 1, 0, 0, 1);
INSERT INTO `catagory` VALUES (3, 1001, 'Springboot', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (5, 1002, '默认分类', 0, 1, 0, 0, 1);
INSERT INTO `catagory` VALUES (6, 1002, 'vue', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (7, 1002, 'elementUI', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (8, 1004, '默认分类', 4, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (9, 1001, 'error', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (10, 1003, '默认', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (11, 1003, '学习', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (13, 1001, 'Android', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (14, 1011, '默认分类', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (15, 1009, '默认分类', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (16, 1010, '修改', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (17, 1011, '操作系统', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (18, 1005, '默认分类', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (19, 1005, '前端', 5, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (21, 1007, '默认分类', 0, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (30, 1001, '设计模式', 8, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (32, 1001, '前端', 8, 1, 0, 0, 0);
INSERT INTO `catagory` VALUES (33, 1001, 'Linux', 0, 1, 0, 0, 1);
INSERT INTO `catagory` VALUES (43, 1001, '计算机网络', 0, 1, 0, 0, 0);
-- ----------------------------
-- Table structure for discuss
-- ----------------------------
DROP TABLE IF EXISTS `discuss`;
CREATE TABLE `discuss` (
`discussId` int(11) NOT NULL AUTO_INCREMENT,
`userId` int(11) NULL DEFAULT NULL,
`passageId` int(11) NULL DEFAULT NULL,
`time` date NULL DEFAULT NULL,
`context` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`liked` int(11) NULL DEFAULT 0,
`parentId` int(11) NULL DEFAULT 0,
`childrenId` int(11) NULL DEFAULT 0,
`replyUserId` int(11) NULL DEFAULT 0,
`deleted` int(11) NULL DEFAULT 0,
PRIMARY KEY (`discussId`) USING BTREE,
INDEX `userId`(`userId`) USING BTREE,
INDEX `passageId`(`passageId`) USING BTREE,
CONSTRAINT `discuss_ibfk_1` FOREIGN KEY (`userId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `discuss_ibfk_2` FOREIGN KEY (`passageId`) REFERENCES `passage` (`passageId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 5012 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of discuss
-- ----------------------------
INSERT INTO `discuss` VALUES (5001, 1004, 4002, '2020-07-24', '写的很好', 0, 0, 0, 0, 0);
INSERT INTO `discuss` VALUES (5002, 1003, 4002, '2020-07-22', '懂了，谢谢楼主', 0, 0, 0, 0, 0);
INSERT INTO `discuss` VALUES (5003, 1002, 4002, '2020-07-25', '第一点看不太懂...', 0, 0, 0, 0, 0);
INSERT INTO `discuss` VALUES (5004, 1001, 4002, '2020-07-26', '修改完之后重启一下', 0, 5003, 0, 0, 0);
INSERT INTO `discuss` VALUES (5005, 1003, 4002, '2020-07-27', '看看有没有写错', 0, 5003, 0, 0, 0);
INSERT INTO `discuss` VALUES (5006, 1004, 4001, '2020-07-22', '终于弄懂了！', 0, 0, 0, 0, 0);
INSERT INTO `discuss` VALUES (5008, 1004, 4005, '2020-07-28', '说的太好了！', 0, 0, 0, 0, 1);
INSERT INTO `discuss` VALUES (5010, NULL, 4003, '2020-07-29', '写的太好了！', 0, 0, 0, 0, 0);
INSERT INTO `discuss` VALUES (5011, NULL, 4003, '2020-07-29', '写的太好了！', 0, 0, 0, 0, 0);
-- ----------------------------
-- Table structure for keyword
-- ----------------------------
DROP TABLE IF EXISTS `keyword`;
CREATE TABLE `keyword` (
`keywordId` int(11) NOT NULL AUTO_INCREMENT,
`keywordName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`passageNum` int(11) NULL DEFAULT 0,
`deleted` int(11) NULL DEFAULT 0,
PRIMARY KEY (`keywordId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2025 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of keyword
-- ----------------------------
INSERT INTO `keyword` VALUES (2001, 'JAVA基础', 11, 0);
INSERT INTO `keyword` VALUES (2002, '数据库', 22, 0);
INSERT INTO `keyword` VALUES (2003, '后端', 2, 0);
INSERT INTO `keyword` VALUES (2004, '前端', 33, 0);
INSERT INTO `keyword` VALUES (2005, '数据结构与算法', 13, 0);
INSERT INTO `keyword` VALUES (2006, 'Springboot', 1, 0);
INSERT INTO `keyword` VALUES (2007, 'Python', 0, 0);
INSERT INTO `keyword` VALUES (2008, 'Mybatis', 2, 0);
INSERT INTO `keyword` VALUES (2009, '架构', 0, 0);
INSERT INTO `keyword` VALUES (2010, '安全', 0, 0);
INSERT INTO `keyword` VALUES (2011, '计算机基础', 0, 0);
INSERT INTO `keyword` VALUES (2012, '5G', 0, 0);
INSERT INTO `keyword` VALUES (2013, '移动开发', 0, 0);
INSERT INTO `keyword` VALUES (2014, '游戏开发', 0, 0);
INSERT INTO `keyword` VALUES (2015, '配置', 0, 0);
INSERT INTO `keyword` VALUES (2016, '错误', 6, 0);
INSERT INTO `keyword` VALUES (2017, '深入JVM', 1, 0);
INSERT INTO `keyword` VALUES (2018, 'SSM', 12, 0);
INSERT INTO `keyword` VALUES (2019, 'Spring', 3, 0);
INSERT INTO `keyword` VALUES (2020, 'dubbo', 1, 0);
INSERT INTO `keyword` VALUES (2021, 'springMVC', 0, 0);
INSERT INTO `keyword` VALUES (2022, 'bootstrap', 0, 0);
INSERT INTO `keyword` VALUES (2023, '设计模式', 20, 0);
INSERT INTO `keyword` VALUES (2024, 'Linux', 0, 0);
-- ----------------------------
-- Table structure for passage
-- ----------------------------
DROP TABLE IF EXISTS `passage`;
CREATE TABLE `passage` (
`passageId` int(11) NOT NULL AUTO_INCREMENT,
`userId` int(11) NULL DEFAULT NULL,
`catagoryId` int(11) NULL DEFAULT NULL,
`createDate` datetime NULL DEFAULT NULL,
`title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`described` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`content` text CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`liked` int(11) NULL DEFAULT 0,
`visited` int(11) NULL DEFAULT 0,
`updateTime` datetime NULL DEFAULT NULL,
`isPrivate` int(11) NULL DEFAULT 0,
`isDraft` int(11) NOT NULL DEFAULT 1,
`deleted` int(11) NULL DEFAULT 0,
`isOriginal` int(11) NULL DEFAULT 1,
`originalPassageId` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
PRIMARY KEY (`passageId`) USING BTREE,
INDEX `userId`(`userId`) USING BTREE,
INDEX `passageId`(`passageId`) USING BTREE,
INDEX `catagoryId`(`catagoryId`) USING BTREE,
CONSTRAINT `passage_ibfk_1` FOREIGN KEY (`userId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `passage_ibfk_2` FOREIGN KEY (`catagoryId`) REFERENCES `catagory` (`catagoryId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 4061 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of passage
-- ----------------------------
INSERT INTO `passage` VALUES (4001, 1001, 32, '2020-07-11 00:00:00', 'vue的简单使用和详解', '本文章介绍了vue的使用和应用场景', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-atom-one-dark\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <h2><a name=\"t0\"></a><a id=\"WebVUE_2\"></a>Web前端——VUE</h2> \r\n<p> 终于到了我们与生产环境最息息相关的技术——VUE,接下来我会从VUE简介到基本使用,给大家能基本入门VUE</p> \r\n<h3><a name=\"t1\"></a><a id=\"1VUE_5\"></a>1.VUE简介</h3> \r\n<ul><li>渐进式JavaScript框架：vue适合不同层次的开发人员，比如简单的数据交互，数据与视图的绑定操作，可以直接用vue操作。</li><li>vue两大特点：<strong>响应式编程</strong>、<strong>组件化。</strong></li><li>完善的生态环境：vue router，vuex，Nuxt。</li><li>强大的组件化应用构建</li><li>声明式渲染，所有的元素都是响应式的。</li></ul> \r\n<p><font color=\"red\"> 缺点</font></p> \r\n<ul><li>VUE不支持IE8及以下的浏览器</li></ul> \r\n<p><a href=\"https://cn.vuejs.org/\">VUE官网</a><br> <img src=\"https://img-blog.csdnimg.cn/20201220101316891.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0Njk4MA==,size_16,color_FFFFFF,t_70#pic_center\" alt=\"在这里插入图片描述\"></p> \r\n<h3><a name=\"t2\"></a><a id=\"2VUE_18\"></a>2.VUE基础</h3> \r\n<p>说到基础使用，一个完美的开发者文档，是一个能直接复制案列而不会报错的文档，我们来尝试下</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-html has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token doctype\"><!DOCTYPE html></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">http-equiv</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>X-UA-Compatible<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>ie=edge<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Document<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>app<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n {<!-- -->{ message }}\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\r\n\r\n\r\n<span class=\"token comment\"><!-- 开发环境版本，包含了有帮助的命令行警告 类似于为压缩版的jquery 有很多错误处理 有错误会在终端报错 --></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://cdn.jsdelivr.net/npm/vue/dist/vue.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\r\n\r\n<span class=\"token comment\"><!-- 生产环境版本，优化了尺寸和速度 类似于jquery.min.js --></span>\r\n<span class=\"token comment\"><!-- <script src=\"https://cdn.jsdelivr.net/npm/vue\"></script> --></span>\r\n\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\r\n\r\n<span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'Hello Vue!\'</span>\r\n <span class=\"token punctuation\">}</span>\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n\r\n\r\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><img src=\"https://img-blog.csdnimg.cn/2020122010252886.JPG#pic_center\" alt=\"在这里插入图片描述\"><br> 可以看出是可以完美运行的,这个案例只是简单使用VUE入门内容控制变量操作DOM</p> \r\n<p><strong>注意的点</strong></p> \r\n<ol><li><font color=\"red\">不可以将Vue挂载到 body或者html标签上面 </font></li></ol> \r\n<h3><a name=\"t3\"></a><a id=\"2VUE_63\"></a>2.VUE指令</h3> \r\n<p> VUE指令可以基本代替js中对DOM操作，许多需要写很多js原生功能才能完成的功能，可能在VUE中一个指令就可搞定.下面我来介绍下基础指令</p> \r\n<p><strong>指令：Vue给标签设计的属性叫做指令。 指令的本质就是标签属性。只不过是以v-xxx开头。</strong></p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">语法<span class=\"token punctuation\">:</span><span class=\"token operator\"><</span>标签名 v<span class=\"token operator\">-</span>指令名<span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签名<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p><strong>v-text</strong></p> \r\n<ul><li>作用：渲染数据到标签里面</li><li>简写方式：{<!-- -->{}}</li><li>会覆盖原本html内容</li><li>不能解析html</li><li>共存的话 {message}}我不好</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1<span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>message<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//简写方式，数据渲染到页面上<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//指令方式，数据渲染到页面上<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span>我不好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//可以覆盖html内容<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1<span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>message<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>我不好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//共存<h1>你好我不好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"a\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//不能解析html</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n<span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token comment\">// 创建一个vue对象</span>\r\n <span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n \r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n\r\n <span class=\"token comment\">// 渲染到页面上的数据</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'你好 \'</span><span class=\"token punctuation\">,</span>\r\n a <span class=\"token punctuation\">:</span> <span class=\"token string\">\"<a href=\'#\'> 我是一个a链接</a>\"</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-html</strong></p> \r\n<ul><li>可以把数据渲染到页面上</li><li>没有简写方式</li><li>可以解析文本</li><li>如果字符串里面包含标签 也可以解析</li><li>相对于v-text 使用频率不高</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span>你好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"a\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n <span class=\"token comment\">//js</span>\r\n <span class=\"token comment\">// 创建一个vue对象</span>\r\n <span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n \r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n\r\n <span class=\"token comment\">// 渲染到页面上的数据</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'哈哈哈? \'</span><span class=\"token punctuation\">,</span>\r\n a <span class=\"token punctuation\">:</span> <span class=\"token string\">\"<a href=\'#\'> 我是一个a链接</a>\"</span>\r\n \r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-on</strong></p> \r\n<ul><li>DOM事件绑定</li><li>简写方式：@事件名=“事件处理函数”</li><li>语法 v-on\"事件名\"=“事件处理函数”</li><li>可以传参 事件绑定里面传实参</li><li>可以修改 使用this 注意this指向</li><li>处理事件 @focus @blur @change …</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span>on<span class=\"token punctuation\">:</span>事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span>on<span class=\"token punctuation\">:</span>事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数()\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n \r\n <span class=\"token operator\"><</span>标签 @事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 @事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数()\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n \r\n <span class=\"token comment\">// JS中</span>\r\n <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token operator\">...</span>\r\n methods<span class=\"token punctuation\">:</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">事件函数</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token operator\">...</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-bind</strong></p> \r\n<ul><li>绑定属性的指令 ,绑定事件在哪一个属性中发生</li><li>简写方式：:属性名=“表达式”</li><li>语法 v-on\"事件名\"=“事件处理函数”</li><li>可以传参 事件绑定里面传实参</li><li>可以修改 使用this 注意this指向</li><li>处理事件 @focus @blur @change …</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token comment\">//css</span>\r\n <span class=\"token punctuation\">.</span>red <span class=\"token punctuation\">{<!-- --></span>\r\n background<span class=\"token operator\">-</span>color<span class=\"token punctuation\">:</span> #f00<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//控制isRed为ture/false</span>\r\n <span class=\"token operator\"><</span>input type<span class=\"token operator\">=</span><span class=\"token string\">\"button\"</span> value<span class=\"token operator\">=</span><span class=\"token string\">\"切换背景\"</span> @click<span class=\"token operator\">=</span><span class=\"token string\">\"isRed = !isRed\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//控制trtue/false是否有这个属性产生</span>\r\n <span class=\"token operator\"><</span>div <span class=\"token punctuation\">:</span><span class=\"token keyword\">class</span><span class=\"token operator\">=</span><span class=\"token string\">\"{red:isRed}\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n <span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el <span class=\"token punctuation\">:</span><span class=\"token string\">\"#app\"</span><span class=\"token punctuation\">,</span>\r\n\r\n data <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n isRed <span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-for</strong></p> \r\n<ul><li>作用：遍历数组或对象</li><li>注意：<br> - 多层循环嵌套，只要注意标识符名不要和外层冲突； 搞清楚内层循环的变量是谁<br> - 为了防止\"就地复用\"，我们给每个循环项都添加上 一个key属性，注意key属性值不能相同</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//循环打印数组中数据</span>\r\n <span class=\"token operator\"><</span>p v<span class=\"token operator\">-</span><span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">\"item in songList\"</span> @click<span class=\"token operator\">=</span><span class=\"token string\">\"sing(item)\"</span><span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>item<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span>\r\n <span class=\"token comment\">//点击当前的p标签得到当前数据</span>\r\n <span class=\"token operator\"><</span>p v<span class=\"token operator\">-</span><span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">\"(item, index) in songList\"</span><span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>item<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span> <span class=\"token operator\">--</span> <span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>index<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span> \r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n<span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el <span class=\"token punctuation\">:</span><span class=\"token string\">\"#app\"</span><span class=\"token punctuation\">,</span>\r\n data <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n songList <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"天下\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"微微\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"凉凉\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"花心\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"爱的供养\"</span><span class=\"token punctuation\">]</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n methods <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">sing</span><span class=\"token punctuation\">(</span>song<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>song<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-if</strong></p> \r\n<ul><li>作用：条件渲染，切换显示不同的模板内容</li><li>注意：适用于一次性渲染</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">1</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">2</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">1</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">2</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">3</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\">...</span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">></span>展示的内容其他<span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>本片基础入门VUE就到这里，因篇幅过长，下篇在详解下vue里面的用法和注意事项，里面的案例都可在官网中的去找到，大家就先敲下，希望本篇文章能上手vue，嘻嘻嘻</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/weixin_45846980/article/details/111414171","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css\" rel=\"stylesheet\">\r\n </div>', 0, 100, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4002, 1001, 1, '2020-07-11 00:00:00', 'kmp算法：算法的理解、实现思想、案例', '本文章介绍了kmp算法', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-atom-one-dark\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <h2><a name=\"t0\"></a><a id=\"WebVUE_2\"></a>Web前端——VUE</h2> \r\n<p> 终于到了我们与生产环境最息息相关的技术——VUE,接下来我会从VUE简介到基本使用,给大家能基本入门VUE</p> \r\n<h3><a name=\"t1\"></a><a id=\"1VUE_5\"></a>1.VUE简介</h3> \r\n<ul><li>渐进式JavaScript框架：vue适合不同层次的开发人员，比如简单的数据交互，数据与视图的绑定操作，可以直接用vue操作。</li><li>vue两大特点：<strong>响应式编程</strong>、<strong>组件化。</strong></li><li>完善的生态环境：vue router，vuex，Nuxt。</li><li>强大的组件化应用构建</li><li>声明式渲染，所有的元素都是响应式的。</li></ul> \r\n<p><font color=\"red\"> 缺点</font></p> \r\n<ul><li>VUE不支持IE8及以下的浏览器</li></ul> \r\n<p><a href=\"https://cn.vuejs.org/\">VUE官网</a><br> <img src=\"https://img-blog.csdnimg.cn/20201220101316891.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0Njk4MA==,size_16,color_FFFFFF,t_70#pic_center\" alt=\"在这里插入图片描述\"></p> \r\n<h3><a name=\"t2\"></a><a id=\"2VUE_18\"></a>2.VUE基础</h3> \r\n<p>说到基础使用，一个完美的开发者文档，是一个能直接复制案列而不会报错的文档，我们来尝试下</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-html has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token doctype\"><!DOCTYPE html></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">http-equiv</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>X-UA-Compatible<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>ie=edge<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Document<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>app<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n {<!-- -->{ message }}\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\r\n\r\n\r\n<span class=\"token comment\"><!-- 开发环境版本，包含了有帮助的命令行警告 类似于为压缩版的jquery 有很多错误处理 有错误会在终端报错 --></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://cdn.jsdelivr.net/npm/vue/dist/vue.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\r\n\r\n<span class=\"token comment\"><!-- 生产环境版本，优化了尺寸和速度 类似于jquery.min.js --></span>\r\n<span class=\"token comment\"><!-- <script src=\"https://cdn.jsdelivr.net/npm/vue\"></script> --></span>\r\n\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\r\n\r\n<span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'Hello Vue!\'</span>\r\n <span class=\"token punctuation\">}</span>\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n\r\n\r\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><img src=\"https://img-blog.csdnimg.cn/2020122010252886.JPG#pic_center\" alt=\"在这里插入图片描述\"><br> 可以看出是可以完美运行的,这个案例只是简单使用VUE入门内容控制变量操作DOM</p> \r\n<p><strong>注意的点</strong></p> \r\n<ol><li><font color=\"red\">不可以将Vue挂载到 body或者html标签上面 </font></li></ol> \r\n<h3><a name=\"t3\"></a><a id=\"2VUE_63\"></a>2.VUE指令</h3> \r\n<p> VUE指令可以基本代替js中对DOM操作，许多需要写很多js原生功能才能完成的功能，可能在VUE中一个指令就可搞定.下面我来介绍下基础指令</p> \r\n<p><strong>指令：Vue给标签设计的属性叫做指令。 指令的本质就是标签属性。只不过是以v-xxx开头。</strong></p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">语法<span class=\"token punctuation\">:</span><span class=\"token operator\"><</span>标签名 v<span class=\"token operator\">-</span>指令名<span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签名<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p><strong>v-text</strong></p> \r\n<ul><li>作用：渲染数据到标签里面</li><li>简写方式：{<!-- -->{}}</li><li>会覆盖原本html内容</li><li>不能解析html</li><li>共存的话 {message}}我不好</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1<span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>message<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//简写方式，数据渲染到页面上<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//指令方式，数据渲染到页面上<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span>我不好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//可以覆盖html内容<h1>你好</h1> </span>\r\n <span class=\"token operator\"><</span>h1<span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>message<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>我不好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//共存<h1>你好我不好</h1> </span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>text<span class=\"token operator\">=</span><span class=\"token string\">\"a\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span><span class=\"token comment\">//不能解析html</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n<span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token comment\">// 创建一个vue对象</span>\r\n <span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n \r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n\r\n <span class=\"token comment\">// 渲染到页面上的数据</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'你好 \'</span><span class=\"token punctuation\">,</span>\r\n a <span class=\"token punctuation\">:</span> <span class=\"token string\">\"<a href=\'#\'> 我是一个a链接</a>\"</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-html</strong></p> \r\n<ul><li>可以把数据渲染到页面上</li><li>没有简写方式</li><li>可以解析文本</li><li>如果字符串里面包含标签 也可以解析</li><li>相对于v-text 使用频率不高</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"message\"</span><span class=\"token operator\">></span>你好<span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>h1 v<span class=\"token operator\">-</span>html<span class=\"token operator\">=</span><span class=\"token string\">\"a\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>h1<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n <span class=\"token comment\">//js</span>\r\n <span class=\"token comment\">// 创建一个vue对象</span>\r\n <span class=\"token keyword\">var</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n \r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n\r\n <span class=\"token comment\">// 渲染到页面上的数据</span>\r\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n message<span class=\"token punctuation\">:</span> <span class=\"token string\">\'哈哈哈? \'</span><span class=\"token punctuation\">,</span>\r\n a <span class=\"token punctuation\">:</span> <span class=\"token string\">\"<a href=\'#\'> 我是一个a链接</a>\"</span>\r\n \r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-on</strong></p> \r\n<ul><li>DOM事件绑定</li><li>简写方式：@事件名=“事件处理函数”</li><li>语法 v-on\"事件名\"=“事件处理函数”</li><li>可以传参 事件绑定里面传实参</li><li>可以修改 使用this 注意this指向</li><li>处理事件 @focus @blur @change …</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span>on<span class=\"token punctuation\">:</span>事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span>on<span class=\"token punctuation\">:</span>事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数()\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n \r\n <span class=\"token operator\"><</span>标签 @事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 @事件名<span class=\"token operator\">=</span><span class=\"token string\">\"事件函数()\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n \r\n <span class=\"token comment\">// JS中</span>\r\n <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token operator\">...</span>\r\n methods<span class=\"token punctuation\">:</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">事件函数</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token operator\">...</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-bind</strong></p> \r\n<ul><li>绑定属性的指令 ,绑定事件在哪一个属性中发生</li><li>简写方式：:属性名=“表达式”</li><li>语法 v-on\"事件名\"=“事件处理函数”</li><li>可以传参 事件绑定里面传实参</li><li>可以修改 使用this 注意this指向</li><li>处理事件 @focus @blur @change …</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token comment\">//css</span>\r\n <span class=\"token punctuation\">.</span>red <span class=\"token punctuation\">{<!-- --></span>\r\n background<span class=\"token operator\">-</span>color<span class=\"token punctuation\">:</span> #f00<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//控制isRed为ture/false</span>\r\n <span class=\"token operator\"><</span>input type<span class=\"token operator\">=</span><span class=\"token string\">\"button\"</span> value<span class=\"token operator\">=</span><span class=\"token string\">\"切换背景\"</span> @click<span class=\"token operator\">=</span><span class=\"token string\">\"isRed = !isRed\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//控制trtue/false是否有这个属性产生</span>\r\n <span class=\"token operator\"><</span>div <span class=\"token punctuation\">:</span><span class=\"token keyword\">class</span><span class=\"token operator\">=</span><span class=\"token string\">\"{red:isRed}\"</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n <span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el <span class=\"token punctuation\">:</span><span class=\"token string\">\"#app\"</span><span class=\"token punctuation\">,</span>\r\n\r\n data <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n isRed <span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-for</strong></p> \r\n<ul><li>作用：遍历数组或对象</li><li>注意：<br> - 多层循环嵌套，只要注意标识符名不要和外层冲突； 搞清楚内层循环的变量是谁<br> - 为了防止\"就地复用\"，我们给每个循环项都添加上 一个key属性，注意key属性值不能相同</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"app\"</span><span class=\"token operator\">></span>\r\n <span class=\"token comment\">//循环打印数组中数据</span>\r\n <span class=\"token operator\"><</span>p v<span class=\"token operator\">-</span><span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">\"item in songList\"</span> @click<span class=\"token operator\">=</span><span class=\"token string\">\"sing(item)\"</span><span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>item<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span>\r\n <span class=\"token comment\">//点击当前的p标签得到当前数据</span>\r\n <span class=\"token operator\"><</span>p v<span class=\"token operator\">-</span><span class=\"token keyword\">for</span><span class=\"token operator\">=</span><span class=\"token string\">\"(item, index) in songList\"</span><span class=\"token operator\">></span><span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>item<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span> <span class=\"token operator\">--</span> <span class=\"token punctuation\">{<!-- --></span><span class=\"token punctuation\">{<!-- --></span>index<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span> \r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\r\n<span class=\"token comment\">//js</span>\r\n<span class=\"token operator\"><</span>script<span class=\"token operator\">></span>\r\n <span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el <span class=\"token punctuation\">:</span><span class=\"token string\">\"#app\"</span><span class=\"token punctuation\">,</span>\r\n data <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n songList <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"天下\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"微微\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"凉凉\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"花心\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"爱的供养\"</span><span class=\"token punctuation\">]</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n methods <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">sing</span><span class=\"token punctuation\">(</span>song<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>song<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n<span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>v-if</strong></p> \r\n<ul><li>作用：条件渲染，切换显示不同的模板内容</li><li>注意：适用于一次性渲染</li></ul> \r\n<pre class=\"prettyprint\"><code class=\"prism language-javascript has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">1</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">2</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">1</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">2</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">-</span><span class=\"token keyword\">if</span><span class=\"token operator\">=</span><span class=\"token string\">\"变量/表达式\"</span><span class=\"token operator\">></span>展示的内容<span class=\"token number\">3</span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n <span class=\"token operator\">...</span>\r\n <span class=\"token operator\"><</span>标签 v<span class=\"token operator\">-</span><span class=\"token keyword\">else</span><span class=\"token operator\">></span>展示的内容其他<span class=\"token operator\"><</span><span class=\"token operator\">/</span>标签<span class=\"token operator\">></span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>本片基础入门VUE就到这里，因篇幅过长，下篇在详解下vue里面的用法和注意事项，里面的案例都可在官网中的去找到，大家就先敲下，希望本篇文章能上手vue，嘻嘻嘻</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/weixin_45846980/article/details/111414171","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css\" rel=\"stylesheet\">\r\n </div>', 2, 22, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4003, 1001, 32, '2020-07-16 00:00:00', 'Vue+ElementUI获取不到后台的数据（已排除Vue的原因）', '开发过程中遇到的问题', '此前**已经排除了vue的问题**。\r\n（通过控制台打印结果正确、axios写的路径获取的到数据。）\r\n\r\n## 问题\r\n在elementUI的表格代码中<el-table>，想要遍历后台获取的信息（Page封装的），我采用了\"v-for\"和\"{{}}\"获取数据。如下：\r\n```\r\n <!-- 显示文章-->\r\n <template>\r\n <el-table\r\n style=\"width: 100%\"\r\n v-for=\"(passage) in passageData\">\r\n <el-table-column\r\n prop=\"date\"\r\n label=\"标题\"\r\n width=\"180\">\r\n {{passage.title}}\r\n </el-table-column>\r\n </el-table>\r\n </template>\r\n```\r\n一直不起作用，获取不到后台的数据，但是axios是正确的。\r\n\r\n## 解决\r\n这时候看到了<el-table>的属性:data，动态获取该属性值的数据。且 <el-table-column>的属性prop指向的就是data所指对象的属性名。用这个代替原先的v-for遍历，就成功获取到数据了。\r\n```\r\n <!-- 显示文章 -->\r\n <template>\r\n <el-table\r\n style=\"width: 100%\"\r\n :data=\"passageData\">\r\n <el-table-column\r\n prop=\"title\" //相当于遍历passageData且获取每个对象的属性title\r\n width=\"300\">\r\n </el-table-column>\r\n </el-table>\r\n </template>\r\n```', 0, 100, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4004, 1001, 32, '2020-07-18 00:00:00', '使用Element表格+Vue获取数据展示查询结果', '案例', '\r\n\r\n以下为html代码：\r\n```\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>品牌管理</title>\r\n <!-- 引入css文件 -->\r\n <link rel=\"stylesheet\" href=\"../css/elementui.css\">\r\n</head>\r\n<!-- 引入js文件 -->\r\n<script src=\"../js/vue.js\"></script>\r\n<script src=\"../js/elementui.js\"></script>\r\n<script src=\"../js/axios.js\"></script>\r\n<body>\r\n <div id=\"app\">\r\n\r\n <!-- table中的prop对应属性名，label为表格显示的列名-->\r\n <el-table\r\n :data=\"tableData\"\r\n border\r\n style=\"width: 100%\">\r\n <el-table-column\r\n prop=\"id\"\r\n label=\"ID\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"name\"\r\n label=\"名称\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"letter\"\r\n label=\"首字母\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n width=\"180\"\r\n label=\"图片\">\r\n <template slot-scope=\"scope\">\r\n <img :src=\"scope.row.image\">\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n\r\n </div>\r\n</body>\r\n\r\n<script>\r\n new Vue({\r\n el:\"#app\",\r\n data(){\r\n return {\r\n tableData:[]\r\n }\r\n },\r\n created(){\r\n axios.get(\'/brand/findAll.do\').then( response => {\r\n this.tableData=response.data;\r\n })\r\n }\r\n })\r\n</script>\r\n\r\n</html>\r\n\r\n```\r\n\r\n分页效果图：\r\n\r\n代码：\r\n```\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>品牌管理</title>\r\n <!-- 引入css文件 -->\r\n <link rel=\"stylesheet\" href=\"../css/elementui.css\">\r\n</head>\r\n\r\n<body>\r\n <div id=\"app\">\r\n\r\n <!-- table中的prop对应属性名，label为表格显示的列名-->\r\n <el-table\r\n :data=\"tableData\"\r\n border\r\n style=\"width: 100%\">\r\n <el-table-column\r\n prop=\"id\"\r\n label=\"ID\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"name\"\r\n label=\"名称\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"letter\"\r\n label=\"首字母\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n width=\"180\"\r\n label=\"图片\">\r\n <template slot-scope=\"scope\">\r\n <img :src=\"scope.row.image\">\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n\r\n <el-pagination\r\n @size-change=\"fetchData\"\r\n @current-change=\"fetchData\"\r\n :current-page.sync=\"currentPage\"\r\n :page-sizes=\"[10, 20, 30, 40]\"\r\n :page-size=\"size\"\r\n layout=\"total, sizes, prev, pager, next, jumper\"\r\n :total=\"total\">\r\n </el-pagination>\r\n\r\n </div>\r\n</body>\r\n<!-- 引入js文件 -->\r\n<script src=\"../js/vue.js\"></script>\r\n<script src=\"../js/elementui.js\"></script>\r\n<script src=\"../js/axios.js\"></script>\r\n<script>\r\n new Vue({\r\n el:\"#app\",\r\n data(){\r\n return {\r\n tableData:[],\r\n currentPage:1, //初始页\r\n size:10, //每页的数量\r\n total:10 //总数\r\n }\r\n },\r\n created(){\r\n this.fetchData()\r\n },\r\n methods:{\r\n fetchData(){\r\n axios.get(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`).then( response => {\r\n this.tableData=response.data.rows;\r\n this.total=response.data.total\r\n })\r\n }\r\n }\r\n })\r\n</script>\r\n\r\n</html>\r\n```\r\n\r\n添加查询框效果图：\r\n\r\n代码：\r\n```\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>品牌管理</title>\r\n <!-- 引入css文件 -->\r\n <link rel=\"stylesheet\" href=\"../css/elementui.css\">\r\n</head>\r\n\r\n<body>\r\n <div id=\"app\">\r\n\r\n <!-- 搜索框 -->\r\n <el-form :inline=\"true\">\r\n <el-form-item label=\"品牌名称\">\r\n <el-input placeholder=\"品牌名称\" v-model=\"searchMap.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"品牌首字母\">\r\n <el-input placeholder=\"品牌首字母\" v-model=\"searchMap.letter\"></el-input>\r\n </el-form-item>\r\n <el-button type=\"primary\" @click=\"fetchData\">查询</el-button>\r\n </el-form>\r\n\r\n <!-- table中的prop对应属性名，label为表格显示的列名-->\r\n <el-table\r\n :data=\"tableData\"\r\n border\r\n style=\"width: 100%\">\r\n <el-table-column\r\n prop=\"id\"\r\n label=\"ID\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"name\"\r\n label=\"名称\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"letter\"\r\n label=\"首字母\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n width=\"180\"\r\n label=\"图片\">\r\n <template slot-scope=\"scope\">\r\n <img :src=\"scope.row.image\">\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n\r\n <!-- 第三个属性必须添加\".sync\"，否则点击页码不会更换 -->\r\n <el-pagination\r\n @size-change=\"fetchData\"\r\n @current-change=\"fetchData\"\r\n :current-page.sync=\"currentPage\"\r\n :page-sizes=\"[10, 20, 30, 40]\"\r\n :page-size=\"size\"\r\n layout=\"total, sizes, prev, pager, next, jumper\"\r\n :total=\"total\">\r\n </el-pagination>\r\n\r\n </div>\r\n</body>\r\n<!-- 引入js文件 -->\r\n<script src=\"../js/vue.js\"></script>\r\n<script src=\"../js/elementui.js\"></script>\r\n<script src=\"../js/axios.js\"></script>\r\n<script>\r\n new Vue({\r\n el:\"#app\",\r\n data(){\r\n return {\r\n tableData:[],\r\n currentPage:1, //初始页\r\n size:10, //每页的数量\r\n total:10, //总数\r\n searchMap:{}\r\n }\r\n },\r\n created(){\r\n this.fetchData()\r\n },\r\n methods:{\r\n fetchData(){\r\n axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then( response => {\r\n this.tableData=response.data.rows;\r\n this.total=response.data.total\r\n })\r\n }\r\n }\r\n })\r\n</script>\r\n\r\n</html>\r\n```\r\n\r\n标准的增删改查：\r\n\r\n代码：\r\n```\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>品牌管理</title>\r\n <!-- 引入css文件 -->\r\n <link rel=\"stylesheet\" href=\"../css/elementui.css\">\r\n</head>\r\n\r\n<body>\r\n <div id=\"app\">\r\n\r\n <!-- 搜索框 inline=\"true\"表示所有表单排成一行-->\r\n <el-form :inline=\"true\">\r\n <el-form-item label=\"品牌名称\">\r\n <el-input placeholder=\"品牌名称\" v-model=\"searchMap.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"品牌首字母\">\r\n <el-input placeholder=\"品牌首字母\" v-model=\"searchMap.letter\"></el-input>\r\n </el-form-item>\r\n <el-button type=\"primary\" @click=\"fetchData\">查询</el-button>\r\n <el-button type=\"primary\" @click=\"pojo={},formVisible = true\">新增</el-button>\r\n </el-form>\r\n\r\n <!-- table中的prop对应属性名，label为表格显示的列名-->\r\n <el-table\r\n :data=\"tableData\"\r\n border\r\n style=\"width: 100%\">\r\n <el-table-column\r\n prop=\"id\"\r\n label=\"ID\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"name\"\r\n label=\"名称\">\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"letter\"\r\n label=\"首字母\"\r\n width=\"180\">\r\n </el-table-column>\r\n <el-table-column\r\n width=\"180\"\r\n label=\"图片\">\r\n <template slot-scope=\"scope\">\r\n <img :src=\"scope.row.image\">\r\n </template>\r\n </el-table-column>\r\n\r\n <el-table-column\r\n width=\"180\"\r\n label=\"操作\">\r\n <template slot-scope=\"scope\">\r\n <el-button type=\"text\" size=\"small\" @click=\"edit(scope.row.id)\">修改</el-button>\r\n <el-button type=\"text\" size=\"small\" @click=\"dele(scope.row.id)\">删除</el-button>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n\r\n <!-- 第三个属性必须添加\".sync\"，否则点击页码不会更换 -->\r\n <el-pagination\r\n @size-change=\"fetchData\"\r\n @current-change=\"fetchData\"\r\n :current-page.sync=\"currentPage\"\r\n :page-sizes=\"[10, 20, 30, 40]\"\r\n :page-size=\"size\"\r\n layout=\"total, sizes, prev, pager, next, jumper\"\r\n :total=\"total\">\r\n </el-pagination>\r\n\r\n <!-- 新增功能对话框 -->\r\n <el-dialog\r\n title=\"品牌编辑\"\r\n :visible.sync=\"formVisible\">\r\n <!-- 新增品牌表单 -->\r\n <el-form label-width=\"80px\">\r\n <el-form-item label=\"品牌名称\">\r\n <el-input placeholder=\"品牌名称\" v-model=\"pojo.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"品牌首字母\">\r\n <el-input placeholder=\"品牌首字母\" v-model=\"pojo.letter\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"品牌图片\">\r\n <el-input placeholder=\"品牌图片\" v-model=\"pojo.image\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"品牌排序\">\r\n <el-input placeholder=\"品牌排序\" v-model=\"pojo.seq\"></el-input>\r\n </el-form-item>\r\n\r\n <el-form-item>\r\n <el-button @click=\"save()\">保存</el-button>\r\n <el-button @click=\"formVisible = false\">关闭</el-button>\r\n </el-form-item>\r\n\r\n </el-form>\r\n </el-dialog>\r\n\r\n </div>\r\n</body>\r\n<!-- 引入js文件 -->\r\n<script src=\"../js/vue.js\"></script>\r\n<script src=\"../js/elementui.js\"></script>\r\n<script src=\"../js/axios.js\"></script>\r\n<script>\r\n new Vue({\r\n el:\"#app\",\r\n data(){\r\n return {\r\n tableData:[],\r\n currentPage:1, //初始页\r\n size:10, //每页的数量\r\n total:10, //总数\r\n searchMap:{},\r\n formVisible:false,\r\n pojo:{}\r\n }\r\n },\r\n created(){\r\n this.fetchData()\r\n },\r\n methods:{\r\n fetchData(){\r\n axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then( response => {\r\n this.tableData=response.data.rows;\r\n this.total=response.data.total\r\n })\r\n },\r\n save(){\r\n //判断是进行添加还是更新操作，避免添加重复的数据\r\n axios.post(`/brand/${this.pojo.id==null?\'add\':\'update\'}.do`,this.pojo).then( response =>{\r\n this.formVisible=false; //关闭窗口\r\n this.fetchData(); //刷新列表\r\n })\r\n },\r\n edit(id){\r\n this.formVisible=true;//打开窗口\r\n //读取原本的数据\r\n axios.get(`/brand/findById.do?id=${id}`).then(response=>{\r\n this.pojo=response.data\r\n })\r\n },\r\n dele(id){\r\n this.$confirm(\'确定要删除吗?\', \'提示\', {\r\n confirmButtonText: \'确定\',\r\n cancelButtonText: \'取消\',\r\n type: \'warning\'\r\n }).then(() => {\r\n axios.get(`/brand/delete.do?id=${id}`).then(response=>{\r\n this.$alert(\'删除成功\', \'提示\');\r\n\r\n this.fetchData();\r\n })\r\n });\r\n }\r\n }\r\n })\r\n</script>\r\n\r\n</html>\r\n```', 0, 23, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4005, 1001, 9, '2020-08-19 00:00:00', 'Java操作数据库时报错：Unknown column ‘userId‘ in ‘where clause‘', '连接问题的解决', '**报错的行**：pst = conn.prepareStatement(sql);\r\n**报错内容**：\r\ncom.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column \'userId\' in \'where clause\'\r\n\r\n**原因**：数据库对应的表中不存在这一列\r\n**解决**：找到报错的行，检查自己此处（或上一句）写的sql语句的列名和数据库是否一致，改正即可。', 0, 322, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4006, 1001, 9, '2020-07-25 00:00:00', 'rabbitmq安装管理界面报错：Error:{:plugins_not_found,[:rabbitmq_managerment]}', '安装问题的解决', '\r\n原因：输入的内容拼写错误，所以没有找到。\r\n原先输入了：rabbitmq‐plugins enable rabbitmq_managerment\r\n修改后：rabbitmq‐plugins enable rabbitmq_management', 3, 22, '2020-07-25 00:00:00', 0, 1, 0, 1, '0');
INSERT INTO `passage` VALUES (4007, 1001, 9, '2020-08-14 00:00:00', '报错：Try setting a different JdbcType for this parameter or a different jdbcTypeForNull', '', '报错：Try setting a different JdbcType for this parameter or a different jdbcTypeForNull configuration property. \r\n\r\n原因：jsp页面未向controller传入参数，或者参数名字不一致。\r\n\r\n修改：传入相同名字的参数，或使用@RequestParam设置id即可。\r\npublic xxx xxx(@RequestParam(name = \"id\",required = true) String MyId)\r\n其中：注解中的name值为页面传入参数名。', 0, 4, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4008, 1001, 32, '2020-08-05 00:00:00', 'elementUI的快速入门', '快速上手', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-atom-one-dark\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p><strong>前后端分离</strong><br> 很多人误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。 前后端分工<br> 其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。<br> <strong>饿了么-PC端</strong><br> http://element-cn.eleme.io/#/zh-CN<br> Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。<br> <strong>搭建前端环境</strong><br> <strong>1.创建一个static web项目</strong><br> 根目录下执行vue命令<br> 搭建脚手架</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">vue init webpack\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p>看看是否能跑起来</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">npm run dev\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p><strong>2 安装 Elementui</strong><br> 输入指令</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">npm i element-ui -S\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p><strong>3 在main.js中写入一下内容:</strong></p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">import Vue from \'vue\';\r\nimport ElementUI from \'element-ui\'; //引入核心js组件\r\nimport \'element-ui/lib/theme-chalk/index.css\';//引入依赖的样式\r\nVue.use(ElementUI)\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li></ul></pre> \r\n<p>在 components 文件夹里新建一个vue ，</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-xml has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>template</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hello<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token comment\"><!--el开头就是elementui里面的组件名称--></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-row</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span><span class=\"token punctuation\">></span></span>默认按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>primary<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">disabled</span><span class=\"token punctuation\">></span></span>主要按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>success<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>成功按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>info<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>信息按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>warning<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>警告按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>el-button</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>danger<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>危险按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-button</span><span class=\"token punctuation\">></span></span>\r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>el-row</span><span class=\"token punctuation\">></span></span>\r\n \r\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>template</span><span class=\"token punctuation\">></span></span>\r\n\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\r\n <span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{<!-- --></span>\r\n name<span class=\"token punctuation\">:</span> <span class=\"token string\">\'HelloWorld\'</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token function\">data</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{<!-- --></span>\r\n msg<span class=\"token punctuation\">:</span> <span class=\"token string\">\'Welcome to Your Vue.js App\'</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token punctuation\">}</span>\r\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\r\n\r\n<span class=\"token comment\"><!-- Add \"scoped\" attribute to limit CSS to this component only --></span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>style</span> <span class=\"token attr-name\">scoped</span><span class=\"token punctuation\">></span></span><span class=\"token style language-css\">\r\n <span class=\"token selector\">h1, h2</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> normal<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token selector\">ul</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token property\">list-style-type</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\r\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token selector\">li</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> inline-block<span class=\"token punctuation\">;</span>\r\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0 10px<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token selector\">a</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #42b983<span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>style</span><span class=\"token punctuation\">></span></span>\r\n\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>在router 里面的index 里面添加 路径</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-js has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token keyword\">import</span> HelloWorld <span class=\"token keyword\">from</span> <span class=\"token string\">\"./components/HelloWorld\"</span>\r\n<span class=\"token keyword\">import</span> HelloElementUI <span class=\"token keyword\">from</span> <span class=\"token string\">\"./components/_01_helloElementUI\"</span>\r\n\r\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Router</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n routes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\r\n <span class=\"token punctuation\">{<!-- --></span>\r\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">\'/\'</span><span class=\"token punctuation\">,</span>\r\n name<span class=\"token punctuation\">:</span> <span class=\"token string\">\'HelloWorld\'</span><span class=\"token punctuation\">,</span>\r\n component<span class=\"token punctuation\">:</span> HelloWorld\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token punctuation\">{<!-- --></span>\r\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">\'/button\'</span><span class=\"token punctuation\">,</span>\r\n name<span class=\"token punctuation\">:</span> <span class=\"token string\">\'HelloWorld\'</span><span class=\"token punctuation\">,</span>\r\n component<span class=\"token punctuation\">:</span> Button\r\n <span class=\"token punctuation\">}</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>别忘了引入</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-js has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token keyword\">import</span> HelloWorld <span class=\"token keyword\">from</span> <span class=\"token string\">\'@/components/HelloWorld\'</span>\r\n<span class=\"token keyword\">import</span> Button <span class=\"token keyword\">from</span> <span class=\"token string\">\'@/components/01_Button\'</span>\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li></ul></pre> \r\n<p>然后页面直接输入localhost：8080/#/button 访问<br> 各种插件的用法直接访问官网 。</p> \r\n<p><strong>下面介绍 接口数据模拟-Mockjs&Easymock</strong><br> Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立<br> 于后端进行开发，帮助编写单元测试。提供了以下模拟功能：<br> 根据数据模板生成模拟数据<br> 模拟 Ajax 请求，生成并返回模拟数据<br> 基于 HTML 模板生成模拟数据</p> \r\n<p>（1）新建demo1.js<br> （2）下载安装mock.js</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"> npm install mockjs\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p>（3）在demo1.js文件加入代码</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-js has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">\r\n<span class=\"token keyword\">let</span> Mock<span class=\"token operator\">=</span><span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">\'mockjs\'</span><span class=\"token punctuation\">)</span> \r\n<span class=\"token keyword\">let</span> data<span class=\"token operator\">=</span>Mock<span class=\"token punctuation\">.</span><span class=\"token function\">mock</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span> \r\n<span class=\"token comment\">// name|规则:值</span>\r\n<span class=\"token string\">\'list|5\'</span><span class=\"token punctuation\">:</span><span class=\"token punctuation\">[</span> \r\n<span class=\"token punctuation\">{<!-- --></span> \r\n<span class=\"token string\">\'id\'</span><span class=\"token punctuation\">:</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> \r\n<span class=\"token string\">\'name\'</span><span class=\"token punctuation\">:</span><span class=\"token string\">\'测试\'</span> \r\n<span class=\"token punctuation\">}</span> \r\n<span class=\"token punctuation\">]</span> \r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> \r\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token constant\">JSON</span><span class=\"token punctuation\">.</span><span class=\"token function\">stringify</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> \r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>到js文件的根目录 输入 node demo1 可以直接运行打印结果<br> <strong>数据模板定义规范DTD</strong><br> 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值</p> \r\n<p>属性名 和 生成规则 之间用竖线 | 分隔。<br> 生成规则 是可选的。<br> 生成规则 有 7 种格式：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">\'name|min-max\': value\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p>最小和最大 -->数字 min-max</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">\'name|count\': value\r\n\'name|min-max.dmin-dmax\': value\r\n\'name|min-max.dcount\': value\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li></ul></pre> \r\n<p><strong>crud数据模拟</strong><br> js</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-js has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token keyword\">import</span> Mock <span class=\"token keyword\">from</span> <span class=\"token string\">\'mockjs\'</span>\r\n<span class=\"token comment\">//定义数组</span>\r\n<span class=\"token keyword\">var</span> dataList <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token comment\">//产生15条数据放入数组里面</span>\r\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> <span class=\"token number\">15</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token comment\">//push添加到数据里面</span>\r\n dataList<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>Mock<span class=\"token punctuation\">.</span><span class=\"token function\">mock</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token string\">\'id\'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\'@increment\'</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\'name\'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\'@cname\'</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\'phone\'</span><span class=\"token punctuation\">:</span> <span class=\"token regex\">/^1[0-9]{10}$/</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\'email\'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\'@email\'</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\'address\'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\'@county(true)\'</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\'createTime\'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\'@date(\"yyyy-MM-dd\")\'</span>\r\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<span class=\"token punctuation\">}</span>\r\n\r\n<span class=\"token comment\">//模拟请求</span>\r\n<span class=\"token comment\">// 获取用户信息</span>\r\nMock<span class=\"token punctuation\">.</span><span class=\"token function\">mock</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">RegExp</span><span class=\"token punctuation\">(</span><span class=\"token string\">\'/user/info\'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\'post\'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span>opts<span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token comment\">//这个数据 total=100 rows=1-10条 11-20条 page=2</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"-----------------------------\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>opts<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token keyword\">let</span> index <span class=\"token operator\">=</span> <span class=\"token constant\">JSON</span><span class=\"token punctuation\">.</span><span class=\"token function\">parse</span><span class=\"token punctuation\">(</span>opts<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>page<span class=\"token punctuation\">;</span>\r\n <span class=\"token keyword\">let</span> size <span class=\"token operator\">=</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token comment\">//接收参数</span>\r\n <span class=\"token comment\">//调用方法</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>dataList<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"===================123===============\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token keyword\">var</span> newList <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\r\n\r\n <span class=\"token comment\">//新的数组</span>\r\n <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i<span class=\"token operator\">=</span><span class=\"token number\">0</span><span class=\"token punctuation\">;</span>i<span class=\"token operator\"><</span>dataList<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span>i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{<!-- --></span>\r\n newList<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>dataList<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token punctuation\">}</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>newList<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n <span class=\"token keyword\">let</span> resultList <span class=\"token operator\">=</span> newList<span class=\"token punctuation\">.</span><span class=\"token function\">splice</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>index<span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token operator\">*</span>size<span class=\"token punctuation\">,</span>index<span class=\"token operator\">*</span>size<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>newList<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n <span class=\"token keyword\">let</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{<!-- --></span>\r\n <span class=\"token string\">\"total\"</span><span class=\"token punctuation\">:</span><span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\r\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span>resultList\r\n <span class=\"token punctuation\">}</span>\r\n <span class=\"token keyword\">return</span> data<span class=\"token punctuation\">;</span>\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\r\n\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>前端直接测试要用到数据这时候就需要用到axios<br> <strong>Ajax请求优化-axios</strong><br> vue更新到2.0之后，官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中<br> 理解 就是ajax请求 --在vue里面axios</p> \r\n<p>安装</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">npm install axios --save\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li></ul></pre> \r\n<p>全局使用<br> 在main.js 里面引入</p> \r\n<pre class=\"prettyprint\"><code class=\"prism language-js has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"><span class=\"token comment\">// The Vue build version to load with the `import` command</span>\r\n<span class=\"token comment\">// (runtime-only or standalone) has been set in webpack.base.conf with an alias.</span>\r\n<span class=\"token keyword\">import</span> Vue <span class=\"token keyword\">from</span> <span class=\"token string\">\'vue\'</span>\r\n<span class=\"token keyword\">import</span> App <span class=\"token keyword\">from</span> <span class=\"token string\">\'./App\'</span>\r\n<span class=\"token keyword\">import</span> router <span class=\"token keyword\">from</span> <span class=\"token string\">\'./router\'</span>\r\n<span class=\"token keyword\">import</span> ElementUI <span class=\"token keyword\">from</span> <span class=\"token string\">\'element-ui\'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//引入核心js组件</span>\r\n<span class=\"token keyword\">import</span> <span class=\"token string\">\'element-ui/lib/theme-chalk/index.css\'</span><span class=\"token punctuation\">;</span><span class=\"token comment\">//引入依赖的样式</span>\r\n\r\n<span class=\"token keyword\">import</span> axios <span class=\"token keyword\">from</span> <span class=\"token string\">\'axios\'</span>\r\n<span class=\"token comment\">//配置axios的全局基本路径</span>\r\naxios<span class=\"token punctuation\">.</span>defaults<span class=\"token punctuation\">.</span>baseURL<span class=\"token operator\">=</span><span class=\"token string\">\'http://localhost:80\'</span>\r\n<span class=\"token comment\">//全局属性配置，在任意组件内可以使用this.$http获取axios对象</span>\r\nVue<span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>$http <span class=\"token operator\">=</span> axios\r\nVue<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>ElementUI<span class=\"token punctuation\">)</span>\r\n\r\n\r\nVue<span class=\"token punctuation\">.</span>config<span class=\"token punctuation\">.</span>productionTip <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span>\r\n\r\n<span class=\"token comment\">/* eslint-disable no-new */</span>\r\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">Vue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{<!-- --></span>\r\n el<span class=\"token punctuation\">:</span> <span class=\"token string\">\'#app\'</span><span class=\"token punctuation\">,</span>\r\n router<span class=\"token punctuation\">,</span>\r\n components<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{<!-- --></span> App <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\r\n template<span class=\"token punctuation\">:</span> <span class=\"token string\">\'<App/>\'</span>\r\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\r\n\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre>\r\n </div><div><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css\" rel=\"stylesheet\">\r\n </div>', 0, 14, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4009, 1001, 3, '2020-08-20 00:00:00', 'springboot原理：springboot-starter', '解析springboot', '<div id=\"content_views\" class=\"markdown_views prism-atom-one-light\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">@Configuration\r\npublic class myMvcConfigurer implements WebMvcConfigurer {\r\n @Override\r\n public void addViewControllers(ViewControllerRegistry registry) {\r\n registry.addViewController(\"/haha\").setViewName(\"/login\");\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>当访问\"/haha\"时，会自动在templates下寻找login.html文件。</p>\r\n </div>', 0, 77, NULL, 0, 0, 1, 1, '0');
INSERT INTO `passage` VALUES (4010, 1001, 9, '2020-08-07 00:00:00', '报错：使用“对象.equals(null)”的时候报空指针异常', '...', '## 紧急URG\n置1，表明紧急指针字段有效，告知系统尽快传送。\n紧急指针字段用于指出报文段中的紧急数据有多少字节，之后是普通数据。\n## 确认ACK\n置1，表明确认号有效。\n## 推送PSH\n置1，不等到缓存填满才处理，尽快将报文交付到接收应用程序。\n## 复位RST\n置1，表示连接出现严重差错（主机崩溃…），必须释放后重新连接。\n用于**异常**的关闭连接，此时不必处理缓冲区的包，也无需用FIN包请求释放连接，直接丢弃缓冲区的包。\n发送RST包，接收端收到后不必发送ACK确认报文。\n## 同步SYN\n置1，表示当前报文是请求连接的报文。\n其中，SYN：ACK=10，是连接建立请求；SYN：ACK=11，是同意建立连接报文。\n不能携带数据。\n## 终止FIN\n置1，报文段发送端数据发送完毕，要求释放运输连接。\n当FIN：ACK=11时，表示是连接释放报文段。\n', 0, 8, NULL, 0, 1, 0, 1, '0');
INSERT INTO `passage` VALUES (4011, 1001, 43, '2020-08-09 00:00:00', 'TCP报文标志位', '...', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-atom-one-light\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p>在spring-security.xml中<code><security:http></code>标签中配置以下内容即可:</p> \r\n<p><code><security:logout invalidate-session=\"true\" logout-url=\"/logout.do\" logout-success-url=\"/login.jsp\" /></code></p> \r\n<p>其中，logout-url表示当访问该路径时注销用户（应该在注销按钮上配置此路径）；logout-success-url表示注销后跳转到此路径。</p>\r\n </div><div><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css\" rel=\"stylesheet\">\r\n </div>', 1, 44, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4012, 1001, 33, '2020-08-10 00:00:00', '多路复用I/O：select、poll、epoll的实现原理，epoll惊群现象', '...', '## 多路复用I/O\n- 与客户端建立连接后，内核会为客户端分配一个fd（文件描述符，能标志一个客户端）\n- 多路复用IO指内核监控客户端（fd）是否有数据到来，当我们知道有数据到来时，只需要调用多路复用的select/poll/epoll提供系统调用即可，将我们想知道的客户端（fd）传入，内核就会返回哪些客户端的数据准备好了。\n- 原先是有几个fd，就进行几次系统调用，一次只能判断一个客户端（fd）是否有数据传输，频繁的从用户态和内核态中切换。现在允许传入多个fd，根据fd进行一次系统调用即可，大大降低了系统的开销。其中epoll效率最高。\n- I/O多路复用通过一种机制，可以监视多个描述符，一旦某个描述符就绪，能通知程序进行相应的读写操作。\n<hr>\n\n## select\n- 一次调用传入的fd数量有限（最多1024个，不同内核参数可能不同）\n- **实现过程**：每次调用select，都需要把fd集合从用户态拷贝到内核态，然后在内核中遍历传进来的所有fd，检查是否有数据可读，然后调用对应的系统调用，获得有数据达到的fd。最后将有数据到达的fd中的数据从内核态传到用户态做业务处理。\n- 缺点：仅仅知道有IO发生了，但不知道是哪些fd，只能无差别的轮询当前所有fd，找出有IO的fd进行操作，因此**时间复杂度O(n)**。同时需要维护一个用来存放大量fd的数据结构，在用户态向内核态传递存放fd的结构时开销大。\n- 大多数情况下，要监视的fd相对固定，不需要每次都修改，因此每次重新传fd消耗大，效率低。\n<hr>\n\n## poll\n- 与select相似，区别在于系统调用的时候，传入的fd数量是没有限制的，因为它是**基于链表存储**的。\n- 特点：**水平触发**。即若此次报告了fd有数据，没有被处理，下次poll仍然会报告该fd。\n- 时间复杂度也是O(n)\n<hr>\n\n## epoll\n每次注册新的事件到epoll句柄中时，会把fd拷贝进内核，而不是像select每次重复的把所有fd从用户态拷贝到内核态，**保证每个fd在整个过程中只会拷贝一次**。\n\n三个函数：\n- ``epoll_create``：创建一个epoll句柄（维护等待队列、就绪队列）\n- ``epoll_ctl``：注册要监听的事件类型（增删改），把监听的socket放到红黑树中，给内核中断处理程序注册一个回调函数，方便在该fd的数据到达的时候，通过回调函数将它放到就绪队列中。\n- ``epoll_wait``：等待事件的产生\n\n**实现原理**：内部维护了一个红黑树和队列，红黑树记录当前需要监测的fd，队列存放的就是操作就绪的链接（准备好数据传输的fd）。当收到IO时，在红黑树中查找到该fd（查找时间复杂度是O(log2n)），抵用回调函数激活该fd，放入就绪队列中，等待调用。当进程调用``epoll_wait``的时候，只需要将句柄中的就绪队列中唤醒一个即可，**时间复杂度是O(1)**，减少了用户态和内核态之间的切换。\n\n时间复杂度是O(1)的原因：每次收到数据都会在内核态查询该fd，然后将fd加入就绪队列，当我们调用``epoll_wait``的时候，只是从用户态切换到内核态的就绪队列中取出一个fd，时间复杂度自然是O(1)。\n<br>\n\n### LT、ET两种模式：\n- ``EPOLLLT（LT）``：默认模式，水平触发时机。只要一个fd还有数据可读，每次epoll_wait都会返回它的事件，提醒用户程序去操作。\n- ``EPOLLET（ET）``：高速模式。边沿触发时机。一个fd的一次事件**只会通知一次**，如果通知了一次，即使用户程序不对当前fd进行读写操作，下一次也不会再通知。直到该fd发生新的读写事件才会再次通知。\n\n### epoll惊群现象\n- 一个进程调用``epoll_wait``后，如果当前还没有任何时间发生，需要让当前进程挂起等待，放到等待队列中。当有多个进程关注同一个epoll实例时，多个进程都放在等待队列中，可以通过队列被逐个唤醒。但是先唤醒哪个进程？还是全部唤醒？这就涉及“惊群现象”的问题\n- 惊群现象：发生在有事件发生时，全唤醒进程的时候。因为只有一个fd能成功accept，其他进程尝试后都会返回false（如果有10个进程同时在epoll_wait同一个epoll实例，当事件到达的时候，10个进程都会被唤醒，但只有一个能成功），未成功的进程被白白唤醒，做了无用功，会导致系统负载过高。\n- 惊群现象通常发生在**服务器**上，父进程绑定一个端口监听socket，然后fork多个子进程，子进程们开始循环处理该soket，每当发起一个TCP链接，多个子进程都会被唤醒，但只有一个accept连接成功。例如一个网页上有多个人工客服，当有用户发送数据的时候，所有人工客服都会被惊醒，但实际上只有一个客服会和用户建立连接并收到用户的数据。\n- 为了解决惊群现象带来资源的损耗，内核后续高版本提供了``EPOLLEXCLUSIVE``和``SO_REUSEPORT``选项。其中``EPOLLEXCLUSIVE``是热备份模式，在唤醒的时候总是唤醒排在最前面的1个进程；``SO_REUSEPORT``是负载均衡模式，每个进程拥有自己独立的epoll实例，由内核来决策把当前连接给哪个epoll实例。\n\n<hr>\n\n## 选择\n- 因为select和poll的时间复杂度与连接数有关，当连接数多的时候，应该选择epoll。\n- 在连接数少、且活跃度较高的时候，使用select、poll每次能够检测出多个fd，相比起epoll频繁调用回调函数，修改就绪队列，可能性能更好。\n- 当fd较短暂，或变动大的时候，select、poll每次有读写事件到达的时候都会传输fd集，而epoll是注册一个就调用一次，使用select、poll可能更好。\n- 如果要在select和poll之间选择，就看对传入fd是否有数量限制。', 0, 152, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4013, 1005, 18, '2020-08-13 00:00:00', '分金币任务', '...', '```go\n/**\n 分金币题目要求\n 你有50枚金币，需要分配给以下几个人：Matthew,Sarah,Augustus,Heidi,Emilie,Peter,Giana,Adriano,Aaron,Elizabeth\n 分配规则如下：\n a. 名字中每包含1个\'e\'或\'E\'分1枚金币\n b. 名字中每包含1个\'i\'或\'I\'分2枚金币\n c. 名字中每包含1个\'o\'或\'O\'分3枚金币\n d: 名字中每包含1个\'u\'或\'U\'分4枚金币\n 写一个程序，计算每个用户分到多少金币，以及最后剩余多少金币？\n 程序结构如下，请实现 ‘dispatchCoin’ 函数\n */\n\nvar (\n // 定义金币数量\n coins = 50\n // 定义要分配金币的人\n users = []string{\n \"Matthew\", \"Sarah\", \"Augustus\", \"Heidi\", \"Emilie\", \"Peter\", \"Giana\", \"Adriano\", \"Aaron\", \"Elizabeth\",\n }\n // 存储每个用户可分到的金币数量\n distribution = make(map[string]int, len(users))\n)\n\nfunc DispatchCoin() (map[string]int,int) {\n // 遍历人\n for _,name := range users {\n // 记录当前人要分配的金币数量\n getCoins:=0\n for _,cur := range name {\n switch cur {\n case \'e\',\'E\':getCoins+=1\n case \'i\',\'I\':getCoins+=2\n case \'o\',\'O\':getCoins+=3\n case \'u\',\'U\':getCoins+=4\n }\n }\n // 存储当前用户分配到的金币数量\n distribution[name]=getCoins\n // 总金币数量减去当前数量\n coins-=getCoins\n }\n return distribution,coins\n}\n\n// 测试\n/*func main() {\n maps,res:=exercise.DispatchCoin()\n for key,value := range maps {\n fmt.Println(key,value)\n }\n fmt.Println(\"剩余:\",res) // 10\n}*/\n\n\n```', 0, 2, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4014, 1005, 18, '2020-08-13 00:00:00', '自动重传请求协议 ARQ', '...', '## 概述\n- 是OSI中的**数据链路层**协议\n- 传统的自动重传请求分为三种：停止-等待 ARQ(stop and wait)、回退N帧 ARQ(go-back-n)、选择重传 ARQ(selective repeat)。\n- 优点：比较简单 。因而被广泛的应用在分组交换网络中。\n- 缺点：通信信道的利用率不高，即信道还远远没有被数据比特填满；需要接收方发送ACK，这样增加了网络的负担也影响了传输速度，通过重复发送数据包来纠正错误的方法也严重的影响了它的传输速度。\n\n## 停止等待 SW\n- 工作原理：发送方每次发送一个分组后，不马上删除，停止，等待接收方的确认分组或否认分组。若没收到确认，则重传；若收到，则发送后续报文。\n- 利用超时计时器（重传时间：略大于平均往返时间），解决发送方处于等待问题。\n- 对于数据链路层，往返时间较固定，不会延迟，因此不用给确认分组添加序号。\n- 发送窗口和接收窗口大小均为1，发送方每发送一帧之后就必须停下来等待接收方的确认返回，仅当接收方确认正确接收后再继续发送下一帧。该方法所需要的缓冲存储空间最小，缺点是信道效率很低。\n\n## 回退N帧 GBN\n- 采用**累计确认**：接收方不一定要逐个发送确认，可以接收几个后对最后一个按序到达的数据发送确认。即使确认分组丢失，也可能不必重传，因为可能传了后续报文的确认号，则表示前面都已接收。\n- 发送方不用等待接收方应答，持续的发送多个帧，若有某一帧接收失败，则会回退N帧。假如发送了10-20，其中15没有收到，那么发送方要回退到15，重传15-20。\n- 发送窗口的尺寸不能超过其上限，否则会造成数据混乱。\n- 接收窗口尺寸Wr只能等于1，因此**只能按序接收**正确到达的数据分组。\n- 复杂度低，但是不必要的帧会再重发。若同通信链路质量不好时，信道利用率未必高于停止等待协议。\n\n## 选择重传 ARQ\n- 发送方不用等待接收方的应答，持续的发送多个帧，假如发现已发送的帧中有错误发生，那么发送方将只重新发送那个发生错误的帧。\n- 使发送方仅重传差错的分组，因此**接收方不能采用累积确认，只能使用逐一确认。**\n- 相对于GBN复杂度高，但是不需要发送没必要的帧，所以效率高。\n\n<hr>\n\n学习自[湖南科技大学-计算机网络微课堂：https://www.bilibili.com/video/BV1c4411d7jb](https://www.bilibili.com/video/BV1c4411d7jb)\n参考文章：[https://baike.baidu.com/item/ARQ](https://baike.baidu.com/item/ARQ)', 4, 124, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4015, 1005, 19, '2020-08-10 00:00:00', 'Android开发：从数据库中获取数据动态设置下拉列表', '快速入门', '\n**实现**\n\n1、在res目录下创建文件``menu/catagory.xml``文件（可以创建别的名字）\n\n注意：这里如果添加了``<item>``，那么可能会出现后期多了一个item\n\n```xml\n<menu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\">\n</menu>\n```\n\n2、初始化菜单项\n\n```java\n /**\n * 初始化菜单项\n */\n private void initMenu(){\n pm=new PopupMenu(GoodsAddActivity.this,catagory);\n Menu menu=pm.getMenu();\n pm.getMenuInflater().inflate(R.menu.catagory,menu);\n // 数据库查询所有分类的方法\n List<Catagory> catagories=findAll();\n // 将分类全部添加到数据项中\n for(Catagory c:catagories){\n System.out.println(c);\n // 1-组别、2-数据项id、3-数据项顺序、4-数据项内容\n menu.add(0,c.getId(),0,c.getName());\n }\n // 添加单击数据项事件\n pm.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {\n @Override\n public boolean onMenuItemClick(MenuItem item) {\n // 选择某一个分类后将控件的值改为数据项的内容（catagory是EditText控件）\n catagory.setText(item.getTitle());\n return true;\n }\n });\n }\n```\n其中findAll()方法是我调用数据库查询分类的方法\n```java\n /**\n * 查询所有分类 t\n */\n private void findAll(){\n CatagoryDbHelper catagory_db=new CatagoryDbHelper(getApplicationContext(),CatagoryDbHelper.DB_NAME,null, Version.CATAGORY);\n catagories = catagory_db.getAll();\n }\n```\n\n3、获取要添加菜单项的控件，添加单击事件\n\n```java\nEditText catagory=(EditText)findViewById(R.id.add_catagory);\n// 单击catagory控件时后显示下拉菜单项\ncatagory.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n pm.show();\n }\n});\n```\n<br>\n\n**单击效果**\n\n**选择菜单项后的效果**\n\n', 0, 478, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4016, 1005, 33, '2020-08-20 00:00:00', 'Linux服务器：下载并配置redis', '...', '### 1、下载redis\n链接：[https://redis.io/download ](https://redis.io/download)\n\n### 2、上传到服务器\n使用工具将redis-6.0.10.tar.gz上传到服务器\n### 3、安装\n（1）解压：使用命令```# tar -zxvf redis-6.0.10.tar.gz```进行解压\n（2）编译：进入安装的redis目录```# cd /usr/java/redis-6.0.10/```（这是我自己的安装目录）\n使用```# make```命令进行编译。若编译成功则进入下一步安装。\n\n若遇到下图这种情况，则编译失败。需要升级gcc。\n依次执行以下命令：\n```# yum -y install centos-release-scl```\n```# yum -y install devtoolset-9-gcc devtoolset-9-gcc-c++ devtoolset-9-binutils```\n```# scl enable devtoolset-9 bash```\n```# echo \"source /opt/rh/devtoolset-9/enable\" >>/etc/profile```\n然后重新到redis目录下进行编译（```# make```）\n\n（3）安装：进入到redis下的src目录\n进入src：```# cd /usr/java/redis-6.0.10/src```\n安装：```# make install```\n\n### 4、为了后期操作，将常用文件移动到文件夹\n（1）在redis目录下创建文件夹：bin、etc\n使用命令：```# mkdir bin```和```# mkdir etc```\n\n（2）将文件移动到这两个目录下（记得修改成自己的路径）\n```# mv redis.conf /usr/java/redis-6.0.10/etc/```\n```# mv mkreleasehdr.sh redis-benchmark redis-check-aof redis-check-rdb redis-cli redis-server /usr/java/redis-6.0.10/bin/ ```\n\n### 5、测试redis是否安装成功\n启动：进入redis的bin目录下执行命令```# ./redis-server```\n\n退出：按下Ctrl+c\n### 6、配置redis\n进入redis的etc目录下，可以看到redis.conf，进入该文件```# vim redis.conf```\n（1）若想连接其他服务器，可以在此处指定IP\n\n（2）找到deamonize设置为yes，表示允许后台运行。\n注意：注释最好不要写在同一行，原本我写在同一行，启动redis的时候报错了。\n\n（3）配置完成后，启动服务配置文件\n启动redis：```# redis-server /usr/local/redis/etc/redis.conf```\n连接客户端：```# ./redis-cli```\n退出客户端连接：```exit```\n查看redis进程（默认端口号6379）：```# netstat -tunpl|grep 6379```\n\n\n', 0, 44, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4017, 1011, 14, '2020-08-17 00:00:00', 'dubbo学习之源码创建属于自己的dubbo-demo', '绪论', '上篇博文<一路踩坑构建Dubbo源码>谈论了如何本地构建dubbo源码，最近溪源也在努力的学习dubbo相关知识和机制，学习过程也可以称之苦不堪言吧。dubbo官网是入门学习资源重要之一；故溪源先分享中文官网：dubbo中文手册。\r\n上网文章中也清晰地带着大家成功运行dubbo-demo;对于像溪源这样的新手接触dubbo，学习源码估计都很难找到入手的方法，溪源也是走了不少冤枉路，所以特此写了一篇入手dubbo源码的文章，希望能够帮助伙伴们降低时间浪费，少走弯路。溪源这篇带着大家在dubbo-demo中创建自己的跟踪源码的单测用例。对于官网给与的demo用例，大家可以大胆的修改，溪源就是把demo改的面目全非。', 0, 145, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4018, 1001, 1, '2020-08-12 00:00:00', 'spring太强了！两万多字干货 超详细讲解', NULL, '1.1 spring简介\r\n\r\nspring：春天，给软件行业带来春天！\r\nspring理念：使现有的技术更加易用，是一个粘合剂，整合了现有的技术框架\r\nspring是一个轻量级的开源免费框架\r\n核心：控制反转（IOC），面向切面编程（AOP）\r\n支持对事务的支持，支持整合其他框架\r\n\r\n\r\nSpring是一个轻量级的控制反转（IOC）和面向切面编程（AOP）的框架。\r\n\r\nspring官方文档： https://spring.io/projects/spring-framework#learn\r\n\r\nmaven官网：https://mvnrepository.com/', 0, 1120, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4019, 1001, 1, '2020-08-14 00:00:00', '【JVM系列4】new Object()到底占用几个字节，看完这篇就彻底明白了', NULL, '前言\r\n上一篇我们分析了Java虚拟机方法执行流程及方法重载和方法重写原理，并分析了方法的调用过程及原理，Java虚拟机栈是线程私有的，没有数据安全问题，而堆相比较于Java虚拟机栈而言更为复杂，因为堆是所有线程共享的一块内存空间，会出现线程安全性问题，而垃圾回收也主要是回收堆内空间，所以堆内的布局我们非常有必要深入去了解一下。现在就让我们继续来分析一下堆内布局以及Java对象在内存中的布局把。', 333, 1245, NULL, 0, 1, 0, 1, NULL);
INSERT INTO `passage` VALUES (4020, 1001, 2, '2020-08-19 00:00:00', 'Spring----06----注解AOP开发&&Spring整合JDBC（JDBCTemplate对象）', NULL, '目录\r\nSpring----06----注解AOP开发&&Spring整合JDBC（JDBCTemplate对象）\r\n1. 注解AOP开发\r\n1.1 使用注解注册bean\r\n1.2 配置切面\r\n1.3 使用全注解代替xml\r\n2. Spring整合JDBC（JDBCTemplate对象）\r\n2.1 导入spring-jdbc依赖\r\n2.2 书写实体类 | DAO\r\n2.3 准备Service\r\n2.4 配置xml\r\n2.5 测试\r\n2.6 使用JdbcDaoSupport类\r\n2.7 读取外部properties文件', 0, 1482, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4021, 1001, 1, '2020-08-05 00:00:00', '深入了解java中String类型中“==”与“equal”的区别.', '深入了解java中String类型中“==”与“equal”的区别.', '一、前言\r\n1.1、首先很多人都知道，String中用“==”比较的是地址，用equals比较的是内容，很多人对此用的是记忆法，通过记忆来加强此的引用，但是其真正的原理其实并不难，当我们真正明白其为什么的时候，用起来也会更加灵活，更加有底气（形容得不太好，朋友别见怪）；\r\n\r\n二相关知识的准备\r\n类型常量池\r\n运行时常量池\r\n字符串常量池\r\n我们今天讨论的主题是当然是字符串常量池：\r\n为什么在这要把另外两个常量池拿出说一下呢，首先小生我在网上或者cnds上看到很多人在争论字符串常量池是存在与方法区还是堆里面，因此我在这里面非常负责任的告诉各位读者：\r\n1、类型常量池，存放在方法区里面，每个class文件都有一个\r\n2、运行时常量池、存放在方法区里面，所有class共用\r\n3、字符串常量池：存放在堆区里面\r\n而且字符串常量池有一个特点：存放的常量唯一：', 3, 795, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4022, 1001, 32, '2020-08-18 00:00:00', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（一）', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（一）', '写在前面\r\n前端需要了解弄懂的知识可以说包罗万象。而想要对某一知识点深挖细究又是一番功夫。最近忙着面试的事，也看了不少面试指导下面记录我认为值得看的前端知识。\r\n\r\nHTML和CSS部分\r\n浏览器的内核：浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。\r\n1、IE浏览器内核：Trident内核，也是俗称的IE内核；\r\n2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；\r\n3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；\r\n4、Safari浏览器内核：Webkit内核；\r\n5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；\r\n6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；\r\n7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；\r\n8、百度浏览器、世界之窗内核：IE内核；\r\n9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；', 0, 452, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4023, 1001, 32, '2020-08-19 00:00:00', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（二）', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（二）', 'JavaScript\r\nundefined 与 undeclared 的区别？\r\n已在作用域中声明但还没有赋值的变量，是 undefined 的。相反，还没有在作用域中声明过的变量，是 undeclared 的。\r\n\r\n对于 undeclared 变量的引用，浏览器会报引用错误，如 ReferenceError: b is not defined 。但是我们可以使用 typeof 的安全防范机制来避免报错，因为对于 undeclared（或者 not defined ）变量，typeof 会返回 “undefined”。\r\n\r\n{} 和 [] 的 valueOf 和 toString 的结果是什么？\r\n{} 的 valueOf 结果为 {} ，toString 的结果为 “[object Object]”\r\n[] 的 valueOf 结果为 [] ，toString 的结果为 “”\r\n\r\n说到这个我就应该扩展一下原型链：\r\n当我们访问哪一个对象和属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象也会有自己的原型，于是一直找下去，源头就是：Object.prototype.\r\n\r\njs获取原型的方法：p.proto,Object.getPrototypeOf§\r\n谈谈对this、call、apply和bind的理解\r\n在浏览器里，在全局范围内this 指向window对象；\r\n\r\n在函数中，this永远指向最后调用他的那个对象；\r\n\r\n构造函数中，this指向new出来的那个新的对象；\r\n\r\ncall、apply、bind中的this被强绑定在指定的那个对象上；\r\n\r\n箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；\r\n\r\napply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。\r\n怎么使用大家都懂但怎么理解需要注意。', 0, 482, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4024, 1001, 32, '2020-08-20 00:00:00', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（三）', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（三）', '关于闭包\r\n关于闭包也是老生常谈，在《你不知道的JS》中是这样介绍的：==当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前作用域之外执行。==我觉得有点功底的小伙伴恍然大悟。\r\n用通俗的话讲：闭包是指有权访问另一个函数作用域内变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。\r\n关于事件（三种事件模型）\r\n事件 是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。\r\n1.DOM0级模型：这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js属性来指定监听函数。这种方式是所有浏览器都兼容的。\r\n2.IE 事件模型： 在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。\r\n3.DOM2事件模型: 在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。', 0, 324, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4025, 1001, 32, '2020-08-21 00:00:00', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（四）', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（四）', 'js的模块规范\r\nCommonJS：modlue.exports.x抛出（定义模块的输出接口），require来引用。这种模块加载方案是服务器端（nodejs）的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。\r\nAMD:这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。**require.js **实现了 AMD 规范。\r\nCMD:这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。\r\nES6提出的:参考上上一篇博客', 22, 4752, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4026, 1001, 32, '2020-08-22 00:00:00', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（五）', '前端小知识点汇总，常忘记的知识点汇总（面试，笔试）学习笔记（五）', '优雅的处理Promise回调（async，await）\r\nasync/await是一种建立在Promise之上的编写异步或非阻塞代码的新方法，被普遍认为是 JS异步操作的最终且最优雅的解决方案。相对于 Promise 和回调，它的可读性和简洁度都更高。毕竟一直then()也很烦。\r\n\r\nasync 是异步的意思，而 await 是 async wait的简写，即异步等待。\r\n\r\n所以从语义上就很好理解 async 用于声明一个 function 是异步的，而await 用于等待一个异步方法执行完成。\r\n\r\n一个函数如果加上 async ，那么该函数就会返回一个 Promise', 2, 448, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4027, 1007, 21, '2020-08-05 00:00:00', 'Windows Oracle database link mysql', NULL, '背景：\r\n由于业务需要，我也从来没有搭建过，odbc和透明网关也是公司之前就搭建好了的。 但是（！！！）透明网关注意检查插件，配置Mysql 就要 gateway for odbc ，连接SQLServer 就用 gateway for msql 反正我是被坑惨了，最后花了3天时间才弄好。\r\n\r\n本地环境：\r\n1、windows服务器\r\n2、oracle 11数据库\r\n3、gateway 11：透明网关\r\n4、odbc', 0, 235, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4028, 1008, 13, '2020-08-03 00:00:00', '如何用sql处理拆分字段内带逗号拼接及用逗号合并同一字段内的值', NULL, '项目场景：同一字段内存在用逗号拼接的如何拆分\r\n提示：同一字段内存在用逗号拼接的的如何拆分\r\n例如：项目场景：把id：1；names：aaa,bbb,ccc这种拆分成 id：1；names:aaa; id：2；names：bbb；id：3；names：ccc；\r\n\r\n', 0, 442, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4029, 1009, 15, '2020-08-13 00:00:00', '【经典算法大全】收集51种经典算法 初学者必备', NULL, '《经典算法大全》是一款IOS平台的应用。里面收录了51种常用算法，都是一些基础问题。博主觊觎了好久，可悲哀的是博主没有苹果，所以从网上下了老奔的整理版并且每个都手敲了一遍。\r\n\r\n虽然网上也有博客贴了出来，但是自己写写感觉总是好的。现在分享个大家。\r\n\r\n代码和运行结果难免有出错的地方，请大家多多包涵。\r\n\r\n \r\n\r\n1.河内之塔（汉诺塔）\r\n\r\n2.费式数列\r\n\r\n3.巴斯卡三角形\r\n\r\n4.三色棋\r\n\r\n5.老鼠走迷宫（1）\r\n\r\n6.老鼠走迷宫（2）\r\n\r\n7.骑士走棋盘\r\n\r\n8.八皇后\r\n\r\n9.八枚银币\r\n\r\n10.生命游戏\r\n\r\n11.字串核对\r\n\r\n12.双色河内塔，三色河内塔\r\n\r\n13.背包问题 \r\n\r\n14.蒙地卡罗法求PI\r\n\r\n15.Eratosthenes筛选求质数\r\n\r\n16.超长整数运算（大数运算） 同时建议参考这篇文章：大数的四则运算-海子的博客园\r\n\r\n17.长PI\r\n\r\n18.最大公因数，最小公倍数，因式分解\r\n\r\n19.完美数\r\n\r\n20.阿姆斯壮数\r\n\r\n21.最大访客数\r\n\r\n22.中序转后序式（前序式 相关文章：中缀表达式值问题\r\n\r\n23.后序式运算 \r\n\r\n24.洗扑克牌（乱数排列）\r\n\r\n25.Craps赌博游戏\r\n\r\n26.约瑟夫问题\r\n\r\n27.排列组合 相关文章：母函数与排列组合\r\n\r\n28.格雷码（Gray Code）\r\n\r\n29.产生可能的集合 相关文章：集合划分问题\r\n\r\n30.m元素集合的n个元素子集\r\n\r\n31.数字拆解\r\n\r\n32.得分排行\r\n\r\n33.选择，插入，冒泡排序\r\n\r\n34.shell 排序法-改良的插入排序\r\n\r\n35.shaker排序法-改良的冒泡排序\r\n\r\n36.改良的选择排序\r\n\r\n37.快速排序法一\r\n\r\n38.快速排序法二\r\n\r\n39.快速排序法三\r\n\r\n40.合并排序法\r\n\r\n41.基数排序法\r\n\r\n42.循环搜寻法（使用卫兵）\r\n\r\n43.二分搜寻法（二分查找法，折半查找法） 相关文章：二分查找\r\n\r\n44.插补搜寻法\r\n\r\n45.费式搜寻法\r\n\r\n46.稀疏矩阵\r\n\r\n47.多维矩阵转一维矩阵\r\n\r\n48.上三角，下三角，对称矩阵\r\n\r\n49.奇数魔方阵\r\n\r\n50.4N魔方阵\r\n\r\n51.2(2N+1)魔方阵\r\n\r\n ', 0, 124, NULL, 0, 1, 0, 1, NULL);
INSERT INTO `passage` VALUES (4030, 1009, 15, '2020-08-03 00:00:00', '程序员必学的十个算法', NULL, '算法一：快速排序算法\r\n\r\n快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要Ο(n log n)次比较。在最坏状况下则需要Ο(n2)次比较，但这种状况并不常见。事实上，快速排序通常明显比其他Ο(n log n) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。\r\n快速排序使用分治法（Divide and conquer）策略来把一个串行（list）分为两个子串行（sub-lists）。\r\n\r\n算法步骤：\r\n1 从数列中挑出一个元素，称为 “基准”（pivot），\r\n2 重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作。\r\n3 递归地（recursive）把小于基准值元素的子数列和大于基准值元素的子数列排序。\r\n递归的最底部情形，是数列的大小是零或一，也就是永远都已经被排序好了。虽然一直递归下去，但是这个算法总会退出，因为在每次的迭代（iteration）中，它至少会把一个元素摆到它最后的位置去。', 0, 452, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4031, 1009, 15, '2020-08-11 00:00:00', '算法的时间复杂度和空间复杂度-总结', NULL, ' 通常，对于一个给定的算法，我们要做 两项分析。第一是从数学上证明算法的正确性，这一步主要用到形式化证明的方法及相关推理模式，如循环不变式、数学归纳法等。而在证明算法是正确的基础上，第二部就是分析算法的时间复杂度。算法的时间复杂度反映了程序执行时间随输入规模增长而增长的量级，在很大程度上能很好反映出算法的优劣与否。因此，作为程序员，掌握基本的算法时间复杂度分析方法是很有必要的。\r\n 算法执行时间需通过依据该算法编制的程序在计算机上运行时所消耗的时间来度量。而度量一个程序的执行时间通常有两种方法。\r\n\r\n一、事后统计的方法\r\n\r\n 这种方法可行，但不是一个好的方法。该方法有两个缺陷：一是要想对设计的算法的运行性能进行评测，必须先依据算法编制相应的程序并实际运行；二是所得时间的统计量依赖于计算机的硬件、软件等环境因素，有时容易掩盖算法本身的优势。\r\n\r\n二、事前分析估算的方法\r\n\r\n 因事后统计方法更多的依赖于计算机的硬件、软件等环境因素，有时容易掩盖算法本身的优劣。因此人们常常采用事前分析估算的方法。\r\n\r\n在编写程序前，依据统计方法对算法进行估算。一个用高级语言编写的程序在计算机上运行时所消耗的时间取决于下列因素：\r\n\r\n (1). 算法采用的策略、方法；(2). 编译产生的代码质量；(3). 问题的输入规模；(4). 机器执行指令的速度。\r\n\r\n 一个算法是由控制结构（顺序、分支和循环3种）和原操作（指固有数据类型的操作）构成的，则算法时间取决于两者的综合效果。为了便于比较同一个问题的不同算法，通常的做法是，从算法中选取一种对于所研究的问题（或算法类型）来说是基本操作的原操作，以该基本操作的重复执行的次数作为算法的时间量度。\r\n\r\n1、时间复杂度\r\n（1）时间频度 一个算法执行所耗费的时间，从理论上是不能算出来的，必须上机运行测试才能知道。但我们不可能也没有必要对每个算法都上机测试，只需知道哪个算法花费的时间多，哪个算法花费的时间少就可以了。并且一个算法花费的时间与算法中语句的执行次数成正比例，哪个算法中语句执行次数多，它花费时间就多。一个算法中的语句执行次数称为语句频度或时间频度。记为T(n)。\r\n（2）时间复杂度 在刚才提到的时间频度中，n称为问题的规模，当n不断变化时，时间频度T(n)也会不断变化。但有时我们想知道它变化时呈现什么规律。为此，我们引入时间复杂度概念。 一般情况下，算法中基本操作重复执行的次数是问题规模n的某个函数，用T(n)表示，若有某个辅助函数f(n),使得当n趋近于无穷大时，T(n)/f(n)的极限值为不等于零的常数，则称f(n)是T(n)的同数量级函数。记作T(n)=Ｏ(f(n)),称Ｏ(f(n)) 为算法的渐进时间复杂度，简称时间复杂度。\r\n\r\n 另外，上面公式中用到的 Landau符号其实是由德国数论学家保罗·巴赫曼（Paul Bachmann）在其1892年的著作《解析数论》首先引入，由另一位德国数论学家艾德蒙·朗道（Edmund Landau）推广。Landau符号的作用在于用简单的函数来描述复杂函数行为，给出一个上或下（确）界。在计算算法复杂度时一般只用到大O符号，Landau符号体系中的小o符号、Θ符号等等比较不常用。这里的O，最初是用大写希腊字母，但现在都用大写英语字母O；小o符号也是用小写英语字母o，Θ符号则维持大写希腊字母Θ。\r\n T (n) = Ο(f (n)) 表示存在一个常数C，使得在当n趋于正无穷时总有 T (n) ≤ C * f(n)。简单来说，就是T(n)在n趋于正无穷时最大也就跟f(n)差不多大。也就是说当n趋于正无穷时T (n)的上界是C * f(n)。其虽然对f(n)没有规定，但是一般都是取尽可能简单的函数。例如，O(2n2+n +1) = O (3n2+n+3) = O (7n2 + n) = O ( n2 ) ，一般都只用O(n2)表示就可以了。注意到大O符号里隐藏着一个常数C，所以f(n)里一般不加系数。如果把T(n)当做一棵树，那么O(f(n))所表达的就是树干，只关心其中的主干，其他的细枝末节全都抛弃不管。\r\n 在各种不同算法中，若算法中语句执行次数为一个常数，则时间复杂度为O(1),另外，在时间频度不相同时，时间复杂度有可能相同，如T(n)=n2+3n+4与T(n)=4n2+2n+1它们的频度不同，但时间复杂度相同，都为O(n2)。 按数量级递增排列，常见的时间复杂度有：常数阶O(1),对数阶O(log2n),线性阶O(n), 线性对数阶O(nlog2n),平方阶O(n2)，立方阶O(n3),...， k次方阶O(nk),指数阶O(2n)。随着问题规模n的不断增大，上述时间复杂度不断增大，算法的执行效率越低。', 0, 22, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4032, 1009, 15, '2020-08-19 00:00:00', '简单易懂——Dijkstra算法讲解', NULL, '前言：\r\n\r\n\r\n相对于暴力简单的Floyd算法，Dijkstra算法更为有用且复杂度较为合理--O(N^2)。今天就为大家介绍一下这个算法。Dijkstra算法使用了广度优先搜索解决赋权有向图或者无向图的单源最短路径问题，算法最终得到一个最短路径树。该算法常用于路由算法或者作为其他图算法的一个子模块。\r\n \r\n\r\n算法思路：\r\n \r\n\r\nDijkstra算法采用的是一种贪心的策略，声明一个数组dis来保存源点到各个顶点的最短距离和一个保存已经找到了最短路径的顶点的集合：T，初始时，原点 s 的路径权重被赋为 0 （dis[s] = 0）。若对于顶点 s 存在能直接到达的边（s,m），则把dis[m]设为w（s, m）,同时把所有其他（s不能直接到达的）顶点的路径长度设为无穷大。初始时，集合T只有顶点s\r\n\r\n\r\n\r\n然后，从dis数组选择最小值，则该值就是源点s到该值对应的顶点的最短路径，并且把该点加入到T中，此时完成一个顶点， 然后，我们需要看看新加入的顶点是否可以到达其他顶点并且看看通过该顶点到达其他点的路径长度是否比源点直接到达短，如果是，那么就替换这些顶点在dis中的值。 然后，又从dis中找出最小值，重复上述动作，直到T中包含了图的所有顶点。\r\n\r\nDijkstra算法\r\n原理：这里不进行严格证明，Dijkstra的大致思想就是，根据初始点，挨个的把离初始点最近的点一个一个找到并加入集合，集合中所有的点的d[i]都是该点到初始点最短路径长度，由于后加入的点是根据集合S中的点为基础拓展的，所以也能找到最短路径。\r\n\r\n伪代码：\r\n\r\n 清除所有点的标号;\r\n 设d[0]=0，其他d[i]=INF;//INF是一个很大的值，用来替代正无穷\r\n 循环n次 { \r\n 在所有未标号结点中，选出d值最小的结点x;\r\n 给结点x标记;\r\n 对于从x出发的所有边(x,y)，更新d[y] = min{d[y], d[x]+w(x,y)} \r\n\r\n \r\n\r\n\r\n\r\n \r\n\r\n与Floyd-Warshall算法一样这里仍然使用二维数组e来存储顶点之间边的关系，初始值如下。\r\n\r\n\r\n\r\n \r\n\r\n我们还需要用一个一维数组dis来存储1号顶点到其余各个顶点的初始路程，如下。\r\n\r\n\r\n\r\n \r\n\r\n我们将此时dis数组中的值称为最短路的“估计值”。\r\n\r\nStep 1:\r\n\r\n 既然是求1号顶点到其余各个顶点的最短路程，那就先找一个离1号顶点最近的顶点。通过数组dis可知当前离1号顶点最近是2号顶点。当选择了2号顶点后，dis[2]的值就已经从“估计值”变为了“确定值”，即1号顶点到2号顶点的最短路程就是当前dis[2]值。为什么呢？你想啊，目前离1号顶点最近的是2号顶点，并且这个图所有的边都是正数，那么肯定不可能通过第三个顶点中转，使得1号顶点到2号顶点的路程进一步缩短了。因为1号顶点到其它顶点的路程肯定没有1号到2号顶点短\r\n\r\nStep 2:\r\n\r\n 既然选了2号顶点，接下来再来看2号顶点有哪些出边呢。有2->3和2->4这两条边。先讨论通过2->3这条边能否让1号顶点到3号顶点的路程变短。也就是说现在来比较dis[3]和dis[2]+e[2][3]的大小。其中dis[3]表示1号顶点到3号顶点的路程。dis[2]+e[2][3]中dis[2]表示1号顶点到2号顶点的路程，e[2][3]表示2->3这条边。所以dis[2]+e[2][3]就表示从1号顶点先到2号顶点，再通过2->3这条边，到达3号顶点的路程。\r\n\r\nStep 3:\r\n\r\n 我们发现dis[3]=12，dis[2]+e[2][3]=1+9=10，dis[3]>dis[2]+e[2][3]，因此dis[3]要更新为10。这个过程有个专业术语叫做“松弛”。即1号顶点到3号顶点的路程即dis[3]，通过2->3这条边松弛成功。这便是Dijkstra算法的主要思想：通过“边”来松弛1号顶点到其余各个顶点的路程。\r\n\r\n \r\n\r\n 同理通过2->4（e[2][4]），可以将dis[4]的值从∞松弛为4（dis[4]初始为∞，dis[2]+e[2][4]=1+3=4，dis[4]>dis[2]+e[2][4]，因此dis[4]要更新为4）。\r\n\r\nStep 4:\r\n\r\n 刚才我们对2号顶点所有的出边进行了松弛。松弛完毕之后dis数组为：\r\n\r\n\r\n\r\n \r\n\r\n 接下来，继续在剩下的3、4、5和6号顶点中，选出离1号顶点最近的顶点。通过上面更新过dis数组，当前离1号顶点最近是4号顶点。此时，dis[4]的值已经从“估计值”变为了“确定值”。下面继续对4号顶点的所有出边（4->3，4->5和4->6）用刚才的方法进行松弛。松弛完毕之后dis数组为：\r\n\r\n\r\n\r\n \r\n\r\n 继续在剩下的3、5和6号顶点中，选出离1号顶点最近的顶点，这次选择3号顶点。此时，dis[3]的值已经从“估计值”变为了“确定值”。对3号顶点的所有出边（3->5）进行松弛。\r\n\r\n 继续在剩下的5和6号顶点中，选出离1号顶点最近的顶点，这次选择5号顶点。此时，dis[5]的值已经从“估计值”变为了“确定值”。对5号顶点的所有出边（5->4）进行松弛。\r\n\r\n \r\n\r\n 最后对6号顶点所有点出边进行松弛。因为这个例子中6号顶点没有出边，因此不用处理。到此，dis数组中所有的值都已经从“估计值”变为了“确定值”。\r\n\r\n 最终dis数组如下，这便是1号顶点到其余各个顶点的最短路径。\r\n\r\n\r\n\r\n \r\n\r\n 现在来总结一下刚才的算法。算法的基本思想是：每次找到离源点（上面例子的源点就是1号顶点）最近的一个顶点，然后以该顶点为中心进行扩展，最终得到源点到其余所有点的最短路径。基本步骤如下：\r\n\r\n \r\n\r\n将所有的顶点分为两部分：已知最短路程的顶点集合P和未知最短路径的顶点集合Q。最开始，已知最短路径的顶点集合P中只有源点一个顶点。我们这里用一个book[ i ]数组来记录哪些点在集合P中。例如对于某个顶点i，如果book[ i ]为1则表示这个顶点在集合P中，如果book[ i ]为0则表示这个顶点在集合Q中。\r\n\r\n设置源点s到自己的最短路径为0即dis=0。若存在源点有能直接到达的顶点i，则把dis[ i ]设为e[s][ i ]。同时把所有其它（源点不能直接到达的）顶点的最短路径为设为∞。\r\n\r\n在集合Q的所有顶点中选择一个离源点s最近的顶点u（即dis[u]最小）加入到集合P。并考察所有以点u为起点的边，对每一条边进行松弛操作。例如存在一条从u到v的边，那么可以通过将边u->v添加到尾部来拓展一条从s到v的路径，这条路径的长度是dis[u]+e[u][v]。如果这个值比目前已知的dis[v]的值要小，我们可以用新值来替代当前dis[v]中的值。\r\n\r\n重复第3步，如果集合Q为空，算法结束。最终dis数组中的值就是源点到所有顶点的最短路径。', 0, 1154, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4033, 1001, 1, '2020-07-31 00:00:00', '什么是数据结构？什么是算法', NULL, '数据：是描述客观事物的符号，是计算机中可以操作的对象，是能被计算机识别，并输入给计算机处理的符号集合。\r\n\r\n其实就是图书馆中所有的书。\r\n\r\n数据元素：是组成数据的、有一定意义的基本单位，在计算机中通常作为整体处理。也被称为记录。\r\n\r\n就是书。\r\n\r\n数据项：一个数据元素可以由若干个数据项组成。\r\n\r\n其实就是书名、作者、出版社啥的….', 0, 114, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4034, 1003, 11, '2020-08-01 00:00:00', '为什么要学数据结构', NULL, '数据结构是所有计算机专业的同学必学的一门课程\r\n数据结构研究的是数据如何再计算机中进行组织和存储，使得我们可以高效的获取数据或者修改数据\r\n计算机专业的学生都开设过数据结构课程，它是计算机学科知识结构的核心和技术体系的基石。数据结构作为计算机专业的专业基础课程，是计算机 考研 的 必考 科目之一，如果有打算报考计算机专业的研究生，这门数据结构你是必须要学好它的，同时，工作以后的同学，会有想去报考计算机 软考 、计算机 等级考试 的，数据结构也是必考的内容之一，科学技术在飞速发展，但是作为基石的科学技术没有动摇，由于近年来算法工程师的高薪火爆，使得数据结构的重视程序空前高涨，总而言之，既然我们已经与计算机接轨就必须 掌握 好它。', 0, 4577, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4035, 1008, 13, '2020-08-02 00:00:00', '报错：Uncaught ReferenceError: Vue is not defined', NULL, '页面报错：在创建vue的这一行\n\n原因：还没有引入vue.js就使用vue（代码的位置不对），应该将使用vue的代码块放在引入vue.js之后。\n\n', 0, 225, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4036, 1003, 11, '2020-08-11 00:00:00', '数据结构基础概念篇', NULL, '数据：所有能被输入到计算机中，且能被计算机处理的符号的集合。是计算机操作的对象的总称。\r\n数据元素：数据（集合）中的一个“个体”，数据及结构中讨论的基本单位\r\n数据项：数据的不可分割的最小单位。一个数据元素可由若干个数据项组成。\r\n数据类型：在一种程序设计语言中，变量所具有的数据种类。整型、浮点型、字符型等等\r\n\r\n逻辑结构：数据之间的相互关系。\r\n\r\n集合 结构中的数据元素除了同属于一种类型外，别无其它关系。\r\n线性结构 数据元素之间一对一的关系\r\n树形结构 数据元素之间一对多的关系\r\n图状结构或网状结构 结构中的数据元素之间存在多对多的关系\r\n物理结构/存储结构：数据在计算机中的表示。物理结构是描述数据具体在内存中的存储（如：顺序结构、链式结构、索引结构、哈希结构）等\r\n在数据结构中,从逻辑上可以将其分为线性结构和非线性结构\r\n数据结构的基本操作的设置的最重要的准则是,实现应用程序与存储结构的独立。实现应用程序是“逻辑结构”，存储的是“物理结构”。逻辑结构主要是对该结构操作的设定，物理结构是描述数据具体在内存中的存储（如：顺序结构、链式结构、索引结构、希哈结构）等。\r\n顺序存储结构中，线性表的逻辑顺序和物理顺序总是一致的。但在链式存储结构中，线性表的逻辑顺序和物理顺序一般是不同的。\r\n\r\n算法五个特性： 有穷性、确定性、可行性、输入、输出\r\n\r\n算法设计要求：正确性、可读性、健壮性、高效率与低存储量需求。(好的算法)\r\n算法的描述有伪程序、流程图、N-S结构图等。E-R图是实体联系模型，不是程序的描述方式。\r\n设计算法在执行时间时需要考虑：算法选用的规模、问题的规模\r\n时间复杂度：算法的执行时间与原操作执行次数之和成正比。时间复杂度有小到大：O(1)、O(logn)、O(n)、O(nlogn)、O(n2)、O(n3)。幂次时间复杂度有小到大O(2n)、O(n!)、O(nn)\r\n空间复杂度：若输入数据所占空间只取决于问题本身，和算法无关，则只需要分析除输入和程序之外的辅助变量所占额外空间。', 21, 4524, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4042, 1001, 30, '2021-05-02 09:41:15', '适配器模式', '将一个类的接口转换成用户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-tomorrow-night-eighties\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p><strong>动机</strong><br> 通常情况下，客户端可以通过目标类的接口访问到它所提供的服务。有时现有的类可以满足客户类的功能需要，但是它所提供的接口不一定是客户类所期望的，这可能是因为现有类中方法名与目标类中定义的方法名不一致等原因所导致的。这时候就需要适配器，适配器的出现可以保证在不修改原有目标类和客户端代码的基础上确保能够重用现有的类。</p> \r\n<p><strong>定义</strong><br> 讲一个类的接口转换成用户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式既可以作为类结构型模式，也可以作为对象结构型模式。<br> （1）类适配器模式<br> <img src=\"https://img-blog.csdnimg.cn/20210424090225436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> （2）对象适配器模式<br> <img src=\"https://img-blog.csdnimg.cn/2021042409042230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"></p> \r\n<p><strong>举例</strong><br> 有一个接口，定义了排序方法和查找方法。已知现有快速排序算法，还有二分查找算法。因此我们需要设计一个适配器，将客户对排序、查找的请求自动转化为快速排序算法和二分查找算法。<br> <img src=\"https://img-blog.csdnimg.cn/20210424091422348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> 代码如下：<br> BinarySearch.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class BinarySearch {\r\n\r\n int binarySearch(int[] arr,int num){\r\n int i=0;\r\n int j=arr.length;\r\n while(i<=j){\r\n int mid=(i+j)/2;\r\n if (arr[mid]==num){\r\n return mid;\r\n }else if (arr[mid]>num){\r\n j=mid-1;\r\n }else{\r\n i=mid+1;\r\n }\r\n }\r\n return -1;\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>QuickSort.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">//快速排序\r\npublic class QuickSort{\r\n\r\n public void quickSort(int[] arr) {\r\n if (arr.length<=1)\r\n return;\r\n quick(arr,0,arr.length-1);\r\n }\r\n\r\n private void quick(int[] arr,int low,int high){\r\n if (low>high) return;\r\n int i=low;int j=high;\r\n int sign=arr[low];\r\n while(i!=j){\r\n while(i<j&&arr[j]>=sign){\r\n j--;\r\n }\r\n if (i<j){\r\n arr[i]=arr[j];\r\n i++;\r\n }\r\n while(i<j&&arr[i]<=sign){\r\n i++;\r\n }\r\n if(i<j){\r\n arr[j]=arr[i];\r\n j--;\r\n }\r\n }\r\n arr[i]=sign;\r\n quick(arr,low,i-1);\r\n quick(arr,i+1,high);\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>DataOperation.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class DataOperation {\r\n abstract void sort(int[] arr);\r\n abstract int search(int[] arr,int num);\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>DataAdapte</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class DataAdapte extends DataOperation {\r\n\r\n private BinarySearch binarySearch;\r\n private QuickSort quickSort;\r\n\r\n public DataAdapte(){\r\n binarySearch=new BinarySearch();\r\n quickSort=new QuickSort();\r\n }\r\n\r\n @Override\r\n public void sort(int[] arr) {\r\n quickSort.quickSort(arr);\r\n }\r\n\r\n @Override\r\n public int search(int[] arr,int num) {\r\n return binarySearch.binarySearch(arr,num);\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p><strong>总结</strong><br> 将目标类与适配者类解耦，可以通过引入一个适配器类来重用现有的适配者类，对客户端来说是透明的，且无需修改原来的代码，满足开闭原则。<br> 对于类适配器来说，因为他需要继承适配者类，而Java不支持多重继承，因此一次最多只能适配一个适配者类，而且目标抽象类只能为接口，不能为类（如果使用抽象类，只能通过继承，但一个类只能有一个直接父类）。但对于对象适配器来说，使用关联关系关联适配者类，因此一次可以适配多个不同的适配者类到同一个目标。与类适配器相比，如果对象适配器想要置换适配者类的一个或多个方法比较麻烦，因为适配类和适配者类是关联关系。<br> 注意：使用适配器模式的时候，客户端一定要针对抽象目标类进行编程，否则当修改适配者类或适配类的时候可能造成客户端不必要的代码改动。</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/116081627","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css\" rel=\"stylesheet\">\r\n </div>', 0, 0, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4043, 1001, 30, '2021-05-01 09:50:17', '抽象工厂模式', '提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。抽象工厂模式又称为Kit模式，属于对象创建型模式。', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-tomorrow-night-eighties\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p>抽象工厂模式是<a href=\"https://blog.csdn.net/lena7/article/details/115894232\">工厂方法模式</a>的泛化版，工厂方法模式是一种特殊的抽象工厂模式。<u>在工厂方法模式中，每一个具体工厂只能生产一种具体产品，而在抽象工厂方法中，每一个具体工厂可以生产多个具体产品。</u></p> \r\n<p><strong>定义</strong><br> 抽象工厂模式：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。抽象工厂模式又称为Kit模式，属于对象创建型模式。</p> \r\n<p><strong>组成</strong><br> 抽象工厂模式包含四个角色：抽象工厂、具体工厂、抽象产品、具体产品。</p> \r\n<p><strong>举例</strong><br> 接着上一次工厂方法举的例子：电视机有很多品牌，但是每一个电器品牌并不是只做电视机的，还会涉及其他电器：冰箱、空调等。如果我们需要创建同一个品牌的多个产品，就可以使用抽象工厂模式。对于抽象工厂模式中的一个抽象工厂，定义了所有电器品牌具有的共同接口，每一个具体工厂就像一个电器品牌，可以生产自己的电视机、冰箱、空调等电器。</p> \r\n<p>关系图如下：<br> <img src=\"https://img-blog.csdnimg.cn/20210422194225667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> 代码如下：<br> （1）TV类<br> TV.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class TV {\r\n abstract void play();\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li></ul></pre> \r\n<p>MediaTV.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class MediaTV extends TV {\r\n\r\n @Override\r\n void play() {\r\n System.out.println(\"美的电视\");\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li></ul></pre> \r\n<p>HaierTV.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class HaierTV extends TV {\r\n\r\n @Override\r\n void play() {\r\n System.out.println(\"海尔电视\");\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>（2）Frige类<br> Frige.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class Frige {\r\n abstract void play();\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>MediaFrige.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class MediaFrige extends Frige {\r\n @Override\r\n void play() {\r\n System.out.println(\"美的冰箱\");\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>（3）抽象工厂<br> Factory.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class Factory {\r\n\r\n abstract TV produceTV();\r\n\r\n abstract Frige produceFrige();\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>（4）具体工厂<br> MediaFactory.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class MediaFactory extends Factory {\r\n @Override\r\n TV produceTV() {\r\n return new MediaTV();\r\n }\r\n\r\n @Override\r\n Frige produceFrige() {\r\n return new MediaFrige();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>HaierFactory.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class HaierFactory extends Factory {\r\n @Override\r\n TV produceTV() {\r\n return new HaierTV();\r\n }\r\n\r\n @Override\r\n Frige produceFrige() {\r\n return new HaierFrige();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>（5）测试类：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Main {\r\n public static void main(String[] args) {\r\n\r\n Factory factory1=new HaierFactory();\r\n TV tv1 = factory1.produceTV();\r\n Frige frige1 = factory1.produceFrige();\r\n tv1.play();\r\n frige1.play();\r\n System.out.println(\"-----------------\");\r\n Factory factory2=new MediaFactory();\r\n TV tv2 = factory2.produceTV();\r\n Frige frige2 = factory2.produceFrige();\r\n tv2.play();\r\n frige2.play();\r\n\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>输出结果：<br> <img src=\"https://img-blog.csdnimg.cn/2021042219465358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> 如果我们要添加一个新的电器呢？那我们必须修改抽象工厂和具体工厂的代码，在抽象工厂中添加一个抽象方法，然后在具体工厂中各自实现，这就<strong>违背了开闭原则</strong>。当如果我们每次都增加新的产品族，即增加一个新的品牌，那么就无需对原有代码进行修改就可以实现扩展，就不违背开闭原则了。</p> \r\n<p><strong>对于所有类型的工厂模式来说，用户都无需关心对象的闯将过程，能将对象的创建和使用解耦。</strong> 如果我们每次都使用一个产品族，那么使用抽象工厂方法模式通过修改配置文件可以很好的改变产品族，也可以很方便的增加产品族。</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/116027650","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css\" rel=\"stylesheet\">\r\n </div>', 0, 0, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4044, 1001, 30, '2021-05-02 09:51:10', '原型模式', '为了简化创建过程，可以只需要创建一个对象，然后再通过克隆的方式复制出多个相同的对象，这就是原型模式的设计思想。', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-tomorrow-night-eighties\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <h3><a name=\"t0\"></a><a name=\"t0\"></a><a id=\"_0\"></a>定义</h3> \r\n<p>在软件系统中有时候需要多次创建某一类型的对象，为了简化创建过程，<u>可以只需要创建一个对象，然后再通过<strong>克隆</strong>的方式复制出多个相同的对象</u>，这就是原型模式的设计思想。</p> \r\n<p>因为是使用克隆获取多个对象，因此原型模式可以分为两种形式：浅克隆、深克隆。</p> \r\n<ul><li><strong>浅克隆</strong>：对于基本数据类型，会进行数据的复制。而对于引用类型，只会复制其地址。因此，如果A是B浅克隆的结果，那么当我们修改A或B其中一方基本数据类型的值，另一方不会受到影响；但是如果我们修改其中一方的引用类型数据，另一方也会跟着一起改变，因为变量存储的只是一个地址值，它们指向相同的数据空间。</li><li><strong>深克隆</strong>：对于基本数据类型，进行数据的复制。而对于引用类型，会重新开辟一个空间，再将引用类型的数据进行复制，引用类型变量指向的是一个新的地址。因此，如果A是B深克隆的结果，那么无论修改A或B其中一方的变量，另一方都不会受到影响。</li></ul> \r\n<h3><a name=\"t1\"></a><a name=\"t1\"></a><a id=\"_8\"></a>浅克隆</h3> \r\n<p>浅克隆的实现方式：</p> \r\n<ol><li>实现<code>Cloneable</code>接口</li><li>重写<code>clone()</code>方法</li><li>调用<code>super.clone()</code></li></ol> \r\n<p>代码如下：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Class implements Cloneable {\r\n\r\n int number;\r\n ArrayList<String> students;\r\n\r\n @Override\r\n protected Object clone(){\r\n Object object=null;\r\n try {\r\n object=super.clone();\r\n } catch (CloneNotSupportedException e) {\r\n e.printStackTrace();\r\n }\r\n return object;\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>测试代码：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"> public static void main(String[] args) {\r\n Class A=new Class();\r\n A.setNumber(50);\r\n ArrayList<String> listA=new ArrayList<>();\r\n listA.add(\"A\");\r\n A.setStudents(listA);\r\n Class B=(Class)A.clone();\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n System.out.println(\"change\");\r\n B.setNumber(44);\r\n ArrayList<String> listB = B.getStudents();\r\n listB.set(0,\"B\");\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n }\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>输出结果：修改基本数据类型的数据，另一方不会跟着改变。修改引用类型数据，同时改变。<br> <img src=\"https://img-blog.csdnimg.cn/20210421195706124.png\" alt=\"在这里插入图片描述\"></p> \r\n<h3><a name=\"t2\"></a><a name=\"t2\"></a><a id=\"_54\"></a>深克隆</h3> \r\n<p>深克隆有两个实现方法：</p> \r\n<ol><li>利用序列化：先将对象序列化转换成字节序列，再反序列化将字节序列恢复为对象。</li><li>利用引用类型自身实现的clone()方法。</li></ol> \r\n<p><strong>深克隆方式一</strong>：序列化方法</p> \r\n<ol><li>实现序列化接口<code>Serializable</code></li><li>序列化：将对象写入流中</li><li>反序列化：将对象从流中取出</li></ol> \r\n<p>代码如下：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Class implements Serializable {\r\n\r\n int number;\r\n ArrayList<String> students;\r\n \r\n Object deepClone1() throws IOException, ClassNotFoundException {\r\n ByteArrayOutputStream bao=new ByteArrayOutputStream();\r\n ObjectOutputStream oos = new ObjectOutputStream(bao);\r\n oos.writeObject(this); //写入流\r\n ByteArrayInputStream bis=new ByteArrayInputStream(bao.toByteArray());\r\n ObjectInputStream ois = new ObjectInputStream(bis);\r\n return (ois.readObject()); //从流读出\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>测试：由于在流操作时将异常抛出了，所以在调用时要处理异常。</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"> public static void main(String[] args) {\r\n Class A=new Class();\r\n A.setNumber(50);\r\n ArrayList<String> listA=new ArrayList<>();\r\n listA.add(\"A\");\r\n A.setStudents(listA);\r\n //Class B=(Class)A.clone();\r\n Class B= null;\r\n try {\r\n B = (Class)A.deepClone1();\r\n } catch (IOException e) {\r\n e.printStackTrace();\r\n } catch (ClassNotFoundException e) {\r\n e.printStackTrace();\r\n }\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n System.out.println(\"change\");\r\n B.setNumber(44);\r\n ArrayList<String> listB = B.getStudents();\r\n listB.set(0,\"B\");\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n }\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>输出结果：修改一方的基本类型和引用类型，另一方都不会改变。<br> <img src=\"https://img-blog.csdnimg.cn/20210421200635680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> <strong>深克隆方式二</strong>：利用引用类型自身的Clone()方法</p> \r\n<ol><li>实现<code>Cloneable</code>接口</li><li>先<code>super.clone()</code>克隆整个对象。</li><li>对于引用类型，调用其自身的clone()方法。</li></ol> \r\n<p>代码如下：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Class implements Cloneable,Serializable {\r\n\r\n int number;\r\n ArrayList<String> students;\r\n \r\n Class deepClone2(){\r\n Class a=null;\r\n try {\r\n a=(Class)super.clone();\r\n a.students=(ArrayList)this.students.clone();\r\n } catch (CloneNotSupportedException e) {\r\n e.printStackTrace();\r\n }\r\n return a;\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>为什么这样使用就可以实现深克隆呢？我们可以查看一下ArrayList中clone()的源码，如下：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"> public Object clone() {\r\n try {\r\n ArrayList var1 = (ArrayList)super.clone();\r\n //Arrays.copyOf方法会重新开辟一个this.size的空间，然后将this.elementData的数据复制到新的空间\r\n var1.elementData = Arrays.copyOf(this.elementData, this.size); \r\n var1.modCount = 0;\r\n return var1; //返回的var1是新的地址，而不是原先的地址值\r\n } catch (CloneNotSupportedException var2) {\r\n throw new InternalError(var2);\r\n }\r\n }\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>测试代码：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\"> public static void main(String[] args) {\r\n Class A=new Class();\r\n A.setNumber(50);\r\n ArrayList<String> listA=new ArrayList<>();\r\n listA.add(\"A\");\r\n A.setStudents(listA);\r\n Class B=A.deepClone2();\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n System.out.println(\"change\");\r\n B.setNumber(44);\r\n ArrayList<String> listB = B.getStudents();\r\n listB.set(0,\"B\");\r\n System.out.println(\"A:\"+A);\r\n System.out.println(\"B:\"+B);\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>输出结果：修改一方的基本类型和引用类型，另一方都不会改变。<br> <img src=\"https://img-blog.csdnimg.cn/20210421201225998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"></p> \r\n<h3><a name=\"t3\"></a><a name=\"t3\"></a><a id=\"_171\"></a>结论</h3> \r\n<p>使用原型模式，可以利用已有的实例简化对象的创建过程；如果需要保存变化不大的对象的状态，可以用深克隆方式进行备份。但需要为每一类配备一个克隆方法，如果是已存在的类，则会违背开闭原则。</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/115972042","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css\" rel=\"stylesheet\">\r\n </div>', 0, 0, NULL, 0, 1, 0, 1, '0');
INSERT INTO `passage` VALUES (4045, 1001, 30, '2021-04-30 09:52:19', '适配器模式', '适配器模式学习笔记', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-tomorrow-night-eighties\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p><strong>动机</strong><br> 通常情况下，客户端可以通过目标类的接口访问到它所提供的服务。有时现有的类可以满足客户类的功能需要，但是它所提供的接口不一定是客户类所期望的，这可能是因为现有类中方法名与目标类中定义的方法名不一致等原因所导致的。这时候就需要适配器，适配器的出现可以保证在不修改原有目标类和客户端代码的基础上确保能够重用现有的类。</p> \r\n<p><strong>定义</strong><br> 讲一个类的接口转换成用户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式既可以作为类结构型模式，也可以作为对象结构型模式。<br> （1）类适配器模式<br> <img src=\"https://img-blog.csdnimg.cn/20210424090225436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> （2）对象适配器模式<br> <img src=\"https://img-blog.csdnimg.cn/2021042409042230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"></p> \r\n<p><strong>举例</strong><br> 有一个接口，定义了排序方法和查找方法。已知现有快速排序算法，还有二分查找算法。因此我们需要设计一个适配器，将客户对排序、查找的请求自动转化为快速排序算法和二分查找算法。<br> <img src=\"https://img-blog.csdnimg.cn/20210424091422348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> 代码如下：<br> BinarySearch.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class BinarySearch {\r\n\r\n int binarySearch(int[] arr,int num){\r\n int i=0;\r\n int j=arr.length;\r\n while(i<=j){\r\n int mid=(i+j)/2;\r\n if (arr[mid]==num){\r\n return mid;\r\n }else if (arr[mid]>num){\r\n j=mid-1;\r\n }else{\r\n i=mid+1;\r\n }\r\n }\r\n return -1;\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li></ul></pre> \r\n<p>QuickSort.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">//快速排序\r\npublic class QuickSort{\r\n\r\n public void quickSort(int[] arr) {\r\n if (arr.length<=1)\r\n return;\r\n quick(arr,0,arr.length-1);\r\n }\r\n\r\n private void quick(int[] arr,int low,int high){\r\n if (low>high) return;\r\n int i=low;int j=high;\r\n int sign=arr[low];\r\n while(i!=j){\r\n while(i<j&&arr[j]>=sign){\r\n j--;\r\n }\r\n if (i<j){\r\n arr[i]=arr[j];\r\n i++;\r\n }\r\n while(i<j&&arr[i]<=sign){\r\n i++;\r\n }\r\n if(i<j){\r\n arr[j]=arr[i];\r\n j--;\r\n }\r\n }\r\n arr[i]=sign;\r\n quick(arr,low,i-1);\r\n quick(arr,i+1,high);\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li><li style=\"color: rgb(153, 153, 153);\">20</li><li style=\"color: rgb(153, 153, 153);\">21</li><li style=\"color: rgb(153, 153, 153);\">22</li><li style=\"color: rgb(153, 153, 153);\">23</li><li style=\"color: rgb(153, 153, 153);\">24</li><li style=\"color: rgb(153, 153, 153);\">25</li><li style=\"color: rgb(153, 153, 153);\">26</li><li style=\"color: rgb(153, 153, 153);\">27</li><li style=\"color: rgb(153, 153, 153);\">28</li><li style=\"color: rgb(153, 153, 153);\">29</li><li style=\"color: rgb(153, 153, 153);\">30</li><li style=\"color: rgb(153, 153, 153);\">31</li><li style=\"color: rgb(153, 153, 153);\">32</li><li style=\"color: rgb(153, 153, 153);\">33</li><li style=\"color: rgb(153, 153, 153);\">34</li></ul></pre> \r\n<p>DataOperation.java</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class DataOperation {\r\n abstract void sort(int[] arr);\r\n abstract int search(int[] arr,int num);\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li></ul></pre> \r\n<p>DataAdapte</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class DataAdapte extends DataOperation {\r\n\r\n private BinarySearch binarySearch;\r\n private QuickSort quickSort;\r\n\r\n public DataAdapte(){\r\n binarySearch=new BinarySearch();\r\n quickSort=new QuickSort();\r\n }\r\n\r\n @Override\r\n public void sort(int[] arr) {\r\n quickSort.quickSort(arr);\r\n }\r\n\r\n @Override\r\n public int search(int[] arr,int num) {\r\n return binarySearch.binarySearch(arr,num);\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li><li style=\"color: rgb(153, 153, 153);\">20</li><li style=\"color: rgb(153, 153, 153);\">21</li></ul></pre> \r\n<p><strong>总结</strong><br> 将目标类与适配者类解耦，可以通过引入一个适配器类来重用现有的适配者类，对客户端来说是透明的，且无需修改原来的代码，满足开闭原则。<br> 对于类适配器来说，因为他需要继承适配者类，而Java不支持多重继承，因此一次最多只能适配一个适配者类，而且目标抽象类只能为接口，不能为类（如果使用抽象类，只能通过继承，但一个类只能有一个直接父类）。但对于对象适配器来说，使用关联关系关联适配者类，因此一次可以适配多个不同的适配者类到同一个目标。与类适配器相比，如果对象适配器想要置换适配者类的一个或多个方法比较麻烦，因为适配类和适配者类是关联关系。<br> 注意：使用适配器模式的时候，客户端一定要针对抽象目标类进行编程，否则当修改适配者类或适配类的时候可能造成客户端不必要的代码改动。</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/116081627","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css\" rel=\"stylesheet\">\r\n </div>', 0, 0, NULL, 0, 0, 0, 1, '0');
INSERT INTO `passage` VALUES (4046, 1001, 30, '2021-04-30 09:54:08', '设计模式七大原则', '七大原则学习笔记', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-tomorrow-night-eighties\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p></p>\r\n<div class=\"toc\">\r\n <h3><a name=\"t0\"></a><a name=\"t0\"></a>文章目录</h3>\r\n <ul><li><ul><li><a href=\"#_4\" target=\"_self\">单一职责原则</a></li><li><a href=\"#OCP_8\" target=\"_self\">开闭原则（OCP）</a></li><li><a href=\"#_62\" target=\"_self\">里氏代换原则</a></li><li><a href=\"#_71\" target=\"_self\">依赖倒转原则</a></li><li><a href=\"#_115\" target=\"_self\">接口隔离原则</a></li><li><a href=\"#_160\" target=\"_self\">合成复用原则</a></li><li><a href=\"#_168\" target=\"_self\">迪米特法则</a></li></ul>\r\n </li></ul>\r\n</div>\r\n<p></p> \r\n<hr> \r\n<h2><a name=\"t1\"></a><a name=\"t1\"></a><a id=\"_4\"></a>单一职责原则</h2> \r\n<ul><li>定义：<code>一个对象应该只包含单一的职责</code>，并且该职责被完整地封装在一个类中。</li></ul> \r\n<hr> \r\n<h2><a name=\"t2\"></a><a name=\"t2\"></a><a id=\"OCP_8\"></a>开闭原则（OCP）</h2> \r\n<ul><li><code>对扩展开放,对修改关闭.</code>（即设计一个模块的时候，应该保证能使得这个模块原先的代码不改变的前提下进行扩展）</li><li>为了满足开闭原则，需要对系统进行抽象化设计，抽象化是开闭原则的关键。</li><li>开闭原则还可以通过更加具体的“对可变现封装原则”来描述，对可变性封装原则要求找到系统的可变因素并将其封装起来。</li><li>对每一个模式进行优缺点评价时都会以开闭原则作为一个重要的评价依据，以判断基于该模式设计的系统是否具备良好的灵活性和可扩展性。</li></ul> \r\n<p>如下面的代码就不满足开闭原则：如果要添加新的水果，那么需要修改<code>provider</code>类。</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">class apple{\r\n void produce() {\r\n System.out.println(\"苹果\");\r\n }\r\n}\r\n\r\nclass orange{\r\n void produce(){\r\n System.out.println(\"橙子\");\r\n }\r\n}\r\n\r\nclass provider{\r\n void produce(apple a){\r\n a.produce();\r\n }\r\n void produce(orange o){\r\n o.produce();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li><li style=\"color: rgb(153, 153, 153);\">20</li></ul></pre> \r\n<p>修改成如下形式，则满足开闭原则。如果需要扩展新的水果，只需要创建新的水果类并实现<code>fruit</code>的方法，无需修改<code>provider</code>原来的内容。</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">abstract class fruit{\r\n abstract void produce();\r\n}\r\nclass apple extends fruit{\r\n public void produce() {\r\n System.out.println(\"苹果\");\r\n }\r\n}\r\n\r\nclass orange extends fruit{\r\n public void produce(){\r\n System.out.println(\"橙子\");\r\n }\r\n}\r\nclass provider{\r\n void produce(fruit f){\r\n f.produce();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li></ul></pre> \r\n<hr> \r\n<h2><a name=\"t3\"></a><a name=\"t3\"></a><a id=\"_62\"></a>里氏代换原则</h2> \r\n<ul><li>开闭原则的核心是对系统进行抽象化，而从抽象化导出具体化的过程需要使用及继承关系及里氏替换原则。</li><li>定义：<code>所有引用基类（父类）的地方必须能透明地使用其子类对象。</code>（即如果在某处能够使用基类对象，那么一定能用其子类对象。把基类都替换成它的子类，程序将不会产生任何错误和异常，反过来则不成立，如果一个软件实体使用的是一个子类的话，那么它不一定能够使用基类）</li><li>因此，在程序中尽量使用基类类型来对对象进行定义，而在运行时再确定其子类类型。（多态）</li><li>要实现里氏代换原则，就必须保证子类的所有方法，都在父类声明过。如果子类拥有父类没有声明过的方法，而我们定义时使用父类类型进行定义，那么我们永远无法使用到子类独有的方法。因为等到运行时才会确定子类的实际类型，因此只能使用父类中的方法，因为子类拥有父类的所有方法（即使是父类中的private方法，子类也拥有，只是子类不能够使用）。</li><li>在运用里氏代换原则时，尽量把父类设计为抽象类或者接口，让子类继承父类或实现父接口及方法，这样实现可以在扩展的时候，无需修改子类代码（OCP原则）。</li></ul> \r\n<hr> \r\n<h2><a name=\"t4\"></a><a name=\"t4\"></a><a id=\"_71\"></a>依赖倒转原则</h2> \r\n<ul><li>依赖倒转原则是系统抽象化的实现。</li><li>定义：高层模块不应该依赖底层模块，它们都应该依赖抽象。<code>抽象不应该依赖细节，细节应该依赖于抽象。</code> 或 <code>要针对接口编程，不要针对实现编程。</code></li><li>依赖倒转原则要求客户端依赖于抽象耦合，以抽象方式耦合是依赖倒转原则的关键。</li></ul> \r\n<blockquote> \r\n <p><strong>类之间的耦合</strong></p> \r\n <ul><li>零耦合关系：两个类直接没有任何耦合关系，即没有任何关联。</li><li>具体耦合关系：关系发生在两个具体类间，由一个类对另一个具体类实例的直接引用。</li><li>抽象耦合关系：关系发送在一个抽象类和一个具体类或抽象类之间，即至少有一端是抽象的，因此可以通过不同的具体实现来进行扩展。</li></ul> \r\n</blockquote> \r\n<ul><li>依赖注入是如何传递对象直接的依赖关系，有三种方式： \r\n <ol><li>构造注入：在构造函数注入实例变量。</li><li>设值注入：通过setter方法注入。</li><li>接口注入：通过接口方法注入。</li></ol> </li></ul> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">abstract class Abstract{\r\n abstract void test();\r\n}\r\n\r\ninterface AbstractTest{\r\n void test(Abstract ab);\r\n}\r\n\r\npublic class DependenceInjection implements AbstractTest{\r\n\r\n private Abstract ab;\r\n\r\n //1.构造注入\r\n public DependenceInjection(Abstract ab){\r\n this.ab=ab;\r\n }\r\n\r\n //2.设值注入\r\n public void setAb(Abstract ab) {\r\n this.ab = ab;\r\n }\r\n\r\n //3.接口注入\r\n public void test(Abstract ab) {\r\n ab.test();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li><li style=\"color: rgb(153, 153, 153);\">20</li><li style=\"color: rgb(153, 153, 153);\">21</li><li style=\"color: rgb(153, 153, 153);\">22</li><li style=\"color: rgb(153, 153, 153);\">23</li><li style=\"color: rgb(153, 153, 153);\">24</li><li style=\"color: rgb(153, 153, 153);\">25</li><li style=\"color: rgb(153, 153, 153);\">26</li><li style=\"color: rgb(153, 153, 153);\">27</li></ul></pre> \r\n<hr> \r\n<h2><a name=\"t5\"></a><a name=\"t5\"></a><a id=\"_115\"></a>接口隔离原则</h2> \r\n<ul><li>接口隔离原则要求我们将一些较大的接口进行细化，使用多个专门的接口来替换单一的总接口。</li><li>定义：客户端不应该依赖那些它不需要的接口。（即只需要知道与它相关的方法即可，因此一个接口不应该定义的太大）</li><li>实质上，<code>接口隔离原则是指使用多个专门的接口，而不是用单一的总接口。</code></li></ul> \r\n<p>例如下面的例子，对于汽车、自行车等交通工具来说，都有可能需要修理和清洗，而对于机动车来说，还需要加油、启动，而自行车不用。因此我们在设计交通工具的接口时，应该将接口细分，机动车独有的方法应该分开。</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">interface transport{\r\n void fix(); //修理\r\n void clean(); //清洗\r\n}\r\n\r\ninterface vehicle{\r\n void addOil(); //加油\r\n void startUp(); //启动\r\n}\r\n\r\nclass bicycle implements transport{ //自行车\r\n \r\n @Override\r\n public void fix() {}\r\n \r\n @Override\r\n public void clean() {}\r\n \r\n}\r\nclass car implements transport,vehicle{ //汽车\r\n\r\n @Override\r\n public void fix() {}\r\n\r\n @Override\r\n public void clean() {}\r\n\r\n @Override\r\n public void addOil() {}\r\n\r\n @Override\r\n public void startUp() {}\r\n \r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code><ul class=\"pre-numbering\" style=\"\"><li style=\"color: rgb(153, 153, 153);\">1</li><li style=\"color: rgb(153, 153, 153);\">2</li><li style=\"color: rgb(153, 153, 153);\">3</li><li style=\"color: rgb(153, 153, 153);\">4</li><li style=\"color: rgb(153, 153, 153);\">5</li><li style=\"color: rgb(153, 153, 153);\">6</li><li style=\"color: rgb(153, 153, 153);\">7</li><li style=\"color: rgb(153, 153, 153);\">8</li><li style=\"color: rgb(153, 153, 153);\">9</li><li style=\"color: rgb(153, 153, 153);\">10</li><li style=\"color: rgb(153, 153, 153);\">11</li><li style=\"color: rgb(153, 153, 153);\">12</li><li style=\"color: rgb(153, 153, 153);\">13</li><li style=\"color: rgb(153, 153, 153);\">14</li><li style=\"color: rgb(153, 153, 153);\">15</li><li style=\"color: rgb(153, 153, 153);\">16</li><li style=\"color: rgb(153, 153, 153);\">17</li><li style=\"color: rgb(153, 153, 153);\">18</li><li style=\"color: rgb(153, 153, 153);\">19</li><li style=\"color: rgb(153, 153, 153);\">20</li><li style=\"color: rgb(153, 153, 153);\">21</li><li style=\"color: rgb(153, 153, 153);\">22</li><li style=\"color: rgb(153, 153, 153);\">23</li><li style=\"color: rgb(153, 153, 153);\">24</li><li style=\"color: rgb(153, 153, 153);\">25</li><li style=\"color: rgb(153, 153, 153);\">26</li><li style=\"color: rgb(153, 153, 153);\">27</li><li style=\"color: rgb(153, 153, 153);\">28</li><li style=\"color: rgb(153, 153, 153);\">29</li><li style=\"color: rgb(153, 153, 153);\">30</li><li style=\"color: rgb(153, 153, 153);\">31</li><li style=\"color: rgb(153, 153, 153);\">32</li><li style=\"color: rgb(153, 153, 153);\">33</li><li style=\"color: rgb(153, 153, 153);\">34</li></ul></pre> \r\n<hr> \r\n<h2><a name=\"t6\"></a><a name=\"t6\"></a><a id=\"_160\"></a>合成复用原则</h2> \r\n<ul><li>定义：<code>尽量使用对象组合/聚合，而不是继承来达到复用的目的。</code></li><li>组合/聚合可以使系统更加灵活，类与类之间的耦合度降低，一个类的变化对其他类造成的影响相对较小。因此一般首选使用组合/聚合来实现复用，其次才考虑继承。在使用继承时，需要严格遵循里氏代换原则，有效使用继承会有助于对问题的理解，降低复杂度，而滥用集成反而会增加系统构建和维护的难度以及系统的复杂度，因此需要谨慎使用继承复用。</li></ul> \r\n<blockquote> \r\n <p><strong>组合关系</strong>：表示类之间整体和部分的关系，在组合关系中，部分和整体同生死。一旦整体对象不存在，不分对象也将不存在。例如教室是教学楼组成的一部分，一旦教学楼倒塌，教室也不存在了。<br> <strong>聚合关系</strong>：表示整体与部分之间的关系。在聚合关系中，成员类是整体类的一部分，即成员对象是整体对象的一部分，但成员对象可以脱离整体对象独立存在。例如一个班级是一个整体，由班里的同学组成，但是班里的同学是可以脱离班级存在的个体，毕业时，原来的班级已经不存在了，但同学们还在。</p> \r\n</blockquote> \r\n<hr> \r\n<h2><a name=\"t7\"></a><a name=\"t7\"></a><a id=\"_168\"></a>迪米特法则</h2> \r\n<ul><li>迪米特法则用于降低系统的耦合度，使雷玉磊之间保持松散的耦合关系。</li><li>又称为最少知识原则。有以下几种定义方式： \r\n <ol><li><code>不要和“陌生人”说话</code></li><li><code>只与你的直接朋友通信</code></li><li>每一个软件单位对其他的单位都只有最少的知识，而且局限于那些与本单位密切相关的软件单位。</li></ol> </li><li>在迪米特法则中，对于一个对象，其朋友包括以下几类： \r\n <ol><li>当前对象本身（this）</li><li>以参数形式传入到当前对象方法中的对象</li><li>当前对象的成员对象</li><li>如果当前对象的成员对象是一个集合，那么集合中的元素也都是朋友</li><li>当前对象所创建的对象</li></ol> </li></ul> \r\n<hr>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/115873126","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css\" rel=\"stylesheet\">\r\n </div>', 0, 0, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4047, 1001, 30, '2021-05-01 15:35:21', '命令模式', '命令模式将请求发送者与请求接受者解耦，请求发送者通过命令对象来间接引用接收者，使得系统具有更好的灵活性', '<div id=\"article_content\" class=\"article_content clearfix\">\r\n <link rel=\"stylesheet\" href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css\">\r\n <div id=\"content_views\" class=\"markdown_views prism-atom-one-light\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <p><strong>命令模式将请求发送者与请求接受者解耦，请求发送者通过命令对象来间接引用接收者，使得系统具有更好的灵活性。</strong> 可以再不修改现有系统源代码的情况下将相同的发送者对应不同的接受者，也可以将多个命令对象组合成宏命令，还可以在命令类中提供用来撤销请求的方法。</p> \r\n<p><strong>定义</strong><br> 将一个请求封装为一个对象，从而使我们可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及支持可撤销的操作。命令模式是一种对象行为型模式，其别名为动作模式或事务模式。</p> \r\n<p><strong>本质</strong><br> 命令模式的本质是对命令进行封装，将发出命令的责任和执行命令的责任分割开。每一个命令都是一个操作：请求的一方发出请求，要求执行一个操作；接受的一方收到请求，并执行操作。命令模式允许请求的一方和接收的一方独立开来，使得请求的一方不必知道接收请求的一方的接口，更不必知道请求是怎么被接收、操作是否被执行、何时被执行，以及是怎么被执行的。</p> \r\n<p><strong>案例</strong><br> 某软件公司欲开发一个基于Windows平台的公告板系统。系统提供一个主菜单(Menu)，在主菜单中包含了一些菜单项(MenuItem)，可以通过Menu类的addMenuItem()方法增加菜单项。菜单项的主要方法是click()，每一个菜单项包含一个抽象命令类，具体命令类包括OpenCommand(打开命令)，CreateCommand(新建命令)，EditCommand(编辑命令)等，命令类具有一个execute()方法，用于调用公告板系统界面类(BoardScreen)的open()、create()、edit()等方法。现使用命令模式设计该系统，使得MenuItem类与BoardScreen类的耦合度降低。</p> \r\n<p>类图如下：<br> <img src=\"https://img-blog.csdnimg.cn/20210502194547288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70\" alt=\"在这里插入图片描述\"><br> 代码如下：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class BoardScreen {\r\n void open(){\r\n System.out.println(\"打开\");\r\n }\r\n void edit(){\r\n System.out.println(\"编辑\");\r\n }\r\n void create(){\r\n System.out.println(\"创建\");\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public abstract class Command {\r\n\r\n abstract void execute();\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class OpenCommand extends Command {\r\n private BoardScreen bs;\r\n public OpenCommand(){\r\n bs=new BoardScreen();\r\n }\r\n @Override\r\n public void execute() {\r\n bs.open();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class CreateCommand extends Command {\r\n\r\n private BoardScreen bs;\r\n public CreateCommand(){\r\n bs=new BoardScreen();\r\n }\r\n\r\n @Override\r\n public void execute() {\r\n bs.create();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class EditCommit extends Command {\r\n\r\n private BoardScreen bs;\r\n\r\n public EditCommit(){\r\n bs=new BoardScreen();\r\n }\r\n\r\n @Override\r\n public void execute() {\r\n bs.edit();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Menu {\r\n\r\n private Command openCommand;\r\n private Command editCommand;\r\n private Command createCommand;\r\n\r\n public Menu(OpenCommand openCommand,EditCommit editCommand,CreateCommand createCommand){\r\n this.openCommand=openCommand;\r\n this.editCommand=editCommand;\r\n this.createCommand=createCommand;\r\n }\r\n\r\n public void open(){\r\n openCommand.execute();\r\n }\r\n\r\n public void edit(){\r\n editCommand.execute();\r\n }\r\n\r\n public void create(){\r\n createCommand.execute();\r\n }\r\n\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>测试代码：</p> \r\n<pre class=\"prettyprint\"><code class=\"has-numbering\" onclick=\"mdcp.copyCode(event)\" style=\"position: unset;\">public class Main {\r\n public static void main(String[] args) {\r\n Menu m=new Menu(new OpenCommand(),new EditCommit(),new CreateCommand());\r\n m.create();\r\n m.edit();\r\n m.open();\r\n }\r\n}\r\n<div class=\"hljs-button {2}\" data-title=\"复制\" data-report-click=\"{"spm":"1001.2101.3001.4259"}\"></div></code></pre> \r\n<p>测试结果：<br> <img src=\"https://img-blog.csdnimg.cn/20210502194725230.png\" alt=\"在这里插入图片描述\"></p> \r\n<p><strong>结论</strong><br> 通过命令模式可以使得调用者和接受者不直接交互。请求调用者无需知道接受者的是谁，接受者也无需关心何时被调用。</p>\r\n </div><div data-report-view=\"{"mod":"1585297308_001","dest":"https://blog.csdn.net/lena7/article/details/116355991","extend1":"pc","ab":"new"}\"><div></div></div>\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css\" rel=\"stylesheet\">\r\n <link href=\"https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css\" rel=\"stylesheet\">\r\n </div>', 0, 140, NULL, 0, 0, 0, 1, '');
INSERT INTO `passage` VALUES (4048, 1001, 30, '2021-05-06 15:36:31', '组合模式', '组合模式为叶子构件和容器构件提供了一个公共的抽象构件类，客户无须关心所操作的是哪种类型的对象。', '**动机**\r\n容器对象和叶子对象在功能上有区别，在使用这些对象的客户端代码中必须有区别地对待容器对象和叶子对象，而实际上大多数情况下客户端希望能一致地处理它们，因为对于这些对象的区别对待将会使得程序非常复杂。如何将容器对象和叶子对象进行递归组合，**使得用户在使用时无需对它们进行区分，可以一致的对待容器对象和叶子对象。**\r\n\r\n**定义**\r\n组合多个对象形成树形结构以表示“整体-部分”的结构层次。**组合模式对叶子对象和容器对象的使用具有一致性。**组合模式又可以称为“整体-部分”模式，属于对象的结构模式，它将对象组织到树结构中，可以用来描述整体和部分的关系。\r\n\r\n**案例**\r\n使用组合模式设计一个杀毒软件(AntiVirus)的框架，该软件既可以对某个文件夹(Folder)杀毒，也可以对某个指定的文件(File)进行杀毒，文件种类包括文本文件TextFile、图片文件ImageFile、音频视频文件MediaFile。绘制类图并编程实现。\r\n\r\n类图如下：\r\n\r\n代码如下：\r\n```\r\npublic abstract class File {\r\n abstract void add(File file);\r\n abstract void remove(File file);\r\n abstract void antivirus();\r\n}\r\n```\r\n```\r\npublic class ImageFile extends File {\r\n\r\n private String fileName;\r\n\r\n public ImageFile(String fileName){\r\n this.fileName=fileName;\r\n }\r\n\r\n @Override\r\n void add(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void remove(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void antivirus() {\r\n System.out.println(\"图片文件：\"+fileName+\"正在进行杀毒\");\r\n }\r\n\r\n}\r\n```\r\n```\r\npublic class MediaFile extends File {\r\n\r\n private String fileName;\r\n\r\n public MediaFile(String fileName){\r\n this.fileName=fileName;\r\n }\r\n\r\n @Override\r\n void add(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void remove(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void antivirus() {\r\n System.out.println(\"音频视频文件：\"+fileName+\"正在进行杀毒\");\r\n }\r\n\r\n}\r\n```\r\n```\r\npublic class TextFile extends File {\r\n\r\n private String fileName;\r\n\r\n public TextFile(String fileName){\r\n this.fileName=fileName;\r\n }\r\n\r\n @Override\r\n void add(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void remove(File file) {\r\n System.out.println(\"文件不能执行此操作\");\r\n }\r\n\r\n @Override\r\n void antivirus() {\r\n System.out.println(\"文本文件：\"+fileName+\"正在进行杀毒\");\r\n }\r\n}\r\n```\r\n```\r\npublic class Folder extends File {\r\n\r\n private ArrayList<File> list;\r\n private String folderName;\r\n\r\n public Folder(String name){\r\n list=new ArrayList<>();\r\n this.folderName=name;\r\n }\r\n\r\n @Override\r\n void add(File file) {\r\n list.add(file);\r\n }\r\n\r\n @Override\r\n void remove(File file) {\r\n list.remove(file);\r\n }\r\n\r\n @Override\r\n void antivirus() {\r\n for(File file:list){\r\n file.antivirus();\r\n }\r\n }\r\n}\r\n```\r\n测试代码：\r\n```\r\npublic class Main {\r\n\r\n public static void main(String[] args) {\r\n TextFile t1=new TextFile(\"A.txt\");\r\n TextFile t2=new TextFile(\"B.txt\");\r\n ImageFile i1=new ImageFile(\"A.png\");\r\n MediaFile m1=new MediaFile(\"A.avi\");\r\n MediaFile m2=new MediaFile(\"B.avi\");\r\n MediaFile m3=new MediaFile(\"C.avi\");\r\n Folder f1=new Folder(\"A\");\r\n Folder f2=new Folder(\"B\");\r\n f1.add(t1);f1.add(m1);f1.add(m3);f1.add(f2);\r\n f2.add(i1);f2.add(t2);f2.add(m2);\r\n f1.antivirus();\r\n }\r\n}\r\n```\r\n测试结果：\r\n\r\n**总结**\r\n我认为组合模式解决的最重要的问题是：对于用户来说，无需区分是叶子节点还是容器结点，都可以通过抽象类进行同等对待。例如对于一个文件来说，它可能是一个叶子节点，也可能是一个容器节点，包含很多其他的文件，但是当用户需要查询某个文件的具体信息时，可以无需区分它是不是文件夹，只需调用自己需要的方法进行操作。', 0, 113, NULL, 0, 0, 0, 1, NULL);
INSERT INTO `passage` VALUES (4049, 1001, 30, '2021-05-16 15:37:02', '装饰模式', '装饰模式通过一种无需定义子类的方式来给对象动态增加职责，使用对象之间的关联关系取代类之间的继承关系。', '**动机**\r\n装饰模式可以在不改变一个对象本身的基础上给对象增加额外的新行为。\r\n\r\n**能够实现为一个类或对象增加行为的两种方式**\r\n1. 继承\r\n通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法。但是这种方法时静态的，用户不能控制增加行为的方式和时机。\r\n2. 关联\r\n将一个类的对象嵌入另一个新对象中，由另一个对象来决定是否调用嵌入对象的行为并扩展自己的行为，我们称这个新的对象为装饰器。为了使得装饰器与它所装饰的对象对客户端来说透明，装饰器类和被装饰的类必须实现相同的接口，客户端使用时无需关心一个类的对象是否被装饰过，可以一致性地使用为被装饰的对象以及装饰好的对象。这种方法更加的灵活。\r\n\r\n**定义**\r\n**动态**地给一个对象增加一些**额外**的职责，就增加对象功能来说，装饰模式比生成子类实现更为灵活。其别名也可以称为包装器，与适配器模式的别名相同，但它们适用于不同场合。是一种对象结构型模式。\r\n\r\n**案例1**\r\n某图书管理系统中，书籍类(Book)具有借书方法borrowBook()和还书方法returnBook() 。现需要动态给书籍对象添加冻结方法freeze()和遗失方法lose()。使用装饰模式设计该系统，绘制类图并编程实现。\r\n\r\n类图如下：\r\n\r\n代码如下：\r\n```\r\npublic abstract class IBook {\r\n\r\n private String bookName;\r\n abstract void borrowBook();\r\n abstract void returnBook();\r\n public String getBookName() {\r\n return bookName;\r\n }\r\n\r\n public void setBookName(String bookName) {\r\n this.bookName = bookName;\r\n }\r\n\r\n}\r\n```\r\n```\r\npublic class Book extends IBook {\r\n\r\n private String bookName;\r\n\r\n public Book(String bookName){\r\n this.bookName=bookName;\r\n }\r\n\r\n @Override\r\n public void borrowBook() {\r\n System.out.println(bookName+\"被借了\");\r\n }\r\n\r\n @Override\r\n public void returnBook() {\r\n System.out.println(bookName+\"归还了\");\r\n }\r\n\r\n @Override\r\n public String getBookName() {\r\n return bookName;\r\n }\r\n\r\n @Override\r\n public void setBookName(String bookName) {\r\n this.bookName = bookName;\r\n }\r\n}\r\n```\r\n```\r\npublic class NewBook extends Changer {\r\n\r\n public NewBook(IBook book){\r\n super(book);\r\n }\r\n\r\n public void freeze(){\r\n System.out.println(book.getBookName()+\"冻结了\");\r\n }\r\n\r\n public void lose(){\r\n System.out.println(book.getBookName()+\"丢失了\");\r\n }\r\n\r\n @Override\r\n public void borrowBook() {\r\n System.out.println(book.getBookName()+\"被借了\");\r\n }\r\n\r\n @Override\r\n public void returnBook() {\r\n System.out.println(book.getBookName()+\"归还了\");\r\n }\r\n\r\n}\r\n```\r\n```\r\npublic class Changer extends IBook {\r\n\r\n private IBook book;\r\n private String bookName;\r\n public Changer(IBook book){\r\n this.book=book;\r\n }\r\n\r\n @Override\r\n public void borrowBook() {\r\n System.out.println(bookName+\"被借了\");\r\n }\r\n\r\n @Override\r\n public void returnBook() {\r\n System.out.println(bookName+\"归还了\");\r\n }\r\n\r\n}\r\n```\r\n测试代码：\r\n```\r\npublic class Main {\r\n\r\n public static void main(String[] args) {\r\n IBook book=new Book(\"《设计模式》\");\r\n book.borrowBook();\r\n book.returnBook();\r\n System.out.println(\"\");\r\n NewBook b1=new NewBook(book);\r\n b1.borrowBook();\r\n b1.lose();\r\n b1.freeze();\r\n b1.returnBook();\r\n }\r\n\r\n}\r\n```\r\n测试结果：\r\n\r\n\r\n**案例2**\r\n现有一个手抓饼小摊，手抓饼皮4元，可以添加佐料：火腿、鸡蛋、培根等，每添加一个佐料+2元。在这种情况下，顾客可以随机的组合，例如+火腿+培根，也可以+两个火腿+一个鸡蛋。现要求设计一个cost()方法帮助手抓饼老板计算不同搭配的手抓饼需要多少元？如果我们将每种可能的搭配都计算一次，那么需要写非常多的类，而且当添加新的佐料时，需要添加原先1倍的类与方法，但如果采用装饰模式，则可以避免这种情况的发生。\r\n\r\n类图如下：\r\n\r\n代码如下：\r\n```\r\npublic abstract class Cake {\r\n abstract int cost();\r\n}\r\n```\r\n```\r\npublic class HandCake extends Cake {\r\n @Override\r\n int cost() {\r\n return 4;\r\n }\r\n}\r\n```\r\n```\r\npublic class Seasoning extends Cake {\r\n private Cake cake;\r\n Seasoning(Cake cake){\r\n this.cake=cake;\r\n }\r\n @Override\r\n int cost() {\r\n return cake.cost();\r\n }\r\n}\r\n```\r\n```\r\npublic class Egg extends Seasoning {\r\n Egg(Cake cake) {\r\n super(cake);\r\n }\r\n int cost(){\r\n return super.cost()+2;\r\n }\r\n}\r\n```\r\n```\r\npublic class Ham extends Seasoning{\r\n Ham(Cake cake) {\r\n super(cake);\r\n }\r\n int cost(){\r\n return super.cost()+2;\r\n }\r\n}\r\n```\r\n```\r\npublic class Becon extends Seasoning {\r\n Becon(Cake cake) {\r\n super(cake);\r\n }\r\n int cost(){\r\n return super.cost()+2;\r\n }\r\n}\r\n```\r\n测试代码如下：\r\n```\r\npublic class Main {\r\n public static void main(String[] args) {\r\n Cake cake = new HandCake();\r\n System.out.println(\"手抓饼：\"+cake.cost());\r\n Egg egg = new Egg(cake);\r\n System.out.println(\"+1个鸡蛋：\"+egg.cost());\r\n Ham ham = new Ham(egg);\r\n System.out.println(\"+1片火腿：\"+ham.cost());\r\n Becon becon = new Becon(ham);\r\n System.out.println(\"+1份培根：\"+becon.cost());\r\n Egg egg2 = new Egg(becon);\r\n System.out.println(\"再+一个鸡蛋：\"+egg2.cost());\r\n }\r\n}\r\n```\r\n测试结果：\r\n\r\n**结论**\r\n根据上述的案例，我们可以看到：对于一个手抓饼，有许多排列组合的结果，我们可以不加鸡蛋，也可以加一个鸡蛋，也可以加两个鸡蛋……如果对于每一种情况都需要写一个计算方法，那么十分的复杂。利用装饰模式，我们可以使用具体的装饰类作为被装饰者，在具体装饰类基础上再进行装饰，即我们可以将一个已经加了火腿和鸡蛋的手抓饼作为被装饰者，在这个基础上再加一个鸡蛋，代码就变得非常的灵活。', 0, 234, NULL, 0, 1, 0, 1, NULL);
INSERT INTO `passage` VALUES (4059, 1001, 43, '2021-08-30 12:46:23', '地址转换技术 NAT', '计算机网络NAT技术', '<div id=\"content_views\" class=\"markdown_views prism-atom-one-light\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\">\r\n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"></path>\r\n </svg>\r\n <h2><a name=\"t0\"></a><a id=\"_0\"></a>概述</h2> \r\n<ul><li>为了解决IPv4地址不足的问题，提出了私有地址，而私有地址只能在内部网络内使用，当要与外界进行通信的时候，需要转换为公有IP。</li><li>NAT技术的作用：<strong>将私有地址转换成公网地址</strong>。<br> <img src=\"https://img-blog.csdnimg.cn/1654a3194d1c4a49af8be8d8920e625c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGVuYTd1,size_20,color_FFFFFF,t_70,g_se,x_16\" alt=\"在这里插入图片描述\"></li></ul> \r\n<h2><a name=\"t1\"></a><a id=\"_4\"></a>专业术语</h2> \r\n<ul><li>内部本地网络：连接到属于私有路由器接口的网络。对内部网络中主机发送到外部的分组，必须对私有IP地址进行转换。</li><li>外部全局网络：与外部路由器相连的网络，无法识别私有IP地址。</li><li>内部本地地址：私有IP地址，仅在内部网络内有效。这类IP地址离开内部本地网路前，必须转换成公有IP。</li><li>内部全局地址：外部网络看到的内部主机IP地址，是转换后的IP地址。</li><li>外部本地地址：本地网络发送分组时使用的地址，通常与外部全局地址相同。</li><li>外部全局地址：发送分组时实际使用的公有IP地址。</li></ul> \r\n<h2><a name=\"t2\"></a><a id=\"_12\"></a>实现方式</h2> \r\n<h3><a name=\"t3\"></a><a id=\"_13\"></a>静态转换</h3> \r\n<p>又称静态NET，私网和公网是一对一的且静态。<br> 一个公网IP只会分配给唯一且固定的内网主机。</p> \r\n<h3><a name=\"t4\"></a><a id=\"_16\"></a>动态转换</h3> \r\n<p>又称动态NET，私网和公网是一对一的且是动态的。<br> 基于地址池来实现的。分配的公网地址是动态的。</p> \r\n<h3><a name=\"t5\"></a><a id=\"NAPT_19\"></a>端口多路复用NAPT</h3> \r\n<p>允许多个内部地址映射到同个公有地址的不同端口。<br> 同一个公有地址的不同内部地址用端口号来进行区分（<strong>端口号是传输层。</strong>）<br> 可以最大限度地节约IP地址资源。</p> \r\n<h2><a name=\"t6\"></a><a id=\"_24\"></a>总结</h2> \r\n<p>优点：</p> \r\n<ol><li>节省了公网地址，也可保证网络互通，缓解了IP地址不足的问题。</li><li>能够有效避免来自网络外部的攻击，隐藏内部网络的结构，保护内部。</li></ol> \r\n<p>缺点：</p> \r\n<ol><li>违反了IP的体系结构（IP规定一个IP地址对应一个网络接口）</li><li>将Internet的无连接服务变成有连接服务(NET必须包含所有经过它的信息)</li><li>违反了网络分层原则（使用端口多路复用会在网络层用了传输层的端口号），导致以下问题：<br> 3.1 如果IP包的载荷不是TCP或UDP，则NET无法工作<br> （因为其他协议的信息中不包含源端口号）<br> 3.2 在有些应用中NET可能会出错(若源IP地址嵌在消息中，而NET不作处理)</li></ol> \r\n<p>注意：外网主机无法先发起通信，因为使用私有地址的主机不能直接充当因特网服务器。对于一些P2P网络应用，需要外网主动与内网通信，需要网络应用自己使用一些特殊的NAT穿越技术解决问题。</p> \r\n<hr> \r\n<p>学习自<a href=\"https://www.bilibili.com/video/BV1c4411d7jb\">湖南科技大学-计算机网络微课堂：https://www.bilibili.com/video/BV1c4411d7jb</a><br> 参考链接：<a href=\"https://baike.baidu.com/item/nat\">https://baike.baidu.com/item/nat</a></p>\r\n </div>', 0, 0, NULL, 0, 0, 0, 1, '');
-- ----------------------------
-- Table structure for passage_collect
-- ----------------------------
DROP TABLE IF EXISTS `passage_collect`;
CREATE TABLE `passage_collect` (
`pcId` int(11) NOT NULL AUTO_INCREMENT COMMENT '文章收藏id',
`passageId` int(11) NULL DEFAULT NULL COMMENT '文章id',
`userId` int(11) NULL DEFAULT NULL COMMENT '用户id',
`collectTime` datetime NULL DEFAULT NULL COMMENT '收藏时间',
PRIMARY KEY (`pcId`) USING BTREE,
INDEX `passageId`(`passageId`) USING BTREE,
INDEX `userId`(`userId`) USING BTREE,
CONSTRAINT `passage_collect_ibfk_1` FOREIGN KEY (`passageId`) REFERENCES `passage` (`passageId`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `passage_collect_ibfk_2` FOREIGN KEY (`userId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of passage_collect
-- ----------------------------
-- ----------------------------
-- Table structure for passage_keyword
-- ----------------------------
DROP TABLE IF EXISTS `passage_keyword`;
CREATE TABLE `passage_keyword` (
`pkId` int(11) NOT NULL AUTO_INCREMENT,
`keywordId` int(11) NOT NULL,
`passageId` int(11) NOT NULL,
`deleted` int(11) NULL DEFAULT 0,
PRIMARY KEY (`pkId`) USING BTREE,
INDEX `keywordId`(`keywordId`) USING BTREE,
INDEX `passageId`(`passageId`) USING BTREE,
CONSTRAINT `passage_keyword_ibfk_1` FOREIGN KEY (`keywordId`) REFERENCES `keyword` (`keywordId`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `passage_keyword_ibfk_2` FOREIGN KEY (`passageId`) REFERENCES `passage` (`passageId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 59 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of passage_keyword
-- ----------------------------
INSERT INTO `passage_keyword` VALUES (1, 2001, 4001, 0);
INSERT INTO `passage_keyword` VALUES (2, 2003, 4001, 0);
INSERT INTO `passage_keyword` VALUES (3, 2001, 4002, 0);
INSERT INTO `passage_keyword` VALUES (4, 2003, 4002, 0);
INSERT INTO `passage_keyword` VALUES (5, 2001, 4005, 0);
INSERT INTO `passage_keyword` VALUES (6, 2004, 4004, 0);
INSERT INTO `passage_keyword` VALUES (7, 2001, 4007, 0);
INSERT INTO `passage_keyword` VALUES (8, 2004, 4008, 0);
INSERT INTO `passage_keyword` VALUES (9, 2004, 4022, 0);
INSERT INTO `passage_keyword` VALUES (10, 2004, 4023, 0);
INSERT INTO `passage_keyword` VALUES (11, 2004, 4024, 0);
INSERT INTO `passage_keyword` VALUES (12, 2004, 4025, 0);
INSERT INTO `passage_keyword` VALUES (13, 2004, 4026, 0);
INSERT INTO `passage_keyword` VALUES (14, 2006, 4009, 0);
INSERT INTO `passage_keyword` VALUES (15, 2016, 4010, 0);
INSERT INTO `passage_keyword` VALUES (18, 2002, 4028, 0);
INSERT INTO `passage_keyword` VALUES (19, 2018, 4012, 0);
INSERT INTO `passage_keyword` VALUES (20, 2018, 4011, 0);
INSERT INTO `passage_keyword` VALUES (21, 2019, 4011, 0);
INSERT INTO `passage_keyword` VALUES (22, 2008, 4014, 0);
INSERT INTO `passage_keyword` VALUES (23, 2018, 4013, 0);
INSERT INTO `passage_keyword` VALUES (24, 2008, 4013, 0);
INSERT INTO `passage_keyword` VALUES (25, 2002, 4015, 0);
INSERT INTO `passage_keyword` VALUES (26, 2002, 4013, 0);
INSERT INTO `passage_keyword` VALUES (27, 2002, 4014, 0);
INSERT INTO `passage_keyword` VALUES (28, 2018, 4018, 0);
INSERT INTO `passage_keyword` VALUES (29, 2019, 4018, 0);
INSERT INTO `passage_keyword` VALUES (30, 2017, 4019, 0);
INSERT INTO `passage_keyword` VALUES (31, 2001, 4021, 0);
INSERT INTO `passage_keyword` VALUES (32, 2018, 4020, 0);
INSERT INTO `passage_keyword` VALUES (33, 2019, 4020, 0);
INSERT INTO `passage_keyword` VALUES (34, 2016, 4027, 0);
INSERT INTO `passage_keyword` VALUES (35, 2002, 4028, 0);
INSERT INTO `passage_keyword` VALUES (36, 2020, 4017, 0);
INSERT INTO `passage_keyword` VALUES (37, 2016, 4005, 0);
INSERT INTO `passage_keyword` VALUES (38, 2016, 4005, 0);
INSERT INTO `passage_keyword` VALUES (39, 2005, 4029, 0);
INSERT INTO `passage_keyword` VALUES (40, 2005, 4030, 0);
INSERT INTO `passage_keyword` VALUES (41, 2005, 4031, 0);
INSERT INTO `passage_keyword` VALUES (42, 2005, 4032, 0);
INSERT INTO `passage_keyword` VALUES (43, 2005, 4033, 0);
INSERT INTO `passage_keyword` VALUES (44, 2005, 4034, 0);
INSERT INTO `passage_keyword` VALUES (45, 2005, 4036, 0);
INSERT INTO `passage_keyword` VALUES (46, 2002, 4035, 0);
INSERT INTO `passage_keyword` VALUES (47, 2023, 4042, 0);
INSERT INTO `passage_keyword` VALUES (48, 2023, 4043, 0);
INSERT INTO `passage_keyword` VALUES (49, 2023, 4044, 0);
INSERT INTO `passage_keyword` VALUES (50, 2023, 4045, 0);
INSERT INTO `passage_keyword` VALUES (51, 2023, 4046, 0);
INSERT INTO `passage_keyword` VALUES (52, 2023, 4047, 0);
INSERT INTO `passage_keyword` VALUES (53, 2023, 4048, 0);
INSERT INTO `passage_keyword` VALUES (54, 2023, 4049, 0);
INSERT INTO `passage_keyword` VALUES (55, 2001, 4030, 0);
INSERT INTO `passage_keyword` VALUES (56, 2005, 4029, 0);
INSERT INTO `passage_keyword` VALUES (57, 2011, 4059, 0);
INSERT INTO `passage_keyword` VALUES (58, 2011, 4011, 0);
-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
`userId` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`password` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '123456',
`sex` char(2) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '男',
`email` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`joinDate` datetime NULL DEFAULT NULL,
`lastTime` datetime NULL DEFAULT NULL,
`status` int(11) NULL DEFAULT 1 COMMENT '状态',
`avatar` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '头像路径',
`deleted` int(11) NULL DEFAULT 0,
PRIMARY KEY (`userId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1014 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES (1001, 'lena', 'e10adc3949ba59abbe56e057f20f883e', '女', '123456789@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1002, '小华', 'e10adc3949ba59abbe56e057f20f883e', '女', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1003, '小南', 'e10adc3949ba59abbe56e057f20f883e', '男', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1004, '小溪', 'e10adc3949ba59abbe56e057f20f883e', '男', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1005, '小恩', 'e10adc3949ba59abbe56e057f20f883e', '女', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1006, '小K', 'e10adc3949ba59abbe56e057f20f883e', '男', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1007, '小怪', 'e10adc3949ba59abbe56e057f20f883e', '女', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-16 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1008, '小娜', 'e10adc3949ba59abbe56e057f20f883e', '女', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-21 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1009, '小孔', 'e10adc3949ba59abbe56e057f20f883e', '男', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-21 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1010, '小可', 'e10adc3949ba59abbe56e057f20f883e', '女', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-21 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1011, '小鸟', 'e10adc3949ba59abbe56e057f20f883e', '男', '752236452@qq.com', '2020-07-16 00:00:00', '2020-07-21 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
INSERT INTO `users` VALUES (1012, 'test', 'e10adc3949ba59abbe56e057f20f883e', '男', '111@qq.com', '2020-09-05 00:00:00', '2020-09-05 00:00:00', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 1);
INSERT INTO `users` VALUES (1013, 'test', 'e10adc3949ba59abbe56e057f20f883e', '男', 'test', '2021-04-21 18:41:50', '2021-04-21 18:41:50', 1, 'https://avatar.csdnimg.cn/3/7/B/1_lena7_1620658118.jpg', 0);
-- ----------------------------
-- Table structure for users_attention
-- ----------------------------
DROP TABLE IF EXISTS `users_attention`;
CREATE TABLE `users_attention` (
`uaId` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户关注信息id',
`beAttUserId` int(11) NULL DEFAULT NULL,
`attUserId` int(11) NULL DEFAULT NULL,
`attTime` datetime NULL DEFAULT NULL,
PRIMARY KEY (`uaId`) USING BTREE,
INDEX `beAttUserId`(`beAttUserId`) USING BTREE,
INDEX `attUserId`(`attUserId`) USING BTREE,
CONSTRAINT `users_attention_ibfk_1` FOREIGN KEY (`beAttUserId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `users_attention_ibfk_2` FOREIGN KEY (`attUserId`) REFERENCES `users` (`userId`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = COMPACT;
-- ----------------------------
-- Records of users_attention
-- ----------------------------
INSERT INTO `users_attention` VALUES (1, 1001, 1007, '2021-04-29 21:54:37');
INSERT INTO `users_attention` VALUES (2, 1001, 1002, '2021-04-29 21:54:42');
INSERT INTO `users_attention` VALUES (3, 1001, 1004, '2021-04-29 21:54:47');
INSERT INTO `users_attention` VALUES (4, 1001, 1005, '2021-04-29 21:54:53');
INSERT INTO `users_attention` VALUES (5, 1005, 1001, '2021-04-29 21:54:57');
INSERT INTO `users_attention` VALUES (6, 1004, 1008, '2021-04-29 21:55:04');
INSERT INTO `users_attention` VALUES (7, 1008, 1009, '2021-04-29 21:55:10');
INSERT INTO `users_attention` VALUES (8, 1003, 1001, '2021-04-29 21:55:15');
INSERT INTO `users_attention` VALUES (9, 1001, 1003, '2021-04-29 21:55:26');
SET FOREIGN_KEY_CHECKS = 1;
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手