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