1.介绍组件的使用
2.路由
跳转:根据你输入的路径找到对应的组件(页面),从而渲染该组件。
router/index.js 根据请求路径找到对应的组件,但是找到后无法渲染它
3.vue工程中使用elementui
(1)定义一个div
<div>
<el-table
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="sid"
label="学生ID">
</el-table-column>
<el-table-column
prop="sname"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
<el-table-column
prop="aclass.cname"
label="班级名称">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
(2)定义变量接收后端请求数据
data(){
return{
tableData: [], //接收数据
currentPage: 1, //表示第几页
pageSizes: [5, 10, 15, 20],
pageSize: 5, //表示一页多少条
total: 0, //表示总条数
queryStudent: {},//条件查询
}
},
(3)vue工程使用axios发送异步请求
之前: 在页面中导入了axios的插件
<!--引入axios的js-->
<script type="text/javascript" src="js/axios.min.js"></script>
所以可以直接使用axios.post请求
但是现在在vue组件中无法引入script. 而且我们在创建vue工程时已经安装了axios的依赖插件。
解决:main.js把axios挂载到vue对象上
使用:
//页面加载完毕后执行
created() {
this.initTable()
},
methods: {
initTable() {
this.axios.post("http://localhost:8080/findAll/" + this.currentPage + "/" + this.pageSize, this.queryStudent).then(result => {
this.tableData = result.data.data.records //数据
this.total = result.data.data.total //总条数
})
},
4.linux系统
4.1为什么需要学习Linux系统?
因为我们未来开发的项目需要部署到服务器上,而现在使用的服务器大多数都是linux系统。因为window使用的人比较多而且不安全。
linux服务的种类:
redhat:红帽系统 --- 收费
ubuntu:
centos7: ---企业使用最多的是该系统。
可以上阿里云和腾讯云租这种服务器。----我们为了模拟服务器 --所以需要安装虚拟机 --然后再虚拟机中安装服务器 --centos7
4.2VMware Workstation Pro中安装centos服务器
第一个命令:
ifconfig ====>查看当前服务器的ip
如果不能用
第二个命令
ip addr ===> 查看当前服务器的ip
4.3安装centos的客服端软件 finalshell