cgb2106-day12 「爱情、让人受尽委屈。」 2021-09-11 03:24 266阅读 0赞 ### 文章目录 ### * * 一,ElementUI的表单 * * \--1,测试 * \--2,效果 * 二,Maven * * \--1,概述 * \--2,使用Maven * \--3,IDEA里配置Maven * \--4,创建Maven项目 * \--5,添加jar包的依赖 * 三,Spring Boot * * \--1,概述 * \--2,创建Spring Boot项目 * \--3,给服务器添加资源 * \--4,测试 ## 一,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,效果 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70] ## 二,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 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1] 2, 配置Maven 3,检查: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3] ### –3,给服务器添加资源 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4] 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 本机 端口号 要访问的资源 ![在这里插入图片描述][98111431e5df4d558f5334307d8ceb2d.png] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/f05774c81bad4267bb880db0f5743e7a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/dcf0ac2de5b24858bd3171187c07f542.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/89a242c988d24658a8311d6bedb6b212.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/c54d04b9dbc8403d87622364ad367a7b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]: /images/20210911/0b7bdeea69124096a1a3078a194e9b85.png [98111431e5df4d558f5334307d8ceb2d.png]: /images/20210911/895c960000b440aa82e9ef05bbd18b23.png
相关 cgb2106-day18 文章目录 一,Mybatis入门案例 \--0,导入mybatis的jar包 \--1,核心配置文件 港控/mmm°/ 2021年09月11日 03:28/ 0 赞/ 194 阅读
相关 cgb2106-day12 文章目录 一,ElementUI的表单 \--1,测试 \--2,效果 二,Maven 「爱情、让人受尽委屈。」/ 2021年09月11日 03:24/ 0 赞/ 267 阅读
相关 cgb2106-day13 文章目录 一,SpringMVC \--1,概述 \--2,原理 \--3,创建Module 拼搏现实的明天。/ 2021年09月11日 03:24/ 0 赞/ 263 阅读
相关 cgb2106-day11 文章目录 一,Vue脚手架 \--1,执行以下命令安装并检验 \--2,创建Vue项目的过程 二,自定 朱雀/ 2021年09月11日 03:24/ 0 赞/ 272 阅读
相关 cgb2106-day08 文章目录 一,模拟服务器解析数据 二,实现CSS代码和HTML代码的分离 \--1,新建css文件 \ 古城微笑少年丶/ 2021年09月11日 03:22/ 0 赞/ 275 阅读
偏执的太偏执、
港控/mmm°
红太狼
「爱情、让人受尽委屈。」
朱雀
还没有评论，来说两句吧...