vue-element-cli组件和安装linux系统

1. Vue组件概念

        组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

        组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。

1.1 组件的使用

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button>el-button</el-button>
    </div>-->

    <!--3.使用组件-->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <student name="王建林"/>

    <!--视 图-->
    <router-view/>

  </div>
</template>

<script>
  //2.引入组件
import HelloWorld from './components/HelloWorld.vue'
import Student from "@/components/Student";
  
export default {
  name: 'app',
  components: {

    //1. 注册组件
    HelloWorld,
    Student
  }
}
</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>

<template>
    <div>
       {{name}}
    </div>
</template>

<script>
    export default {
        name: "student",
        props:{
            name:String
        }

    }
</script>

<style scoped>

</style>

2.vue-router路由

2.1 引入

        由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
/*import Student from "@/components/Student";*/

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },{
    path: '/student', //请求路径

    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/Student') //组件

  },{
  //导入
  path: '/emp',  // 请求路径
    component: ()=>import('../views/Emp.vue')  //组 件
  }


]

const router = new VueRouter({
  routes
})

export default router

2.2 框架图

 3. vue工程中使用elementui

<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "test01",
        data(){
            return{
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        created() {
            this.init()
        },
        methods:{
            init(){
                this.$message.success("成功")
            }
        }
    }
</script>

<style scoped>

</style>

引入请求路径

{
    path:'/test01',
    component: ()=>import('../views/test01')
  }

效 果

4.vue工程使用axios发送异步请求

        之前是在项目中导入了axios 的插件 ，所以可以直接使用axios.post请求，但是现在在vue组件中无法引入script. 而且我们在创建vue工程时已经安装了axios的依赖插件。

4.1 直接运行会报错

4.2 解决

main.js 把axios挂载到vue对象上

 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//1 导入axios
import axios from "axios";
Vue.config.productionTip = false

//挂载vue上 挂在名称为axios
Vue.prototype.axios=axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.3 使用this 

this.axios.delete("http://localhost:8088/student/deleteBySid/" + del,this.studentvo).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg)

4.4 完成crud

<template>
    <div>

        <el-form :inline="true" :model="studentvo" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="studentvo.sname" placeholder="姓名"></el-input>
            </el-form-item>

            <!-- 查询 条件 -->
            <el-form-item
                    label="最大年龄"
                    prop="maxAge"
                    :rules="[
      { required: true, message: '最大年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
            >
                <el-input v-model.number="studentvo.maxAge" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item
                    label="最小年龄"
                    prop="minAge"
                    :rules="[
      { required: true, message: '最小年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
            >
                <el-input v-model.number="studentvo.minAge" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 搜 索 框 -->
            <el-form-item>
                <el-button type="primary" @click="int">搜 索</el-button>
            </el-form-item>

            <!-- 批 量 删 除 -->
            <el-form-item>
                <el-button type="primary" @click="deletes">批量删除</el-button>
            </el-form-item>

            <!-- 添 加 -->
            <el-form-item>
                <el-button type="primary" @click="tianjiaStu">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table

                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <!--多选框-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="sid"
                    label="学号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="cid"
                    label="班级号">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" @click="editStu(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!-- 编 辑 弹 窗 -->

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="学生名">
                    <el-input v-model="form.sname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="班级名">
                    <!--下拉框-->
                    <el-select v-model="form.cid" placeholder="请选择">

                        <el-option
                                v-for="item in class01"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>

                    </el-select>
                    <!--<el-input v-model="form.cid"></el-input>-->
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancellation">取 消</el-button>
    <el-button type="primary" @click="updateStu">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 添 加 弹 窗 -->

        <el-dialog
                title="提示"
                :visible.sync="insertStudent"
                width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="学生名">
                    <el-input v-model="form.sname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="班级名">
                    <!--下拉框-->
                    <el-select v-model="form.cid" placeholder="请选择">

                        <el-option
                                v-for="item in class01"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>

                    </el-select>
                    <!--<el-input v-model="form.cid"></el-input>-->
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancellation01">取 消</el-button>
    <el-button type="primary" @click="insertStu">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        name: "Emp",
        data(){
            return{
                tableData: [],
                studentvo: {},

                //当 前 页 数
                currentPage:1,

                //每 页 数 量
                pageSize:5,

                //总 条 数
                total:0,

                form:{},
                //编辑弹窗
                dialogVisible:false,
                //添加弹窗
                insertStudent:false,
                //多选
                selectionChange:[],

                class01:[],
                /*item:{}*/
            }
        },
        created() {
            this.int();
        },
        methods:{
            //页面
            int(){
                //使用挂载中的vue 对象中axios
                this.axios.post("http://localhost:8088/student/list/" + this.currentPage + "/" + this.pageSize,this.studentvo).then(result=>{
                    this.tableData=result.data.data.records;
                    //获 取 条 数
                    this.total=result.data.data.total;
                })
            },
            //改变每页条数触发
            handleSizeChange(val){
                this.pageSize=val;
                this.int();
            },
            //改变当前页码触发的方法
            handleCurrentChange(val){
                this.currentPage=val;
                this.int();
            },
            onSubmit(){

            },
            //删除
            del(row){
                let del = row.sid;
                this.axios.delete("http://localhost:8088/student/deleteBySid/" + del,this.studentvo).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg)

                        this.int();
                    }else(
                        this.$message(result.data().msg)
                    )


                })

            },
            //编辑班级事件
            editStu(row){
                this.dialogVisible=true;
                this.form=row;
                this.axios.get("http://localhost:8088/class01/queryAllClass").then(result=>{
                    this.class01=result.data.data;
                    //console.log(result)

                })
            },

            //修改确定按钮
            updateStu(){
                this.axios.put("http://localhost:8088/student/updateStu",this.form).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg);

                        this.dialogVisible=false;

                        this.int();
                    }

                })
            },
            //批量删除
            deletes(){
                this.axios.post("http://localhost:8088/student/deletes",this.selectionChange).then(result=>{
                    if (result.data.code===200){
                        this.$message.success(result.data.msg)
                        this.int();
                    }else(
                        this.$message(result.data.msg)
                    )
                })
            },

            //点击多选框获取学生班级信息
            handleSelectionChange(val){
                this.selectionChange=val;
            },
            //编 辑 弹 窗 取 消 键
            cancellation(){
                this.int();
                this.dialogVisible=false;
            },
            //添 加 弹窗 取 消 键
            cancellation01(){
                this.int();
                this.insertStudent=false
            },
            //添 加 弹 窗 出 现
            tianjiaStu(){

                this.insertStudent=true;
                this.axios.get("http://localhost:8088/class01/queryAllClass").then(result=>{
                    this.class01=result.data.data;
                })

            },

            //添 加
            insertStu(){
                this.axios.post("http://localhost:8088/student/InsertStu",this.form).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg);

                        this.insertStudent=false;

                        this.int();
                    }

                })
            }
        }
    }
</script>

<style scoped>

</style>

5、linu 入门

5.1 简介

        Linux，全称GNU/Linux，是一种免费使用和自由传播的类UNIX操作系统，其内核由林纳斯·本纳第克特·托瓦兹（Linus Benedict Torvalds）于1991年10月5日首次发布，它主要受到Minix和Unix思想的启发，是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它支持32位和64位硬件，能运行主要的Unix工具软件、应用程序和网络协议。

        Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。Linux有上百种不同的发行版，如基于社区开发的debian、archlinux，和基于商业开发的Red Hat Enterprise Linux、SUSE、Oracle Linux等。

5.2 优点

(1) 跨平台的硬件支持

(2) 丰富的软件支持

(3) 多用户多任务

(4) 可靠的安全性

(5) 良好的稳定性

(6) 完善的网络功能

5.3linux服务的种类

        redhat:红帽系统---收费

        ubuntu:

        centos7： ----企业使用最多的是该系统。

        可以上阿里云和腾讯云租这种服务器。---我们为了模拟服务器--所以需要安装虚拟机---然后再虚拟机中安装服务器--centos7

5.4 VMware Workstation Pro中安装centos服务器

 

 

 

 

 

 

 

 

 

 

 

 

 

第一个命令:

if config/ip addr====>查看当前服务器的ip

6 安装centos的客户端软件-finalshell