使用vue工程 及创建linux系统

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