HTML前端笔记Day10

一，Maven

1,概述

目前我们管理jar包的方式: 搜jar包 , 下载 , 存放jar包 , 导入jar包, 编译jar包…太复杂
用Maven来管理jar包,帮我们处理以上所有流程.

1.仓库 

远程仓库/中央仓库: 本质上就是一个 国外的 网址
镜像仓库: 本质上就是一个 国内的 网址,网站上存了去中央仓库下载好的jar包,常用的是阿里云
本地仓库: 就是你在电脑里创建的一个文件夹,存放从镜像仓库中下载的jar包D:\Java\maven\resp

2,坐标: 能够快速定位jar包 

groupId: 组id,通常值是公司域名
artifactId: 项目id,通常值是项目名称
version: 版本

3.依赖 

项目的运行需要依赖jar包,jar包间也有依赖关系.
使用dependency来指定需要的jar包坐标

4.命令

clean: 清除maven缓存
install: 安装

2,使用步骤

1, 解压apache-maven-3.6.3.rar

2, 打开解压好的文件夹,里面有一个conf,再里面有一个settings.xml

3, 在settings.xml中进行配置, 镜像仓库和本地仓库

<?xml version="1.0" encoding="UTF-8"?>

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<!--
 | This is the configuration file for Maven. It can be specified at two levels:
 |
 |  1. User Level. This settings.xml file provides configuration for a single user,
 |                 and is normally provided in ${user.home}/.m2/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -s /path/to/user/settings.xml
 |
 |  2. Global Level. This settings.xml file provides configuration for all Maven
 |                 users on a machine (assuming they're all using the same Maven
 |                 installation). It's normally provided in
 |                 ${maven.conf}/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -gs /path/to/global/settings.xml
 |
 | The sections in this sample file are intended to give you a running start at
 | getting the most out of your Maven installation. Where appropriate, the default
 | values (values used when the setting is not specified) are provided.
 |
 |-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ${user.home}/.m2/repository 
    -->
  <localRepository>D:\Java\maven\resp</localRepository>


  <!-- interactiveMode
   | This will determine whether maven prompts you when it needs input. If set to false,
   | maven will use a sensible default value, perhaps based on some other setting, for
   | the parameter in question.
   |
   | Default: true
  <interactiveMode>true</interactiveMode>
  -->

  <!-- offline
   | Determines whether maven should attempt to connect to the network when executing a build.
   | This will have an effect on artifact downloads, artifact deployment, and others.
   |
   | Default: false
  <offline>false</offline>
  -->

  <!-- pluginGroups
   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
   |-->
  <pluginGroups>
    <!-- pluginGroup
     | Specifies a further group identifier to use for plugin lookup.
    <pluginGroup>com.your.plugins</pluginGroup>
    -->
  </pluginGroups>

  <!-- proxies
   | This is a list of proxies which can be used on this machine to connect to the network.
   | Unless otherwise specified (by system property or command-line switch), the first proxy
   | specification in this list marked as active will be used.
   |-->
  <proxies>
    <!-- proxy
     | Specification for one proxy, to be used in connecting to the network.
     |
    <proxy>
      <id>optional</id>
      <active>true</active>
      <protocol>http</protocol>
      <username>proxyuser</username>
      <password>proxypass</password>
      <host>proxy.host.net</host>
      <port>80</port>
      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
    </proxy>
    -->
  </proxies>

  <!-- servers
   | This is a list of authentication profiles, keyed by the server-id used within the system.
   | Authentication profiles can be used whenever maven must make a connection to a remote server.
   |-->
  <servers>
    <!-- server
     | Specifies the authentication information to use when connecting to a particular server, identified by
     | a unique name within the system (referred to by the 'id' attribute below).
     |
     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are
     |       used together.
     |
    <server>
      <id>deploymentRepo</id>
      <username>repouser</username>
      <password>repopwd</password>
    </server>
    -->

    <!-- Another sample, using keys to authenticate.
    <server>
      <id>siteServer</id>
      <privateKey>/path/to/private/key</privateKey>
      <passphrase>optional; leave empty if not used.</passphrase>
    </server>
    -->
  </servers>

  <!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   |
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
     -->
      <!-- 达内私服地址 -->
	<!--<mirror>
		<id>nexus</id>
		<name>Tedu Maven</name>
		<mirrorOf>*</mirrorOf>
		<url>http://maven.tedu.cn/nexus/content/groups/public/</url>
	</mirror>-->

	<!--阿里私服地址-->
	<mirror>
		<id>ali</id>
		<name>ali Maven</name>
		<mirrorOf>*</mirrorOf>
		<url>https://maven.aliyun.com/repository/public/</url>
	</mirror>
	<!--
	<mirror>
        <id>nexus-aliyun</id>
        <mirrorOf>*</mirrorOf>
        <name>Nexus aliyun</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public</url>
 	</mirror> 
 	<mirror>
	  <id>aliyunmaven</id>
	  <mirrorOf>*</mirrorOf>
	  <name>阿里云公共仓库</name>
	  <url>https://maven.aliyun.com/repository/public</url>
	</mirror>
	-->
  </mirrors>

  <!-- profiles
   | This is a list of profiles which can be activated in a variety of ways, and which can modify
   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
   | specific paths and repository locations which allow the build to work in the local environment.
   |
   | For example, if you have an integration testing plugin - like cactus - that needs to know where
   | your Tomcat instance is installed, you can provide a variable here such that the variable is
   | dereferenced during the build process to configure the cactus plugin.
   |
   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
   | section of this document (settings.xml) - will be discussed later. Another way essentially
   | relies on the detection of a system property, either matching a particular value for the property,
   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a
   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
   | Finally, the list of active profiles can be specified directly from the command line.
   |
   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
   |       repositories, plugin repositories, and free-form properties to be used as configuration
   |       variables for plugins in the POM.
   |
   |-->
  <profiles>
    <!-- profile
     | Specifies a set of introductions to the build process, to be activated using one or more of the
     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
     | or the command line, profiles have to have an ID that is unique.
     |
     | An encouraged best practice for profile identification is to use a consistent naming convention
     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
     | This will make it more intuitive to understand what the set of introduced profiles is attempting
     | to accomplish, particularly when you only have a list of profile id's for debug.
     |
     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
    <profile>
      <id>jdk-1.4</id>

      <activation>
        <jdk>1.4</jdk>
      </activation>

      <repositories>
        <repository>
          <id>jdk14</id>
          <name>Repository for JDK 1.4 builds</name>
          <url>http://www.myhost.com/maven/jdk14</url>
          <layout>default</layout>
          <snapshotPolicy>always</snapshotPolicy>
        </repository>
      </repositories>
    </profile>
    -->

    <!--
     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
     | might hypothetically look like:
     |
     | ...
     | <plugin>
     |   <groupId>org.myco.myplugins</groupId>
     |   <artifactId>myplugin</artifactId>
     |
     |   <configuration>
     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
     |   </configuration>
     | </plugin>
     | ...
     |
     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
     |       anything, you could just leave off the <value/> inside the activation-property.
     |
    <profile>
      <id>env-dev</id>

      <activation>
        <property>
          <name>target-env</name>
          <value>dev</value>
        </property>
      </activation>

      <properties>
        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
      </properties>
    </profile>
    -->
    
  </profiles>

  <!-- activeProfiles
   | List of profiles that are active for all builds.
   |
  <activeProfiles>
    <activeProfile>alwaysActiveProfile</activeProfile>
    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
  </activeProfiles>
  -->
</settings>

3,把Maven整合到IDEA中

二,在IDEA中创建Maven工程

1,步骤

File -New -Project -选中Maven -next -设置项目名称并设置公司域名 - Finish

2,项目结构

 3,配置maven

 三,使用Maven工程

1,修改pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>cn.tedu</groupId>
    <artifactId>cgb2109maven02</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--添加jar包的依赖-->
    <dependencies>
        <!--添加jdbc的-->
        <dependency>
            <!--组id,通常是公司的域名-->
            <groupId>mysql</groupId>
            <!--项目id,通常是项目名称-->
            <artifactId>mysql-connector-java</artifactId>
            <!--指定jar包的版本号 5.1.48或者8.0.21,参考数据库的版本-->
            <version>5.1.48</version>
        </dependency>
    </dependencies>
</project>

 2,创建测试类

 

package cn.tedu.test;
//测试 jdbc:导入jar包
//以前:找到jar包,复制到工程中,编译jar包
//现在:直接在pom.xml文件中,添加了jar包的依赖,maven自动下载自动保存自动编译
public class Test1 {
    public static void main(String[] args) throws ClassNotFoundException {
        //1,注册驱动
        Class.forName("com.mysql.jdbc.Driver");
        System.out.println(100);
    }
}

 扩展1:Filter过滤器

1,概述

用来过滤请求或者响应
当A请求B时,可以在中间添加一个过滤器
当A给B做出响应时,可以在中间添加一个过滤器

2,使用步骤 

1, 创建类implements Filter接口
2, 重写抽象方法doFilter
3, 能否触发过滤器

3,创建过滤器 

package cn.tedu.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
//创建过滤器:implements Filter+重写抽象方法
@WebFilter("/*")//拦截所有请求
public class Filter1 implements Filter {
    //销毁,执行1次
    public void destroy() {
    }
    //类似于Servlet的service(),会被执行多次
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("过滤器开始执行任务~~");
        chain.doFilter(req, resp);//放行,解除阻塞状态
    }
    //初始化,执行1次
    public void init(FilterConfig config) throws ServletException {
    }
}

4,测试

直接浏览器访问Servlet就可以触发过滤器的规则

5,Filter生命周期

package cn.tedu.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
//创建过滤器:implements Filter+重写抽象方法
@WebFilter("/*")//拦截所有请求
public class Filter1 implements Filter {
    //第三阶段,销毁阶段,Filter会自动调用destroy(),只会执行1次
    public void destroy() {
        System.out.println("filter被销毁~~~");
    }
    //第二阶段,类似于Servlet的service()服务阶段,会被Filter执行多次
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("过滤器开始执行任务~~");
        chain.doFilter(req, resp);//放行,继续访问目标资源,否则目标资源无法执行
    }
    //第一阶段,初始化阶段,Filter会自动调用init(),只会执行1次
    public void init(FilterConfig config) throws ServletException {
        System.out.println("filter被初始化完成~~~");
    }
}

6,测试

 7,过滤器的匹配规则

 扩展2:ElementUI

1,下载

E:\workspace\vue\jt>npm i element-ui -S   #参考官网的安装命令

 

 2,修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入了ElementUI相关的资源
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3,使用ElementUI,修改Person.vue文件

<template>
  <div>
      {{msg}}
      <!-- 1,el-button组件用来实现按钮的功能,
      type用来指定按钮的颜色,round是圆角,circle是圆形,icon是给按钮加图标-->
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>

      <!-- 2.图标,class用来指定图标的名字-->
      <i class="el-icon-share"></i>
      <i class="el-icon-star-off"></i>

      <!-- 3.el-input是输入框,placeholder是输入框的提示信息,
        v-model是双向绑定,可以获取指定变量的值也可以修改值
      -->
      <el-input placeholder="请在这里输入..." v-model="msg"></el-input>
  </div>
</template>
<script>
//表明 这个组件可以导出
export default{
    name:'Person',//组件名
    data(){
      return{
        msg :'hello vue project~'
      }
    }
}
</script>

<style>
</style>

4,测试

重启Vue项目,然后直接访问http://localhost:8080/#/ 看看元素成功展示就可以了.

 

 组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/button