cgb2106-day12

一,ElementUI的表單

–1,測驗

<template>
  <h1>
    {{msg}}
    <!-- el-form表單 ,用于提交資料,:model用來獲取指定的資料-->
    <el-form :model="goods">
      <!--el-form-item表單項,label是名稱 -->
      <el-form-item label="標題">
        <!-- el-input是輸入框,placeholder是提示資訊,v-model雙向系結-->
        <el-input placeholder="請輸入標題" v-model="goods.title"></el-input>
      </el-form-item>
      <el-form-item label="賣點">
         <el-input placeholder="請輸入賣點" v-model="goods.sell"></el-input>
      </el-form-item>
      <el-form-item label="價格">
         <el-input placeholder="請輸入價格" v-model="goods.price"></el-input>
      </el-form-item>
      <el-form-item label="詳情">
         <el-input placeholder="請輸入詳情" v-model="goods.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save()">保存</el-button>
      </el-form-item>
    </el-form>

    <!-- el-link超鏈接,href設定網址,target設定打開方式,type就是顏色-->
    <el-link href="#" target="_blank" type="success">超鏈接</el-link>
    <!-- el-radio單選框,v-model是雙向系結,是指把label的值交給msg去存-->
    <el-radio v-model="msg" label="1">單選框</el-radio>

    <!-- 1.圖示的效果-->
     <i class="el-icon-delete-solid"></i>
     <i class="el-icon-phone-outline"></i>
     <i class="el-icon-phone-outline"></i>

    <!--
        2.layout柵欄的效果
        el-row是一行,一行默認是24列,el-col是一列,:span可以自定義合并的列數
    -->
    <el-row>
      <el-col :span="24">hello</el-col>
    </el-row>
    <el-row>
      <el-col :span="8">hello</el-col>
      <el-col :span="8">hello</el-col>
      <el-col :span="8">hello</el-col>
    </el-row>
   <!--
        3.el-button按鈕的效果
         type可以修飾按鈕的顏色,icon按鈕也可以加圖片,circle是一個圓形
   -->
    <el-button type="primary">按鈕1</el-button>
    <el-button icon="el-icon-share" circle type="warning"></el-button>

    <!--
        4.el-input輸入框的效果
        placeholder是提示資訊,v-model體現了雙向系結,clearable可清空,show-password密碼輸入框
    -->
    <el-input placeholder="請輸入用戶名" v-model="msg" ></el-input>
    <el-input placeholder="請輸入用戶名" v-model="msg" show-password></el-input>
    <el-input placeholder="請輸入用戶名" v-model="msg" clearable></el-input>
    <!--
        5.el-table表格的效果
        el-table-column 表格里的列,label是列名
        想要給表格準備資料,資料必須放data里
        :data是要獲取啥資料 ,prop是要獲取哪個屬性的值
        stripe實作斑馬紋的表格
    -->
    <el-table :data="arr" stripe>
      <el-table-column label="編號" prop="id"></el-table-column>
      <el-table-column label="品牌" prop="pinpai"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>


  </h1>
   <!-- <i class="el-icon-edit"></i>  只能有一個根元素-->
</template>

<script>
  /* 支持匯出的自定義組件*/
  export default{
    name : 'Car',
    data(){
      return{
        //給表單準備資料
        goods :{
            title: '華為Meta50',
            sell: '便宜,5G',
            price: '9.9',
            desc: '麒麟2000'
        }
        ,
        msg : "hello componets~~",
        // 給表格準備多個資料
        arr : [
          {
            id : '001',
            pinpai : '蜜雪冰城',
            desc : '你愛我我愛你蜜雪冰城甜蜜蜜'
          },
          {
            id : '002',
            pinpai : '鴻星爾克',
            desc : 'to be no.1'
          }
        ]
      }
    }
    ,
    methods:{//定義函式
      save(){
        alert("保存成功");
      }
    }
  }
</script>

<style>
</style>

–2,效果

二,Maven

–1,概述

用來下載并且管理jar包的工具,用來構建專案的方式
倉庫:
中央倉庫/遠程倉庫: 本質上就是一個國外的網址
鏡像倉庫: 其實就是一個國內的網址,人家從中央倉庫下載好了jar包,你可以直接用
本地倉庫: 其實就是你自己定的一個檔案夾的位置,用來存jar包的位置
依賴:
Maven會自動下載并管理相關的jar
坐標:
通過Maven下載很多的jar包,唯一的定位方式就是使用坐標.
GroupId: 通常指定組,值一般是指公司的域名
ArtifactId: 通常專案名稱
Version: 是指版本號
命令:
maven提供了很多命令,常用的有clean , install

–2,使用Maven

1,解壓Maven的壓縮包
2,找到conf檔案夾里的settings.xml檔案,修改
3,修改兩個地方:
本地倉庫: 指定一個jar包的存放路徑
鏡像倉庫: 指定一個從哪里下載jar包的網址
4,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,IDEA里配置Maven

1,找到Maven設定的位置: File-Settings-選Builder,execution…-Build Tools-選擇Maven
2,配置資訊:
指定maven解壓的位置
指定解壓檔案里的conf/settings.xml檔案
指定本地倉庫(IDEA自動完成)
3,以上操作,避免了jar包自動下載到默認位置C:\Users\Administrator.m2\repository占用系統空間的現象

–4,創建Maven專案

1,File-New-Project-選擇Maven-next-輸入工程名/GroupId-ok
2,通常創建好專案以后,第一步就是配置Maven,不然就把jar包都下載到了C盤.
3,IDEA里配置Maven(同上)

–5,添加jar包的依賴

1,修改pom.xml檔案,使用dependencies標簽,引入各種jar包.
2,指定jar包的坐標,Maven會自動下載.
3,檢查本地倉庫

三,Spring Boot

–1,概述

是一個Maven專案的延伸,也擁有pom.xml
優勢: 簡化了Maven的操作 , 嵌入了Tomcat

–2,創建Spring Boot專案

1, File-New-Project-選擇Spring Initlize-next-輸入Group名和Artifact名和選擇java8
-next-選中Spring(Spring Web)-next-ok

2, 配置Maven
3,檢查:

–3,給服務器添加資源

package cn.tedu.cgb2106boot01;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloBoot {

    @RequestMapping("abc")
    public String hello(){
        return "hello spring boot";
    }

}

–4,測驗

1,開啟服務器(運行main方法)
2,打開瀏覽器訪問:
http://localhost:8080/abc
本機 埠號 要訪問的資源