项目简介
后台管理系统
- 用户管理
用户添加
用户修改
用户详情
删除用户
搜索用户
分页展示
- 课程管理
课程的上传
课程的修改
课程的删除
课程的明细(章节)
搜索
分页
- 选课管理
选课的修改
选课的详情
选课的删除
搜索
分页
用户系统
- 用户注册和登录
- 首页分类展示
- 全部课程展示(分类、分页和搜索)
- 课程详情
- 购买课程
- 课程播放
- 个人中心课程展示
开发项目
搭建环境
① 导入页面
② 创建项目
③ 先引入依赖 pom.xml
④ 搭建目录结构
⑤ 引入 工具类 配置文件 等
⑥ 导入数据库
验证码实现
① 创建Servlet生成验证码
package com.ujiuye.web.servlet.back;
import cn.dsna.util.images.ValidateCode;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 生成验证码
*/
@WebServlet(name = "ImgCodeServlet", urlPatterns = "/imgCode")
public class ImgCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 生成验证码
// 1.1 创建核心对象
// 参数1：宽度 参数2：高度 参数3：字符个数 参数4：干扰元素线的条数
ValidateCode code = new ValidateCode(100, 30, 4, 100);
// 将生成的验证码字符 保存到session中
HttpSession session = request.getSession();
session.setAttribute("code", code.getCode());
// 1.2 响应
code.write(response.getOutputStream());
}
}
② 后台登录页面 显示验证码 login.html
登录实现
① 登录页面点击登录按钮
// 点击登录按钮
submitForm(ruleForm){
// 校验表单
this.$refs[ruleForm].validate(valid => {
if(valid){
let p = new URLSearchParams()
p.append("method", "login")
p.append("username", this.ruleForm.username)
p.append("password", this.ruleForm.password)
p.append("imageCode", this.ruleForm.imageCode)
// 校验通过 提交表单信息到后台校验
axios.post("http://localhost:8080/smallU_1012/user", p).then(resp => {
// 返回结果 消息提示
// console.log(resp)
if(resp.data.code == 500){
// 提示警告信息
this.$message({
message: resp.data.msg,
type: "warning"
})
}else {
// 提示成功信息
this.$message({
message: resp.data.msg,
type: "success"
})
// 跳转到首页 2s后跳
window.setTimeout("window.location.href='http://127.0.0.1:5500/smallU_back/html/index.html'", 2000)
}
})
}else{
// 校验失败 消息提示
this.$message({
message: "表单校验未通过",
type: "warning"
})
}
})
}
② 请求到UserServlet中
// 处理登录的方法
public void login(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求参数
String username = request.getParameter("username");
String password = request.getParameter("password");
String imageCode = request.getParameter("imageCode");
HttpSession session = request.getSession();
String code = (String) session.getAttribute("code");
// 2. 判断验证码
if(code.equalsIgnoreCase(imageCode)){
// 验证码正确 调用业务 处理登录判断
User user = serivce.checkLogin(username, password);
if(user==null){
// 登录失败 提示用户名和密码不匹配
vo = new ResultVO(500, "用户名和密码不匹配！", null);
}else{
// 校验角色 状态
if(user.getStatus()==1 && user.getRole()==1){
// 登录成功
session.setAttribute("user", user);
vo = new ResultVO(200, "登录成功！", user);
}else{
// 登录失败 提示权限不足
vo = new ResultVO(500, "权限不足！", null);
}
}
}else{
// 验证码错误
vo = new ResultVO(500, "验证码输入有误！", null);
}
// 响应 信息
String json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
首页权限
正常登录成功跳转到首页，如果没有登录成功不允许跳转首页。
① 加载index.html之前 判断管理员是否登录
② Servlet中判断用户是否登录 响应对应信息
// 判断管理员是否登录
public void isUserLogin(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取session
HttpSession session = request.getSession();
// 2. 获取用户信息
User user = (User) session.getAttribute("user");
// 3. 根据结果 响应信息
if(user==null){
vo = new ResultVO(500, "获取用户信息失败！", null);
}else{
vo = new ResultVO(200, "获取用户信息成功！", user);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
首页信息回显和退出登录
① 页面回显用户信息
② 退出登录
后台处理清除session的用户信息
// 退出登录
public void loginOut(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取session
HttpSession session = request.getSession();
// 2. 清除用户信息
session.removeAttribute("user");
// 3. 响应结果
vo = new ResultVO(200, "退出成功！", null);
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
用户管理
首页数据获取
① 后台的首页index.html中点击用户管理按钮
② 在User/index.html中通过钩子函数 请求后台获取数据
// 获取数据
findByPage() { // 请求后台获取数据 分页
let url = "http://localhost:8080/smallU_1012/user?method=findByPage¤tPage="+this.currentPage+"&pageSize="+this.pageSize
axios.get(url).then(resp => {
// 获取数据
if(resp.data.code==200){
this.currentPage = resp.data.data.currentPage
this.pageSize = resp.data.data.pageSize
this.totalCount = resp.data.data.totalCount
this.totalPage = resp.data.data.totalPage
this.tableData = resp.data.data.list
}
})
}
③ 后台Servlet处理
// 用户分页查询
public void findByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize");
// 2. 调用业务层 获取分页数据
PageBean pageBean = serivce.findUserByPage(currentPage, pageSize);
// 3. 封装响应数据
vo = new ResultVO(200, "获取数据成功！", pageBean);
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
④ 后台业务层 封装的PageBean对象
@Override
public PageBean findUserByPage(String currentPage, String pageSize) {
// 处理分页
// 1. 创建PageBean对象
PageBean<User> pageBean = new PageBean<>();
// 2. 一页显示个数
int ps = Integer.parseInt(pageSize);
pageBean.setPageSize(ps);
// 3. 数据总个数
int totalCount = dao.findUserCount();
pageBean.setTotalCount(totalCount);
// 4. 总页码
int totalPage = (int)Math.ceil(totalCount*1.0/ps);
pageBean.setTotalPage(totalPage);
// 5. 当前页的页码
int cp = Integer.parseInt(currentPage);
pageBean.setCurrentPage(cp);
// 6. 当前页的数据
List<User> list = dao.findUserByPage(cp, ps);
pageBean.setList(list);
return pageBean;
}
⑤ User/index.html中获取响应的数据
用户添加
① User/index.html 点击用户点击按钮
② 在addUser.html中输入 用户信息 提交后台保存即可
发送请求提交数据到后台
// 点击提交按钮
submitForm(formName) { // 提交数据到后台
// 1. 校验表单
this.$refs[formName].validate(valid => {
if(valid){
// 校验成功 获取表单数据 发送请求
// 2. 获取表单数据
let p = new URLSearchParams()
p.append("method", "addUser")
for(let key in this.ruleForm){
p.append(key, this.ruleForm[key])
}
// 3. 发送请求
axios.post("http://localhost:8080/smallU_1012/user", p).then(resp => {
// 4. 获取响应结果
if(resp.data.code == 200){
this.$message({
message: resp.data.msg,
type: 'success'
})
// 跳转到 User/index.html
window.setTimeout("window.location.href='http://127.0.0.1:5500/smallU_back/html/User/index.html'", 2000)
}else{
this.$message({
message: resp.data.msg,
type: 'warnings'
})
}
})
}else{
// 校验失败
this.$message({
message: '表单校验未通过',
type: 'warning'
})
}
})
}
后台Servlet处理
// 添加用户的方法
public void addUser(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带的参数
Map<String, String[]> map = request.getParameterMap();
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 2. 调用业务层 处理添加业务 返回结果
boolean b = serivce.saveUser(user);
// 3. 根据返回结果 封装响应结果
if(b){
// 添加成功
vo = new ResultVO(200, "添加用户成功！", null);
}else{
// 添加失败
vo = new ResultVO(500, "添加用户失败！", null);
}
// 4. 响应信息
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
③ 在addUser.html 重置按钮
修改用户
① User/index.html 点击修改按钮
② 点击确认按钮 请求后台修改数据库数据
③ 后台的Servlet获取修改后的数据 去修改数据库
// 修改用户信息的方法
public void updateUser(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
Map<String, String[]> map = request.getParameterMap();
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 2. 调用业务层 处理修改业务 返回结果
boolean b = serivce.updateUser(user);
// 3. 根据结果响应信息
if(b){
// 修改成功
vo = new ResultVO(200, "修改成功！", null);
}else{
// 修改失败
vo = new ResultVO(500, "修改失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
用户详情
① User/index.html中的详情按钮
用户删除
① 点击删除选中按钮之前 获取删除信息
② 点击删除选中按钮 执行函数
delAll() {
// 1. 提示
this.$confirm(`确定要删除吗？`, {type: 'warning'}).then(() => {
// 确定
// 2. 获取选中 复选框数据的uid
for(let i=0; i < this.multipleSelection.length; i++){
this.delarr.push(this.multipleSelection[i].uid)
}
if(this.delarr.length>0){
// 3. 发送请求到后台
axios.get("http://localhost:8080/smallU_1012/user?method=delUser&uids="+this.delarr).then(resp => {
// 4. 获取响应数据
if(resp.data.code == 200){
// 删除成功
this.$message.success(resp.data.msg)
// 重新加载当前页
window.setTimeout("window.location.href='http://127.0.0.1:5500/smallU_back/html/User/index.html'", 2000)
}else{
// 删除失败
this.$message.warning(resp.data.msg)
}
})
}else{
this.$message.warning("请选择要删除的数据！")
}
}).catch(()=>{
// 取消
this.$message.message("取消删除！")
})
}
③ 后台的Servlet中处理删除
// 删除用户的方法
public void delUser(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String uids = request.getParameter("uids"); // 1,2,3,4,5
// 2. 调用业务层 处理删除业务 返回结果
boolean b = serivce.deleteUser(uids);
// 3. 根据删除结果 封装响应数据
if(b){
// 删除成功
vo = new ResultVO(200, "删除成功！", null);
}else{
// 删除失败
vo = new ResultVO(500, "删除失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
用户搜索
① User/index.html中的搜索框输入内容 失去焦点搜索
② 请求后台获取数据
@Override
public PageBean findUserByPage(String currentPage, String pageSize, String search) {
// 处理分页
// 1. 创建PageBean对象
PageBean<User> pageBean = new PageBean<>();
// 2. 一页显示个数
int ps = Integer.parseInt(pageSize);
pageBean.setPageSize(ps);
// 3. 数据总个数
int totalCount = dao.findUserCount(search);
pageBean.setTotalCount(totalCount);
// 4. 总页码
int totalPage = (int)Math.ceil(totalCount*1.0/ps);
pageBean.setTotalPage(totalPage);
// 5. 当前页的页码
int cp = Integer.parseInt(currentPage);
// 问题：搜索的总页码小于当前页 的话 没有数据
// 解决：如果搜索的总页码小于当前页 的话 当前页 为第一页
if(cp > totalPage){
cp = 1;
}
pageBean.setCurrentPage(cp);
// 6. 当前页的数据
List<User> list = dao.findUserByPage(cp, ps, search);
pageBean.setList(list);
return pageBean;
}
课程管理
上传课程
① index.html中点击课程管理按钮
上传文件
① course/index.html中点击上传课程按钮
② 图片和视频的上传 点上传服务器按钮
③ 提交对应的上传组件 触发:http-request
④ 执行:http-request对应的函数
⑤ 后台Servlet处理文件上传
// 处理文件上传的方法
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
// 1. 获取文件上传的内容
Part part = request.getPart("file");
String fileName = part.getSubmittedFileName();
String url = "http://localhost:8080/upload_1012/";
// 2. 封装响应内容
if(fileName.endsWith(".jpg") || fileName.endsWith(".jpeg") || fileName.endsWith(".png") || fileName.endsWith(".gif")){
// 图片上传成功
fileName = FileUploadUtils.uploadFile(part);
vo = new ResultVO(200, "图片上传成功！", url+fileName);
}else if(fileName.endsWith(".mp4")){
// 视频上传成功
fileName = FileUploadUtils.uploadFile(part);
vo = new ResultVO(200, "视频上传成功！", url+fileName);
}else{
// 格式不合法
vo = new ResultVO(500, "上传文件不合法！", null);
}
// 3. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
删除上传文件
① 点击文件上传组件的上传图标
② 文件删除后台处理
// 处理文件删除
public void removeFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取要删除文件的名字
String fileName = request.getParameter("fileUrl");
// 2. 获取文件的路径 file
File file = new File("D://upload_1012//"+fileName);
if(file.exists()){
// 解决删除失败 流信息引用关闭
System.gc();
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
boolean d = file.delete();
if(d){
if(fileName.endsWith(".mp4")){
vo = new ResultVO(200, "视频删除成功！", null);
}else{
vo = new ResultVO(200, "图片删除成功！", null);
}
}else{
vo = new ResultVO(500, "删除失败！", null);
}
}else{
vo = new ResultVO(500, "文件不存在！", null);
}
// 3. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
文件个数限制
课程添加
① course/addCourse.html中点击 确定按钮
// 点击确定按钮
submitForm(formName) {
// 1. 校验表单
this.$refs[formName].validate(valid => {
if(valid){
// 表单校验通过
// 2. 获取表单数据
let p = new FormData()
p.append("method", "addCourse")
for(let key in this.ruleForm){
p.append(key, this.ruleForm[key])
}
p.append("courseImage", this.dialogImageUrl.substring(this.dialogImageUrl.lastIndexOf("/")+1))
p.append("courseVideo", this.dialogVedioUrl.substring(this.dialogVedioUrl.lastIndexOf("/")+1))
// 3. 携带信息发送请求
axios.post("http://localhost:8080/smallU_1012/courses", p).then(resp => {
// 4. 返回结果
if(resp.data.code==200){
this.$message.success(resp.data.msg)
// 跳转到课程首页
window.setTimeout("window.location.href='http://127.0.0.1:5500/smallU_back/html/course/index.html'", 2000)
}else{
// 失败 提示信息
this.$message.warning(resp.data.msg)
}
})
}else{
// 表单未通过
this.$message.warning("表单校验未通过！")
}
})
}
② 后台的Servlet处理
// 处理课程添加
public void addCourse(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
Map<String, String[]> map = request.getParameterMap();
Course course = new Course();
try {
BeanUtils.populate(course, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 2. 调用业务层处理业务 返回结果
boolean b = service.saveCourse(course);
// 3. 根据结果 封装响应信息
if(b){
// 添加成功
vo = new ResultVO(200, "课程添加成功！", null);
}else{
// 添加失败
vo = new ResultVO(500, "课程添加失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
课程首页展示
① 访问course/index.html时先执行钩子函数获取数据
② 调用获取数据的方法
③ 后台Servlet处理
// 课程首页展示
public void findByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize");
// 2. 调用业务层处理业务 返回结果
PageBean pageBean = service.findCourseByPage(currentPage, pageSize);
// 3. 封装响应信息
if(pageBean.getList().size() > 0){
vo = new ResultVO(200, "获取数据成功！", pageBean);
}else{
vo = new ResultVO(500, "没有数据！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
课程搜索
// 课程首页展示
public void findByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize");
String search = request.getParameter("search");
// 2. 调用业务层处理业务 返回结果
PageBean pageBean = service.findCourseByPage(currentPage, pageSize, search);
// 3. 封装响应信息
if(pageBean.getList().size() > 0){
vo = new ResultVO(200, "获取数据成功！", pageBean);
}else{
vo = new ResultVO(500, "没有数据！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
@Override
public PageBean findCourseByPage(String currentPage, String pageSize, String search) {
// 处理课程首页的业务
PageBean<Course> pageBean = new PageBean<>();
// 1. 将一页显示个数 封装到PageBean
int ps = Integer.parseInt(pageSize);
pageBean.setPageSize(ps);
// 2. 总个数 封装PageBean
int totalCount = dao.findCourseCount(search);
pageBean.setTotalCount(totalCount);
// 3. 总页数 封装到PageBean
int totalPage = (int)Math.ceil(totalCount*1.0/ps);
pageBean.setTotalPage(totalPage);
// 4. 当前页码 封装PageBean
int cp = Integer.parseInt(currentPage);
if(cp > totalPage){
cp = 1;
}
pageBean.setCurrentPage(cp);
// 5. 当前页数据 封装到PageBean
List<Course> list = dao.findCourseByPage(cp, ps, search);
pageBean.setList(list);
return pageBean;
}
课程修改
① 在course/index.html 中点击修改按钮
② 处理文件上传 和 删除 同课程添加一样
③ 点击修改对话框中的确认按钮
// 修改确认按钮
submitForm(formName) {
// 1. 校验表单
this.$refs[formName].validate(valid => {
// 2. 判断
if(valid){
// 表单校验通过
// 3. 获取修改表单的数据
let p = new FormData()
p.append("method", "updateCourse")
for(let key in this.ruleForm){
p.append(key, this.ruleForm[key])
}
p.append("courseImage", this.dialogImageUrl.substring(this.dialogImageUrl.lastIndexOf("/")+1))
p.append("courseVideo", this.dialogVedioUrl.substring(this.dialogVedioUrl.lastIndexOf("/")+1))
axios.post("http://localhost:8080/smallU_1012/courses", p).then(resp => {
// 4. 获取响应结果
if(resp.data.code == 200){
this.$message.success(resp.data.msg)
this.dialogFormVisible1 = false
}else{
this.$message.warning(resp.data.msg)
}
})
}else{
// 表单校验失败
this.$message.warning("表单校验失败！")
}
})
}
④ 后台Servlet处理
// 课程首页展示
public void findByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize");
String search = request.getParameter("search");
// 2. 调用业务层处理业务 返回结果
PageBean pageBean = service.findCourseByPage(currentPage, pageSize, search);
// 3. 封装响应信息
if(pageBean.getList().size() > 0){
vo = new ResultVO(200, "获取数据成功！", pageBean);
}else{
vo = new ResultVO(500, "没有数据！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
// 课程修改的方法
public void updateCourse(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
Map<String, String[]> map = request.getParameterMap();
Course course = new Course();
try {
BeanUtils.populate(course, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 2. 调用业务层 处理修改业务 返回结果
boolean b = service.updateCourse(course);
// 3. 根据结果 封装响应信息
if(b){
vo = new ResultVO(200, "修改成功！", null);
}else{
vo = new ResultVO(500, "修改失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
删除选中
① 获取选中的内容
② 点击删除选中按钮
③ 后台的Servlet处理
// 课程的删除选中
public void delCourse(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String cids = request.getParameter("cids");
// 2. 调用业务层 处理业务 返回结果
boolean b = service.delCourseByCid(cids);
// 3. 根据结果 封装响应信息
if(b){
vo = new ResultVO(200, "删除成功！", null);
}else{
vo = new ResultVO(500, "删除失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
章节的添加
① course/index.html中点击章节按钮
② 点击添加章节中的确定按钮
// 点击章节添加确定按钮
addCDForm(formName){
// 1. 校验表单
this.$refs[formName].validate(valid => {
// 2. 判断
if(valid){
// 3. 获取表单的数据
let p = new FormData()
p.append("method", "addCourseDetail")
p.append("name", this.ruleForm.name)
p.append("cid", this.ruleForm.cid)
p.append("type", this.ruleForm.type)
p.append("url", this.ruleForm.url.substring(this.ruleForm.url.lastIndexOf("/")+1))
p.append("start_date", this.ruleForm.start_date)
// 4. 发送请求
axios.post("http://localhost:8080/smallU_1012/courseDetail", p).then(resp => {
// 获取响应信息
if(resp.data.code == 200){
this.$message.success(resp.data.msg)
this.dialogFormVisible2 = false
window.setTimeout("window.location='http://127.0.0.1:5500/smallU_back/html/course/index.html'", 2000)
}else{
this.$message.warning(resp.data.msg)
}
})
}else{
this.$message.warning("表单校验未通过")
}
})
},
③ 请求到Servlet中
// 添加章节的方法
public void addCourseDetail(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带的参数
Map<String, String[]> map = request.getParameterMap();
CourseDetail cd = new CourseDetail();
try {
BeanUtils.populate(cd, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 2. 调用业务层处理业务 返回结果
boolean b = service.saveCD(cd);
// 3. 根据结果 封装响应信息
if(b){
vo = new ResultVO(200, "章节添加成功！", null);
}else{
vo = new ResultVO(500, "章节添加失败！", null);
}
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
前台功能
用户注册
验证码
表单的校验
// 校验表单中的内容
checkV(v, msg){
// 1. 表单非空校验
if(v==null || ""==v.trim()){
this.msg = msg
return
}else{
let vv = v.trim().length
// 表单不为空
if(msg=="用户名不能为空"){
// 1. 校验用户名 长度
if(vv<3 || vv>12){
this.msg = "长度3-12位"
return
}
// 2. 用户名是否可用 是否已经注册过
// 发送请求
axios.get("http://localhost:8080/smallU_1012/user_b?method=checkName&username="+v.trim()).then(resp =>{
// 3. 返回结果
if(resp.data.code==500){
this.msg = resp.data.msg
}else{
this.msg = ''
this.num++
}
})
}else if(msg == "手机号不能为空"){
// 校验手机号
// 1. 手机号合法
let reg = /^1[3|5|7|8|9][0-9]{9}$/
if(reg.test(v.trim())){
// 2. 手机是否已经注册
axios.get("http://localhost:8080/smallU_1012/user_b?method=checkPhone&phone="+v.trim()).then(resp => {
// 3. 获取响应结果
if(resp.data.code == 500){
this.msg = resp.data.msg
}else{
this.msg = ''
this.num++
}
})
}else{
this.msg = "手机号不合法"
}
}else if(msg == "密码不能为空"){
if(vv < 3 || vv > 24){
this.msg = "长度3-24位"
}else{
this.msg = ''
this.num++
}
}else{
if(v.trim()==null || ""==v.trim()){
this.msg = "验证码不能为空"
}else{
this.msg = ''
this.num++;
}
}
}
}
点击注册按钮 处理
用户登录
① 校验表单
② 点击登录按钮
首页用户信息展示
① 判读是否用户登录
② 首页用户信息页面展示
前台系统
用户退出登录
① 点击用户信息中的退出登录按钮
② 在后台清除session的用户信息
// 退出登录
public void loginOut(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取信息
HttpSession session = request.getSession();
session.removeAttribute("user");
vo = new ResultVO(200, "退出成功！", null);
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
首页课程展示
① 首页展示一部分数据，获取数据
② 后台的Servlet根据类型 调用业务获取数据
// 根据类别 获取数据
public void getData(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带的参数
String courseType = request.getParameter("courseType");
// 2. 调用业务层处理业务
List<Course> list = service.findCourseByType(courseType);
// 3. 根据数据响应 信息
vo = new ResultVO(200, "获取数据！", list);
json = JsonUtils.objToJson(vo, response);
// 4. 响应
response.getWriter().print(json);
}
③ 渲染数据到视图中
全部课程
① index.html中点击 全部课程 跳转到全部课程页面
② 在全部课程页面 先获取数据
③ 后台根据条件搜索需要的课程 返回页面
// 查询全部课程中信息
public void findAllCourse(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带参数
String courseType = request.getParameter("courseType");
String currentPage = request.getParameter("currentPage");
String courseName = request.getParameter("courseName");
String pageSize = request.getParameter("pageSize");
// 2. 调用业务层 处理业务 返回结果
PageBean<Course> pageBean = service.findAllCourse(courseType, currentPage, courseName, pageSize);
// 3. 封装 响应信息
vo = new ResultVO(200, "获取数据！", pageBean);
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
④ 回显数据 和页码
课程详情
① 点击课程图片 跳转到课程详情页面展示
② 跳转到课程详情页面 videoDetail.html中
③ 页面渲染
章节的显示
① 进入看课程详情页面 直接根据课程查询章节
② 后台处理获取章节信息
// 根据cid查询章节
public void findCDByCid(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取请求携带的参数
String cid = request.getParameter("cid");
// 2. 调用业务层 处理业务 返回结果 第一章：{},{} 第二章：{}, {}, {}
Map<String, Object> map = service.findCDByCid(cid);
// 3. 根据结果 封装响应信息
vo = new ResultVO(200, "获取数据成功！", map);
// 4. 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
@Override
public Map<String, Object> findCDByCid(String cid) {
// 1. 创建map
Map<String, Object> map = new HashMap<>();
// 2. 查询 每个章节的
List<CourseDetail> list = dao.findCDByCid(cid);
// 3. 获取每一个章节号
for (CourseDetail courseDetail : list) {
String type = courseDetail.getType();
List<CourseDetail> list1 = dao.findCDByCidType(cid, type);
map.put(type, list1);
}
return map;
}
③ 页面中渲染
购买课程
支付宝平台
① 课程详情中如果显示 价格 点击价格 支付(支付宝支付)
https://open.alipay.com/ 支付宝平台
https://opendocs.alipay.com/common/02kkv7 开发文档
引入支付
① 详情页面中点击 支付(个人价格、平团价格)
② 后台处理付款
// 处理课程的支付
public void aliPay(HttpServletRequest request, HttpServletResponse response) throws IOException {
//获得初始化的AlipayClient
AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
//设置请求参数
AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
// 付款完成之后 回来的路径
String cid = request.getParameter("cid");
HttpSession session = request.getSession();
User user = (User) session.getAttribute("user");
alipayRequest.setReturnUrl("http://localhost:8080/smallU_1012/course_user?method=addCourseUser&cid="+cid+"&uid="+user.getUid());
// alipayRequest.setNotifyUrl(AlipayConfig.notify_url);
//商户订单号，商户网站订单系统中唯一订单号，必填
String out_trade_no = UUID.randomUUID().toString().replace("-","");
//付款金额，必填
String total_amount = request.getParameter("price");
//订单名称，必填
String subject = request.getParameter("courseName");
//商品描述，可空
// String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");
alipayRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","
+ "\"total_amount\":\""+ total_amount +"\","
+ "\"subject\":\""+ subject +"\","
// + "\"body\":\""+ body +"\","
+ "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
//若想给BizContent增加其他可选请求参数，以增加自定义超时时间参数timeout_express来举例说明
//alipayRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","
// + "\"total_amount\":\""+ total_amount +"\","
// + "\"subject\":\""+ subject +"\","
// + "\"body\":\""+ body +"\","
// + "\"timeout_express\":\"10m\","
// + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
//请求参数可查阅【电脑网站支付的API文档-alipay.trade.page.pay-请求参数】章节
//请求
String result = null;
try {
result = alipayClient.pageExecute(alipayRequest).getBody();
} catch (AlipayApiException e) {
e.printStackTrace();
}
//输出
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(result);
③ 将该用户购买该课程的记录保存到数据库
// 支付成功之后 处理
public void addCourseUser(HttpServletRequest request, HttpServletResponse response) throws IOException {
// System.out.println("xxxxx");
// 1. 获取请求携带参数
String cid = request.getParameter("cid");
String uid = request.getParameter("uid");
// 2. 调用业务层 处理业务
boolean b = service.saveCourseUser(cid, uid);
// 3. 根据结果 处理响应
if(b){
// 返回详情页面 重定向
response.sendRedirect("http://127.0.0.1:5500/smallU_before/pages/videoDetail.html?cid="+cid);
}
}
课程学习
① 在课程详情页面 如果购买之后 点击课程学习 跳转到播放页面
② 播放页面 显示章节目录 点击章节目录播放视频
③ 渲染到视图中
课程中心
① 个人信息中点击课程中心 进入课程中心页面 回显购买的课程
② 课程中心页面 通过钩子函数获取数据
③ 后台处理
// 根据用户查询 购买的课程
public void getDataByUid(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 1. 获取用户id
HttpSession session = request.getSession();
User user = (User) session.getAttribute("user");
// 2. 调用业务层 获取结果
List<Course> courses = service.findByUid(user.getUid());
// 3. 根据结果响应信息
vo = new ResultVO(200, "", courses);
// 响应
json = JsonUtils.objToJson(vo, response);
response.getWriter().print(json);
}
④ 将数据渲染到视图中
总结
后台管理
- 管理员登录 (验证码)
- 用户管理
用户添加
用户修改
用户删除选中
用户详情
用户搜索
用户分页
- 课程管理 (文件上传)
课程的上传
课程的修改
课程删除选中
课程的章节添加
课程的搜索
课程的分页
- 选课管理(作业)
用户系统
- 用户的注册和登录
- 首页分类展示
- 全部课程 (分页 搜索 分类)
- 课程详情 (章节)
- 课程的购买 (支付宝沙箱支付)
- 课程章节的播放
- 课程中心
- 页面对登录用户的信息展示
- 个人资料(作业)