城乡建设学校官方网站,手机版网站原理,做网站一条龙,企业自建电商平台有哪些1. Navicat查询数据
Navicat中查询所有数据
SELECT * FROM sys_user;Navicat中查询前两条数据#xff08;俩种方式#xff09;
SELECT * FROM sys_user LIMIT 2;
//从0开始#xff0c;第一个参数是起始位置即(pageNum-1)*pageSize#xff0c;第二个参数是步长
SELECT * …1. Navicat查询数据
Navicat中查询所有数据
SELECT * FROM sys_user;Navicat中查询前两条数据俩种方式
SELECT * FROM sys_user LIMIT 2;
//从0开始第一个参数是起始位置即(pageNum-1)*pageSize第二个参数是步长
SELECT * FROM sys_user LIMIT 0,2; 2. 分页查询最主要的就是对pageNum的处理
3. 操作
传入pageNum、pageSize并使用postman测试成功与否。
//UserController.java传入pageNum、pageSize
GetMapping(/page)public MapString,Object findPage(RequestParam Integer pageNum, RequestParam Integer pageSize) {pageNum (pageNum - 1) * pageSize;return (MapString, Object) userMapper.selectPage(pageNum,pageSize);//UserMapper.java传入pageNum、pageSize
Select(select * from sys_user limit #{pageNum}, #{pageSize})ListUser selectPage(Param(pageNum) Integer pageNum, Param(pageSize) Integer pageSize);使用findAll接口查询总条数 UserController.java写一个新方法selectPage查询总条数封装一个结果参数Map并返回。 public MapString,Object findPage(RequestParam Integer pageNum,RequestParam Integer pageSize) {pageNum (pageNum - 1) * pageSize;ListUser data userMapper.selectPage(pageNum,pageSize);Integer total userMapper.seleceTotal();MapString,Object res new HashMap();res.put(data,data);res.put(total,total);return res;}结合前端页面查看需要绑定的数据 分页数据total和表格数据data要相关联 3.1 前后关联Home.vue添加create函数
created(){//请求分页查询数据this.load()
},load(){fetch(http://localhost:9090/user/page?pageNumthis.pageNumpageSize this.pageSize).then(res res.json()).then(res {console.log(res)this.tableData res.datathis.total res.total})
},前端报错这是因为不同端口请求数据出现了跨域 解决方法后端设置跨域。 新建包config–new一个java class–添加代码(包名不用粘贴)
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE 24 * 60 * 60;Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();corsConfiguration.addAllowedOrigin(http://localhost:8080); // 1 设置访问源地址corsConfiguration.addAllowedHeader(*); // 2 设置访问源请求头corsConfiguration.addAllowedMethod(*); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration(/**, corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}数据有了改表格渲染
el-table :datatableData border stripe :header-cell-class-nameheaderBgel-table-column propid labelID width80/el-table-columnel-table-column propusername label用户名 width140/el-table-columnel-table-column propnickname label昵称 width120/el-table-columnel-table-column propemail label邮箱/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propaddress label地址 width120/el-table-column拼接绑定前端传来的pageNum、pageSize 及后端数据请求完后的total关键一步触发
size-changehandleSizeChange
current-changehandleCurrentChangeload(){fetch(http://localhost:9090/user/page?pageNumthis.pageNumpageSize this.pageSize username this.username).then(res res.json()).then(res {console.log(res)this.tableData res.datathis.total res.total})},handleSizeChange(pageSize){console.log(pageSize)this.pageSize pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum pageNumthis.load()}修改后的各部分
UserMapper.java
package com.qingge.springboot.mapper;import com.qingge.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;Mapper
public interface UserMapper {Select(SELECT * from sys_user)ListUser findAll();Insert(INSERT into sys_user(username, password,nickname,email,phone,address) VALUES (#{username}, #{password}, #{nickname}, #{email},#{phone}, #{address}))int insert(User user);int update(User user);Delete(delete from sys_user where id #{id})Integer deleteById(Param(id) Integer id);Select(select * from sys_user where username like #{username} limit #{pageNum}, #{pageSize})ListUser selectPage(Param(pageNum) Integer pageNum, Param(pageSize) Integer pageSize, Param(username) String username);Select(select count(*) from sys_user where username like concat(%,#{username},%))Integer seleceTotal(String username);
}UserController.java
package com.qingge.springboot.controller;import com.qingge.springboot.entity.User;
import com.qingge.springboot.mapper.UserMapper;
import com.qingge.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;RestController
RequestMapping(/user)
public class UserController {Autowiredprivate UserMapper userMapper;Autowiredprivate UserService userService;// 新增和修改PostMappingpublic Integer save(RequestBody User user) {// 新增或者更新return userService.save(user);}// 查询所有数据GetMappingpublic ListUser findall() {ListUser all userMapper.findAll();return all;}DeleteMapping(/{id})public Integer delete(PathVariable Integer id) {return userMapper.deleteById(id);}// 分页查询// 接口路径/user/page?pageNum1pageSize10// RequestParam接受// limit第一个参数 (pageNum - 1) * pageSize// pageSizeGetMapping(/page)public MapString,Object findPage(RequestParam Integer pageNum,RequestParam Integer pageSize,RequestParam String username) {pageNum (pageNum - 1) * pageSize;username % username %;ListUser data userMapper.selectPage(pageNum,pageSize,username);Integer total userMapper.seleceTotal(username);MapString,Object res new HashMap();res.put(data,data);res.put(total,total);return res;}
}User.java
package com.qingge.springboot.entity;import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;Data
public class User {private Integer id;private String username;JsonIgnoreprivate String password;private String nickname;private String email;private String phone;private String address;}CorsConfig.java
package com.qingge.springboot.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE 24 * 60 * 60;Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();corsConfiguration.addAllowedOrigin(http://localhost:8080); // 1 设置访问源地址corsConfiguration.addAllowedHeader(*); // 2 设置访问源请求头corsConfiguration.addAllowedMethod(*); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration(/**, corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}HomeView.vue
templateel-container stylemin-height: 100vhel-aside :widthsideWidth px stylebox-shadow: 2px 0 6px rgb(0 21 41 );el-menu :default-openeds[1, 3] stylemin-height: 100%; overflow-x: hiddenbackground-colorrgb(48, 65, 86)text-color#fffactive-text-color#ffd04b:collapse-transitionfalse:collapseisCollapsediv styleheight: 60px; line-height: 60px; text-align: centerimg src../assets/logo.png alt stylewidth: 20px; position: relative; top: 5px; right: 5pxb stylecolor: white v-showlogoTextShow后台管理系统/b/divel-submenu index1template slottitlei classel-icon-message/ispan slottitle导航一/span/templateel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/ispan slottitle导航二/span/templateel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/ispan slottitle导航三/span/templateel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header stylefont-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flexdiv styleflex: 1; font-size: 20pxspan :classcollapseBtnClass stylecursor: pointer clickcollapse/span/divel-dropdown stylewidth: 70px; cursor: pointerspan王小虎/spani classel-icon-arrow-down stylemargin-left: 5px/iel-dropdown-menu slotdropdown el-dropdown-item stylefont-size: 14px; padding: 5px 0个人信息/el-dropdown-itemel-dropdown-item stylefont-size: 14px; padding: 5px 0退出/el-dropdown-item/el-dropdown-menu/el-dropdown/el-headerel-maindiv stylemargin-bottom: 30pxel-breadcrumb separator/el-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item用户管理/el-breadcrumb-item/el-breadcrumb/divdiv stylemargin: 10px 0el-input stylewidth: 200px placeholder请输入名称 suffix-iconel-icon-search v-modelusername/el-input
!-- el-input stylewidth: 200px placeholder请输入邮箱 suffix-iconel-icon-message classml-5/el-input--
!-- el-input stylewidth: 200px placeholder请输入地址 suffix-iconel-icon-position classml-5/el-input--el-button classml-5 typeprimary clickload搜索/el-button/divdiv stylemargin: 10px 0el-button typeprimary新增 i classel-icon-circle-plus-outline/i/el-buttonel-button typedanger批量删除 i classel-icon-remove-outline/i/el-buttonel-button typeprimary导入 i classel-icon-bottom/i/el-buttonel-button typeprimary导出 i classel-icon-top/i/el-button/divel-table :datatableData border stripe :header-cell-class-nameheaderBgel-table-column propid labelID width80/el-table-columnel-table-column propusername label用户名 width140/el-table-columnel-table-column propnickname label昵称 width120/el-table-columnel-table-column propemail label邮箱/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propaddress label地址 width120/el-table-columnel-table-column label操作 width200 aligncentertemplate slot-scopescopeel-button typesuccess编辑 i classel-icon-edit/i/el-buttonel-button typedanger删除 i classel-icon-remove-outline/i/el-button/template/el-table-column/el-tablediv stylepadding: 10px 0el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepageNum:page-sizes[2, 5, 10, 20]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/el-main/el-container/el-container
/templatescriptexport default {name: Home,data() {return {tableData: [],total: 0,pageNum:1,pageSize:2,username:,msg: hello 青哥哥,collapseBtnClass: el-icon-s-fold,isCollapse: false,sideWidth: 200,logoTextShow: true,headerBg: headerBg}},created(){//请求分页查询数据this.load()},methods: {collapse() { // 点击收缩按钮触发this.isCollapse !this.isCollapseif (this.isCollapse) { // 收缩this.sideWidth 64this.collapseBtnClass el-icon-s-unfoldthis.logoTextShow false} else { // 展开this.sideWidth 200this.collapseBtnClass el-icon-s-foldthis.logoTextShow true}},load(){fetch(http://localhost:9090/user/page?pageNumthis.pageNumpageSize this.pageSize username this.username).then(res res.json()).then(res {console.log(res)this.tableData res.datathis.total res.total})},handleSizeChange(pageSize){console.log(pageSize)this.pageSize pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum pageNumthis.load()}}
}
/scriptstyle
.headerBg {background: #eee!important;
}
/style
