前台：Vue + Element + Jquery
后台：Spring Boot + Spring Data JPA + MySQL

准备工作

1. 安装JDK 1.8，配置好环境变量
2. 安装MySQL 5.0+
3. 安装Maven，在IDEA中配置好Maven

后台搭建

修改项目根目录下的pom.xml 替换掉原来的parent标签

	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
    </parent>

创建基本的目录结构

删除src/test文件夹

在common文件夹中新建两个工具类 Result、WebMvcConfig

package com.example.demo_system.common;

/**
 * 配置返回数据的格式
 * */
public class Result<T> {
    private String code; // 结果码，比如请求成功返回0，失败返回-1
    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 error(String code, String msg) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}

package com.example.demo_system.common;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 配置跨域访问和请求头
 **/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("Content-Type","X-Requested-With","accept,Origin","Access-Control-Request-Method","Access-Control-Request-Headers","token")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowCredentials(true);
    }
}

MySQL中创建一个user数据库，创建一个user表

CREATE TABLE `user` (
	`id` BIGINT(20) NOT NULL auto_increment,
	`name` VARCHAR(20) DEFAULT NULL COMMENT '姓名',
	`age` INT(11) DEFAULT NULL COMMENT '年龄',
	`sex` VARCHAR(1) DEFAULT NULL COMMENT '性别',
	`address` VARCHAR(255) DEFAULT NULL COMMENT '地址',
	`phone` VARCHAR(20) DEFAULT NULL COMMENT '电话',
	`create_time` VARCHAR(20) DEFAULT NULL,
	PRIMARY KEY (`id`)
)ENGINE = INNODB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8

配置数据库连接，在resource目录下，把application.properties 删除，新建一个文件application.yml，根据自己的数据库名，用户名、密码修改

spring:
  datasource:
#    mysql 5.7以上版本：com.mysql.cj.jdbc.Driver
#    mysql 5.7以下版本：com.mysql.jdbc.Driver
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8

entity文件夹下新建java class文件：User

package com.example.demo_system.entity;

import javax.persistence.*;

/**
 * 用户实体类
 * @Table  完成实体类与数据表之间的映射，name 用来命名 当前实体类 对应的数据库 表的名字
 *
 * @Entity 当实体类名和表名相同，实体属性和表字段相同时，会默认完成实体属性和表字段的映射
 *         当实体类名和表名不同，实体属性和表字段不同时，需要使用@table和@column注解完成实体和表直接的映射
 *
 * @Id     用于声明一个实体类的属性映射为数据库的主键
 *
 * @GeneratedValue 为一个实体生成一个唯一标识的主键(JPA要求每一个实体Entity,必须有且只有一个主键)@GeneratedValue提供了主键的生成策略。
 *
 * @Column 用来标识实体类中属性与数据表中字段的对应关系
 * @Column(name = "xxx") 定义了被标注字段在数据库表中所对应字段的名称
 * */
@Table(name = "user")
@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    private Integer age;
    private String sex;
    private String address;
    private String phone;

    @Column(name = "create_time")
    private String createTime;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }

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

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

    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }

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

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

    public String getCreateTime() {
        return createTime;
    }
    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }
}

dao文件夹下，新建java Interface文件：UserDao

package com.example.demo_system.dao;

import com.example.demo_system.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

@Repository
//                                       <对应的实体类, 主键的类型>
public interface UserDao extends JpaRepository<User, Long> {

    @Query(value = "select * from user where name like %?1%", nativeQuery = true)
    Page<User> findNameLike(String name, Pageable pageRequest);
}

service文件夹下，新建java class文件：UserService

package com.example.demo_system.service;

import com.example.demo_system.dao.UserDao;
import com.example.demo_system.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;

@Service
public class UserService {

    @Resource
    private UserDao userDao;

    /**
     * 新增和修改
     * @desc 新增与更新，新增不传id，更新传id
     * @param user
     * */
    public void save(User user) {
        String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        user.setCreateTime(now);
        userDao.save(user);
    }

    /**
     * 删除
     * @param id
     * */
    public void delete(Long id) {
        userDao.deleteById(id);
    }


    /**
     * 根据id查询用户
     * @param id
     * */
    public User findById(Long id) {
        return userDao.findById(id).orElse(null);
    }
    
    
    /**
     * 分页查询用户
     * @param pageNum
     * @param pageSize
     * */
    public Page<User> findPage(Integer pageNum, Integer pageSize) {
        Sort sort = Sort.by(Sort.Direction.DESC, "create_time");
        Pageable pageable = PageRequest.of(pageNum - 1, pageSize, sort);
        return userDao.findAll(pageable);
    }

    
    /**
     * 分页查询用户，模糊查询
     * @param {number} pageNum
     * @param {number} pageSize
     * @param {String} name
     * */
    public Page<User> findFilterPage(Integer pageNum, Integer pageSize, String name) {
        Sort sort = Sort.by(Sort.Direction.DESC, "create_time");
        PageRequest request = PageRequest.of(pageNum - 1, pageSize, sort);
        return userDao.findNameLike(name, request);
    }
}

controller文件夹下，新建java class文件：UserController

package com.example.demo_system.controller;

import com.example.demo_system.common.Result;
import com.example.demo_system.entity.User;
import com.example.demo_system.service.UserService;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * 用户接口访问层
 * @RestController 这个接口里的所有数据都是返回json数据
 * @RequestMapping("/user") 路由
 * @RequestBody 接收Json格式的参数，把Json转换为java对象
 * @PathVariable 接收{id}对应的参数
 * @RequestParam(required = false, value = "1") 配置参数是否必填，以及默认值
 * */
@RestController
@RequestMapping("/user") // 路由
public class UserController {

    // 引入service层
    @Resource
    private UserService userService;

    /**
     * 新增用户
     * */
    @PostMapping
    public Result add(@RequestBody User user) {
        userService.save(user);
        return Result.success();
    }

    /**
     * 更新用户
     * */
    @PutMapping
    public Result update(@RequestBody User user) {
        userService.save(user);
        return Result.success();
    }

    /**
     * 删除用户
     * 接口访问地址为：/user/id
     * @param id
     * */
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id) {
        userService.delete(id);
        return Result.success();
    }

    /**
     * 根据id查询用户信息
     * 接口访问地址为：/user/id
     * @param id
     * */
    @GetMapping("/{id}")
    public Result<User> findById(@PathVariable Long id) {
        return Result.success(userService.findById(id));
    }

    /**
     * 分页模糊查询
     * */
    @GetMapping("/page")
    public Result<Page<User>> findFilterPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                             @RequestParam(defaultValue  = "10") Integer pageSize,
                                             @RequestParam(required = false) String name) {
        return Result.success(userService.findFilterPage(pageNum, pageSize, name));
    }
}

前端实现

1. resources/static文件夹下，新建index.html
2. File - Settings - Languages & FrameWorks - JavaScript：修改javascript版本为 ECMA 6
3. resources/static文件夹下，放入依赖文件，文件地址

• fonts文件夹 — 存放字体图标
• element.css
• element.js
• jquery.min.js
• vue.js
  
  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
    <h2>用户信息表</h2>

    <el-row>
        <el-col :span="6" style="margin-bottom: 10px">
            <el-button type="primary" @click="add">新增</el-button>
            <el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
        </el-col>
    </el-row>

    <el-table
            :data="page.content"
            stripe
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="用户名"
        >
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-pagination
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="pageNum"
                @prev-click="loadTable"
                @current-change="loadTable"
                @next-click="loadTable"
                :total="page.totalElements">
        </el-pagination>
    </el-row>

    <el-dialog
            title="用户信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="form.sex" label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

</div>

<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            page: {},
            name: '',
            pageNum: 1,
            pageSize: 8,
            dialogVisible: false,
            form: {}
        },
        created() {
            this.loadTable(this.pageNum);
        },
        methods: {
            loadTable(num) {
                this.pageNum = num;
                $.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
                    this.page = res.data;
                });
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 编辑
                    $.ajax({
                        url: '/user',
                        type: 'put',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        if (res.code === 0) {
                            this.dialogVisible = false;
                            this.loadTable(1);
                        }
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: '/user',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                }
            },
            del(id) {
                $.ajax({
                    url: '/user/' + id,
                    type: 'delete',
                    contentType: 'application/json'
                }).then(res => {
                    this.loadTable(1);
                })
            }
        }
    })
</script>
</body>
</html>

最终效果

启动tomcat，输入localhost:8080

项目源码

码云

出处

https://www.bilibili.com/video/BV12p4y167ny?p=1

文章是我看学习视频，一步一步跟着做顺便总结的，大家有兴趣可以去看原视频，视频不长，但十分实用