cgb2110-day15

一,ElementUI的使用

–1,修改Person.vue

<template>
  <div>  <!-- 只能有一个根元素,不然报错!!-->
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
    <h1>{{show()}}</h1>

    <!-- 使用ElementUI的代码-->
    <!-- 7.表格
      el-table是表格,el-table-column是列,el-button是按钮
      :data是要获取数据,值是一个属性名.stripe是有斑马纹的表格
      label是列名,prop是要获取数据里的属性名
    -->
    <el-table :data="tableData"  stripe>
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="卖点" prop="point"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
      <el-table-column label="更多" >
          <el-button type="danger" @click="edit()">编辑</el-button>
          <el-button type="danger" @click="del()">删除</el-button>
      </el-table-column>
    </el-table>

    <!-- 6.el-checkbox多选框
      v-model实现双向绑定,值是属性名称.如果checked属性的是指true,就是默认选中的效果
    -->
    <el-checkbox v-model="checked">足球</el-checkbox>

    <!-- 5.el-radio单选框
      v-model实现双向绑定,值是属性名称. label是选中元素后要提交的数据
    -->
    <el-radio v-model="sex" label="1">男</el-radio>
    <el-radio v-model="sex" label="0">女</el-radio>

    <!-- 4.el-input输入框
      placeholder提示信息,v-model实现双向绑定,值是属性名称.
      clearable可清空的,show-password密码输入框
    -->
    <el-input placeholder="请在这里输入..." v-model="name"></el-input>
    <el-input placeholder="可清空的输入框..." v-model="name" clearable></el-input>
    <el-input placeholder="可清空的密码输入框..." v-model="name" show-password clearable></el-input>

    <!-- 1.el-button按钮,type属性用来控制颜色,icon图标,circle圆形,round圆角-->
    <el-row>
      <el-button type="danger">主要按钮</el-button>
      <el-button type="danger" icon="el-icon-share" circle></el-button>
    </el-row>
    <el-row>
      <el-button type="success" round>成功按钮</el-button>
    </el-row>

    <!-- 2.i图标-->
    <i class="el-icon-share"></i>
    <i class="el-icon-s-home"></i>

    <!-- 3.布局 el-row是行,el-col是列,
      :span是合并列,值表示要合并几列,默认一行是有24分栏/列
    -->
    <el-row>
      <el-col :span="3"> 你好1 </el-col>
      <el-col :span="8"> 你好2 </el-col>
      <el-col :span="8"> 你好3 </el-col>
    </el-row>

  </div>
</template>

<script>
// 1,支持导出的组件
export default{
  name: 'Person', //类似于组件名称
  data(){  //通过data()返回数据
    return{
      name:'jack',
      age:20,
      sex:'0',
      checked:true,
      tableData:[
        {
          id:666,
          title:'鸿星尔克',
          point:'国货之光',
          desc:'to be no.1'
        },
        {
          id:888,
          title:'特步',
          point:'永不止步',
          desc:'飞一样的感觉'
        }
      ]
    }
  }  ,
  methods:{
    show(){
       return this.name+this.age;
    } ,
    edit(){
      //优化成,通过前端的Ajax访问后端的一段java程序
      alert("编辑成功!");
    } ,
    del(){
      //优化成,通过前端的Ajax访问后端的一段java程序
      alert("删除成功!");
    }
  }
}
</script>

<style>
</style>

–2,重启服务器,测试

二,Vue项目中定义路由功能

–1,自定义组件

t1

<template>
  <h1>我是t1</h1>
</template>

<script>
</script>

<style>
</style>

t2

<template>
  <h1>我是t2</h1>
</template>

<script>
</script>

<style>
</style>

–2,创建router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

//-------1,导入自定义组件t1 t2
import t1 from './components/t1.vue'
import t2 from './components/t2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    //------2,路由规则,根据不同的请求分发给不同的组件展示
    {path: '/', name: 'HelloWorld',component: HelloWorld},
    { path:"/t1" , component:t1 },
    { path:"/t2" , component:t2 }
  ]
})

–3,修改App.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <!-- 3.使用自定义组件,像标签一样的用 -->
    <Person></Person>
    <car></car>


    <!-- 使用路由规则-->
    <router-link to="/t1">t1</router-link>
    <router-link to="/t2">t2</router-link>
    <router-view></router-view>

  </div>
</template>

<script>
// 1.导入自定义组件Person.vue(路径必须包含./)
import Person from './components/Person.vue'
import Car from './components/Car.vue'

export default {
  name: 'App',
  components: { //2.注册组件: 类似于局部组件
    Person , //使用了 1.导入的组件
    Car
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

–4,总结

–5,调用流程

三,Tomcat服务器

–1,概述

主要作用:
1, 你的项目资源必须放入 Tomcat里,才能被浏览器 看到
2, 接受这次请求,并处理请求
3, 如果浏览器需要一个结果, 服务器就需要返回一个结果

–2,使用步骤

1,解压
2,开启服务器(必须配置好JAVA_HOME)
D:Javaapache-tomcat-8.5.72binstartup.bat
3,关闭服务器
D:Javaapache-tomcat-8.5.72binshutdown.bat
4,测试
http://localhost:8080

–3,目录结构

–4,修改Tomcat端口号

四,在Tomcat服务器中添加自定义资源

–1,新建资源(在webapps里)

–2,重启服务器,打开浏览器测试

http://localhost:8090/day15/test01.html
本机:Tomcat的端口号/项目名称/资源名称

–3,一个完整的web应用的结构

需要创建一个WEB-INF,是为了隐藏一些文件的访问权限.

五,创建SpringBoot工程

https://start.aliyun.com

扩展:

–1,Git的常见操作

下载

#哪儿执行的下载命令,就把指定仓库的资源下载到你的哪里
E:workspace>git clone https://gitee.com/cgblpx/cgb2110.git

上传

把你准备上传的资源,放在git的工作空间.

git add .
git commit -m "test"
git push -u origin master