网站开发工具教程简单网页制作模板
目录
1、编写模板
2、发请求调接口
3、后端返回数据
1.编写实体类
2、UserController
3、Userservice接口
4、（mapper接口）UserMapper
5、xml
1、编写模板
<!-- 搜素框 --><el-input placeholder="请输入姓名" v-model="keyWord" style="width: 400px"><el-button slot="append" icon="el-icon-search" @click="searchByKeyword()"></el-button></el-input><!-- 列表 --><el-table :data="tableData" border style="width: 50%;margin: 0 auto;" @selection- change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="userId" label="账号" width="180"></el-table-column><el-table-column prop="userName" label="姓名" width="180"></el-table-column><el-table-column prop="password" label="密码"></el-table-column><el-table-column prop="sex" label="性别"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="location" label="地址"></el-table-column><el-table-column prop="name" label="操作" align="center"><template slot-scope="scope"><!-- (scope.row.userId)用于获取当前行数据对象中的用户ID（或其他字段） --><el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button><el-button size="mini" type="text" @click="deleteUser(scope.row.userId)">删除</el-button></template></el-table-column></el-table><!-- 分页 --><div><el-pagination @size-change="handleSizeChange" @prev-click="prevClick" @next-click="nextClick"@current-change="handleCurrentChange" background layout="total,sizes,prev, pager, next,jumper" :total="total":page-sizes="[10, 20, 50, 100, 500, 2000]"></el-pagination></div>2、发请求调接口
export default {data() {tableData: [], // 数据列表keyWord: '',//搜素框的值total: 0, // 数据总数pageNum: 0,//当前页码pageSize: 10,//每页显示的条数},//生命周期钩子函数在组件挂载后被调用，它会执行 selectUser(1, 10, "") 方法，用于初始化数据并展示第一页的用户数据。mounted() {this.selectUser(1, 10, "");},methods: {//分页方法、当页码发生变化是被调用handleCurrentChange(pageNum) {this.pageNum = pageNumthis.selectUser();},//上一页prevClick(pageNum) {this.pageNum = pageNumthis.selectUser();},//下一页nextClick(pageNum) {this.pageNum = pageNumthis.selectUser();},//当改变每页显示条数时被调用handleSizeChange(pageSize) {this.pageSize = pageSizethis.selectUser();},//查询用户数据的方法selectUser() {this.$axios({method: 'post',url: "http://localhost:8080/api/user/selectUser",data: {pageNum: this.pageNum,pageSize: this.pageSize,keyWord: this.keyWord,}}).then((res) => {let result = res.data.data;this.tableData = result.list;this.total = result.total;})},
}3、后端返回数据
1.编写实体类
Page实体类
package com.example.goods_admin.entity;public class Page {private int pageNum;private int pageSize;private String keyWord;public Page() {}public String getKeyWord() {return keyWord;}public void setKeyWord(String keyWord) {this.keyWord = keyWord;}public Page(int pageNum, int pageSize, String keyWord) {this.pageNum = pageNum;this.pageSize = pageSize;this.keyWord = keyWord;}public int getPageNum() {return pageNum;}public void setPageNum(int pageNum) {this.pageNum = pageNum;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}
}
user实体类继承page
package com.example.goods_admin.entity;public class User extends Page {private String id;private String userId;private String userName;private String password;private String sex;private int age;private String location;public User() {super();}public User(int pageNum, int pageSize, String keyWord) {super(pageNum, pageSize, keyWord);}public User(int pageNum, int pageSize, String keyWord, String id, String userId, String userName, String password, String sex, int age, String location) {super(pageNum, pageSize, keyWord);this.id = id;this.userId = userId;this.userName = userName;this.password = password;this.sex = sex;this.age = age;this.location = location;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getUserId() {return userId;}public void setUserId(String userId) {this.userId = userId;}public String getUserName() {return userName;}public void setUserName(String userName) {this.userName = userName;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getLocation() {return location;}public void setLocation(String location) {this.location = location;}}
2、UserController
@RestController
//@RequestMapping用于将 HTTP 请求映射到控制器方法上
@RequestMapping("/user")
public class UserController {@AutowiredUserservice userservice;@PostMapping("/selectUser")// @RequestBody 用于将 HTTP 请求的内容（或者请求体）绑定到方法的参数上。public Result selectUser(@RequestBody User user) {return userservice.selectUser(user);}
}3、Userservice接口
public interface Userservice {Result selectUser(User user);}4、Service层（UserserviceImpl）
@Service
public class UserserviceImpl implements Userservice {@AutowiredUserMapper userMapper;@Overridepublic Result selectUser(User user) {int pageNum = user.getPageNum()==0?1:user.getPageNum();int pageSize = user.getPageSize()==0?10:user.getPageSize();//1、开启分页查询PageHelper.startPage(pageNum,pageSize);//2、查询结果List<User> userList = userMapper.seleteUser(user);//3、封装结果PageInfo<User> userPageInfo = new PageInfo<>(userList);//4、返回return Result.succeed("查询成功",userPageInfo);}}4、（mapper接口）UserMapper
@Mapper
public interface UserMapper {List<User> seleteUser(User user);
}5、xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.goods_admin.mapper.UserMapper">
<!-- 结果映射：数据库字段与实体类字段的映射关系--><resultMap id="BaseResultMap" type="com.example.goods_admin.entity.User"><id column="id" jdbcType="VARCHAR" property="id" /><result column="userId" jdbcType="VARCHAR" property="userId" /><result column="userName" jdbcType="VARCHAR" property="userName" /><result column="password" jdbcType="VARCHAR" property="password" /><result column="sex" jdbcType="VARCHAR" property="sex" /><result column="age" jdbcType="INTEGER" property="age" /><result column="location" jdbcType="VARCHAR" property="location" /></resultMap><select id="seleteUser" resultType="com.example.goods_admin.entity.User">select * from user<where><if test="keyWord !=null and keyWord!=''">userName like concat('%', #{keyWord}, '%')</if></where></select></mapper>