手摸手带你搭建vue前后端增删改查项目

vue + spring boot +mybatis +mysql

Vue项目搭建

1. 在桌面新建一个文件夹，名字随便起，英文即可
2. 进入文件夹，在如下图示位置输入cmd进入命令行窗口：

 

3、点击打开之后如下图

4、假如我们之前做过了109个demo，我们就输入vue create demo110，点击回车键，如下图所示：

5、选择默认的vue2即可，点击回车如下图，项目创建完成

6、输入cd demo100进入项目目录，输入npm run serve运行项目，出现如下图所示结果证明运行成功

7、打开浏览器输入http://localhost:8080/，查看是否出现如下界面，看到如下界面即可

使用vscode打开终端输入 npm run serve 运行

关闭语法检查 config

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  // 关闭语法检查

  lintOnSave:false

})

npm i axios指令导入axios

配置跨域问题

devServer: {

    proxy: {

      '/dev-api': {

        target: 'http://localhost:9000',

        changeOrigin: true,

        pathRewrite: {

          '^/dev-api': ''

        }

      }

    }

  }同样放入vue.config.js

文件

使用mybatis – plus 要使用

<resources>

    <!-- 将src/main/java目录的xml等资源打包进入class文件夹 -->

    <resource>

        <directory>src/main/java</directory>

        <includes>

            <include>**/*.xml</include>

        </includes>

        <filtering>false</filtering>

    </resource>

    <resource>

        <directory>src/main/resources</directory>

        <includes>

            <include>**/*.yml</include>

            <include>**/*.properties</include>

            <include>**/*.xml</include>

            <include>**/*.png</include>

            <include>**/*.zip</include>

        </includes>

        <filtering>false</filtering>

    </resource>

</resources>

前端配置element-ui

npm i element-ui -S

全局引入

在main.js

import elementUI from "element-ui";

导入样式

Element - The world's most popular Vue UI framework

elementui官网地址

增删改查

像后端发送请求测试

<el-button type="success" @click="des()">成功按钮</el-button>

后端

@RequestMapping("/button")
public void button() {
    System.out.println("按钮");
}

查

页面效果

<el-table

    :data="list"//将list空数组绑定到table里

    border

    style="width: 100%">

    <el-table-column

      prop="id"  //要与字段相对应

      label="学生Id"//行

      width="180">//