技能清单梳理

技能清单梳理

1、Node.js

1、Node.js的安装，在任意命令行窗口使用

// 1.官网下载对应版本安装包
// 2.安装好找的目录下
// 3.配置环境变量，如NODE_PATH=E:\node_js Path=%NODE_PATH%

2、全局插件的安装，在任意命令窗口中使用

// 1.首先node安装好后，会有如下默认配置：
npm config get prefix
C:\Users\laizhenghua\AppData\Roaming\npm

npm config get cache
C:\Users\laizhenghua\AppData\Roaming\npm-cache

// 2.在当前用户的环境变量path里，会自动增加这么一条C:\Users\Administrator\AppData\Roaming\npm

// 3.隐藏的环境变量 NODE_PATH 值为 C:\Users\Administrator\AppData\Roaming\npm\node_modules

// 4.修改默认配置也就是修改以上信息如：

npm config set prefix npm目录

npm config set cache cache目录

修改环境变量(path + NODE_PATH)

node -v 		// 查看node版本
npm config list	// 查看配置信息
npm config set prefix "D:\dev\nodejs\node_modules\npm\node_gloval_modules"　　// 设置全局模块插件存放路径
npm config set cache "D\dev\nodejs\\node_modules\npm\node_cache"		// 设置缓存

npm install -g cnpm --registry=https://registry.npm.taobao.org		// 安装cnpm

npm config set registry https://registry.npm.taobao.org 			// 设置默认源

cnpm install express --save			// 安装Express
cnpm install body-parser --save		// node.js中间件，处理JSON,Raw,Text和url编码的数据
cnpm install cookie-parser --save	// 解析Cookie工具，通过req.cookies获取传过来的cookie，并转换成对象
cnpm install multer --save			// node.js中间件，处理enctype="multipart/form-data"的表单数据


https://www.runoob.com/nodejs/nodejs-tutorial.html

node 文件名		// 启动服务

3、建立独立的nodejs环境，置入代码后，整个环境能够任意复制，在无网络的环境下运行

2、npm的使用

查看npm的存储库：

C:\Users\laizhenghua>npm config get prefix
C:\Users\laizhenghua\AppData\Roaming\npm

增加npm的存储库：本地仓库地址和环境变量中的路径必须同步更改

# 准备一个存储库路径 D:\dev\nodejs\node_modules
npm config set prefix "D:\dev\nodejs\node_modules"

增加源，如淘宝源

npm i -g nrm // 安装nrm nrm(npm registry manager )是npm的镜像源管理工具
nrm ls
nrm add <源名称> <源地址>

# 官方源
nrm use npm
# 淘宝源
npm use taobao

切换npm的存储库：

npm config set prefix "D:\dev\nodejs\node_modules"

npm config set prefix "C:\Users\laizhenghua\AppData\Roaming\npm"

切换npm的镜像：

npm config set registry http://xxx
# yarn 同理

使用npm添加项目依赖：

# package.json文件同级目录下打开控制台执行
npm install 

使用npm添加开发依赖：

npm install <Module Name>	// 安装nodo.js模块，如npm install express
npm install <Module Name> -g // 全局安装
npm install <Module Name>@version // 指定版本安装 例如 npm install lodash@4.17.20 --save
npm install <Module Name> --save //安装依赖到项目目录，并写入 package 的 dependencies 中
npm install <Module Name> --save-dev //安装依赖到项目目录，并写入 package 的 devDependencies 中 
npm config set proxy null // 设置代理为null

npm清空缓存

rm package-lock.json 
npm cache clear --force
# 重新安装依赖
npm install element-ui --save

高性能的npm，pnpm （performant npm）译为高性能的 npm，由npm和yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景，被誉为最先进的包管理工具。

# pnpm 安装命令
npm install -g pnpm

# 项目初始化
pnpm create vite

3、yarn的使用

1、查看yarn的存储库

yarn config get registry

2、增加yarn的存储库

# 准备一个存储库路径 D:\dev\nodejs\node_modules
yarn config set prefix "D:\dev\nodejs\node_modules"

3、切换yarn的存储库

yarn config set prefix "D:\dev\nodejs\node_modules"

4、使用yarn添加项目依赖

# package.json文件同级目录下打开控制台执行
yarn install

5、使用yarn添加开发依赖

# 将依赖项添加到不同依赖项类别，分别添加到 devDependencies、peerDependencies 和 optionalDependencies：
yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

6、扩展

npm install -g yrm
yrm add distnpm http://xx/repository/npm-public/
yrm use distnpm

4、gulp的使用

1、安装gulp插件

# 全局安装
npm install -g gulp

# 局部安装
npm install gulp --save-dev

2、使用gulp进行开发、发布。注意gulp功能都是使用gulp旗下插件实现的

gulp default // 启动数慧项目
gulp build-dist --profile dev // 编译发布项目

插件使用方式

// gulpfile.js

"use strict";
var gulp = require("gulp");
var concat = require("gulp-concat"); // 加载合并文件插件
var uglify = require("gulp-uglify"); // 加载压缩js文件uglify插件
var rename = require("gulp-rename"); // 加载压缩重命名gulp-rename插件
var livereload = require("gulp-livereload"); // 实时更新插件
var connect = require("gulp-connect"); // 热部署插件

// 注册任务。例如合并js文件
gulp.task("concatJs", function () {
    // 配置任务的操作
   return gulp.src("./src/**/*.js") // 找到目标原文件，将数据读取到gulp的内存中
       .pipe(concat("build.js")) // 临时合并文件
       .pipe(gulp.dest("dist/js/")) // 输出文件到本地 build.js
       .pipe(uglify()) // 压缩js文件
       .pipe(rename({suffix: ".min"})) // 重命名
       .pipe(gulp.dest("dist/js/")) // 输出文件到本地 build.min.js
       .pipe(livereload()) // 检测的文件改变时，重新编译
       .pipe(connect.reload())
       ;
});

// 实时更新（需要手动刷新）
gulp.task("watch", ["default"], function () {
    livereload.listen();
    gulp.watch("./src/**/*.js", ["concatJs"]);
});

// 热加载（自动刷新） npm install gulp-connect --save-dev
gulp.task("server", ["default"], function () {
    // 配置服务器选项
    connect.server({
        root: "dist/",
        livereload: true,
        port: 3000
    });
    gulp.watch("./src/**/*.js", ["concatJs"]);
    // 给任务加上 .pipe(connect.reload())
});

// 常用插件
/*
   gulp-concat 合并文件（js/css）
   gulp-uglify 压缩js文件
   gulp-rename 文件重命名
   gulp-less 编译less
   gulp-clean-css 压缩css
   gulp-livereload 实时自动编译刷新
*/

// 下载插件方式
// npm install gulp-concat gulp-uglify gulp-rename --save-dev


// 扩展 gulp-load-plugins
/*
打包加载gulp插件
前提：将插件下载好
下载打包插件：gulp-load-plugins
npm install gulp-load-plugins --save-dev
引入：var $ = require("gulp-load-plugins") (); // 其他的插件就不需要在引入了
$.concat();
$.uglify();
$.less();
...
*/

3、编写gulp脚本实现项目的编译、打包

5、Maven的使用

1、安装部署，在任意命令行中可用

# 新增一个系统变量 M2_HOME 变量值等于maven的安装目录
M2_HOME=D:\work\maven_work\apache-maven-3.3.9
# 再把M2_HOME加入到path之中，在所有路径之前加入 %M2_HOME%\bin;

# 注意：需要配置JAVA_HOME ，指定jdk路径
# 验证是否安装成功
mvn -v

2、使用命令进行编译、打包

mvn clean # 清理(会删除原来编译和测试的目录，即 target 目录，但是已经 install 到仓库里的包不会删除)

mvn compile # 编译main/java/目录下的java 为class文件， 同时把class拷贝到 target/classes目录下面。把main/resources目录下的所有文件 都拷贝到target/classes目录下
mvn package # 打包主程序(会编译、编译测试、测试、并且按照 pom.xml 配置把主程序打包生成 jar 包或者 war 包)

mvn install # 安装主程序(会把本工程打包，并且按照本工程的坐标保存到本地仓库中)

# 注意：执行以上命令必须在命令行进入 pom.xml 所在目录！

3、定义缓存路径，保持命令行和开发工具jar包缓存的一致性

.settings.xml文件

修改配置文件settings.xml

<localRepository>E:/maven/repository</localRepository>

# 强制更新缓存
mvn clean install -U

4、解决项目的依赖冲突

// 查看依赖树
mvn dependency:tree

// idea查看：打开pom.xml文件 -> 右键 -> Manven -> Show Dependencies
// 需定位出具体的冲突jar包，利用Maven Helper插件可快速定位冲突的jar包

三种方式解决jar包冲突

<!--1.声明优先原则：把需要保留的jar包坐标依赖优先声明-->
<!--2.就近优先原则：如果是因为依赖传递而造成的jar包冲突，可以显示引入冲突jar包依赖-->
<dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.0.8.RELESE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.4.RELESE</version>
    </dependency>
    <!--假设spring-core造成了jar冲突，可通过显示引入解决jar包-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>4.2.4.RELESE</version>
    </dependency>
</dependencies>


<!--3.排除依赖，exclusions标签，也是最常用的一种方法-->
<dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.0.8.RELESE</version>
        <exclusions>
            <exclusion>
                <groupId>org.springframework</groupId>
        		<artifactId>spring-core</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.4.RELESE</version>
    </dependency>
</dependencies>

5、使用Maven进行高级操作，如包合并、代码检查等

6、gradle的使用

1、安装部署，在任意命令行中可用

# 安装地址：https://services.gradle.org/distributions/

# 1.解压至指定的目录，如 E:\gradle\gradle-4.3
# 2.新建仓库地址，如 E:\gradle\repository
# 3.配置环境变量
GRADLE_HOME: E:\gradle\gradle-4.3
GRADLE_USER_HOME: E:\gradle\repository
# Path 中添加 %GRADLE_HOME%\bin

gradle -v

2、使用命令进行编译、打包

gradle check ： 核查项目信息，如果使用了一些不规范的语法，可以使用这个命令检测

gradle clean ：清理 gradle 编译相关的目录

gradle build ： 对项目进行编译并且打包，最终生成的包文件会在各个站点的 build 目录中，包文件在 build\libs 目录中

gradle build -Dorg.gradle.java.home=D:\software\jdk1.7.0_51-x64 指定 JDK 版本进行编译

gradle clean build -Dprofile=test 来完成编译和打包的工作，Dprofile 用来设置配置文件所属环境

3、定义缓存路径，保持命令行和开发工具jar包缓存的一致性

GRADLE_USER_HOME=E:\gradle\repository

4、解决项目的依赖冲突

// 1.直接在 configuration 中排除冲突的其中一个jar包
configurations {
    compile.exclude module: 'bcprov-jdk15on'
}

// 2.在具体的某个dependency中排除，比如我们引入的jar包com.common:lib:1.0中需要排除其中的appcompat-v7
dependencies {

    compile 'com.common:lib:1.0'{
        exclude module: 'appcompat-v7'
        // 或者
        exclude group: 'com.common', module: 'appcompat-v7'
    }
}
// 3.force配置：强制使用某个统一的版本。出现冲突时优先使用该版本进行解决
compile('com.common:lib:1.0') {
     force = true
}

// 4.解决jar包冲突不难，难的是找到具体的冲突jar包
gradle dependencies // 查看依赖树

5、使用gradle进行高级操作，如包合并、代码检查等

build.gradle

// 使用 shadow插件 进行包合并，例如将mybatis打入我的jar包，并将mybatis的包名由org.apache.ibatis 改成 my.org.apache.ibatis
plugins {
    id 'com.github.johnrengelman.shadow' version '2.0.4'
}
 
apply plugin: 'com.github.johnrengelman.shadow'
 
 
dependencies {
    compile group: 'org.mybatis', name: 'mybatis', version: '3.4.5'
}
 
shadowJar {
    classifier = ""
    relocate 'org.apache.ibatis', 'my.org.apache.ibatis'
    dependencies {
        include(dependency("org.mybatis:mybatis:3.4.5:withDependencies"))
    }
}

// 执行 gradlew shadowJar

代码检查(gradle + SonarQube插件)：https://blog.csdn.net/weixin_34112208/article/details/91443661

7、idea的使用

1、安装IntelliJ IDEA

无脑下一步即可

2、集成使用指定的Tomcat版本，支持代码的热部署

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJAFd3Tm-1669085534951)(C:\Users\laizhenghua\AppData\Roaming\Typora\typora-user-images\image-20211014224450829.png)]

3、集成使用指定的Jdk版本

安装多个JDK -> setting配置当前项目JDK版本 -> 配置项目JDK引用源。

4、集成使用指定的依赖管理工具及相应的版本，如maven或gradle

maven

// setting下直接搜索 maven
// 安装目录
Maven home directory: E:/maven/apache-maven-3.6.3
// 配置文件
User setting file: E:\maven\apache-maven-3.6.3\conf\settings.xml
// 存储仓库
Local repository: E:\maven\repository
// 注意勾选 Override 覆盖默认的配置或仓库

Gradle

// 设置仓库路径即可
Gradle user home: E:/gradle/repository

5、增加类或者其他资源文件(java、yaml、json、xml)

右键目录 -> New

6、资源文件、类文件、依赖库中的类文件的查找方式

1. 资源文件：大多数在resources目录下

2. 类文件：Shift+Shift根据文件名进行搜索

7、通过父类或者接口查找所有的子类和实现类

1. F4快捷键：显示所有的继承或实现关系

8、快速定位到指定的代码行

1. Ctrl+H全局搜索

2. Ctrl+F局部搜索

根据关键字定位即可！

9、代码的全文搜索

1. Ctrl+H全局搜索

2. Ctrl+F局部搜索

10、代码格式化

1. 代码格式化快捷键：Ctrl+Alt+L

11、熟练使用快捷键进行代码调试

1. 撤销代码：Ctrl+Z
2. 查找与替换：Ctrl+F
3. 复制指定行的代码：ctrl + alt + down 或 ctrl + alt + up

12、了解基本运行机制和调试时的程序发布目录

1. 基本运行机制：tomcat运行编译出来的war包
2. 程序发布目录：File -> Project Structure

13、通过svn管理代码

1. 配置svn环境：File -> Other Settings(全局配置) -> Subversion -> 添加bin目录下svn.exe可执行文件
2. 如果找不到svn.exe文件(TortoiseSVN的bin目录下面没有svn.exe)
3. 之所以没有是因为安装TortoiseSVN的时候没有勾选指定安装项，添加command line client tools。重新安装。
4. 重新启动idea
5. 在idea中使用svn：菜单栏VCS -> Enable Version Control Integration ...

8、浏览器的使用

1、流畅的使用浏览器进行前端调试

快捷键：F12

Network：查看网络请求信息

Sources：Ctrl+P查看请求过来的资源文件

Elements：审查元素

304一般是从浏览器缓存中读取的文件。

Network中可以查看请求url、响应状态、返回数据内容长度、响应时间结合这个可以优化接口，判断那个请求速度慢，修改sql等。

2、清理浏览器缓存

略

3、分析页面的加载性能

1. 直接看请求完成时间，如果时间特别长，那就是后端接口问题Network -> request(Time)

2. 请求次数太多，css，js该合并的合并，图标该精灵的精灵

4、解决页面加载问题、提出可行的优化建议

1. 通过查看请求响应时间去分析，做出合理的修改，前端问题可以：懒加载、大文件js在body之后加载、预加载等。

9、Angular的使用

1、定义一个控制器展示界面

指令：ng-controller

controller.js文件写法

(function(angular) {
    "use strict";
    angular.module("moduleName").controller("controllerName",['$scope', '$rootScope', function($scope, $rootScope) {
        let vm = $scope.vm = {};
    }])
})(angular)

2、控制器数据发生变化时，界面同步更新

使用指令绑定控制器变量即可

$apply

3、界面输入发生变化时，控制器数据出现更新

使用$scope或$rootScope定义变量！并配合相关指令使用

4、编写本地服务被控制器调用

编写服务方式：

(function(angular) {
    "use strict";
    angular.module("moduleName").service("controllerName",['$scope', '$rootScope', function($scope, $rootScope) {
        let vm = $scope.vm = {};
    }])
})(angular)

把服务模块作为参数传入controller中，进行调用

5、通过http调用后端服务被控制器使用

function loadFormData() {
    Dhttp.http({
        url: url.materialListUrl,
        method: 'get'
    }).then(function (data) {
        console.log(data);
        vm.files = data;
    });
}

6、数值运算，如加减乘除等

使用插值语法或指令绑定成一个js表达式即可

7、字符串操作，合并、大小写转换等

长度：str.length

查找字符串中的某个字符串：str.indexOf('alex')

检索字符串中的子符串：str.search('str')

提取子字符串：str.subString(0, 1)

替换字符串内容：str.replace("a", "A")

转成大写：str.toUpperCase()

转成小写：toLowerCase()

字符串拼接：str.concat("s", "b");

去除两端空白：str.trim()

提取指定下标字符：str.charAt()

字符串转成数组：str.split()

8、【过滤器】数字转为中文

过滤器可通过一个管道符| + 过滤器关键字

如转成大写：{{ lastName | lowercase }}

向指令添加过滤器：根据country排序names属性

ng-repeat="x in names | orderBy:'country'"

自定义过滤器：

var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
	$scope.array = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
});

// 根据下标返回对应的中文数字
app.filter("convert", function(){
	return function(number, array) {
		return array[number];
	}
});

// 在HTML模板中使用自定义的过滤器
<div ng-app="myApp" ng-controller="costCtrl">
	{{ 0 | convert : array }}
</div>

9、Switch模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
我喜欢的网站
<select ng-model="myVar">
  <option value="runoob">www.runoob.com
  <option value="google">www.google.com
  <option value="taobao">www.taobao.com
</select>

<hr>
<div ng-switch="myVar">
  <div ng-switch-when="runoob">
     <h1>菜鸟教程</h1>
     <p>欢迎访问菜鸟教程</p>
  </div>
  <div ng-switch-when="google">
     <h1>Google</h1>
     <p>欢迎访问Google</p>
  </div>
  <div ng-switch-when="taobao">
     <h1>淘宝</h1>
     <p>欢迎访问淘宝</p>
  </div>
  <div ng-switch-default>
     <h1>切换</h1>
     <p>选择不同选项显示对应的值。</p>
  </div>
</div>
<hr>

<p> ng-switch 指令根据当前的值显示或隐藏对应部分。</p>

</body>
</html>

10、定义路由的跳转逻辑

服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射

angular.module("myApp", ["ngRoute"])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.when("/home/:a", {
            //解析模板
            templateUrl: "home.html",
            controller: "homeController"
        });
        $routeProvider.when("/user/:n", {
            templateUrl: "user.html",
            controller: "userController"
        });
        //未定义时的默认路由，这个路由将会跳转到/home:a，undefined作为aaa传入
        //此处写/home/,/home,/home/:a，都不行
        $routeProvider.otherwise("/home/undefined");
    }])
    .controller("homeController", function($scope, $location,$routeParams) {
        $scope.mainModel = {
            "name": $routeParams.a
        };
        $scope.mainModel.goToUserView = function() {
            //replace防止浏览器通过历史记录回到该页面
            $location.path("/user/" + $scope.mainModel.name).replace();
        }
    })
    .controller("userController", function($scope, $location, $routeParams) {
        $scope.mainModel = {
            goBack : function() {
                $location.path("/home/" + $scope.mainModel.name);
                //当没有replace时可以通过下面的方式后退
                //window.history.go(-1);
            },
            name: $routeParams.n
        };
    })

11、实现根据路由进行页签处理

https://www.oschina.net/translate/angularjs-ui-router-nested-routes

12、自定义指令实现具有现实意义的场景

var app = angular.module("app",[]);
app.controller("directiveControl", function ($scope) {

});
// 衔接上面的代码
app.directive('testDirective', function() {
    // 将对象return出去
    return{
        restrict: 'E',// 指令类型  E：element A：attribute M：comment C: class
        template: '<div>我是指令生成的内容</div>';
        replace: true, //使用模板替换原始标记  指令内原本的数据将被清空
    }
});
// 使用指令
<test-directive></test-directive>

10、Vue的使用

1、全局安装vue-cli

# 1.检查node版本，因为Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)
node -v
# 2.检查镜像源，如果没有设置淘宝镜像源，可以设置一下
npm config get registry
# 3.全局安装vue-cli
npm install @vue/cli -g
# 4.检查是否安装成功
vue --version

2、创建项目

vue create projectName

3、项目的运行模式，如dev、test、product等

# 前提是package.json中的script配置项中配置了
"script": {
	"serve:dev": "vue-cli-service serve --model development",
	"serve:local": "vue-cli-service serve --model local",
	"serve:prod": "vue-cli-service serve --model prod"
}
# dev环境启动
npm run serve:dev
# local环境启动
npm run serve:local
# product环境启动
npm run serve:product

4、实现基于vue的表单输入界面，并将输入结果以json格式输出

<template>
    <div>
        message: <input type="text" v-model="message">
        <br>
        <button @click="showJsonMessage">输出</button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                message: ''
            }
        },
        methods: {
            showJsonMessage() {
                // 转成json输出
                console.log(JSON.stringify(this.message));
            }
        }
    }
</script>

<style scoped>

</style>

5、element-ui：容器、布局等内容的使用

官网：https://element.eleme.cn/#/zh-CN/component/tooltip

安装：

# 安装到dev依赖环境里
npm install element-ui --save-dev

引入项目中(在main.js文件中完整引入)：

import Vue from 'vue'
import App from './App.vue'
import store from "./vuex/store";
import VueRouter from "./router/index";
// 引入element组件和element样式
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;
// 应用element插件
Vue.use(ElementUI);
// 设置全局 baseUrl
Vue.prototype.$BASE_URL = "http://127.0.0.1:8080/api/";

new Vue({
    render: h => h(App),
    store: store,
    router: VueRouter, // 注册路由
    beforeCreate() {
        // 全局事件总线
        Vue.prototype.$bus = this;
    }
}).$mount('#app');

// 按需引入组件和样式
// 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
npm install babel-plugin-component --save-dev

常见的容器组件：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

例如：

<template>
    <div id="app">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <!--日期选择器-->
                <el-date-picker v-model="date" type="date" placeholder="选择日期"/>
    		</el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
				date: ""
            }
        }
    }
</script>
<style lang="less">
    #app {
        text-align: center;
    }
</style>

常见的布局方式：

element-ui中我通常使用el-row和el-col组件进行布局，并通过col组件的span属性进行布局控制，如

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

对齐方式

将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

例如

<el-row type="flex" class="row-bg">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7zf3v7a5-1669085534953)(C:\Users\laizhenghua\AppData\Roaming\Typora\typora-user-images\image-20211023112059367.png)]

代码实现

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

6、element-ui常规的表单输入组件的使用，如文本、选择等

表单输入组件el-input

name: <el-input type="text" v-model="name" placeholder="请输入内容"/>

禁用属性：disabled=“true”

可清空属性：clearable

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iNSvKBRl-1669085534953)(C:\Users\laizhenghua\AppData\Roaming\Typora\typora-user-images\image-20211023113806997.png)]

密码框：show-password

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

文本域：type=“textarea”

select选择器组件el-select

<el-select v-model="value" placeholder="请选择" clearable>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

禁用属性：disabled

可清空选择属性：clearable

7、element-ui页签、对话框、卡片、气泡等局部布局容器的使用

页签组件el-tag

<el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>

可关闭页签属性：closable

对话框组件el-dialog

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

visible属性：控制是否打开对话框

center属性：标题和底部可水平居中

卡片组件el-card

<el-card class="box-card">
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>

气泡确认框组件el-popconfirm

<el-popconfirm
  confirm-button-text='好的'
  cancel-button-text='不用了'
  icon="el-icon-info"
  icon-color="red"
  title="这是一段内容确定删除吗？">
  <el-button slot="reference">删除</el-button>
</el-popconfirm>

8、ant-design-vue容器、布局等内容的使用

安装：

npm install ant-design-vue --save-dev

引入(建议按需引入)：

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

使用：

import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS

栅格布局方式(官方地址：https://www.antdv.com/components/grid-cn/)：

栅格布局方式与element-ui类似，也是通过a-row和a-col组件配合实现！col的总合是24。通过span属性决定占用多少

<template>
  <div>
    <a-row>
      <a-col :span="12">
        col-12
      </a-col>
      <a-col :span="12">
        col-12
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        col-8
      </a-col>
      <a-col :span="8">
        col-8
      </a-col>
      <a-col :span="8">
        col-8
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        col-6
      </a-col>
      <a-col :span="6">
        col-6
      </a-col>
      <a-col :span="6">
        col-6
      </a-col>
      <a-col :span="6">
        col-6
      </a-col>
    </a-row>
  </div>
</template>

配合flex布局，指定子元素的排列方式

<a-row type="flex" justify="center" align="top">
    <a-col :span="4">
        <p class="height-100">
            col-4
        </p>
    </a-col>
    <a-col :span="4">
        <p class="height-50">
            col-4
        </p>
    </a-col>
    <a-col :span="4">
        <p class="height-120">
            col-4
        </p>
    </a-col>
    <a-col :span="4">
        <p class="height-80">
            col-4
        </p>
    </a-col>
</a-row>

Layout布局常见布局容器

<a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>Content</a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
</a-layout>

9、ant-design-vue常规的表单输入组件的使用，如文本、选择等

文本输入组件a-input

<a-input placeholder="Basic usage" v-model="usage"/>

<a-textarea
	placeholder="Autosize height with minimum and maximum number of lines"
	:auto-size="{ minRows: 2, maxRows: 6 }"
    v-model="message"
/>
<!--显示搜索中-->
<a-input-search placeholder="input search loading deault" loading />
<!--密码框-->
<a-input-password placeholder="input password" />

选择组件a-select、a-select-option

<div>
    <a-select default-value="lucy" style="width: 120px" @change="handleChange">
        <a-select-option value="jack">
            Jack
        </a-select-option>
        <a-select-option value="lucy">
            Lucy
        </a-select-option>
        <a-select-option value="disabled" disabled>
            Disabled
        </a-select-option>
        <a-select-option value="Yiminghe">
            yiminghe
        </a-select-option>
    </a-select>
    <a-select default-value="lucy" style="width: 120px" disabled>
        <a-select-option value="lucy">
            Lucy
        </a-select-option>
    </a-select>
    <a-select default-value="lucy" style="width: 120px" loading>
        <a-select-option value="lucy">
            Lucy
        </a-select-option>
    </a-select>
</div>

10、ant-design-vue页签、对话框、卡片、气泡等局部布局容器的使用

页签组件a-tag

<a-tag closable @close="preventDefault">
    Prevent Default
</a-tag>

<!--通过visible变量控制是否关闭-->
<a-tag v-model="visible" closable>
    Movies
</a-tag>

对话框组件a-modal

<a-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <p>{{ ModalText }}</p>
</a-modal>

<!--自定义样式 dialog-style -->
<a-modal
      title="20px to Top"
      :dialog-style="{ top: '20px' }"
      :visible="modal1Visible"
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
</a-modal>

卡片组件a-card

<a-card hoverable style="width: 240px">
    <img
      slot="cover"
      alt="example"
      src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
    />
    <a-card-meta title="Europe Street beat">
      <template slot="description">
        www.instagram.com
      </template>
    </a-card-meta>
</a-card>

气泡组件a-popconfirm

<a-popconfirm title="Are you sure？">
    <a-icon slot="icon" type="question-circle-o" style="color: red" />
    <a href="#">Delete</a>
</a-popconfirm>

11、安装使用全局组件，如Jquery、echarts等

Jquery全局使用：

1.安装Jquery

npm install jquery --save-dev

2.在vue.config.js中引入

const webpack = require("webpack");
module.exports = {
    //引入jquery
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    }
};

3.在需要使用的组件中引入Jquery

import $ from 'jquery';

console.log($);

echarts全局使用：

1.echarts安装

npm install echarts --save-dev

2.将echarts挂载在vue的原型上

main.js

import echarts from "echarts";

// 挂载在vue原型上，组件中通过$echarts使用
Vue.prototype.$echarts = echarts;

12、eslint的配置优化，使用部分eslint的功能

1.可以在eslintrc.js中对代码的格式进行一些配置 解决代码格式不符合规则的报错

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'indent': 'off',
        'space-unary-ops': 'off',             //关闭多余的空格检验
        'no-trailing-spaces': 'off',          //关闭无用的空格检测
        'semi': 'off',                        //关闭分号检测
        'space-before-function-paren': 'off',   //关闭function前的空格
        'no-multiple-empty-lines': 'off',
        'no-tabs': 'off',
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

为了代码的规范化项目开发完后，要把添加的这些属于自己编辑习惯的配置注释掉或者删除掉(上面代码中红色的部分)然后在命令行执行 npm run lint 对代码格式进行初始化（前提是在package.json中有对 lint 进行配置）

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --fix --ext .js,.vue src"
  },
...

https://link.zhihu.com/?target=https%3A//github.com/linxiaowu66/eslint-config-templates

13、开发通用的lib组件并发布npm仓库

1、首先要拥有npm的一个账号

2、新建一个文件夹mylib

3、初始化项目并设置包的参数

4、package name 方法名 version 版本号 description 描述 entry point 入口点 test command 测试命令指令 git repository git

5、新建一个index.js文件与 package.json 里面的main里面的 index.js 相匹配

6、在 index.js 中写入我们的方法名

7、npm install -g 检查是否报错

8、npm link 将项目与npm存储仓库关联起来

// 发布mylib文件
npm login // 输入登录名、密码、邮箱等

// 发布
npm publish
// 更新版本
npm version patch

11、Hibernate的使用

1、使用hibernate或Jpa实现对象的增删改查

增（Session的save()方法 – 自动提交事务，Sesstion的persist()不会自动提交事务，若对象已经有 id 了, 则不会执行 INSERT, 而抛出异常！！！）

@Test
public void testSave(){
    /*
        save()方法
        1、使临时对象转变为持久化对象
        2、在flush缓存时，会发送一条insert语句
 
    */
    Session session = HibernateUtil.getSession();

    User user = new User();
    user.setUsername("无情哈拉少");
    user.setPassword("123");

    System.out.println("临时状态：" + user);
    session.save(user); // 保存，注意我们在数据库里设置了 id 字段自增
    System.out.println("持久化状态：" + user);

    HibernateUtil.closeSession();
}

删（Session的delete()）

/*
delete()方法：
1、执行删除操作，只要OID和数据表中有一条记录对应，就会准备执行delete操作！
2、若OID咋数据表中没有对应的记录则抛出异常
 */
@Test
public void deleteTest(){
    User user = new User();
    user.setId(8);
    Session session = HibernateUtil.getSession();
    Transaction transaction = HibernateUtil.getTransaction(session);
    session.delete(user); // 删除游离对象
    transaction.commit();
    HibernateUtil.closeSession();
}

改（Session的update()或Session的saveOrUpdate()）

@Test
public void updateTest(){
    Session session = HibernateUtil.getSession();
    Transaction transaction = HibernateUtil.getTransaction(session);
    User user = session.get(User.class, 1);

    transaction.commit();
    HibernateUtil.closeSession();

    session = HibernateUtil.getSession();
    transaction = HibernateUtil.getTransaction(session);
    user.setUsername("alex"); // 此时user对象就变为游离状态，需要显示调用 update 方法
    session.update(user);
    transaction.commit();
    System.out.println(user);
}

查（Session的get()或load()）get是立即检索，而load是延迟检索

@Test
public void testGet(){
    Session session = HibernateUtil.getSession();
    User user = session.get(User.class, 1);
    session.close();
    // 即使Session已经关闭了，但是执行get方法时，对象已经加载了，所以可以打印出对象
    System.out.println(user);
}

2、使用hibernate或Jpa的注解进行实体定义

@Entity(name = "xxx") // 实体
@Table(name = "xxx") // 实体对应的数据表信息
@Id // 定义数据表主键映射信息，写在getter之前
@Basic // 表示一个简单的属性到数据库表的字段的映射,对于没有任何标注的getXxxx()方法,默认即为@Basic
@Column(name = "xxx") // 数据库表中该字段的详细定义,这对于根据JPA注解生成数据库表结构的工具非常有作用

3、使用hql或jpql进行查询

简单查询语句：

// 1.createQuery() 以hibernate生成的Bean为对象装入list返回
// 2.createSQLQuery() 以对象数组进行存储
@Test
public void createQueryTest() {
    Session session = HibernateUtils.getSession();
    Transaction tx = sesstion.beginTransaction();
    String sql = "from Customer"; // Customer是类名
    Query query = session.createQuery(sql);
    List<Customer> list = query.list();
    System.out.printLn(list);
    tx.commit();
    session.close();
}

占位符&传入参数：

@Test
public void createQueryTest() {
    Session session = HibernateUtils.getSession();
    Transaction tx = sesstion.beginTransaction();
    String sql = "select * from Customer where name like ?"; // Customer是类名
    Query query = session.createQuery(sql);
    List<Customer> list = query.setParameter(0, "%张%").list();
    System.out.printLn(list);
    tx.commit();
    session.close();
}

如果返回值只有一个，可以使用uniqueResult()：

@Test
public void uniqueResultTest() {
    Session session = HibernateUtils.getSession();
    Transaction tx = sesstion.beginTransaction();
    String sql = "select count(*) from Customer"; // Customer是类名
    Query query = session.createQuery(sql);
    Number number = (Number) query.uniqueResult();
    System.out.printLn(number);
    tx.commit();
    session.close();
}

条件查询+投影映射

@Test
public void conditionQueryTest() {
    Session session = HibernateUtils.getSession();
    Transaction tx = session.beginTransaction();
    String sql = "select s.name, s.sex from Student s where name like :name and sex = :sex";
    List<Object[]> students = (List<Object[]>) session.createQuery(sql).setParameter("name", "%张%").setParameter("sex", "男").list();
    System.out.printLn(students);
    tx.commit();
    session.close();
}

4、使用hbm.xml定义hibernate或jpa的实体

User.hbm.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
        "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
        "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">

<!--Mapper映射文件-->
<hibernate-mapping>
    <!-- 建立类与表的映射 -->
    <class name="com.howie.pojo.User" table="user">
        <!-- 建立类中的属性与表中的主键相对应 -->
        <id name="id" type="java.lang.Integer">
            <column name="id"/>
            <!-- 主键的生成策略，后面会讲，native:使用数据库本地生成策略 -->
            <generator class="native"/>
        </id>

        <!-- 建立类中的普通属性和表中的字段相对应 -->
        <property name="username" type="java.lang.String">
            <column name="username"/>
        </property>
        <property name="password" type="java.lang.String">
            <column name="password"/>
        </property>
    </class>
</hibernate-mapping>

12、Spring的使用

1、使用注解定义spring的bean

先要在Spring的配置文件中添加注解支持与注解扫描的包路径

<!--开启注解支持-->
<context:annotation-config/>
<!--指定要扫描的包，这个包下的注解就会生效-->
<context:component-scan base-package="com.howie.pojo"/>

常见注解

@Component
@Bean
@Controller
@Service
@Repository // dao层
@Configuration

2、使用xml文件定义spring的bean

<bean id="student" class="com.dist.entity.Student" scope="singleton">
    <property name="name" value="alex"/>
</bean>

当然还可以定义array、list、map、set等

3、通过注解引入已定义的bean

@Autowired // 按类型注入 @Autowired(required=false) 说明：false，对象可以为null

@Autowired
@Qualifier(value = "cat123") // 指明此属性注入的bean是cat123
private Cat cat;

@Resource // 默认是byName方式进行装配，如果没有匹配上按byType的方式自动装配

此注解并不是Spring的，而是Java的(import javax.annotation.Resource)

4、通过注解引入可能不存在的bean(接口已存在，实现类不存在)

@Autowired(required=false)

5、通过Spring容器通过接口或者名称获取Spring的bean

ApplicationContext context = new ClassPathXmlApplicationContext("userBean.xml");
context.getBean(Interface.class); // 通过接口
context.getBean("name"); // 通过名称

6、使用Spring的单例和多例的bean

xml配置文件方式scope="singleton"或scope="prototype"

<!--单例-->
<bean id="student" class="com.dist.entity.Student" scope="singleton">
    <property name="name" value="alex"/>
</bean>

<!--多例-->
<bean id="student" class="com.dist.entity.Student" scope="prototype">
    <property name="name" value="alex"/>
</bean>

注解方式

@Scope(value = "singleton") // 单例
@Scope(value = "prototype") // 多例

13、SpringMVC的使用

1、原生MVC的页面渲染

web.xml文本编写，配置前端控制器DispatcherServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--配置DispatcherServlet。这是SpringMVC的核心，叫前端控制器-->
    <servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--DispatcherServlet要绑定SpringMVC的xml配置文件-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <!--设置启动级别为1-->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--
      访问路径/与/*的区别：
      / ：只匹配请求路径，不会匹配jsp页面
      /* ：匹配所有资源
     -->
    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

编写SpringMVC 的配置文件springmvc-servlet.xml，配置【处理器映射器】、【处理器适配器】、【处理器适配器】

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://www.springframework.org/schema/beans/spring-beans.xsd">

    <!--处理器映射器 HandlerMapping-->
    <bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"/>
    <!--处理器适配器 HandlerAdapter-->
    <bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>
    <!--视图解析器 ViewResolver-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <!--前缀-->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!--后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
    <!--实现HandlerMapping接口的实现类BeanNameUrlHandlerMapping，通过bean寻找控制器-->
    <bean id="/hello" class="com.howie.controller.HelloController"/>
</beans>

编写控制器，装数据、封视图。控制器返回一个ModelAndView

public class HelloController implements Controller {

    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
        //ModelAndView 模型和视图
        ModelAndView mv = new ModelAndView();

        //封装对象，放在ModelAndView中。Model
        mv.addObject("msg","HelloSpringMVC!"); // springMVC也会把user对象存储到request域对象中
        //封装要跳转的视图，放在ModelAndView中
        mv.setViewName("hello"); // /WEB-INF/jsp/hello.jsp
        return mv;
    }
}

2、Rest服务的开发

路径变量传参，使用@PathVariable注解：

@Controller
public class RestFulController {
    @RequestMapping(path = "/add/{a}/{b}") // 映射访问路径
    public String test1(
        @PathVariable(name = "a") Integer a, 
        @PathVariable(name = "b") Integer b, 
        Model model){
        int sum = a + b;
        model.addAttribute("message","a + b = " + sum); // 把数据存入request域对象中
        return "test"; // /WEB-INF/jsp/test.jsp
    }
}

使用method属性指定请求类型：

Spring MVC 的 @RequestMapping 注解能够处理 HTTP 请求的方法, 比如 GET，PUT，POST，DELETE 以及 PATCH

@GetMapping
@PostMapping
@PutMapping
@DeleteMapping
@PatchMapping

3、Swagger的使用

常用注解：

@Api(tags = "xxx模块说明") // 写在模块类上
@ApiOperation("xxx接口说明") // 接口方法上
@ApiModel("xxxEntity说明") // 写在模型类上
@ApiModelProperty(value = "xxx属性说明", hidden = true)
@ApiParam("xxx参数说明") // 作用在参数、方法和字段上

Swagger实例Bean是Docket，所以通过配置Docket实例来配置Swaggger

@Bean
public Docket docket() {
   return new Docket(DocumentationType.SWAGGER_2)
      .apiInfo(apiInfo())
      .select()// 通过.select()方法，去配置扫描接口,RequestHandlerSelectors配置如何扫描接口
      .apis(RequestHandlerSelectors.basePackage("com.kuang.swagger.controller"))
      .build();
}

4、Webservice的搭建开发

JAX-WS(Java API For XML-WebService)：底层支持为JAXB。JAX-WS(JSR 224)，规范的API位于javax.xml.ws.*包

JAX-RS：JAX-RS是Java针对REST(RepresentationState Transfer)风格制定的一套Web服务规范。

Webservice是基于SOAP(Simple Object Access Protocol)协议，进行数据的传输

5、现有WebService的调用

14、AOP的使用

1、通过Aop记录方法调用日志

导入依赖：

<!--aspectjWeaver-->
<!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
<dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.9.5</version>
    <scope>runtime</scope>
</dependency>

编写后置增强类：

/**
 * @description: 增强类，后置通知
 * @author: laizhenghua
 * @date: 2020/11/16 18:52
 */
public class AfterLog implements AfterReturningAdvice {
    /*
    returnValue: 返回值
    method被调用的方法
    args 被调用的方法的对象的参数
	target 被调用的目标对象
     */
    public void afterReturning(Object returnValue, Method method, Object[] args, Object target) throws Throwable {
        System.out.println(target.getClass().getName() + "类，执行了方法" + method.getName() + "返回了" + returnValue);
    }
}

去spring的文件中注册，并实现aop切入实现：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xmlns:aop="http://www.springframework.org/schema/aop"
               xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        https://www.springframework.org/schema/aop/spring-aop.xsd">

<!--配置UserServiceImpl-->
<bean id="userService" class="com.howie.service.impl.UserServiceImpl"/>
<!--配置afterLog的bean-->
<bean id="afterLog" class="com.howie.log.AfterLog"/>
<!--实现方式1：使用Spring原生API接口，配置AOP，需要导入AOP的约束-->
<aop:config>
    <!--
        设置切入点。
        expression：表达式。
        execution(要执行的位置 * * * * *)
        -->
    <aop:pointcut id="pointcut" expression="execution(* com.howie.service.impl.UserServiceImpl.*(..))"/>
    <!--执行环绕通知-->
    <aop:advisor advice-ref="afterLog" pointcut-ref="pointcut"/>
</aop:config>
</beans>

2、通过拦截器记录请求日志

拦截器是SpringMVC框架独有的

拦截器只会对控制器中的方法进行拦截，对于静态资源拦截器是不会进行拦截的

拦截器也是AOP的一种实现

自定义拦截器，实现HandlerInterceptor接口，重写需要的方法

/**
 * 自定义拦截器
 */
public class MyInterceptor implements HandlerInterceptor {
    /**
     * 预处理：controller方法执行前。
     * return true 放行，执行下一个拦截器，如果没有执行controller中的方法
     * return false 不放行
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("controller 方法前，我就执行。");
        // 请求转发
        // request.getRequestDispatcher("/WEB-INF/pages/error.jsp").forward(request,response);
        return true;
    }
    
    // 后面两个方法，日志输出上用的比较多

    /**
     * 后处理方法：controller方法执行后，success.jsp 之前
     */
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("controller 方法后，我就执行。");
        // 请求转发
        // request.getRequestDispatcher("/WEB-INF/pages/error.jsp").forward(request,response);
        /*
        预处理方法和后处理方法都可以指定跳转方法
         */
    }

    /**
     * 最后执行，在success.jsp执行完毕后执行。
     */
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("最后执行");
    }
    /*
    controller 方法前，我就执行。
    testInterceptor is run ...
    controller 方法后，我就执行。
    success.jsp is run ...
    最后执行
     */
}

在springmvc.xml中配置拦截器类

<!--配置拦截器-->
<mvc:interceptors>
    <!--可配置多个拦截器-->
    <mvc:interceptor>
        <!--要拦截的具体方法。/user/* 表示拦截user模块下的所有方法，/** 表示拦截所有方法-->
        <mvc:mapping path="/**"/>
        <!--不要拦截的具体方法
        <mvc:exclude-mapping path=""/>-->
        <!--配置拦截器对象-->
        <bean class="com.howie.interceptor.MyInterceptor"/>
    </mvc:interceptor>
</mvc:interceptors>
<!--配置spring开启注解mvc的支持-->
<mvc:annotation-driven/>

15、zookeeper的使用

1、下载并安装zookeeper

官网安装：https://archive.apache.org/dist/zookeeper/zookeeper-3.5.7/

# 解压至指定目录
tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz -C /opt/module
mv apache-zookeeper-3.5.7-bin/ apache-zookeeper-3.5.7
mv zoo_sample.cfg zoo.cfg
mkdir zkData

2、设置端口号

vim zoo.cfg
clientPort=2181

3、设置数据文件的路径

dataDir=/opt/module/apache-zookeeper-3.5.7/zkData

4、相关操作命令使用

// 使用ls命令查看当前znode的子节点， -s 附加次级信息
[zk: localhost:2181(CONNECTED) 2] ls -s /
[zookeeper]cZxid = 0x0
ctime = Thu Jan 01 08:00:00 CST 1970
mZxid = 0x0
mtime = Thu Jan 01 08:00:00 CST 1970
pZxid = 0x0
cversion = -1
dataVersion = 0
aclVersion = 0
ephemeralOwner = 0x0
dataLength = 0
numChildren = 1

create // 普通创建，-s 含有序列，-e 临时（重启或者超时消失）
    
get path // 获得节点的值
    
set // 设置节点状态
stat // 查看节点状态
delete // 删除节点
deleteall // 递归删除节点

16、Redis的使用

1、下载安装redis

官网：https://redis.io/download

解压：tar -zxvf redis-6.0.9.tar.gz

解压后会得到redis的配置文件redis.conf，我们通过此配置文件启动redis服务端

基本的环境安装(gcc)

# 依次执行以下命令
# 1.安装gcc
yum -y install centos-release-scl
yum -y install devtoolset-9-gcc devtoolset-9-gcc-c++ devtoolset-9-binutils
source /opt/rh/devtoolset-9/enable
echo “source /opt/rh/devtoolset-9/enable” >>/etc/profile

# 2.编译
make
# 3.安装
make install # 安装，将redis的命令安装到/usr/local/bin/

cp /opt/module/redis-6.0.9/redis.conf redis.conf

启动

redis-server redis.conf

redis-cli -p 6379

关闭

pkill redis-server

2、设置端口号

vim redis.conf

port 6379 # 端口设置

3、设置账户密码

方式1：修改配置文件

vim redis.conf

# 命令模式 /requirepass 直接定位
requirepass 123 # 原本是注释的

方式2：使用config set requirepass "xxx"命令

redis-cli -p 6379

# 设置密码，设置完后，记得重启Redis
127.0.0.1:6379> config set requirepass "123456"
OK
# 设置以后所有命令都需要登录才可以使用
127.0.0.1:6379> shutdown
(error) NOAUTH Authentication required.
# 登录
127.0.0.1:6379> auth 123456 # 验证服务器命令
OK
# 获取密码
127.0.0.1:6379> config get requirepass
1) "requirepass"
2) "123456"

4、设置远程访问支持

1. 将bind配置项注释掉或改为bind 0.0.0.0

2. protected-mode 从yes改为no

3. 设置密码requirepass 101323

5、相关操作命令使用

select xx // 切换数据库
keys * // 查看当前数据库所有key
flushdb // 清空数据库
set key value // 插入一条记录
exists key // 判断key是否存在
expire key xx // 设置key存活时间，单位是秒
type key // 查看当前key的数据类型
append key "xxx" // 追加字符，如果key不存在则与set效果一致
strlen key // 获取key字符串长度
getrange key 0 1 // 切片获取子字符串相当于[0, 1]
lpush key value // 从左边插入数据

17、Nginx的使用

1、安装部署

首先需要安装pcre依赖，下载 pcre tar.gz压缩包（可从pcre官网中下载），并把压缩文件放入linux系统中。并进行解压

tar -xvf pcre-8.37.tar.gz -C /usr/src

编译与检查环境（进入pcre解压目录，执行./configure）

# 编译与检查环境
[howie@laizhenghua src]# cd pcre-8.37/
[howie@laizhenghua pcre-8.37]# ./configure

安装pcre

# 编译与安装
[howie@laizhenghua pcre-8.37]# make && make install

查看pcre依赖是否安装成功

[root@laizhenghua /]# pcre-config --version
8.37

安装openssl与zlib等其他依赖（使用yum命令安装，没必要像安装pcre一样手动编译与安装）

[howie@laizhenghua pcre-8.37]$ sudo yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel

最后安装Nginx

解压nginx压缩包

[howie@laizhenghua soft]$ cd nginx
[howie@laizhenghua nginx]$ ls
nginx-1.12.2.tar.gz  pcre-8.37.tar.gz
# 解压压缩包
[howie@laizhenghua nginx]# sudo tar -xvf nginx-1.12.2.tar.gz -C /usr/src

进入解压缩目录，执行./configure

[howie@laizhenghua src]# cd nginx-1.12.2/
[howie@laizhenghua nginx-1.12.2]# ./configure

再次执行make && make install

[howie@laizhenghua nginx-1.12.2]# make && make install

所有东西安装好后，会在usr/local目录下多出来一个文件夹nginx。我们可以查看是否安装成功

# 启动Nginx
[root@VM-0-17-centos sbin]# pwd
/usr/local/nginx/sbin
[root@VM-0-17-centos sbin]# ./nginx
[root@VM-0-17-centos sbin]# ps -ef | grep nginx

# 关闭Nginx
[root@laizhenghua sbin]# ./nginx -s stop

# 重新加载Nginx
[root@laizhenghua sbin]# ./nginx -s reload

2、修改配置设置监听端口和路由，实现反向代理

修改监听的端口，修改配置文件的http模块，默认监听的端口是80，默认监听的路由时localhost

server {
        listen       80; # 更改监听的端口
        server_name  localhost;
}http{
	...
	server {
	   listen       80;
	   server_name  localhost;
	
	   #charset koi8-r;
	
	   #access_log  logs/host.access.log  main;
	   # 更改监听的路由，例如  ~ /edu/ 
	   location / {
	       root   html;
		   proxy_pass http://www.laizhenghua.cn:8080; # 加上此属性，即可完成反向代理
	       index  index.html index.htm;
	   }
	   ...
}

反向代理配置示例

http{
	...
	server {
	   listen       80;
	   server_name  localhost;
	
	   #charset koi8-r;
	
	   #access_log  logs/host.access.log  main;
	
	   location / {
	       root   html;
		   proxy_pass http://www.laizhenghua.cn:8080; # 加上此属性，即可完成反向代理
	       index  index.html index.htm;
	   }
	   ...
}

配置解释：假设localhost是一个正在运行的一个应用服务，访问localhost的80端口下的路径/时，会代理至http://www.laizhenghua.cn:8080

18、Docker的使用

1、在windows系统中安装DockerDeskto和在linux系统中安装docker-ce

安装DockerDeskto

下载之前需要先注册一个 Docker Hub的账号

https://hub.docker.com/editions/community/docker-ce-desktop-windows

双击下载的Docker for Windows Install.exe开始安装。一路Next，点击Finish完成安装。默认安装的时候Docker Desktop的启动容器是Linux Container，可以在安装之后再选择为Windows Container，或者在安装的时候直接勾选Windows Container的Checkbox。

安装docker-ce

环境准备，检查Linux内核、Docker的安装需要Linux内核在3.0以上

uname -r

1、卸载旧版本

#1.卸载旧版本
yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2、使用yum命令安装yum-utils

yum install -y yum-utils

3、设置阿里云镜像仓库

yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo # 默认是国外的非常慢
    #推荐使用国内的
yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4、安装docker-ce

#更新yum软件包索引
yum makecache fast
#4.安装docker相关的 docker-ce 社区版 而ee是企业版
yum install docker-ce docker-ce-cli containerd.io

2、了解docker的基本命令

attach    Attach to a running container        #当前she11下attach 连接指定运行镜像
build    Build an image from a Dockerfile        #通过Dockerfile定制镜像
commit    Create a new image from a container changes        #提交当前容器为新的镜像
cp    Copy files/folders from the containers filesystem to the host path        #从容器中拷贝指定文件或者目录到宿主机中
create    Create a new container        #创建一个新的容器，同run,但不启动容器
diff    Inspect changes on a container's filesys tem        #查看docker 容器变化
events    Get rea1 time events from the server        #从docker 服务获取容器实时事件
exec    Run a command in an existing container        #在已存在的容器上运行命令
export    Stream the contents of a container as a tar archive        #导出容器的内容流作为一个tar 归档文件[对应import ]
history    show the history of an image        #展示一个镜像形成历史
images    List images        #列出系统当前镜像
import    Create a new filesystem image from the contents of a tarba1l     #从tar包 中的内容创建-一个新的文件系统映像[对应export]

info    Display system-wide informati on        #显示系统相关信息
inspect    Return 1ow-1evel information on a container        #查看容器详细信息
kill    Ki11 a running container        # kill指定docker容器
load    Load an image from a tar archive        #从一个tar包中加载一个镜像[对应save]
login    Register or Login to the docker registry server        #注册或者登陆一个docker源服务器
logout    Log out from a Docker registry server        #从当前Docker registry 退出
logs    Fetch the 1ogs of a container        #输出当前容器日志信息
port    Lookup the public-facing port which is NAT-ed to PRIVATE_ PORT    #查看映射端口对应的容器内部源端口

pause    Pause a11 processes within a container        #暂停容器
ps    List containers        #列出容器列表
pull    Pull an image or a repository from the docker registry server     # 从docker镜像源服务器拉取指定镜像或者库镜像
push    Push an image or a repository to the docker registry server        #推送指定镜像或者库镜像至docker源服务器
restart    Restart a running container        #重启运行的容器
rm    Remove one or more containers    #移除一个或者多个容器
rmi    Remove one or more i mages        #移除一个或多个镜像[无容器使用该镜像才可删除，否则需删除相关容才可继续或-f强制删除]

run    Run a command in a new container        #创建一个新的容器并运行一个命令
save    Save an image to a tar archive    #保存一个镜像为一个tar包[对应1oad]
search    Search for an image on the Docker Hub        #在docker hub中搜索镜像
start    Start a stopped containers        #启动容器
stop    Stop a running containers        #停止容器
tag    Tag an image into a repository    #给源中镜像打标签
top    Lookup the running processes of a container    #查看容器中运行的进程信息
unpause    Unpause a paused container        #取消暂停容器
version    Show the docker vers ion informati on        #查看docker版本号
wait     Block uyntil a container stops，then print its exit code    #截取容器停止时的退出状态值

启动与关闭

# 启动docker
systemctl start docker
# 关闭docker
systemctl stop docker
# 重启docker
system restart docker

3、使用docker安装nginx、zookeeper、redis、tomcat镜像

安装Nginx

# 搜索nginx镜像
docker search nginx
# nginx镜像文件拉取
docker pull nginx:1.10
# 查看镜像
docker images

# 运行nginx
docker run -d --name nginx01 -p 3344:80 nginx

安装其他中间件也是如此

19、任务调度中心

1、安装部署

dist-task拷贝到代码目录下，纳入svn管理

在idea中导入dist-task模块，刷新maven依赖！

在dist-task\doc\db目录下找到相应的数据sql，选择实例库或者单独建库中执行

更改配置文件（task-admin/task-executor）

task-admin：修改application.properties端口号与数据库连接信息

task-executor：修改xxl-job-executor.properties任务调度中访问路径

maven编译打包，部署在tomcat即可

2、配置调度任务

20、PLSQL

PLSQL分为三个部分：声明部分、可执行部分、异常处理部分

DECLARE 
	-- LOCAL VARIABLE HERE
	NUM INTEGER;
BEGIN
	-- TEST STATEMENTS HERE
END;

存储过程

CREATE OR REPLACE PROCEDURE 过程名称(参数列表) IS
BEGIN
	...
END 过程名称;

EXEC 过程名称;

视图

END

END