【Java-SpringBoot+Vue+MySql】项目开发杂记

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

1、关闭eslint

2、新建路由

3、安装jQuery依赖-在Vue使用JQuery语法

4、MySQL———数据全部清除自增归零

5、前后端数据传递——增加功能

6、使用element-ui获取当前表格中的数据——删除功能

1、关闭eslint

2、新建路由

{
    path: '/user',
    component: Layout,
    redirect: '/user',
    name: 'User',
    meta: { title: 'User', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: 'List',
        component: () => import('@/views/user/userlist'),
        meta: { title: 'User', icon: 'table' }
      }
    ]
  },

3、安装jQuery依赖-在Vue使用JQuery语法

https://www.cnblogs.com/ggll611928/p/15564212.html

cnpm install jquery --save 
npm install jquery --save;

组件中直接使用

我们想在哪个组件中使用jQuery库首先要使用如下命令引入jquery然后就可以正常使用了

import $ from 'jquery'

示例

<template>
  <div>
    <p>上传的文件</p>
    <input multiple="multiple" type="file" id="uploadFile"/>
    <br />
    <br />
    <button @click="upload">上传</button>
  </div>
</template>
<script>

import $ from 'jquery'

export default {
  methods: {
    upload: function() {
      var formData = new FormData() // 创建一个formData对象实例
      var excelFile = $('#uploadFile').get(0).files[0]
      formData.append('excelFile', excelFile)
      $.ajax({
        url: 'http://localhost:8088/upload',
        data: formData,
        type: 'post',
        contentType: false, // 必须false才会自动加上正确的Content-Type
        processData: false, // 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
        success: function(resp) {
          console.log(resp)
          alert('上传成功!')
        }
      })
    }
  }
}
</script>