佛山網(wǎng)站建設(shè)百度一下首頁
目錄???????
一、實例需求??
?二、代碼實現(xiàn) 🏌?
數(shù)據(jù)庫?👀
后端實現(xiàn)?📫
前端實現(xiàn)?🌱
三、源碼下載 👋
一、實例需求??
?實現(xiàn)一個簡單的CRUD，包含前后端交互。
?二、代碼實現(xiàn) 🏌?
數(shù)據(jù)庫?👀
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 COMMENT '創(chuàng)建時間',`avatar` varchar(255) DEFAULT NULL COMMENT '頭像',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1690322826313793539 DEFAULT CHARSET=utf8;后端實現(xiàn)?📫
方式一（使用springboot + mybatis-plus）
package com.example.demo.service;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.boot.autoconfigure.data.web.SpringDataWebProperties;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.awt.print.Pageable;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;@Service
public class UserService {@Resourceprivate UserMapper userMapper;public void save(User user) {String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());user.setCreateTime(now);userMapper.insert(user);}public void delete(Long id) {userMapper.deleteById(id);}public User findById(Long id) {if(id !=null){QueryWrapper<User> queryWrapper = Wrappers.query();queryWrapper.eq("id", id);return userMapper.selectOne(queryWrapper);}else{return null;}}public List<User> findAll() {QueryWrapper<User> queryWrapper = Wrappers.query();return userMapper.selectList(queryWrapper);}public IPage<User> findPage(Integer pageNum, Integer pageSize, String name) {LambdaQueryWrapper<User> queryWrapper = Wrappers.lambdaQuery();queryWrapper.like(User::getName, "%" + name + "%");return userMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper);}
}
參考資源下載。
方式二（使用JPA）
參考源碼下載。
前端實現(xiàn)?🌱
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶信息</title><link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto"><h2>員工信息表</h2><el-row ><el-col :span="2" style="margin-bottom: 10px"><el-button type="primary" @click="add">新增</el-button></el-col><el-col :span="2" style="margin-bottom: 10px"><el-button type="primary" @click="search" >查詢</el-button></el-col><el-col :span="6" style="margin-bottom: 10px"><el-input v-model="name" placeholder="請輸入員工姓名" style="width: 70%"></el-input></el-col></el-row><el-table:data="page.records"stripeborderstyle="width: 100%"><el-table-columnprop="name"label="用戶名"></el-table-column><!-- 新增頭像圖片列 --><el-table-columnprop="avatar"label="頭像"><template slot-scope="scope"><el-image :src="scope.row.avatar" style="width: 60px; height: 60px;"></el-image></template></el-table-column><el-table-columnprop="age"label="年齡"width="180"></el-table-column><el-table-columnprop="sex"label="性別"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="phone"label="電話"></el-table-column><el-table-columnfixed="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-paginationlayout="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-dialogtitle="用戶信息":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-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="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script>new Vue({el: '#app',// 在el屬性中指定了Vue實例要掛載的元素id為"app"，即前面提到的div容器。data: { // data屬性是一個對象，存儲了Vue實例的數(shù)據(jù)。page用于存儲從服務(wù)器獲取到的用戶信息數(shù)據(jù)，初始值為空對象。name是用于搜索用戶名稱的字段，默認(rèn)為空字符串。page: {},name: '',pageNum: 1,// pageNum表示當(dāng)前頁碼，默認(rèn)為1。pageSize: 4, // pageSize表示每頁顯示的數(shù)據(jù)條數(shù)，默認(rèn)為4。dialogVisible: false,// dialogVisible控制彈窗的顯示與隱藏，默認(rèn)為false（隱藏）form: {avatar : ''},// form是用于編輯用戶信息的表單數(shù)據(jù)對象，默認(rèn)為空對象。message: {duration: 500 // 持續(xù)時間為0.5秒}},created() { // created方法是Vue實例的生命周期鉤子，在實例創(chuàng)建后立即執(zhí)行。在這個鉤子中調(diào)用了loadTable方法，將pageNum作為參數(shù)傳入，加載表格數(shù)據(jù)。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 => {this.dialogVisible = false;this.loadTable(1);this.$message.success('修改成功！');})} else {// 新增$.ajax({url: '/user',type: 'post',contentType: 'application/json',data: data}).then(res => {this.dialogVisible = false;this.loadTable(1);this.$message.success('新增成功！');})}},del(id) {$.ajax({url: '/user/' + id,type: 'delete',contentType: 'application/json'}).then(res => {this.loadTable(1);this.$message.success('刪除成功！');})},search() {this.loadTable(1);}}})
</script>
</body>
</html>
三、源碼下載 👋
Asukabai/usermanage: Contains CRUD and other basic operations for users (github.com)