cgb2108-day15

一,ElementUI

–1,測驗

<template>
  <div>
    {{name}}
    <!-- 1.輸入框
      el-input表示一個輸入框,v-model表示雙向系結,placeholder輸入框的提示
      clearable可清空的輸入框,show-password自動加密的輸入框
    -->
    <el-input placeholder="請輸入..." v-model="name" clearable show-password></el-input>
    <!-- 2.單選框
      el-radio是一個單選框,label給選項設定值,v-model是雙向系結和sex的值系結
    -->
    <el-radio v-model="sex" label="1">男</el-radio>
    <el-radio v-model="sex" label="2">女</el-radio>
    <!-- 3.多選框el-checkbox
      v-model雙向系結,選中的值和checked屬性系結
    -->
    <el-checkbox v-model="checked">爬山</el-checkbox>
    <!-- 4.表格
      el-table表示表格,el-table-column是列,
      :data是系結要獲取誰的資料,label是列名,prop是要獲取的具體資料(key)
    -->
    <el-table :data="tabledata">
      <el-table-column label="編號" prop="id"></el-table-column>
      <el-table-column label="標題" prop="title"></el-table-column>
      <el-table-column label="賣點" prop="sell"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>
     <!-- 5.表單
      el-form是表單用來提交資料,el-form-item是表單項,el-input是輸入框,el-button是按鈕
      :model是表單要獲取的資料,label是表單項的名字,placeholder是提示,v-model是雙向系結
      按鈕的type屬性用來指定顏色,@click屬性給按鈕添加點擊事件(在methods里提供函式)
    -->
    <el-form :model="formdata">
      <el-form-item label="標題">
        <el-input placeholder="請輸入標題..." v-model="formdata.title"></el-input>
      </el-form-item>
      <el-form-item label="賣點">
        <el-input placeholder="請輸入賣點..." v-model="formdata.sell"></el-input>
      </el-form-item>
      <el-form-item label="價格">
        <el-input placeholder="請輸入價格..." v-model="formdata.price"></el-input>
      </el-form-item>
      <el-form-item label="詳情">
        <el-input placeholder="請輸入詳情..." v-model="formdata.desc"></el-input>
      </el-form-item>
      <!-- 提交按鈕-->
      <el-form-item>
        <el-button type="success" @click="save()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  name:'person',
  data(){
    return{
      name:'jack',
      sex: "1" ,//默認選中男
      hobby:'',
      checked:true ,//默認選中
      tabledata:[  //給表格準備要展示的資料
        {
          id:100,
          title:'鴻星爾克',
          sell:'國潮',
          desc:'to be no.1'
        },
        {
          id:200,
          title:'安踏',
          sell:'國貨之光',
          desc:'永不止步'
        }
      ],
      formdata:{  //給表單準備要展示的資料
        title:'這是默認的title',
        sell:'',
        price:'',
        desc:''
      }
    }
  },
  methods:{ //準備函式
    save(){
      //發起Ajax請求,把表單的資料發給java程式入庫或查庫
      alert('資料提交成功!');
    }
  }
}
</script>

<style>
</style>

二,maven

–1,概述

是一個用來專案構建工具,用來管理專案中用到的jar包.
Maven的核心: 下載jar包 + 存放jar包 + 編譯jar包
特征:
1.遠程倉庫/中央倉庫: 本質上就是一個國外的網址
2.鏡像倉庫: 就是一個國內的網址,比如:阿里云
3.本地倉庫: 需要你在磁盤中創建一個檔案夾,存放下載好的jar包
4.坐標: 唯一定位jar包的方式.
groupId是組id,通常他的值是公司的域名
artifactId是專案id,通常他的值是專案名稱
version是jar包的版本號
5.依賴: jar包之間也有復雜的依賴關系, maven可以下載所有關聯的jar包

–2,使用步驟

1.解壓maven的壓縮包
2.找到settings.xml檔案(在D:\apache-maven-3.6.3\conf里),修改兩處:
本地倉庫: 存放jar包的位置,自己指定一個磁盤路徑
鏡像倉庫: 下載jar包的網址,阿里云

–3,IDEA里整合Maven

1.File–Settings—給當前的工程配置maven
2.File–New Projects Settings—給所有的新工程統一配置maven
3.Build,Execution…—Build Tools—Maven
4.配置如圖

–4,IDEA里創建Maven工程

File–New–Project–選擇Maven–next–設定工程名/groupId–Finish

–5,修改pom.xml檔案,添加jar包的坐標

<?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是組id,值是域名  -->
    <groupId>cn.tedu</groupId>
    <!--artifactId是組專案id,值是專案名稱  -->
    <artifactId>cgb2108maven01</artifactId>
    <!--version是專案的版本號-->
    <version>1.0-SNAPSHOT</version>

    <!--pom里可以添加jar包,maven自動去鏡像倉庫下載jar包到本地倉庫-->
    <dependencies>
        <!--添加MySQL的jar包,groupId,artifactId,version-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.48</version>
        </dependency>

    </dependencies>

</project>

–6,檢查是否下載完成

原則:pom檔案里i沒有飄紅就行

–7,總結

1.解壓maven的壓縮包
2.找到settings.xml檔案,修改了本地倉庫和鏡像倉庫
3.在IDEA里創建Maven工程
4.給Maven工程配置Maven,否則都用的默認位置,jar包會下載到C盤
5.修改pom.xml , 添加jar包的坐標
6.點重繪按鈕,下載jar包
7.只要pom.xml檔案里沒有飄紅就行了

三,IDEA里創建SpringBoot專案

–1,測驗

改一下下載jar包的網址 https://start.aliyun.com