前后端分離 Vue + Springboot 實作用戶串列單頁面開發（建議收藏）-有解無憂

- 用戶串列頁面開發
- 專案介紹
- 1、前端html頁面撰寫
- 2、springboot框架搭建
- - 2.1、專案創建
  - 2.2、連接資料庫
  - 2.3、專案完整依賴
- 3、撰寫entity層
- 4、查詢用戶資訊
- - 4.1、后端代碼撰寫
  - 4.2、前端代碼撰寫
- 5、添加用戶資訊
- - 5.1、后端代碼撰寫
  - 5.2、前端代碼撰寫
- 6、修改用戶資訊
- - 6.1、后端代碼
  - 6.2、前端代碼
- 7、洗掉用戶資訊
- - 7.1、后端代碼
  - 7.2、前端代碼

用戶串列頁面開發

專案介紹

用戶串列頁面開發，可以實作簡單的查詢，洗掉，修改，和添加用戶資訊功能，前端使用vue框架，后端使用springboot框架，一個簡單的vue+springboot前后端分離小專案，

本專案主要模塊及技術點如圖

專案原始碼+筆記+資料

鏈接：https://pan.baidu.com/s/1VBxaB1Hqoot73XsAO6bCxg
提取碼：za8i
在這里插入圖片描述

1、前端html頁面撰寫

頁面：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NUszDfUe-1626677532963)(Vue用戶串列頁面開發.assets/image-20210715163139071.png)]

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div id="app">

        <div class="container-fluid">
            <!--標題行-->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用戶串列</h1></div>
            </div>
            <!--資料行-->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!--添加按鈕-->
                    <a href="" class="btn-success btn-sm">添加</a>
                    <!--串列-->
                    <table class="table table-striped table-bordered" style="margin-top: 10px;">
                        <tr>
                            <td>編號</td>
                            <td>姓名</td>
                            <td>工資</td>
                            <td>年齡</td>
                            <td>個人簡介</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.description}}</td>
                            <td>
                                <a href="" class="btn btn-danger btn-sm">洗掉</a>
                                <a href="" class="btn btn-info btn-sm">修改</a>
                            </td>
                        </tr>

                    </table>
                    <!--添加 和 修改表單-->
                    <form>
                        <div class="form-group">
                            <label class="control-label">編號</label>
                            <div >
                                <p class="form-control-static">0001</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
                        </div>
                        <div class="form-group">
                            <label for="salary">工資</label>
                            <input type="text" class="form-control" id="salary" placeholder="請輸入工資">
                        </div>
                        <div class="form-group">
                            <label for="age">年齡</label>
                            <input type="text" class="form-control" id="age" placeholder="請輸入年齡">
                        </div>
                        <div class="form-group">
                            <label for="description">個人簡介</label>
                            <input type="text" class="form-control" id="description" placeholder="請輸入個人簡介">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<!--引入vue-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue 生命周期",
            users:[],
        },
        methods:{

        },
        computed:{

        },
        created(){
            //發送axios請求
            /*axios.get("http://localhost:8989/users").then(res=>{
               this.users = res.data;
            });*/
            this.users =[{id:1,name:"小陳",age:23,salary:2300,description:"他是一個小白!!!"}]
        },
    });
</script>

我們將html頁面放到如下位置：

js目錄下存放vue和axios資源檔案，

2、springboot框架搭建

2.1、專案創建

1、新建maven專案，取名為vue_day3_admin

2、引入sprinboot-web依賴

<dependencies>
    <!--引入springboot-web依賴-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

3、撰寫啟動類AdminApplication

package com.xiao;

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

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

4、測驗

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RudlBSAU-1626677532964)(Vue用戶串列頁面開發.assets/image-20210715175029350.png)]

2.2、連接資料庫

1、創建vue_day3資料庫

CREATE TABLE t_user(
	id INT(6) PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(40),
	salary DOUBLE(7,2),
	age INT(3),
	des VARCHAR(200)
);

2、引入資料庫相關依賴

<!--整合mybatis 引入依賴-->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.3</version>
</dependency>
<!--mysql-->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>5.1.38</scope>
</dependency>
<!--druid-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.1</version>
</dependency>
</dependencies>

3、application.properties組態檔撰寫

server.port=8990

# 整合mybatis

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/vue_day3?characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root

# 指定mapper出現的位置
mybatis.mapper-locations=classpath:com/xiao/mapper/*.xml
mybatis.type-aliases-package=com.xiao.entity

# 展示執行程序中sql陳述句
logging.level.com.xiao.dao=debug

4、springboot連接mysql資料庫

4.1、打開Data Sources and Deivers 輸入資料庫user和password，并選擇要連接的資料庫，

4.2、設定時區為UTC

5、啟動測驗一下

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BASB2gjK-1626677532966)(Vue用戶串列頁面開發.assets/image-20210715201122304.png)]

沒有任何問題，

2.3、專案完整依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>vue_day3_admin</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--繼承springboot父專案-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.0</version>
    </parent>
    <dependencies>
        <!--引入springboot-web依賴-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--整合mybatis 引入依賴-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>5.1.38</scope>
        </dependency>
        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>
        <!--本地測驗-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>1.5.12.RELEASE</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

3、撰寫entity層

創建user物體類

package com.xiao.entity;

public class User {
    private Integer id;
    private String name;
    private Double salary;
    private Integer age;
    private String des;

    public User() {
    }

    public User(Integer id, String name, Double salary, Integer age, String des) {
        this.id = id;
        this.name = name;
        this.salary = salary;
        this.age = age;
        this.des = des;
    }

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getSalary() {
        return salary;
    }

    public void setSalary(Double salary) {
        this.salary = salary;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", salary=" + salary +
                ", age=" + age +
                ", des='" + des + '\'' +
                '}';
    }
}

4、查詢用戶資訊

4.1、后端代碼撰寫

1、UserDAO撰寫

package com.xiao.dao;

import com.xiao.entity.User;

import java.util.List;

public interface UserDAO {

    //查詢所有用戶資訊
    List<User> findAll();
}

2、UserDAOMapper.xml撰寫

在resources下創建如下目錄

代碼：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xiao.dao.UserDAO">
    <!--findAll-->
    <select id="findAll" resultType="User">
        select id,name,salary,age,des from t_user;
    </select>
</mapper>

3、service層撰寫

UserService 介面

package com.xiao.service;

import com.xiao.entity.User;
import java.util.List;

public interface UserService {
    //查詢所有用戶方法
    List<User> findAll();
}

UserServiceImpl 實作類

package com.xiao.service;

import com.xiao.dao.UserDAO;
import com.xiao.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service //代表這是一個業務層組件 作用：用來在spring工廠中創建一個userServiceImpl物件
@Transactional //代表給類中所有的方法加入事務控制
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDAO userDAO;

    @Override
    @Transactional(propagation = Propagation.SUPPORTS) //方法上宣告事務注解
    public List<User> findAll() {
        return userDAO.findAll();
    }
}

4、進行test測驗

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pfLCSqdg-1626677532967)(Vue用戶串列頁面開發.assets/image-20210716180343384.png)]

BasicTest類

package com.xiao.test;import com.xiao.AdminApplication;import org.junit.runner.RunWith;import org.springframework.boot.test.context.SpringBootTest;import org.springframework.test.context.junit4.SpringRunner;@SpringBootTest(classes = AdminApplication.class) //指定入口類@RunWith(SpringRunner.class)  //啟動工廠public class BasicTest {}

TestUserService類

package com.xiao.test;import com.xiao.service.UserService;import org.junit.Test;import org.springframework.beans.factory.annotation.Autowired;public class TestUserService extends BasicTest {    @Autowired    private UserService userService;    @Test    public void findAll(){        userService.findAll().forEach(user -> System.out.println(user));    }}

測驗成功！！！

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-irJbdJfR-1626677532969)(Vue用戶串列頁面開發.assets/image-20210716180457334.png)]

4.2、前端代碼撰寫

1、在created()函式中添加axios請求

# 生命周期鉤子：生命周期函式
            初始化階段
            1.beforeCreate vue實體自身事件生命周期初始化
            2.created 完成自定義data methods computed 注入和校驗    推薦
            3.beforeMount將el指向html編譯為模板,并沒有完成模板注入
            4.Mounted將編譯模板進行資料注入,并將注入完成模板形成虛擬dom替換el指向原始dom

代碼：

var app = new Vue({
    el: "#app",
    data:{
        msg:"vue 生命周期",
        users:[], //定義一個users空陣列，用來存貯所有用戶的資訊
    },
    methods:{

    },
    computed:{

    },
    created(){ //執行 data methods computed 等完成注入和校驗
        //發送axios請求
        axios.get("http://localhost:8990/users").then(res=>{
            console.log(res.data);
            this.users = res.data;
        }); //es6 箭頭函式 注意：箭頭函式內部沒有自己this  簡化 function(){} //存在自己this
    },
});

2、測驗

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ERkeDKUK-1626677532969)(Vue用戶串列頁面開發.assets/image-20210716181201722.png)]

測驗成功！！！

5、添加用戶資訊

5.1、后端代碼撰寫

1、UserDAO介面層

//查詢所有用戶資訊
List<User> findAll();

2、UserDAOMapper.xml

<!--save-->
<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
    insert into t_user values (#{id},#{name},#{salary},#{age},#{des})
</insert>

使用 mysql 自增長序列，新插入一條資料時，怎么得到主鍵？

加入以下屬性即可：

useGeneratedKeys=“true” keyProperty=“id”

useGeneratedKeys 取值范圍true、false 默認值是：false，含義：設定是否使用JDBC的getGenereatedKeys方法獲取主鍵并賦值到keyProperty設定的領域模型屬性中，

keyProperty 取id的key值，主要是在主鍵是自增的情況下，添加成功后可以直接使用主鍵值，其中keyProperty的值是物件的屬性值，不是資料庫表中的欄位名，

3、service層撰寫

UserService類

//保存用戶資訊
void save(User user);

UserServiceImpl類

@Override
public void save(User user) {
    userDAO.save(user);
}

4、UserController控制類、

//添加員工資訊介面
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    System.out.println(user);
    userService.save(user);
}

5.2、前端代碼撰寫

1、form表單中添加v-model雙向系結

</div>
<div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" v-model="user.name" id="name" placeholder="請輸入姓名">
</div>
<div class="form-group">
    <label for="salary">工資</label>
    <input type="text" class="form-control" v-model="user.salary" id="salary" placeholder="請輸入工資">
</div>
<div class="form-group">
    <label for="age">年齡</label>
    <input type="text" class="form-control" v-model="user.age" id="age" placeholder="請輸入年齡">
</div>
<div class="form-group">
    <label for="description">個人簡介</label>
    <input type="text" class="form-control" v-model="user.des" id="description" placeholder="請輸入個人簡介">
</div>
<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">提交</button>

2、給提交按鈕系結 saveOrUpdate方法

    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue 生命周期",
            users:[], //定義一個users空陣列，用來存貯所有用戶的資訊
            user:{},  //定義了一個空的json物件
        },
        methods:{
            saveOrUpdate(){ //保存或者修改方法
                //發送添加的請求
                console.log(this.user);
                axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
                    this.user={}; //添加成功，清空資料
                    alert('用戶資訊更新成功!');
                    //更新原始串列的資料
                    this.findAll(); //呼叫查詢所有
                }).catch(err=>{
                    alert('用戶資訊更新失敗!')
                });
            },
            findAll(){
                //發送axios請求
                axios.get("http://localhost:8990/users").then(res=>{
                    console.log(res.data);
                    this.users = res.data;
                }); //es6 箭頭函式 注意：箭頭函式內部沒有自己this  簡化 function(){} //存在自己this
            }
        },

3、測驗一下

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XUAecTFJ-1626677532970)(Vue用戶串列頁面開發.assets/image-20210717111531326.png)]

測驗成功！！！

6、修改用戶資訊

6.1、后端代碼

1、UserDAO類

//更新用戶資訊
void update(User user);

//基于id查詢用戶資訊
User findById(Integer id);

2、UserDAOMapper.xml

<!--update-->
<update id="update" parameterType="User">
    update t_user
    set
    name = #{name},
    age = #{age},
    salary = #{salary},
    des = #{des}
    where id = #{id}
</update>

<!--findById-->
<select id="findById" parameterType="Integer" resultType="User">
    select
    id,name,age,salary,des
    from t_user
    where id = #{id}
</select>

3、service層

UserService類

//修改用戶資訊
void update(User user);

//基于id查詢用戶資訊
User findById(Integer id);

UserServiceImpl實作類

@Override
public void update(User user) {
    userDAO.update(user);
}

@Override
@Transactional(propagation = Propagation.SUPPORTS) //方法上宣告事務注解  Propagation:事務傳播屬性 支持事務
public User findById(Integer id) {
    return userDAO.findById(id);
}

4、control層

在這里我們要根據前端請求的引數進行判斷，如果前端請求的引數中id為空，說明是添加操作，否則是更新操作，我們執行相對應的代碼，

//添加員工資訊介面
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    log.info("接收的業務邏輯：{}",user);
    //判斷是否存在id
    //存在： 更新操作      不存在id： 添加操作
    if(StringUtils.isEmpty(user.getId())){ //如果為空
        log.info("添加業務邏輯......");
        userService.save(user);  //添加
    }else{
        log.info("更新業務邏輯......");
        userService.update(user);
    }

}

6.2、前端代碼

我們點擊修改按鈕，顯示用戶資訊，

1、我們先給修改按鈕添加根據id查詢用戶資訊事件

<a href="" class="btn btn-info btn-sm" @click.prevent="userEditDetail(user.id)">修改</a>

2、userEditDetail(id)

userEditDetail(id){  //用來在表單中將當前點擊用戶資訊進行回顯
    axios.get("http://localhost:8990/user/"+id).then(res=>{
        this.user = res.data;  //完成資料回顯
    });
},

3、給提交按鈕系結修改或者添加用戶資訊事件

<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">提交</button>

4、saveOrUpdate()

saveOrUpdate(){ //保存或者修改方法
    if(!this.user.name){
        alert("姓名不能為空!");
        return ;
    }
    console.log(this.user);
    axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
        this.user={}; //添加成功，清空資料
        alert('用戶資訊更新成功!');
        //更新原始串列的資料
        this.findAll(); //呼叫查詢所有
    }).catch(err=>{
        alert('用戶資訊更新失敗!')
    });
},
},
findAll(){
    //發送axios請求
    axios.get("http://localhost:8990/users").then(res=>{
        console.log(res.data);
        this.users = res.data;
    }); //es6 箭頭函式 注意：箭頭函式內部沒有自己this  簡化 function(){} //存在自己this
},

5、測驗一下

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bsz7p8mt-1626677532970)(Vue用戶串列頁面開發.assets/image-20210717175122673.png)]

測驗成功！！！

7、洗掉用戶資訊

7.1、后端代碼

1、UserDAO介面

//基于id洗掉用戶資訊
void delete(Integer id);

2、UserDAOMapper.xml

<!--delete-->
<delete id="delete" parameterType="Integer">
    delete from t_user where id = #{id}
</delete>

3、service層

UserService類

//根據id洗掉用戶資訊
void delete(Integer id);

UserServiceImpl類

@Override
public void delete(Integer id) {
    userDAO.delete(id);
}

4、controller類

//根據id洗掉用戶資訊的介面
@DeleteMapping("delete/{id}")
public void delete(@PathVariable Integer id){
    userService.delete(id);
}

7.2、前端代碼

1、給洗掉按鈕系結洗掉事件

<a href="javascript:;" class="btn btn-danger btn-sm" @click="delUser(user.id)">洗掉</a>

2、delUser(id)洗掉用戶方法

delUser(id){ //洗掉用戶方法
    //友情提醒洗掉
    if(window.confirm("您確定要洗掉這條記錄嗎？")){
        axios.delete("http://localhost:8990/delete/"+id).then(res=>{
            alert("用戶資訊洗掉成功!");
            this.findAll(); 呼叫查詢所有
        }).catch(err=>{
            alert("用戶資訊洗掉失敗!");
        });
    }
}

3、測驗一下

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1SQbhCIt-1626677532972)(Vue用戶串列頁面開發.assets/image-20210717202211642.png)]

洗掉資訊成功！！！

至此，一個簡單的前后端分離小專案我們就完成了，需要原始碼和筆記的可以私信我，
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/289265.html

標籤：java

上一篇：java實戰，輕松理解魔法般的代理模式

下一篇：【面經分享】位元組抖音Android客戶端3+1輪已通過