3.9学习记录
在web项目的基础上，在微信小程序上实现了展示
首先，写了一个课程管理的web页面，可以简单实现课程的添加和分页查询，具体代码如下
ClazzController
点击查看代码
package com.itheima.controller;
import com.itheima.pojo.Clazz;
import com.itheima.pojo.ClazzQueryParam;
import com.itheima.pojo.PageResult;
import com.itheima.pojo.Result;
import com.itheima.service.ClazzService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@CrossOrigin(origins = "*")
@Slf4j
@RequestMapping("/clazzs")
@RestController
public class ClazzController {
@Autowired
private ClazzService clazzService;
//分页查询
@GetMapping
public Result page(ClazzQueryParam clazzQueryParam){
log.info("分页查询: {}", clazzQueryParam);
PageResult<Clazz> pageResult = clazzService.page(clazzQueryParam);
return Result.success(pageResult);
}
@PostMapping
public Result save(@RequestBody Clazz clazz){
log.info("新增班级: {}", clazz);
clazzService.save(clazz);
return Result.success();
}
}
ClazzMapper
点击查看代码
package com.itheima.mapper;
import com.itheima.pojo.Clazz;
import com.itheima.pojo.ClazzQueryParam;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import java.util.List;
@Mapper
public interface ClazzMapper {
List<Clazz> list(ClazzQueryParam clazzQueryParam);
@Options(useGeneratedKeys = true,keyProperty = "id")//获取生成主键
@Insert("insert into clazz(name,room,teacher,create_time,update_time)" +
"values(#{name},#{room},#{teacher},#{createTime},#{updateTime})")
void insert(Clazz clazz);
}
Clazz
点击查看代码
package com.itheima.pojo;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.time.LocalDateTime;
@Data
@NoArgsConstructor
public class Clazz {
private Integer id;
private String name;
private String room;
private String teacher;
private LocalDateTime createTime; //创建时间
private LocalDateTime updateTime;
public Clazz(Integer id, String name, String room, String teacher, LocalDateTime createTime, LocalDateTime updateTime) {
this.id = id;
this.name = name;
this.room = room;
this.teacher = teacher;
this.createTime = createTime;
this.updateTime = updateTime;
}
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 String getRoom() {
return room;
}
public void setRoom(String room) {
this.room = room;
}
public String getTeacher() {
return teacher;
}
public void setTeacher(String teacher) {
this.teacher = teacher;
}
public LocalDateTime getCreateTime() {
return createTime;
}
public void setCreateTime(LocalDateTime createTime) {
this.createTime = createTime;
}
public LocalDateTime getUpdateTime() {
return updateTime;
}
public void setUpdateTime(LocalDateTime updateTime) {
this.updateTime = updateTime;
}
@Override
public String toString() {
return "Clazz{" +
"id=" + id +
", name='" + name + '\'' +
", room='" + room + '\'' +
", teacher='" + teacher + '\'' +
", createTime=" + createTime +
", updateTime=" + updateTime +
'}';
}
}
ClazzQueryParam
点击查看代码
package com.itheima.pojo;
import org.springframework.format.annotation.DateTimeFormat;
import java.time.LocalDate;
public class ClazzQueryParam {
private Integer page=1;//页码
private Integer pageSize=5;//每页记录数
private String name;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate begin;//入职开始时间
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate end;
public ClazzQueryParam(Integer page, Integer pageSize, LocalDate begin, String name, LocalDate end) {
this.page = page;
this.pageSize = pageSize;
this.begin = begin;
this.name = name;
this.end = end;
}
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public LocalDate getBegin() {
return begin;
}
public void setBegin(LocalDate begin) {
this.begin = begin;
}
public LocalDate getEnd() {
return end;
}
public void setEnd(LocalDate end) {
this.end = end;
}
@Override
public String toString() {
return "ClazzQueryParam{" +
"page=" + page +
", pageSize=" + pageSize +
", name='" + name + '\'' +
", begin=" + begin +
", end=" + end +
'}';
}
}
PageResult
点击查看代码
package com.itheima.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
/**
* 分页结果封装类
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageResult<T> {
private Long total;
private List<T> rows;
}
Result
点击查看代码
package com.itheima.pojo;
import lombok.Data;
@Data
public class Result {
private Integer code; //编码：1成功，0为失败
private String msg; //错误信息
private Object data; //数据
public static Result success() {
Result result = new Result();
result.code = 1;
result.msg = "success";
return result;
}
public static Result success(Object object) {
Result result = new Result();
result.data = object;
result.code = 1;
result.msg = "success";
return result;
}
public static Result error(String msg) {
Result result = new Result();
result.msg = msg;
result.code = 0;
return result;
}
}
ClazzServiceImpl
点击查看代码
package com.itheima.service.impl;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.itheima.mapper.ClazzMapper;
import com.itheima.pojo.Clazz;
import com.itheima.pojo.ClazzQueryParam;
import com.itheima.pojo.PageResult;
import com.itheima.service.ClazzService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.time.LocalDateTime;
import java.util.List;
@Slf4j
@Service
public class ClazzServiceImpl implements ClazzService {
@Autowired
private ClazzMapper clazzMapper;
@Override
public void save(Clazz clazz) {
clazz.setCreateTime(LocalDateTime.now());
clazz.setUpdateTime(LocalDateTime.now());
log.info("保存班级数据：{}", clazz);
clazzMapper.insert(clazz);
}
//班级管理分页查询
@Override
public PageResult<Clazz> page(ClazzQueryParam clazzQueryParam) {
//1. 设置分页参数(PageHelper)
PageHelper.startPage(clazzQueryParam.getPage(), clazzQueryParam.getPageSize());
//2. 执行查询
List<Clazz> classList = clazzMapper.list(clazzQueryParam);
//3. 解析查询结果, 并封装
Page<Clazz> p = (Page<Clazz>) classList;
return new PageResult<Clazz>(p.getTotal(), p.getResult());
}
}
ClazzService
点击查看代码
package com.itheima.service;
import com.itheima.pojo.Clazz;
import com.itheima.pojo.ClazzQueryParam;
import com.itheima.pojo.PageResult;
public interface ClazzService {
void save(Clazz clazz);
PageResult<Clazz> page(ClazzQueryParam clazzQueryParam);
}
ClazzMapper.xml
点击查看代码
<!--定义Mapper映射文件的约束和基本结构-->
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.ClazzMapper">
<select id="list" resultType="com.itheima.pojo.Clazz">
/*查询clazz表*/
select * from clazz
</select>
</mapper>
index.html
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班级管理</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>班级管理</h1>
<div id="clazz-form">
<input type="text" id="name" placeholder="班级名称">
<input type="text" id="room" placeholder="教室">
<input type="text" id="teacher" placeholder="班主任">
<button onclick="saveClazz()">新增班级</button>
</div>
<table id="clazz-table">
<thead>
<tr>
<th>ID</th>
<th>班级名称</th>
<th>教室</th>
<th>教师</th>
<th>创建时间</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<!-- 数据行将动态插入到这里 -->
</tbody>
</table>
<div id="pagination">
<button onclick="prevPage()">上一页</button>
<span>第 <span id="current-page">1</span> 页</span>
<button onclick="nextPage()">下一页</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
script.js
点击查看代码
let currentPage = 1;
const pageSize = 5;
async function fetchClazzes(page, pageSize) {
const response = await fetch(`/clazzs?page=${page}&pageSize=${pageSize}`);
const result = await response.json();
if (result.code === 1) {
displayClazzes(result.data.rows);
document.getElementById('current-page').innerText = page;
} else {
alert(result.msg);
}
}
function displayClazzes(clazzes) {
const tableBody = document.querySelector('#clazz-table tbody');
tableBody.innerHTML = '';
clazzes.forEach(clazz => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${clazz.id}</td>
<td>${clazz.name}</td>
<td>${clazz.room}</td>
<td>${clazz.teacher}</td>
<td>${clazz.createTime}</td>
<td>${clazz.updateTime}</td>
`;
tableBody.appendChild(row);
});
}
async function saveClazz() {
const name = document.getElementById('name').value;
const room = document.getElementById('room').value; // 需要添加输入框
const teacher = document.getElementById('teacher').value; // 需要添加输入框
if (!name || !room || !teacher) {
alert('请输入完整信息');
return;
}
const response = await fetch('/clazzs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, room, teacher }) // 传递真实值
});
const result = await response.json();
if (result.code === 1) {
alert('班级新增成功');
fetchClazzes(currentPage, pageSize);
document.getElementById('name').value = '';
} else {
alert(result.msg);
}
}
function nextPage() {
currentPage++;
fetchClazzes(currentPage, pageSize);
}
function prevPage() {
if (currentPage > 1) {
currentPage--;
fetchClazzes(currentPage, pageSize);
}
}
// 初始化加载第一页数据
fetchClazzes(currentPage, pageSize);
styles.css
点击查看代码
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
#clazz-form {
margin-bottom: 20px;
text-align: center;
}
#clazz-form input {
padding: 10px;
width: 300px;
margin-right: 10px;
}
#clazz-form button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
#clazz-form button:hover {
background-color: #0056b3;
}
#clazz-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
#clazz-table th, #clazz-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#clazz-table th {
background-color: #f2f2f2;
}
#pagination {
text-align: center;
}
#pagination button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 0 5px;
}
#pagination button:hover {
background-color: #0056b3;
}
数据库设计
点击查看代码
create table clazz(
id int unsigned primary key auto_increment comment 'ID,主键',
name varchar(30) not null unique comment '班级名称',
room varchar(20) comment '班级教室',
teacher varchar(20) comment '班主任',
create_time datetime comment '创建时间',
update_time datetime comment '修改时间'
)comment '班级表';
实现结果如下
接下来，下载了微信开发者工具，实现了模拟机上的对该班级列表的增加和分页查询，具体代码如下
add.js
点击查看代码
import { request } from '../../utils/http';
Page({
data: {
name: '',
room: '',
teacher: ''
},
handleInput(e) {
const { field } = e.currentTarget.dataset;
this.setData({ [field]: e.detail.value });
},
submitClazz() {
const { name, room, teacher } = this.data;
if (!name || !room || !teacher) {
wx.showToast({ title: '请填写完整信息', icon: 'none' });
return;
}
wx.showLoading({ title: '提交中...' });
request('POST', '/clazzs', { name, room, teacher })
.then(() => {
wx.hideLoading();
wx.showToast({ title: '添加成功' });
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
prevPage.setData({ needRefresh: true });
wx.navigateBack();
})
.catch((err) => {
wx.hideLoading();
console.error('添加失败:', err);
});
}
});
add.json
点击查看代码
import { request } from '../../utils/http';
Page({
data: {
name: '',
room: '',
teacher: ''
},
handleInput(e) {
const { field } = e.currentTarget.dataset;
this.setData({ [field]: e.detail.value });
},
submitClazz() {
const { name, room, teacher } = this.data;
if (!name || !room || !teacher) {
wx.showToast({ title: '请填写完整信息', icon: 'none' });
return;
}
wx.showLoading({ title: '提交中...' });
request('POST', '/clazzs', { name, room, teacher })
.then(() => {
wx.hideLoading();
wx.showToast({ title: '添加成功' });
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
prevPage.setData({ needRefresh: true });
wx.navigateBack();
})
.catch((err) => {
wx.hideLoading();
console.error('添加失败:', err);
});
}
});
add.wxml
点击查看代码
<view class="container">
<view class="form-item">
<text>班级名称：</text>
<input
placeholder="请输入班级名称"
data-field="name"
bindinput="handleInput"
/>
</view>
<view class="form-item">
<text>教室：</text>
<input
placeholder="请输入教室"
data-field="room"
bindinput="handleInput"
/>
</view>
<view class="form-item">
<text>班主任：</text>
<input
placeholder="请输入班主任"
data-field="teacher"
bindinput="handleInput"
/>
</view>
<button type="primary" bindtap="submitClazz">提交</button>
</view>
add.wxss
点击查看代码
.container {
padding: 40rpx;
}
.form-item {
margin-bottom: 40rpx;
}
.form-item text {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
}
.form-item input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
box-sizing: border-box;
}
button[type="primary"] {
margin-top: 60rpx;
background: #07c160;
}
list.js
点击查看代码
import { request } from '../../utils/http';
Page({
data: {
clazzList: [],
currentPage: 1,
pageSize: 5,
total: 0
},
onLoad() {
this.loadData();
},
onShow() {
if (this.data.needRefresh) {
this.loadData();
this.setData({ needRefresh: false });
}
},
async loadData() {
wx.showLoading({ title: '加载中...' });
try {
const res = await request(
'GET',
`/clazzs?page=${this.data.currentPage}&pageSize=${this.data.pageSize}`
);
this.setData({
clazzList: res.rows,
total: res.total
});
} catch (err) {
console.error('加载失败:', err);
} finally {
wx.hideLoading();
}
},
prevPage() {
if (this.data.currentPage > 1) {
this.setData({ currentPage: this.data.currentPage - 1 }, () => {
this.loadData();
});
}
},
nextPage() {
if (this.data.currentPage * this.data.pageSize < this.data.total) {
this.setData({ currentPage: this.data.currentPage + 1 }, () => {
this.loadData();
});
}
}
});
list.json
点击查看代码
{
"navigationBarTitleText": "班级列表"
}
list.wxml
点击查看代码
<view class="container">
<!-- 新增按钮 -->
<navigator url="/pages/clazz/add/add" class="add-btn">+ 新增班级</navigator>
<!-- 班级列表 -->
<view class="list">
<block wx:for="{{clazzList}}" wx:key="id">
<view class="item">
<text class="name">{{item.name}}</text>
<view class="info">
<text>教室：{{item.room}}</text>
<text>班主任：{{item.teacher}}</text>
</view>
<text class="time">{{item.createTime}}</text>
</view>
</block>
</view>
<!-- 分页控件 -->
<view class="pagination">
<button bindtap="prevPage" disabled="{{currentPage === 1}}">上一页</button>
<text>第 {{currentPage}} 页</text>
<button bindtap="nextPage">下一页</button>
</view>
</view>
list.wxss
点击查看代码
.container {
padding: 20rpx;
}
.add-btn {
background: #07c160;
color: white;
padding: 20rpx;
border-radius: 8rpx;
text-align: center;
margin-bottom: 30rpx;
}
.list .item {
background: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}
.item .name {
font-size: 32rpx;
font-weight: bold;
display: block;
margin-bottom: 15rpx;
}
.item .info {
display: flex;
justify-content: space-between;
color: #666;
margin-bottom: 15rpx;
}
.item .time {
color: #999;
font-size: 24rpx;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30rpx;
}
.pagination button {
margin: 0 20rpx;
font-size: 28rpx;
background: #f0f0f0;
}
http.js
点击查看代码
const baseURL = 'http://localhost:8080'; // 替换为后端地址
export const request = (method, url, data) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + url,
method: method,
data: data,
header: { 'Content-Type': 'application/json' },
success: (res) => {
if (res.statusCode === 200 && res.data.code === 1) {
resolve(res.data.data);
} else {
wx.showToast({ title: res.data.msg || '请求失败', icon: 'none' });
reject(res.data);
}
},
fail: (err) => {
wx.showToast({ title: '网络连接失败', icon: 'none' });
reject(err);
}
});
});
};
app.js
点击查看代码
// app.js
App({
onLaunch() {
// 小程序启动时执行的代码
console.log('小程序启动');
},
onShow() {
// 小程序显示时执行的代码
console.log('小程序显示');
},
onHide() {
// 小程序隐藏时执行的代码
console.log('小程序隐藏');
},
globalData: {
// 全局数据
userInfo: null
}
});
app.json
点击查看代码
{
"pages": [
"pages/clazz/list/list",
"pages/clazz/add/add"
],
"window": {
"navigationBarTitleText": "班级管理",
"navigationBarBackgroundColor": "#07c160",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
app.wxss
点击查看代码
/* app.wxss */
/* 全局样式 */
page {
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.add-btn {
background: #07c160;
color: white;
padding: 20rpx;
border-radius: 8rpx;
text-align: center;
margin-bottom: 30rpx;
}
.list .item {
background: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}
.item .name {
font-size: 32rpx;
font-weight: bold;
display: block;
margin-bottom: 15rpx;
}
.item .info {
display: flex;
justify-content: space-between;
color: #666;
margin-bottom: 15rpx;
}
.item .time {
color: #999;
font-size: 24rpx;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30rpx;
}
.pagination button {
margin: 0 20rpx;
font-size: 28rpx;
background: #f0f0f0;
}
.form-item {
margin-bottom: 40rpx;
}
.form-item text {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
}
.form-item input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
box-sizing: border-box;
}
button[type="primary"] {
margin-top: 60rpx;
background: #07c160;
}
project.config.json
点击查看代码
{
"miniprogramRoot": "miniprogram-1/",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"coverView": true,
"nodeModules": true,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"minifyWXML": true,
"minifyJS": true,
"ignoreUploadUnusedFiles": true
},
"libVersion": "3.7.10",
"appid": "wxcbdef3d61c6b2993",
"projectname": "班级",
"condition": {
"miniprogram": {
"list": [
{
"name": "pages/clazz/list/list",
"pathName": "pages/clazz/list/list",
"query": "",
"scene": null
},
{
"name": "pages/clazz/add/add",
"pathName": "pages/clazz/add/add",
"query": "",
"scene": null
}
]
}
},
"compileType": "miniprogram",
"srcMiniprogramRoot": "miniprogram-1/",
"packOptions": {
"ignore": [],
"include": []
},
"editorSetting": {
"tabIndent": "auto",
"tabSize": 2
}
}
具体实现如下
浙公网安备 33010602011771号