Vue+springpoot后台搭建

最新推荐文章于 2023-06-14 23:49:08 发布

段子子

最新推荐文章于 2023-06-14 23:49:08 发布

阅读量2.4k

点赞数

文章标签： vue.js 前端 javascript java

本文链接：https://blog.csdn.net/m0_53524766/article/details/127936818

版权

一、创建项目准备

1、在cmd创建vue

1.创建之前设置vue加速

在这里插入图片描述

2、在cmd或者idea终端中安装elementUI

在cmd中安装时，要和vue项目的目录相同
在这里插入图片描述

代码解释3

<b style="color: white" v-show="logoTextShow">后台管理系统</b>
<!--logoTextShow  点击收缩按钮，后台管理系统 文字消失-->


<!--隐藏多余的，背景色蓝色，侧边栏文字颜色白色，选择为黄色   :collapse-transition 关闭侧边栏的本身的动画-->

<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
         background-color="rgb(48, 65, 86)"
         text-color="#fff"
         active-text-color="#ffd04b"
         :collapse-transition="false"
         :collapse="isCollapse"
>

 @click="collapse">触发函数
 box-shadow: 2px 0 6px rgb(0 21 41 / 35%)给盒子加阴影

代码解释4

1.完整分页

在这里插入图片描述

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

2.搜索框样式

在这里插入图片描述

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ml-5 {
    margin-left: 5px;
}
.mr-5 {
    margin-right: 5px;
}
.pd-10 {
    padding: 10px 0;
}


 <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
          <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
          <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>
          <el-button class="ml-5" type="primary">搜索</el-button>
        </div>

3、配置阿里云仓库

1.pom里配置阿里云仓库，使得下载依赖项时更快

<repositories>
    <repository>
        <id>nexus-aliyun</id>
        <name>nexus-aliyun</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>

<pluginRepositories>
    <pluginRepository>
        <id>public</id>
        <name>aliyun nexus</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </pluginRepository>
</pluginRepositories>

在这里插入图片描述
复制粘贴到红色框的后面

4.配置数据库

server.port=9090
#数据库配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#数据库的驱动名称，
spring.datasource.url=jdbc:mysql://localhost:3307/dzz?serverTimezone=GMT%2b8
#连接数据库的url=//默认端口//数据库名称？实际参数为中国的东八区（%2b为+）
spring.datasource.username=root
#数据库的用户名
spring.datasource.password=qazwsx1120
#数据库密码：qazwsx1120

5 .配置vue启动
点加号，选择npm,选择package,json,点应用，点启动
在这里插入图片描述
之后idea就可以同时运行网页和java

二、在数据库中建立数据

新建连接
新建数据库
在这里插入图片描述

1.创建表头
在这里插入图片描述
2.根据表头添加数据

三.创建程序

代码解释

快捷键ALT+F12 快速生成java的（get and set）方法
在这里插入图片描述
以下get和set的作用是从数据库中拿来数据。

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

以上代码繁琐，所以引入一个插件@data,就可以代替以上get和set所有的代码

package com11.entity;
import lombok.Data;

@Data

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;

    
}

@NoArgsConstructor无参构造
@AllArgsConstructor有参构造
lokmark插件

3.建立程序包，新建连接数据库的接口 UserMapper用于和数据库进行交互

4.查询数据
在这里插入图片描述

浏览器使用的jsionview插件

1.使用java类查询数据的准备工作

代码解释

（1）@RestController标识Com11htApplication是一个接口，通过@GetMapping查询出所有的数据。
（2）@GetMapping依赖于@RestController，所以要先写@RestController注解。
（3）@RestController为一个组合注解

package com11;
import com11.entity.User;
import com11.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@SpringBootApplication
public class Com11htApplication {

    @Autowired//注入其他类的注解
    private UserMapper userMapper;
    public static void main(String[] args) {
        SpringApplication.run(Com11htApplication.class, args);
    }

    @GetMapping("/")
    //返回类型为List<User>
    public List<User> index() {
        return userMapper.findAll();
        //用userMapper方法返回user表里面的数据
    }
//        public List<User> index() {
//           // List<User> all = userMapper.findAll();
//            return userMapper.findAll();
//    }
    //数据库接口
}

a、引入依赖

在这里插入图片描述

b、java数据类

创建数据类型，即表头
在这里插入图片描述

C、创建数据库

见二

d、接口Mapper

新建连接数据库的接口 UserMapper，用于和数据库进行交互
在这里插入图片描述
运行如下

UserController java控制器类

package com11.controller;

import com11.entity.User;
import com11.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class UserController {

    @Autowired//注入其他类的注解
    private UserMapper userMapper;

    @GetMapping("/") //返回类型为List<User>
    public List<User> index() {
        List<User> all=userMapper.findAll();
        return all;//用userMapper方法返回user表里面的数据
    }
}

UserMapper 接口类

package com11.mapper;

import com11.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;
@Mapper
//是接口，没有被Com11ht所管理
public interface UserMapper {
    //mybasit提供的注解，（被谁管理）
    @Select("SELECT * FROM sys_user")
    List<User> findAll();
}

Com11htApplication java主要类

package com11;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Com11htApplication {
    public static void main(String[] args) {SpringApplication.run(Com11htApplication.class, args);}
}

User 数据 java类

package com11.entity;

import lombok.Data;


@Data

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;


}