《web应用技术》第8次课后作业

1、任务分配

我的小组长是   李梦丹   ，我们组课程设计的题目是：   影院管理系统      ，我认领的功能模块是：    用户管理      

2、新建一个该功能模块的表

python生成虚拟数据

import random
import string
import openpyxl
import pandas as pd


# 中国常见城市列表（这里只列出部分作为示例）
cities = ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '西安', '重庆']

# 示例街道名（这里只是随机生成的）
streets = ['中山路', '人民路', '解放路', '建国路', '和平路', '友谊路']

# 常见的中文姓氏列表
last_names = ['李', '王', '张', '刘', '陈', '杨', '赵', '黄', '周', '吴', '高']

# 常见的中文名字列表（这里只列出部分单字和双字名字作为示例）
single_character_names = ['伟', '芳', '娜', '明', '磊', '静', '婷', '浩', '军', '俊']
double_character_names = ['丽华', '晓明', '志强', '海燕', '伟民', '静怡', '博文', '天宇', '俊杰', '思源']


def generate_random_chinese_name():
    """生成随机中文名字"""
    # 随机选择一个姓氏
    last_name = random.choice(last_names)
    # 随机选择名字（单字或双字）
    if random.choice([True, False]):  # 50% 的概率选择单字或双字名字
        name = random.choice(single_character_names)
    else:
        name = random.choice(double_character_names)
    return f"{last_name}{name}"


def generate_random_address():
    """生成随机地址"""
    city = random.choice(cities)
    street = random.choice(streets)
    # 假设街道后面跟着门牌号（1-1000）
    door_number = str(random.randint(1, 1000))
    return f"{street}{door_number}, {city}"


def generate_random_email():
    """生成随机邮箱"""
    domains = ['qq.com', '163.com', '126.com', 'aliyun.com', 'sina.com']  # 中国常见的邮箱域名
    name_part = generate_random_chinese_name().replace(' ', '').replace('.', '')  # 去除空格和点号
    return f"{name_part}@{random.choice(domains)}"


def generate_random_phone_number():
    """生成随机电话号码（中国格式）"""
    # 中国手机号码通常以1开头，第二位可能是3-9中的任意一个数字
    first_part = '1' + str(random.randint(3, 9))
    # 接下来的8位是随机数字
    rest_part = ''.join(random.choices(string.digits, k=8))
    return f"{first_part}{rest_part}"


def generate_random_password():
    """生成随机密码"""
    first_part =random.choice(string.ascii_letters);
    # 接下来的4位是随机数字
    rest_part = ''.join(random.choices(string.digits, k=6))
    return f"{first_part}{rest_part}"


# 创建一个空列表来存储随机生成的数据
data_points = []

# 生成一定数量的随机数据点（例如，200个）
for _ in range(200):
    name = generate_random_chinese_name()
    address = generate_random_address()
    email = generate_random_email()
    phone_number = generate_random_phone_number()
    password = generate_random_password()
    # 将数据点添加到列表中
    data_point = {'name': name, 'address': address, 'email': email, 'phone_number': phone_number, 'password': password}
    data_points.append(data_point)

# 使用列表创建DataFrame
df = pd.DataFrame(data_points)

# 将DataFrame保存为Excel文件
excel_filename = 'parts_data.xlsx'
df.to_excel(excel_filename, index=False, engine='openpyxl')

print(f"数据已保存至 {excel_filename}")

3、完成对该表的查询和分页，修改删除

mapper

package example.mapper;

import example.pojo.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface userInfoMapper {
    @Select("select * from userinformation")
    public List<User> findAll();

    @Delete("delete from userinformation where id=#{id}")
    public int delete(Integer id);

    @Select("select *from userinformation where id=#{id}")
    public User findByID(Integer id);

    @Update("update userinformation set username=#{username},address=#{address},email=#{email},phone=#{phone},password=#{password} where id=#{id} ")
    public boolean update(User user);

    @Select("select password from userinformation where username=#{username}")
    public String findPassword(@Param("username") String username);
}

service

接口

package example.service;

import example.pojo.PageBean;
import example.pojo.User;
import org.springframework.stereotype.Service;

public interface userFenyeService {
    public PageBean list(Integer Page, Integer PageSize);//PageBean对象封装分页后的数据，Page是当前页，PageSize是当前页数据条数

    public List<User> findAll();
    public int delete(Integer id);
    public User findByID(Integer id);
    public boolean update(User user);
    public String findPassword(String username);
}

接口实现

package example.service.iml;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import example.mapper.userInfoMapper;
import example.pojo.PageBean;
import example.pojo.User;
import example.service.userFenyeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class userFenyeService_impl implements userFenyeService {
    @Autowired
    private userInfoMapper userInfomapper;
    
 @Override
    public List<User> findAll(){
       return userInfoMapper.findAll();
    };

    @Override
    public PageBean list(Integer Page, Integer PageSize) {
        //设置分页参数，PageHelper.startPage(page, pageSize)是MyBatis 的一个分页插件——PageHelper的方法调用,其后执行findAll获取页面数据会根据参数自动分页
        //注意必须在Mybatis查询前使用
        PageHelper.startPage(Page,PageSize);

        //执行分页查询
        List<User> userList=userInfomapper.findAll();

        //获取分页结果,PageInfo包装分页后的结果poetList，使pageInfo可以获取分页后的各种信息
        PageInfo<User> pageInfo=new PageInfo<>(userList);

        //PageBean封装分页数据和列表数据，pageInfo.getTotal是总记录数，getList是当前页数据列表
        PageBean pageBean=new PageBean(pageInfo.getTotal(),pageInfo.getList());

        return pageBean;
    }

    @Override
    public int delete(Integer id){
        return userInfomapper.delete(id);
    }

    @Override
    public User findByID(Integer id){
        return userInfomapper.findByID(id);
    }

    @Override
    public boolean update(User user){
        return userInfomapper.update(user);
    }

    @Override
    public String findPassword(String username){return  userInfomapper.findPassword(username);}
}

controller

package example.controller;

import example.pojo.PageBean;
import example.pojo.Result;
import example.pojo.User;
import example.service.userFenyeService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class userInfoController {
    @Autowired
    private userFenyeService userFenyeService;

    @GetMapping("/fenyeData/{page}/{pageSize}")
    public Result fenyeData(@PathVariable Integer page, @PathVariable Integer pageSize){
        PageBean pagebean=userFenyeService.list(page,pageSize);
        return Result.success(pagebean);
    }

    @RequestMapping("/deleteData")
    public void deleteData(Integer id){
        userFenyeService.delete(id);
    }

    //@PathVariable用于从URL路径/users/123中提取值;@RequestParam用于从请求参数/greet?name=John提取值(在使用这两个注解时，你需要确保你的URL模板和参数名称与Controller方法中的参数名称匹配)
    @RequestMapping("UserFindByID/{id}")
    public Result userFindByID(@PathVariable("id") Integer id){return Result.success(userFenyeService.findByID(id));}

    //@RequestBody它用于将 HTTP 请求体中的数据绑定到方法的参数上。这通常用于处理 JSON、XML 或其他格式的数据，并将其转换为 Java 对象。
    @RequestMapping("/updateData")
    public Result updateData(@RequestBody User user){
        boolean r=userFenyeService.update(user);
        if(r){
            return Result.success(user);
        }else{
            return Result.error("更新失败");
        }
    }

    @RequestMapping("/findPassword")
    public  Result findPassword (@Param("username") String username){
        String r=userFenyeService.findPassword(username);
            return Result.success(r);
    }
}

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--引入组件库-->
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="js/element.css">
    <title>用户管理</title>
</head>
<body>
<div id="app">
<el-container style="height: 100vh; display: flex; flex-direction: row;">
        <!--侧边栏-->
        <el-aside width="200px" >
            <el-menu background-color="#FEF5E4" text-color="#F09466" active-text-color="#ffd04b" style="position: absolute;top: 100px;">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">
                        用户管理
                        </span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-document"></i>
                    <span slot="title">
                        电影信息管理
                        </span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">
                        场次管理
                        </span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-document"></i>
                    <span slot="title">
                        订单管理
                        </span>
                </el-menu-item>
            </el-menu>
        </el-aside>

    <el-container>
        <!--头部-->
        <el-header style="height:80px; position: sticky; top: 0;z-index: 10" >
        <div>
            <img src="./img/head.jpg" alt="">
            影院管理系统
        </div>
        <el-button type="info" @click="back" style="height:40px; background-color: #D7A93A">退出</el-button>
    </el-header>
        <!--主要内容区-->
        <el-main style="flex: 1; overflow: auto;">
            <el-card>
                <!--用户信息表-->
                <el-table :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))" style="width: 100%;">
                    <el-table-column prop="id" label="编号" width="180"></el-table-column>
                    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="password" label="密码"></el-table-column>
                    <el-table-column align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" size="mini" placeholder="输入名字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <!--编辑信息弹框-->
                                <el-dialog title="编辑用户信息" :visible.sync="editRule.editDialog" width="50%" center>
                                    <el-form :model="editRule.ruleForm" label-width="100px">
                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="编号" prop="id">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.id" placeholder="请输入编号"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="姓名" prop="username">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.username" placeholder="请输入姓名"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="地址" prop="address">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.address" placeholder="请输入地址"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="邮箱" prop="email">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="电话" prop="phone">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.phone" placeholder="请输入电话"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-form-item label="密码" prop="password">
                                                    <el-row :gutter="4">
                                                        <el-col :span="12" class="checkRule_list">
                                                            <el-input v-model="user.password" placeholder="请输入密码"></el-input>
                                                        </el-col>
                                                    </el-row>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>

                                    <span slot="footer" class="checkRule_footer">
                                        <el-button @click="cancel">取 消</el-button>
                                        <el-button type="primary" @click="update">确 定</el-button>
                                    </span>
                                </el-dialog>
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[20, 30, 40, 50]"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </el-card>
        </el-main>
    </el-container>
</el-container>
</div>
</body>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData:[],
                search: '',
                currentPage4: 1,
                pageSize: 20,
                total:null,
                //编辑规则
                editRule: {
                editDialog: false, //弹窗
                },
                user:{},
            }
        },
        methods:{
            //返回
            back(){
                location.href='login.html'
            },
            //编辑
            handleEdit(index, row) {
                this.editRule.editDialog=true;
                var URL=`UserFindByID/${row.id}`
                axios.get(URL).then(response=>{
                    if(response.data.code){
                        this.user=response.data.data;
                    }
                }).catch(error=>{})
                console.log(index, row);
            },
            //取消弹框
            cancel(){
                this.editRule.editDialog=false;
            },
            //弹框编辑信息并确认
            update:function(){
                var URL='updateData';
                //put请求用于更新资源.url 是你想要更新的资源的地址;this.poet是包含更新后数据的对象，这个对象将被发送到服务器以更新资源。
                axios.put(URL,this.user).then(res=>{
                    if(res.data.code){
                        this.editRule.editDialog=false;
                        location.href='user_management.html';
                    }else{alert(res.data.message);}
                }).catch(error=>{})
            },
            //删除
            handleDelete(index, row) {
                if (window.confirm("确定要删除该记录吗？")) {
                    axios.post(`/deleteData?id=${row.id}`).then(ans => {
                        alert("删除成功");
                        this.findFenyeData();
                    }).catch(function (error) {console.log(error);})
                }
                console.log(index, row);
            },
            //分页
            findFenyeData() {
                var URL = `/fenyeData/${this.currentPage4}/${this.pageSize}`
                axios.get(URL).then(res => {
                    if (res.data.code) {
                        this.tableData = res.data.data.rows;
                        this.total = res.data.date.total;
                    }
                }).catch(error => {
                    console.error(error);
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findFenyeData();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage4 = val;
                this.findFenyeData();
                console.log(`当前页: ${val}`);
            },
        },
        created() {
            this.findFenyeData();
        }
    })
</script>

<style>
    a {
        color: white;
        text-decoration: none;
    }

    .el-header {
        background-color: #FEF5E4;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #F09466;
        font-size: 40px;
    }

    > div {
        display: flex;
        align-items: center;
    }



    img {
        width: 55px;
        border-radius: 50%;
        background-color: #eee;
    }

    .el-aside {
        background-color:#FEF5E4;
        height: 100%;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 280px;
    }
</style>
</html>

页面实现

    @Select("select * from poem where author like #{author} and style like #{style}")
    public List<Poet> findOne(@Param("author") String author,@Param("style") String style);

4.查询功能纠错

错误：mapper中的方法传入两个参数时，给参数加上@（Param）注解

另一种方法：

mapper

 @Select("select * from poem where author like #{author} and style like #{style}")
    public List<Poet> findOne(@Param("author") String author,@Param("style") String style);

service

//搜索功能
    @Override
    public PageBean findOne(Integer Page,Integer PageSize,String author,String style){
        String authorLIKE = "%" + author + "%";
        String styleLIKE = "%" + style + "%";
        PageHelper.startPage(Page,PageSize);
        List<Poet> PoetListOne=Poetmapper.findOne(authorLIKE,styleLIKE);
        PageInfo<Poet> pageInfo=new PageInfo<>(PoetListOne);
        PageBean pageBean=new PageBean(pageInfo.getTotal(),pageInfo.getList());
        return pageBean;
    }