cgb2110-day15

本文主要是介绍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:\Java\apache-tomcat-8.5.72\bin\startup.bat
3,关闭服务器
D:\Java\apache-tomcat-8.5.72\bin\shutdown.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

这篇关于cgb2110-day15的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---