web开发 之axios、Vue、Element、nginx（学习版2）

已于 2024-10-17 11:05:45 修改
阅读量561 收藏 8
点赞数 3
文章标签： vue.js 前端 javascript
于 2024-09-16 02:05:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76876837/article/details/142283298
版权

一、前言 

接下来就是来解决这些问题 

二、 Ajax

1.ajax 

javscript是网页三剑客之一，空用来控制网页的行为的

xml是一种标记语言，是用来存储数据的 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-原生方式</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>
<script>
    function getData(){
        //1.创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLhttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>‘

2.axios 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios</title>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios({
            method:'get',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',

        }).then(result =>{
            console.log(result.data);
            
        })

    } 

    function post(){
        axios({
            method:'post',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
            data:'id=1', 
        }).then(result =>{
            console.log(result.data);
            
        })

    }
</script>
</html>

3.axio案例 

 这三个代码都是没有用浏览器看到的（因为那个网址打不开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios案例</title>
</head>
<body>
    
    <div id="app">
        <table width="800px" cellspacing="0" border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图片</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职时间</th>
                <th>更新时间</th>
            </tr>

            <tr v-for="(emp, index) in emps" align="center">
                <td>{{index+1}}</td>
                <td>{{emps.name}}</td>
                <!-- <td>{{emps.image}}</td> -->
                 <td>
                    <img v-bind : src="emps.image" alt="" height="50px" width="70px">
                 </td>
                <td>
                    <span v-if="gender == 1">男</span>
                    <span v-if="gender == 2">女</span>
                </td>
                <td>{{emps.job}}</td>
                <td>{{emps.entrydate}}</td>
                <td>{{emps.updatatime}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
    new Vue({
        el:'a#pp',
        data:{
            emps:[]
        },
        mounted() {
            axios.get('').then(result => {
                this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值
                
            })
        },
    })
</script>
</html>

三、前后端分离开发

1.介绍

2.YAPI -接口文档管理平台

这里我插播一条：我使用apipost

四、前端工程化

1.环境准备

 

需要的话，可以找我要呢 

配置环境变量 node.js安装及环境配置超详细教程【Windows系统安装包方式】_node 0.12.6 安装 node-echarts 包-CSDN博客

切换淘宝最新镜像源npm_新淘宝源-CSDN博客

如果这俩个不行建议再找找 

2. vue项目介绍

 

 

演示修改前端Vue的端口号：

3.vue项目开发流程（如何访问到vue的首页面）

五、Vue组件库Element

1.快速入门

 

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入element-ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

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

原页面 

<template>
  <div id="app">
    <nav>
      <router-link to="/">Vue Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

 

2.常见组件

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <!-- table表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <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 {

    methods: {
      tableRowClassName({rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <!-- table表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <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>

    <!-- pagination分页 -->
    <el-pagination
      background
      layout=" sizes, prev, pager, next, jumper, -> , total, slot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    handleSizeChange: function (val) {
      alert("每页" + val + "条");
    },
    handleCurrentChange: function (val) {
      alert("当前页: " + val);
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <!-- table表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <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>

    <!-- pagination分页 -->
    <el-pagination
      background
      layout=" sizes, prev, pager, next, jumper, -> , total, slot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    ></el-pagination>

    <!-- dialog对话框 -表格-->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- dialog对话框 -表单-->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="From表单" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert(
            "submit!" + JSON.stringify(this.ruleForm)
          ); /* 将rule这个对象转成字符串 */
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    handleSizeChange: function (val) {
      alert("每页" + val + "条");
    },
    handleCurrentChange: function (val) {
      alert("当前页: " + val);
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

3.案例 

 

​
<template>
  <div>
    <el-container>
      <el-header style="font-size: 45px; background-color: rgb(238, 241, 246)"
        >talis智能辅助系统</el-header
      >
      <el-container>
        <el-aside  style="width: 200;   border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" >
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 横向表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.enteydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="image" label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100">
              </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? '男' : '女' }}
              </template>
            </el-table-column>

            <el-table-column prop="job" label="职位" width="140">
            </el-table-column>

            <el-table-column prop="entrydate" label="入职日期" width="180">
            </el-table-column>

            <el-table-column prop="updatetime" label="最后操作时间" width="230">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>

          <!-- pagination分页 -->
          <el-pagination
            background
            layout=" sizes, prev, pager, next, jumper, -> , total, slot"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        enteydata: [],
      },
    };
  },
  methods: {
    onsubmit() {
      console.log("查询");
    },
    handleSizeChange: function (val) {
      alert("每页" + val + "条");
    },
    handleCurrentChange: function (val) {
      alert("当前页: " + val);
    },
  },
  mounted() {
    //当组件挂载到页面时，自动触发钩子函数，我们此时通过axios发送异步请求，获取数据，展示在表格中
    axios.get("http://localhost:10010/emp/list").then((result) => {
      this.tableData = result.data.data;
    });
  },
};
</script>


<style>
</style>

​

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">


            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>


            
          </el-menu>
        </el-aside>

 

 按需求把表头一改

<el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="image" label="图像" width="180">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="140">
            </el-table-column>

            <el-table-column prop="job" label="职位" width="140">
            </el-table-column>

            <el-table-column prop="entrydate" label="入职日期" width="180">
            </el-table-column>

            <el-table-column prop="updatetime" label="最后操作时间" width="230">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>

 

<!-- 横向表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

 

 

<!-- 横向表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.enteydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

 ​​​​​​​

 

   <!-- pagination分页 -->
          <el-pagination
            background
            layout=" sizes, prev, pager, next, jumper, -> , total, slot"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination>

 

 

双击资料中提供的 start.bat 脚本启动⼀个本地服务，启动后界⾯如下所⽰： 注意： 如果双击 start.bat 发现⾃⼰的⿊窗⼝⼀闪⽽过，那说明我们⾃⼰的本地
JAVA_HOME 环境变量有问题，检查⼀下系统环境变量中是否正确配置了JAVA_HOME
Ajax访问
由于现在启动的服务，是我们本地的服务，所以在ajax请求的时候，需要将请求地址改
成我们本地的地址，也就是将上述两个Yapi平台的地址替换为： GET请求： http://localhost:10010/emp/list
POST请求: http://localhost:10010/emp/deleteById
Ajax⽰例如下:
< script >
function get (){
axios . get ( "http: / localhost:10010/emp/list" ). then (( result ) = > {
console . log ( result . data );
});
}
function post (){
axios . post ( "http: / localhost:10010/emp/deleteById" ,
"id=1" ). then (( result ) = > {
console . log ( result . data );
});
}
/ script >

 

 

六、Vue路由

这里自己建一个DeptVue.vue 

<template>
  <div>
    <el-container>
      <el-header style="font-size: 45px; background-color: rgb(238, 241, 246)"
        >tlias 智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside  width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" >
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>

              <el-menu-item index="1-1">
              <router-link to="/dept">部门管理</router-link>  
              </el-menu-item>
              <el-menu-item index="1-2">

                <router-link to="/emp">员工管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 横向表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.enteydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="image" label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100">
              </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? '男' : '女' }}
              </template>
            </el-table-column>

            <el-table-column prop="job" label="职位" width="140">
            </el-table-column>

            <el-table-column prop="entrydate" label="入职日期" width="180">
            </el-table-column>

            <el-table-column prop="updatetime" label="最后操作时间" width="230">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>

          <!-- pagination分页 -->
          <el-pagination
            background
            layout=" sizes, prev, pager, next, jumper, -> , total, slot"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        enteydata: [],
      },
    };
  },
  methods: {
    onsubmit() {
      console.log("查询");
    },
    handleSizeChange: function (val) {
      alert("每页" + val + "条");
    },
    handleCurrentChange: function (val) {
      alert("当前页: " + val);
    },
  },
  mounted() {
    //当组件挂载到页面时，自动触发钩子函数，我们此时通过axios发送异步请求，获取数据，展示在表格中
    axios.get("http://localhost:10010/emp/list").then((result) => {
      this.tableData = result.data.data;
    });
  },
};
</script>


<style>
</style>

 更改相应的代码

 最终显示

七、打包部署

1.打包

2.部署 

  nginx: download

 

 

如果资源管理器运行的进程没有nginx的话， Day03-16. 打包部署_哔哩哔哩_bilibili

 

.ccl
关注
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi.zip
11-04
2. **Element UI 使用**：学习和应用Element UI的各种组件，如El-Table（表格）、El-Dialog（对话框）、El-Form（表单）、El-Select（选择器）等，以及自定义主题和样式。 3. **Vuex状态管理**：在大型项目中，管理...
Vue+Element+axios校园理工说
02-24
"Vue+Element+axios校园理工说"是一个基于前端技术栈的项目，主要涵盖了Vue.js、Element UI和axios这三个核心组成部分。接下来，我们将深入探讨这些技术及其在构建Web应用中的作用。 首先，Vue.js是一个轻量级的...
【Java Web】003 -- Axios & Vue组件库（Element）
汤姆lazy的CSDN博客
03-30 1771
Axios & Element，内容主要包括：Ajax、前后端分离开发、前端工程化、Element、Vue路由、打包部署等。
axios全局封装（vue3 element-plus）
博客
06-29 711
axios在前端项目中是常用的http请求封装库，基于promise写法，让我们能更好的做异步处理。这里的代码主要借鉴了网上的代码，进行更改成自己的代码。
单机下Vue项目通过Nginx配置反向代理(2)
qinglp的博客
04-22 1084
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。外链图片转存中…(img-ZT6E8nDQ-1713732409789)]
Vue 新手学习笔记：vue-element-admin 之入门开发教程（v4.0.0 之前）
热门推荐
乐之终曲
03-19 6万+
说实话都是逼出来的，对于前端没干过ES6都不会的人，vue视频也就看了基础的一些 但没办法，接下来做微服务架构，前端就用 vue，这块你负责。。。。说多了都是泪，脚手架框架布了都没看过 干就完事，不过好在做好了，这里写下给和我一样苦逼的同学能快点适应入门下，当然一些基础的东西还是要知道的 v4.0.0 版本的调整后讲解：Vue 新手学习笔记：vue-element-admin 之 入门开发教程（...
springboot+vue+nginx简单项目的开发和部署
yiyuzz的博客
04-22 1150
工作不是很饱和的情况下，就有时间去研究一下技术上的东西，然后打算写一篇比较长的啰嗦的文章来记录一下 一、准备工作 首先要有一台云服务器（其他替代的能作为服务器的设备也行，最好是linux），然后我是提前配置好了java环境，OPENJDK或者ORACLEJDK都行，这两个的区别自行百度吧。 二、后端编写 新建一个springboot项目，然后可以用默认的起步依赖就行，我是多加了一个swagger的依赖 <dependency> <grou
使用vue+element-ui进行简单前端开发
weixin_47195668的博客
12-20 1365
是从vue安装到实现一个简单的前端项目的简单步骤
JavaWeb05-Vue项目开发02Element学习笔记
m0_63229258的博客
08-25 153
Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。ps：目的是为了更简单的开发出更加好看的页面效果。功能对比图如下：左侧为原始开发，右侧韦使用ElementUi开发的页面。
Vue2.X项目超简单整合Axios并使用
都随它大小便吧
01-22 1196
记录一下通用的Vue项目简单整合axios，请求后端数据操作，复制粘贴代码后npm run serve或npm start，如控制台提示缺少依赖包，npm导入一下即可。
JavaWeb3 Ajax+Axios+Element+Nginx部署
weixin_44040169的博客
06-06 663
提供了大致知识回顾的关键词，详细信息再查。
毕设新项目基于SpringBoot+Vue的web网页版聊天室系统完整源码+项目说明+数据库（含前端+后端）.zip
07-02
毕设新项目基于SpringBoot+Vue的web网页版聊天室系统完整源码+项目说明+数据库（含前端+后端）.zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请...
基于vue+springboot+mysql的垃圾分类管理系统（源码+数据库），web全栈开发学习，可用于毕业设计、java课设
06-19
前后端通信使用了vue基于ajax封装的axios，组件开发使用的饿了吗的element 后端使用的半自动化的orm框架--mybatis，springboot版本为2.2.1 mysql的版本8.0.18 jdk版本为：8 图片使用的是nginx作为静态资源服务器...
原型链+instanceof+Vue底层原理
m0_65985318的博客
10-18 728
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 679
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 172
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 833
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
vue video播放m3u8监控视频
最新发布
YM_010530的博客
10-18 115
很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错。直接添加如下代码即可。
Vue 3 和 Vue Router 使用 createWebHistory 配置
liuchao的博客
10-16 284
在 Vue 3 项目中，如果使用 Vue Router 并希望启用 HTML5 History 模式，需要在创建路由器实例时传入作为历史模式的配置。此外，还需要确保在生产环境中设置正确的基本路径（base），这样才能正确处理前端路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值