一、项目概述
本项目是一个简单的在线学习应用,利用微信小程序开发技术,实现用户注册、登录、浏览课程、购买课程、学习课程等功能。用户可以通过微信小程序,随时随地方便地进行在线学习。
二、功能需求
-
用户注册:用户可以通过微信号、手机号等方式进行注册,并设置用户名和密码。
-
用户登录:已注册的用户可以使用用户名和密码登录系统。
-
课程浏览:用户可以浏览系统中的课程列表,查看课程详情。
-
课程购买:用户可以购买感兴趣的课程,并完成支付。
-
学习课程:用户可以学习已购买的课程,浏览课程内容。
三、技术选型
本项目使用微信小程序开发技术,包括前端界面设计、数据交互、用户注册登录验证、支付接口对接等。
前端界面设计使用微信小程序提供的组件库和界面模板,结合自定义样式进行开发。
数据交互使用微信小程序提供的API,通过网络请求获取后端接口数据。
用户注册登录验证使用微信小程序的缓存功能,保存用户登录状态。
支付接口对接使用微信小程序提供的支付接口,用户完成支付流程。
四、系统设计
1. 数据库设计
本系统数据库设计如下:
-
用户表(User):用户信息,包括用户ID、用户名、密码等字段。
-
课程表(Course):课程信息,包括课程ID、课程名称、价格等字段。
-
订单表(Order):用户购买课程的订单信息,包括订单ID、用户ID、课程ID等字段。
-
学习记录表(Record):用户学习课程的记录信息,包括记录ID、用户ID、课程ID等字段。
2. 前端页面设计
本系统包括以下几个页面:
-
注册页面:包括微信号、手机号、用户名、密码等输入框,点击注册按钮完成注册。
-
登录页面:包括用户名、密码输入框,点击登录按钮完成登录。
-
课程列表页面:展示系统中的课程列表,点击进入课程详情页面。
-
课程详情页面:展示课程的详细信息,包括课程名称、价格、介绍等。
-
购买页面:展示课程的价格和支付按钮,点击支付按钮完成支付。
-
学习页面:展示课程的内容,并记录用户学习进度。
3. 后端接口设计
本系统后端接口设计如下:
-
用户注册接口:接收用户名、密码等参数,将用户信息保存到数据库,返回注册成功提示信息。
-
用户登录接口:接收用户名、密码等参数,将用户信息与数据库进行验证,返回登录成功提示信息,并保存登录状态。
-
获取课程列表接口:从数据库中查询课程信息,返回课程列表。
-
获取课程详情接口:接收课程ID参数,从数据库中查询课程详细信息,返回课程详情。
-
创建订单接口:接收用户ID、课程ID等参数,将订单信息保存到数据库,返回订单号。
-
学习记录接口:接收用户ID、课程ID等参数,将学习记录信息保存到数据库。
-
支付接口:接收订单号等参数,调用微信支付接口完成支付,返回支付结果。
五、详细代码实现
1. 用户注册功能实现
前端页面代码如下:
<view>
<input bindinput="onWechatInput" placeholder="请输入微信号"></input>
<input bindinput="onPhoneInput" placeholder="请输入手机号"></input>
<input bindinput="onUsernameInput" placeholder="请输入用户名"></input>
<input bindinput="onPasswordInput" placeholder="请输入密码" type="password"></input>
<button bindtap="onRegisterTap">注册</button>
</view>
Page({
data: {
wechat: '',
phone: '',
username: '',
password: ''
},
onWechatInput(event) {
this.setData({
wechat: event.detail.value
})
},
onPhoneInput(event) {
this.setData({
phone: event.detail.value
})
},
onUsernameInput(event) {
this.setData({
username: event.detail.value
})
},
onPasswordInput(event) {
this.setData({
password: event.detail.value
})
},
onRegisterTap() {
// 调用后端注册接口
wx.request({
url: 'http://localhost:8080/register', // 后端接口地址
method: 'POST',
data: {
wechat: this.data.wechat,
phone: this.data.phone,
username: this.data.username,
password: this.data.password
},
success(res) {
wx.showToast({
title: '注册成功',
duration: 2000
})
}
})
}
})
后端接口实现代码如下:
@RestController
public class UserController {
@Autowired
private UserRepository userRepository;
@PostMapping("/register")
public String register(@RequestBody User user) {
userRepository.save(user);
return "注册成功";
}
}
2. 用户登录功能实现
前端页面代码如下:
<view>
<input bindinput="onUsernameInput" placeholder="请输入用户名"></input>
<input bindinput="onPasswordInput" placeholder="请输入密码" type="password"></input>
<button bindtap="onLoginTap">登录</button>
</view>
Page({
data: {
username: '',
password: ''
},
onUsernameInput(event) {
this.setData({
username: event.detail.value
})
},
onPasswordInput(event) {
this.setData({
password: event.detail.value
})
},
onLoginTap() {
// 调用后端登录接口
wx.request({
url: 'http://localhost:8080/login', // 后端接口地址
method: 'POST',
data: {
username: this.data.username,
password: this.data.password
},
success(res) {
wx.showToast({
title: '登录成功',
duration: 2000
})
// 保存登录状态
wx.setStorageSync('token', res.data.token)
}
})
}
})
后端接口实现代码如下:
@RestController
public class UserController {
@Autowired
private UserRepository userRepository;
@PostMapping("/login")
public String login(@RequestBody User user) {
User savedUser = userRepository.findByUsername(user.getUsername());
if (savedUser != null && savedUser.getPassword().equals(user.getPassword())) {
// 生成一个随机的token作为登录凭证
String token = UUID.randomUUID().toString();
return token;
} else {
return "登录失败";
}
}
}
3. 课程浏览功能实现
前端页面代码如下:
<view wx:for="{{courses}}" wx:key="courseId">
<view>{{course.name}}</view>
<view>{{course.price}}</view>
</view>
Page({
data: {
courses: []
},
onLoad() {
// 调用后端获取课程列表接口
wx.request({
url: 'http://localhost:8080/courses', // 后端接口地址
success(res) {
this.setData({
courses: res.data
})
}
})
}
})
后端接口实现代码如下:
@RestController
public class CourseController {
@Autowired
private CourseRepository courseRepository;
@GetMapping("/courses")
public List<Course> getAllCourses() {
return courseRepository.findAll();
}
}
4. 课程购买功能实现
前端页面代码如下:
<view>
<view>{{course.name}}</view>
<view>{{course.price}}</view>
<button bindtap="onBuyTap">购买</button>
</view>
Page({
data: {
course: {}
},
onLoad(options) {
// 获取传递过来