Vue+springpoor バックグラウンド構築

1.プロジェクトの準備を作成する

1. cmd で vue を作成する

1.作成前にビューアクセラレーションを設定する

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.Alibaba Cloud ウェアハウスを構成する

1. pom で Alibaba Cloud ウェアハウスを構成して、依存関係のダウンロードを高速化する

<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 を選択し、パッケージ、json を選択し、アプリケーションをクリックして、開始をクリックすると、

idea は Web ページと Java を同時に実行できます。

2. データベースにデータを作成する

新しい接続
新しいデータベース

1. テーブル ヘッダーを作成します

2. テーブル ヘッダーに従ってデータを追加します

3. プログラムを作成する

コードの説明

ショートカット キー ALT+F12 Java (get および 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. データベースを作成する

2つを見る

d. インターフェース マッパー

データベースに接続するための新しいインターフェイス 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);}
}

ユーザーデータ 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;


}

コード位置に示されているように