springboot-vue实操

一、先下载node.js

二、在指定的目录下创建vue create my-vue3-project。(创建vue)

{1}选择 Manually select features，自定义配置

{2} 空格键表示选择确认

{3} 3.x

{4}

{5}

{6}

{7} 跟着步骤走，运行这两个按顺序

{8} 成功创建在网页输入http://localhost:8081/即可

三、创建npm 通过npm运行vue

四、在cmd中安装，然后创建vue ，最后可以用网页8080访问，最后用idea打开

一前端篇

1、首先写出一个页面头部的组件在components下（组件主要用来写页面重复的内容,vue写）

{1}display: flex"  能将俩个div分开

{2} <div style="flex: 1"></div> 作用就是产生中间部分

2、css样式在assets创建css

3、将css导入 main.js 导入用import '@/... '

4、安装element-plus

npm install element-plus --save

5、在main.js引入element-plus 因为这里引用的element-plus 与element-ui引用的内容会不同

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css'   不行就试试  import 'element-plus/dist/index.css' 
需要先安装安装element-plus

6、将组件导入在主页APP.vue里面

在<template>里面写出<Header/> 就能在页面上显示组件里的内容了

7、就可以在其它vue里面写内容了

注意 APP里面的组件，其它vue不要写入

8、添加element的内容了（如果没有出现效果）

main.js里面添加ArrowDown

import { ArrowDown } from '@element-plus/icons-vue'

.component('arrow-down', ArrowDown)

效果展示

9、侧边栏aside ，首先添加组件Aside

在element里面复制注意从 <el-menu> 开始复制

侧边栏的style可以修改 min-height: calc(100vh - 50px) 是布满整个页面侧边 calc为计算 50px为头部的高度

效果：

10、添加中间部分内容

tableData:[] 里面添加数据

11、在home.vue中添加按钮功能

{1} margin-left 5px 左边距设置为5的距离

在 tableData[] 数据上面

{2} 设置删除，编辑功能

需要在data()下设置methods

12、添加分页查询

@size-change="handleSizeChange"    改变页面的变化
@current-change="handleCurrentChange"   当前改变
这两个需要添加到方法

二、后端篇

1、创建springboot 添加了 mybatis-plus，springboot，mysql Diver，lombok 组件

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.3.2</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.3.1</version>
</dependency>

<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter-test</artifactId>
    <version>2.3.1</version>
    <scope>test</scope>
</dependency>

2、创建common工具类，添加MybatisPlusConfig配置类

@Bean
public PaginationInterceptor paginationInterceptor(){
    return new PaginationInterceptor();
}
其中@MapperScan("com.example.mapper")   @MapperScan里面为class，所以这里是.分割  resources文件是用 /分割

3、创建Result实体类，用于controller 返回json数据的

package com.example.common;

public class Result<T> {

    private String code;
    private String msg;
    private T  data;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public Result() {
    }

    public Result(T data) {
        this.data = data;
    }

    public static  Result success(){
        Result result = new Result<>();
       result.setCode("0");
       result.setMsg("成功");
       return  result;
    }

    public static <T> Result<T> success(T data){
        Result<T> result = new Result<>(data);
        result.setCode("0");
        result.setMsg("成功");
        return  result;
    }

    public static  Result success(String code,String msg){
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return  result;
    }

}