当前位置:   article > 正文

前端vue+后端springboot+mybatisplus+MySql(仓库管理系统)示例一_vue 仓库管理系统

vue 仓库管理系统

新建项目

idea工具,新建springboot项目,然后再项目中新建vue模块,具体如图

 

Mysql数据库

  1. drop table if exists d_user;
  2. create table d_user(
  3. id int auto_increment primary key comment '主键',
  4. user_no varchar(20) not null comment '账号',
  5. user_name varchar(100) not null comment '名字',
  6. password varchar(30) not null comment '密码',
  7. age int null comment '年龄',
  8. sex int null comment '性别,1男,2女',
  9. phone varchar(30) null comment '电话',
  10. role_id int not null comment '角色id,0超级管理员,1管理员,2用户',
  11. is_valid varchar(4) default 'Y' null comment '是否有效,Y有效,N无效'
  12. ) comment '用户表';
  13. insert into d_user(user_no,user_name,password,age,sex,phone,role_id)
  14. values ('sa','超级管理员','1234',99,1,'13312345678',0);
  15. insert into d_user(user_no,user_name,password,age,sex,phone,role_id)
  16. values ('admin','管理员','1234',88,1,'13412345678',1);
  17. insert into d_user(user_no,user_name,password,age,sex,phone,role_id)
  18. values ('user1','用户1','1234',18,2,'13512345678',2);

springboot后端

配置文件

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4. <modelVersion>4.0.0</modelVersion>
  5. <parent>
  6. <groupId>org.springframework.boot</groupId>
  7. <artifactId>spring-boot-starter-parent</artifactId>
  8. <version>2.7.14</version>
  9. <relativePath/> <!-- lookup parent from repository -->
  10. </parent>
  11. <groupId>com.shrimpking</groupId>
  12. <artifactId>msy-storage-app02</artifactId>
  13. <version>0.0.1-SNAPSHOT</version>
  14. <name>msy-storage-app02</name>
  15. <description>Demo project for Spring Boot</description>
  16. <properties>
  17. <java.version>1.8</java.version>
  18. </properties>
  19. <dependencies>
  20. <dependency>
  21. <groupId>org.springframework.boot</groupId>
  22. <artifactId>spring-boot-starter-web</artifactId>
  23. </dependency>
  24. <dependency>
  25. <groupId>org.projectlombok</groupId>
  26. <artifactId>lombok</artifactId>
  27. <optional>true</optional>
  28. </dependency>
  29. <dependency>
  30. <groupId>org.springframework.boot</groupId>
  31. <artifactId>spring-boot-starter-test</artifactId>
  32. <scope>test</scope>
  33. </dependency>
  34. <dependency>
  35. <groupId>com.baomidou</groupId>
  36. <artifactId>mybatis-plus-boot-starter</artifactId>
  37. <version>3.4.1</version>
  38. </dependency>
  39. <dependency>
  40. <groupId>mysql</groupId>
  41. <artifactId>mysql-connector-java</artifactId>
  42. <version>5.1.47</version>
  43. </dependency>
  44. <dependency>
  45. <groupId>com.baomidou</groupId>
  46. <artifactId>mybatis-plus-generator</artifactId>
  47. <version>3.4.1</version>
  48. </dependency>
  49. <dependency>
  50. <groupId>org.freemarker</groupId>
  51. <artifactId>freemarker</artifactId>
  52. <version>2.3.30</version>
  53. </dependency>
  54. <dependency>
  55. <groupId>com.spring4all</groupId>
  56. <artifactId>spring-boot-starter-swagger</artifactId>
  57. <version>1.5.1.RELEASE</version>
  58. </dependency>
  59. </dependencies>
  60. <build>
  61. <plugins>
  62. <plugin>
  63. <groupId>org.springframework.boot</groupId>
  64. <artifactId>spring-boot-maven-plugin</artifactId>
  65. <configuration>
  66. <excludes>
  67. <exclude>
  68. <groupId>org.projectlombok</groupId>
  69. <artifactId>lombok</artifactId>
  70. </exclude>
  71. </excludes>
  72. </configuration>
  73. </plugin>
  74. </plugins>
  75. </build>
  76. </project>

 application.properties

  1. server.port=8089
  2. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  3. spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
  4. spring.datasource.username=root
  5. spring.datasource.password=mysql123
  6. #默认日志
  7. mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
  8. mybatis-plus.type-aliases-package=com.shrimpking.pojo

实体类

user.java

  1. package com.shrimpking.pojo;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import com.baomidou.mybatisplus.annotation.IdType;
  4. import com.baomidou.mybatisplus.annotation.TableId;
  5. import java.io.Serializable;
  6. import io.swagger.annotations.ApiModel;
  7. import io.swagger.annotations.ApiModelProperty;
  8. import lombok.Data;
  9. import lombok.EqualsAndHashCode;
  10. /**
  11. * <p>
  12. * 用户表
  13. * </p>
  14. *
  15. * @author shrimpking
  16. * @since 2023-08-10
  17. */
  18. @Data
  19. @EqualsAndHashCode(callSuper = false)
  20. @TableName("d_user")
  21. @ApiModel(value="User对象", description="用户表")
  22. public class User implements Serializable {
  23. private static final long serialVersionUID = 1L;
  24. @ApiModelProperty(value = "主键")
  25. @TableId(value = "id", type = IdType.AUTO)
  26. private Integer id;
  27. @ApiModelProperty(value = "账号")
  28. private String userNo;
  29. @ApiModelProperty(value = "名字")
  30. private String userName;
  31. @ApiModelProperty(value = "密码")
  32. private String password;
  33. @ApiModelProperty(value = "年龄")
  34. private Integer age;
  35. @ApiModelProperty(value = "性别,1男,2女")
  36. private Integer sex;
  37. @ApiModelProperty(value = "电话")
  38. private String phone;
  39. @ApiModelProperty(value = "角色id,0超级管理员,1管理员,2用户")
  40. private Integer roleId;
  41. @ApiModelProperty(value = "是否有效,Y有效,N无效")
  42. private String isValid;
  43. }

Mapper层

UserMapper.java

  1. package com.shrimpking.mapper;
  2. import com.baomidou.mybatisplus.core.conditions.Wrapper;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.baomidou.mybatisplus.core.toolkit.Constants;
  5. import com.shrimpking.pojo.User;
  6. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  7. import org.apache.ibatis.annotations.Mapper;
  8. import org.apache.ibatis.annotations.Param;
  9. /**
  10. * <p>
  11. * 用户表 Mapper 接口
  12. * </p>
  13. *
  14. * @author shrimpking
  15. * @since 2023-08-10
  16. */
  17. @Mapper
  18. public interface UserMapper extends BaseMapper<User> {
  19. IPage pageC(IPage<User> page);
  20. IPage pageC2(IPage<User> page, @Param(Constants.WRAPPER) Wrapper wrapper);
  21. }

UserMapper.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.shrimpking.mapper.UserMapper">
  4. <!-- 通用查询映射结果 -->
  5. <resultMap id="BaseResultMap" type="com.shrimpking.pojo.User">
  6. <id column="id" property="id" />
  7. <result column="user_no" property="userNo" />
  8. <result column="user_name" property="userName" />
  9. <result column="password" property="password" />
  10. <result column="age" property="age" />
  11. <result column="sex" property="sex" />
  12. <result column="phone" property="phone" />
  13. <result column="role_id" property="roleId" />
  14. <result column="is_valid" property="isValid" />
  15. </resultMap>
  16. <!-- 通用查询结果列 -->
  17. <sql id="Base_Column_List">
  18. id, user_no, user_name, password, age, sex, phone, role_id, is_valid
  19. </sql>
  20. <select id="pageC" resultType="user">
  21. select * from d_user
  22. </select>
  23. <select id="pageC2" resultType="user">
  24. select * from d_user ${ew.customSqlSegment}
  25. </select>
  26. </mapper>

Service层

UserService.java

  1. package com.shrimpking.service;
  2. import com.baomidou.mybatisplus.core.conditions.Wrapper;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.shrimpking.pojo.User;
  5. import com.baomidou.mybatisplus.extension.service.IService;
  6. /**
  7. * <p>
  8. * 用户表 服务类
  9. * </p>
  10. *
  11. * @author shrimpking
  12. * @since 2023-08-10
  13. */
  14. public interface UserService extends IService<User> {
  15. IPage pageC(IPage<User> page);
  16. IPage pageC2(IPage<User> page, Wrapper wrapper);
  17. }

UserServiceImpl.java

  1. package com.shrimpking.service.impl;
  2. import com.baomidou.mybatisplus.core.conditions.Wrapper;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.shrimpking.pojo.User;
  5. import com.shrimpking.mapper.UserMapper;
  6. import com.shrimpking.service.UserService;
  7. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Service;
  10. /**
  11. * <p>
  12. * 用户表 服务实现类
  13. * </p>
  14. *
  15. * @author shrimpking
  16. * @since 2023-08-10
  17. */
  18. @Service
  19. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
  20. @Autowired
  21. private UserMapper userMapper;
  22. @Override
  23. public IPage pageC(IPage<User> page)
  24. {
  25. return userMapper.pageC(page);
  26. }
  27. @Override
  28. public IPage pageC2(IPage<User> page, Wrapper wrapper)
  29. {
  30. return userMapper.pageC2(page,wrapper);
  31. }
  32. }

Controller层

UserController.java

  1. package com.shrimpking.controller;
  2. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  3. import com.baomidou.mybatisplus.core.metadata.IPage;
  4. import com.baomidou.mybatisplus.core.toolkit.StringUtils;
  5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  6. import com.shrimpking.common.QueryPageParam;
  7. import com.shrimpking.common.Result;
  8. import com.shrimpking.pojo.User;
  9. import com.shrimpking.service.UserService;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.web.bind.annotation.GetMapping;
  12. import org.springframework.web.bind.annotation.PostMapping;
  13. import org.springframework.web.bind.annotation.RequestBody;
  14. import org.springframework.web.bind.annotation.RequestMapping;
  15. import org.springframework.web.bind.annotation.RequestParam;
  16. import org.springframework.web.bind.annotation.RestController;
  17. import java.util.HashMap;
  18. import java.util.List;
  19. /**
  20. * <p>
  21. * 用户表 前端控制器
  22. * </p>
  23. *
  24. * @author shrimpking
  25. * @since 2023-08-10
  26. */
  27. @RestController
  28. @RequestMapping("/user")
  29. public class UserController {
  30. @Autowired
  31. private UserService userService;
  32. //新增
  33. @PostMapping("/save")
  34. public Result save(@RequestBody User user)
  35. {
  36. return userService.save(user) ? Result.success(): Result.fail();
  37. }
  38. //修改
  39. @PostMapping("/update")
  40. public Result update(@RequestBody User user)
  41. {
  42. return userService.updateById(user) ? Result.success() : Result.fail();
  43. }
  44. //新增或修改
  45. @PostMapping("/saveOrUpdate")
  46. public boolean saveOrUpdate(@RequestBody User user){
  47. return userService.saveOrUpdate(user);
  48. }
  49. //删除
  50. @GetMapping("/delete")
  51. public Result delete(@RequestParam String id)
  52. {
  53. return userService.removeById(id) ? Result.success(): Result.fail();
  54. }
  55. //根据账号,查询唯一
  56. @GetMapping("/findByUserNo")
  57. public Result findByUserNo(@RequestParam String userNo)
  58. {
  59. System.out.println(userNo);
  60. List<User> list = userService.lambdaQuery().eq(User::getUserNo, userNo).list();
  61. return list.size() > 0 ? Result.success(list) : Result.fail();
  62. }
  63. //
  64. @GetMapping("/list")
  65. public List<User> list()
  66. {
  67. return userService.list();
  68. }
  69. //查询,模糊查询
  70. @PostMapping("/listP")
  71. public Result listP(@RequestBody User user)
  72. {
  73. LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
  74. if(StringUtils.isNotBlank(user.getUserName()))
  75. {
  76. lambdaQueryWrapper.like(User::getUserName,user.getUserName());
  77. //lambdaQueryWrapper.eq(User::getUserName,user.getUserName());
  78. }
  79. return Result.success(userService.list(lambdaQueryWrapper));
  80. }
  81. //入参封装
  82. @PostMapping("/listP2")
  83. public List<User> listP2(@RequestBody QueryPageParam query)
  84. {
  85. System.out.println(query);
  86. System.out.println("pageSize=" + query.getPageSize());
  87. System.out.println("pageNum = " + query.getPageNum());
  88. HashMap param = query.getParam();
  89. System.out.println(param.get("name"));
  90. return null;
  91. }
  92. //使用mybatis默认分页类
  93. @PostMapping("/listPage")
  94. public Result listPage(@RequestBody QueryPageParam query)
  95. {
  96. //分页类
  97. Page<User> page = new Page<>();
  98. page.setCurrent(query.getPageNum());
  99. page.setSize(query.getPageSize());
  100. //查询条件
  101. LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
  102. //System.out.println(query);
  103. String name = (String) query.getParam().get("name");
  104. String sex = (String) query.getParam().get("sex");
  105. if(StringUtils.isNotBlank(name) && !"null".equals(name))
  106. {
  107. wrapper.like(User::getUserName,name);
  108. }
  109. if(StringUtils.isNotBlank(sex))
  110. {
  111. wrapper.eq(User::getSex,sex);
  112. }
  113. //获取分页结果
  114. IPage result = userService.page(page,wrapper);
  115. //System.out.println(result.getTotal());
  116. return Result.success(result.getRecords(),result.getTotal());
  117. }
  118. //自定义sql的分页实现
  119. @PostMapping("/listPage2")
  120. public List listPage2(@RequestBody QueryPageParam query)
  121. {
  122. Page<User> page = new Page<>();
  123. page.setCurrent(query.getPageNum());
  124. page.setSize(query.getPageSize());
  125. IPage result = userService.pageC(page);
  126. return result.getRecords();
  127. }
  128. //自定义sql的分页实现,可以有sql条件
  129. @PostMapping("/listPage3")
  130. public List listPage3(@RequestBody QueryPageParam query)
  131. {
  132. Page<User> page = new Page<>();
  133. page.setCurrent(query.getPageNum());
  134. page.setSize(query.getPageSize());
  135. LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
  136. wrapper.like(User::getUserName,query.getParam().get("name"));
  137. IPage result = userService.pageC2(page,wrapper);
  138. return result.getRecords();
  139. }
  140. @PostMapping("/listPage4")
  141. public Result listPage4(@RequestBody QueryPageParam query)
  142. {
  143. Page<User> page = new Page<>();
  144. page.setCurrent(query.getPageNum());
  145. page.setSize(query.getPageSize());
  146. LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
  147. wrapper.like(User::getUserName,query.getParam().get("name"));
  148. IPage res = userService.page(page,wrapper);
  149. return Result.success(res.getRecords(),res.getTotal());
  150. }
  151. }

配置类

MybatisPlusConfig.java

配置分页拦截器

  1. package com.shrimpking.config;
  2. import com.baomidou.mybatisplus.annotation.DbType;
  3. import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
  4. import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7. /**
  8. * @author user1
  9. */
  10. @Configuration
  11. public class MybatisPlusConfig {
  12. /**
  13. * 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)
  14. */
  15. @Bean
  16. public MybatisPlusInterceptor mybatisPlusInterceptor() {
  17. MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
  18. interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
  19. return interceptor;
  20. }
  21. }

CorsConfig.java

配置跨域问题

  1. package com.shrimpking.config;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. // 案例 一
  6. @Configuration
  7. public class CorsConfig implements WebMvcConfigurer
  8. {
  9. @Override
  10. public void addCorsMappings(CorsRegistry registry) {
  11. registry.addMapping("/**")
  12. //是否发送Cookie
  13. .allowCredentials(true)
  14. //放行哪些原始域
  15. .allowedOriginPatterns("*")
  16. .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
  17. .allowedHeaders("*")
  18. .exposedHeaders("*");
  19. }
  20. }

公共类

QueryPageParam.java

分页,入参,封装一下

  1. package com.shrimpking.common;
  2. import lombok.Data;
  3. import java.util.HashMap;
  4. /**
  5. * Created by IntelliJ IDEA.
  6. *
  7. * @Author : Shrimpking
  8. * @create 2023/8/10 16:28
  9. * 入参封装
  10. */
  11. @Data
  12. public class QueryPageParam
  13. {
  14. //常量
  15. private static int PAGE_SIZE = 20;
  16. private static int PAGE_NUM = 1;
  17. private Integer pageSize = PAGE_SIZE;
  18. private Integer pageNum = PAGE_NUM;
  19. private HashMap param = new HashMap();
  20. }

Result.java

返回给前端数据时,包装一下,携带必要的信息

  1. package com.shrimpking.common;
  2. import lombok.Data;
  3. /**
  4. * Created by IntelliJ IDEA.
  5. *
  6. * @Author : Shrimpking
  7. * @create 2023/8/10 18:31
  8. * 封装返回结果类
  9. */
  10. @Data
  11. public class Result
  12. {
  13. //编码 200 400
  14. private Integer code;
  15. //成功 失败
  16. private String msg;
  17. //总记录数
  18. private Long total;
  19. //数据
  20. private Object data;
  21. /**
  22. * 成功时返回
  23. * @param data
  24. * @param total
  25. * @return
  26. */
  27. public static Result success(Object data,Long total)
  28. {
  29. return result(200,"成功",total,data);
  30. }
  31. /**
  32. * 成功时返回
  33. * @return
  34. */
  35. public static Result success()
  36. {
  37. return result(200,"成功",-1L,null);
  38. }
  39. /**
  40. * 成功时返回
  41. * @param data
  42. * @return
  43. */
  44. public static Result success(Object data)
  45. {
  46. return result(200,"成功",-1L,data);
  47. }
  48. /**
  49. * 失败时返回
  50. * @return
  51. */
  52. public static Result fail()
  53. {
  54. return result(400,"失败",0L,null);
  55. }
  56. /**
  57. *
  58. * @param code
  59. * @param msg
  60. * @param total
  61. * @param data
  62. * @return
  63. */
  64. private static Result result(Integer code,String msg,long total,Object data)
  65. {
  66. Result res = new Result();
  67. res.setData(data);
  68. res.setMsg(msg);
  69. res.setCode(code);
  70. res.setTotal(total);
  71. return res;
  72. }
  73. }

Vue前端

main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import ElementUI from 'element-ui';
  4. import 'element-ui/lib/theme-chalk/index.css';
  5. import '@/styles/common.css'
  6. import axios from "axios";
  7. Vue.prototype.$axios = axios;
  8. Vue.prototype.$httpUrl = 'http://localhost:8089';
  9. Vue.use(ElementUI, { size: 'small'});
  10. Vue.config.productionTip = false;
  11. new Vue({
  12. render: h => h(App),
  13. }).$mount('#app');

app.vue

  1. <template>
  2. <div id="app">
  3. <index></index>
  4. </div>
  5. </template>
  6. <script>
  7. import Index from "@/components/Index";
  8. export default {
  9. name: 'App',
  10. components: {
  11. Index
  12. }
  13. }
  14. </script>
  15. <style>
  16. </style>

common.css

  1. *{
  2. padding: 0;
  3. margin: 0;
  4. }

组件

index.vue

  1. <template>
  2. <div style="width:100%;height: 100vh;">
  3. <el-container style="height: 100%; border: 1px solid #eee">
  4. <el-aside :width="asideWidth" style="background-color: rgb(238, 241, 246);height: 100%;margin-left: -1px;">
  5. <Aside :isCollapse="isCollapse"></Aside>
  6. </el-aside>
  7. <el-container style="width:100%;height:100%;">
  8. <el-header style="text-align: right; font-size: 12px;width: 100%;border-bottom: 1px solid #cccccc;">
  9. <Header @doCollapse="handleCollapse" :icon="icon"></Header>
  10. </el-header>
  11. <el-main>
  12. <Main></Main>
  13. </el-main>
  14. </el-container>
  15. </el-container>
  16. </div>
  17. </template>
  18. <script>
  19. import Aside from "@/components/Aside";
  20. import Header from "@/components/Header";
  21. import Main from "@/components/Main";
  22. export default {
  23. name: "IndexPage",
  24. data(){
  25. return {
  26. isCollapse: false,
  27. asideWidth: '200px',
  28. icon:'el-icon-s-fold'
  29. }
  30. },
  31. components:{
  32. Aside,
  33. Header,
  34. Main
  35. },
  36. methods:{
  37. //折叠左侧菜单栏
  38. handleCollapse(){
  39. this.isCollapse = !this.isCollapse;
  40. //折叠菜单栏时,也缩放宽度
  41. this.asideWidth = this.isCollapse ? '64px' : '200px';
  42. this.icon = this.isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold';
  43. }
  44. }
  45. }
  46. </script>
  47. <style scoped>
  48. .el-header {
  49. #background-color: #B3C0D1;
  50. color: #333;
  51. line-height: 60px;
  52. }
  53. .el-aside {
  54. color: #333;
  55. }
  56. </style>

header.vue

  1. <template>
  2. <div style="display: flex;line-height: 60px;">
  3. <div @click="collapse" style="cursor: pointer;">
  4. <i :class="icon" style="font-size:20px;"></i>
  5. </div>
  6. <div style="flex: 1;text-align: center;font-size: 34px;">
  7. <span>欢迎来到仓库管理系统</span>
  8. </div>
  9. <el-dropdown>
  10. <span>王小虎</span>
  11. <i class="el-icon-arrow-down" style="margin-right: 15px;margin-left:5px;"></i>
  12. <el-dropdown-menu slot="dropdown">
  13. <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
  14. <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
  15. </el-dropdown-menu>
  16. </el-dropdown>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. name: "HeaderPart",
  22. props:{
  23. icon: String
  24. },
  25. methods:{
  26. toUser(){
  27. console.log('to_user');
  28. },
  29. logout(){
  30. console.log("logout");
  31. },
  32. //折叠左侧菜单栏
  33. collapse(){
  34. this.$emit('doCollapse');
  35. }
  36. }
  37. }
  38. </script>
  39. <style scoped>
  40. </style>

aside.vue

  1. <template>
  2. <el-menu
  3. background-color="#545c64"
  4. text-color="#fff"
  5. active-text-color="#ffd04b"
  6. style="height: 100%;"
  7. default-active="/home"
  8. :collapse="isCollapse"
  9. :collapse-transition="false">
  10. <el-menu-item index="/home">
  11. <i class="el-icon-s-home"></i>
  12. <span slot="title">首页</span>
  13. </el-menu-item>
  14. <el-menu-item index="/One">
  15. <i class="el-icon-s-flag"></i>
  16. <span slot="title">导航一</span>
  17. </el-menu-item>
  18. <el-menu-item index="/Two">
  19. <i class="el-icon-s-opportunity"></i>
  20. <span slot="title">导航二</span>
  21. </el-menu-item>
  22. </el-menu>
  23. </template>
  24. <script>
  25. export default {
  26. name: "AsidePart",
  27. data(){
  28. return {
  29. }
  30. },
  31. //折叠左侧菜单栏
  32. props:{
  33. isCollapse: Boolean
  34. }
  35. }
  36. </script>
  37. <style scoped>
  38. </style>

main.vue

  1. <template>
  2. <div>
  3. <div style="margin-bottom: 10px;">
  4. <el-input v-model="userName"
  5. placeholder="请输入名字"
  6. style="width:300px;"
  7. suffix-icon="el-icon-search"
  8. @keyup.enter.native="loadPost"></el-input>
  9. <el-select v-model="sex" placeholder="请选择性别" style="margin-left:10px;width:300px;">
  10. <el-option
  11. v-for="item in sexList"
  12. :key="item.value"
  13. :label="item.label"
  14. :value="item.value">
  15. </el-option>
  16. </el-select>
  17. <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
  18. <el-button type="success" style="margin-left: 5px;" @click="resetParam">重置</el-button>
  19. <el-button type="success" @click="add">新增</el-button>
  20. </div>
  21. <el-table :data="tableData" style="height: 100%;"
  22. :header-cell-style="{background:'#92b5b6', color:'#221e1d'}"
  23. border>
  24. <el-table-column prop="id" label="ID" >
  25. </el-table-column>
  26. <el-table-column prop="userNo" label="账号">
  27. </el-table-column>
  28. <el-table-column prop="userName" label="名字">
  29. </el-table-column>
  30. <el-table-column prop="age" label="年龄">
  31. </el-table-column>
  32. <el-table-column prop="sex" label="性别">
  33. <template slot-scope="scope">
  34. <el-tag
  35. :type="scope.row.sex === 1 ? 'primary' : 'success'"
  36. disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
  37. </template>
  38. </el-table-column>
  39. <el-table-column prop="roleId" label="角色">
  40. <template slot-scope="scope">
  41. <el-tag
  42. :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
  43. disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户')}}</el-tag>
  44. </template>
  45. </el-table-column>
  46. <el-table-column prop="phone" label="电话">
  47. </el-table-column>
  48. <el-table-column prop="operate" label="操作">
  49. <template slot-scope="scope">
  50. <el-button type="success" @click="update(scope.row)" style="margin-right:10px;">编辑</el-button>
  51. <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)">
  52. <el-button type="danger" slot="reference">删除</el-button>
  53. </el-popconfirm>
  54. </template>
  55. </el-table-column>
  56. </el-table>
  57. <el-pagination
  58. @size-change="handleSizeChange"
  59. @current-change="handleCurrentChange"
  60. :current-page="pageNum"
  61. :page-sizes="[1, 2, 10, 20]"
  62. :page-size="pageSize"
  63. layout="total, sizes, prev, pager, next, jumper"
  64. :total="total">
  65. </el-pagination>
  66. <el-dialog
  67. title="新增用户"
  68. :visible.sync="dialogVisible"
  69. width="30%"
  70. :before-close="handleClose"
  71. center>
  72. <el-form ref="form" :rules="rules" :model="form" label-width="80px">
  73. <el-form-item label="账号" prop="userNo">
  74. <el-col :span="20">
  75. <el-input v-model="form.userNo"></el-input>
  76. </el-col>
  77. </el-form-item>
  78. <el-form-item label="名字" prop="userName">
  79. <el-col :span="20">
  80. <el-input v-model="form.userName"></el-input>
  81. </el-col>
  82. </el-form-item>
  83. <el-form-item label="密码" prop="password">
  84. <el-col :span="20">
  85. <el-input v-model="form.password"></el-input>
  86. </el-col>
  87. </el-form-item>
  88. <el-form-item label="年龄" prop="age">
  89. <el-col :span="20">
  90. <el-input v-model="form.age"></el-input>
  91. </el-col>
  92. </el-form-item>
  93. <el-form-item label="性别">
  94. <el-radio-group v-model="form.sex">
  95. <el-radio label="1"></el-radio>
  96. <el-radio label="2"></el-radio>
  97. </el-radio-group>
  98. </el-form-item>
  99. <el-form-item label="电话" prop="phone">
  100. <el-col :span="20">
  101. <el-input v-model="form.phone"></el-input>
  102. </el-col>
  103. </el-form-item>
  104. </el-form>
  105. <span slot="footer" class="dialog-footer">
  106. <el-button @click="dialogVisible = false">取 消</el-button>
  107. <el-button type="primary" @click="save">保 存</el-button>
  108. </span>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. export default {
  114. name: "MainPart",
  115. data() {
  116. //判断年龄
  117. let checkAge = (rule, value, callback) => {
  118. if(value > 150){
  119. callback(new Error('年龄输入过大'));
  120. }else{
  121. callback();
  122. }
  123. };
  124. //验证账号唯一性
  125. let checkDuplicate = (rule, value, callback) => {
  126. //修改时,不验证账号
  127. if(this.form.id){
  128. return callback();
  129. }
  130. this.$axios.get(this.$httpUrl + '/user/findByUserNo?userNo=' + this.form.userNo).then( res=> {
  131. //console.log(res);
  132. if(res.data.code !==200){
  133. callback();
  134. }else{
  135. callback(new Error('账号已经存在'));
  136. }
  137. })
  138. };
  139. return {
  140. tableData: [], //列表数据
  141. pageNum:1, //当前页码
  142. pageSize:10, //每页数量
  143. total:0, //总记录数
  144. userName:'', //查询名字输入框
  145. sex:'', //查询选择性别
  146. sexList:[
  147. { value:'1',label:'男'},
  148. { value:'2',label:'女'}
  149. ], //性别下拉框绑定
  150. dialogVisible: false, //模态输入框是否显示
  151. form:{
  152. id:'',
  153. userNo:'',
  154. userName:'',
  155. password:'',
  156. age:'',
  157. phone:'',
  158. sex:'1',
  159. roleId:'2'
  160. }, //表单中的输入项
  161. //验证规则
  162. rules: {
  163. userNo: [
  164. { required: true, message: '请输入账号', trigger: 'blur' },
  165. { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' },
  166. { validator: checkDuplicate ,trigger:'blur'}
  167. ],
  168. userName: [
  169. { required: true, message: '请输入名字', trigger: 'blur' },
  170. { min: 1, max: 20, message: '长度在 1 到20 个字符', trigger: 'blur' }
  171. ],
  172. password: [
  173. { required: true, message: '请输入密码', trigger: 'blur' }
  174. ],
  175. age: [
  176. { required: true, message: '请输入年龄', trigger: 'blur' },
  177. { min:1, max:3, message: '年龄在1到3位数之间',trigger: 'blur'},
  178. { validator: checkAge ,trigger:'blur'}
  179. ],
  180. phone: [
  181. { required: true, message: '请输入电话', trigger: 'blur' },
  182. { pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}/, message: '手机号码格式不正确', trigger: 'blur'}
  183. ]
  184. }
  185. }
  186. },
  187. methods:{
  188. //删除按钮
  189. handleDelete(id){
  190. this.$axios.get( this.$httpUrl + '/user/delete?id=' + id).then(res => {
  191. //console.log(res);
  192. if(res.data.code ===200)
  193. {
  194. this.$message({
  195. message: '删除成功',
  196. type: 'success'
  197. });
  198. this.loadPost();
  199. }else {
  200. this.$message.error('删除失败');
  201. }
  202. });
  203. },
  204. //修改按钮
  205. update(row){
  206. //console.log(row);
  207. //赋值到表单
  208. //显示对话框
  209. this.dialogVisible = true;
  210. //异步赋值
  211. this.$nextTick( ()=> {
  212. this.form.id = row.id;
  213. this.form.userNo = row.userNo;
  214. this.form.userName = row.userName;
  215. this.form.password = row.password;
  216. this.form.age = row.age +''; //数字转字符,才显示
  217. this.form.phone = row.phone;
  218. this.form.sex = row.sex + '';
  219. this.form.roleId = row.roleId;
  220. });
  221. },
  222. //重置新增表单
  223. resetForm() {
  224. this.$refs.form.resetFields();
  225. },
  226. doUpdate(){
  227. this.$axios.post( this.$httpUrl + '/user/update',this.form).then(res => {
  228. //console.log(res);
  229. if(res.data.code ===200)
  230. {
  231. this.$message({
  232. message: '更新成功',
  233. type: 'success'
  234. });
  235. //关闭对话框
  236. this.dialogVisible = false;
  237. this.loadPost();
  238. }else {
  239. this.$message.error('更新失败');
  240. }
  241. });
  242. },
  243. doSave(){
  244. this.$axios.post( this.$httpUrl + '/user/save',this.form).then(res => {
  245. //console.log(res);
  246. if(res.data.code ===200)
  247. {
  248. this.$message({
  249. message: '新增成功',
  250. type: 'success'
  251. });
  252. //关闭对话框
  253. this.dialogVisible = false;
  254. this.loadPost();
  255. }else {
  256. this.$message.error('新增失败');
  257. }
  258. });
  259. },
  260. //保存数据
  261. save(){
  262. //保存之前,先验证
  263. this.$refs.form.validate((valid) => {
  264. //通过验证
  265. if (valid) {
  266. if(this.form.id){
  267. //修改,保存
  268. this.doUpdate();
  269. }else{
  270. //新增,保存
  271. this.doSave();
  272. }
  273. } else {
  274. //验证未通过
  275. return false;
  276. }
  277. });
  278. },
  279. //新增对话框关闭按钮
  280. handleClose() {
  281. this.dialogVisible = false;
  282. },
  283. //新增按钮
  284. add(){
  285. this.dialogVisible = true;
  286. //打开新增窗口时,将之前的内容清除
  287. this.$nextTick(() =>{
  288. this.resetForm();
  289. });
  290. },
  291. //重置按钮
  292. resetParam(){
  293. this.userName = '';
  294. this.sex = '';
  295. this.loadPost();
  296. },
  297. //每页数量发生变化
  298. handleSizeChange(val) {
  299. //console.log(`每页 ${val} 条`);
  300. this.pageNum = 1;
  301. this.pageSize = val;
  302. this.loadPost();
  303. },
  304. //当前页码发生变化
  305. handleCurrentChange(val) {
  306. //console.log(`当前页: ${val}`);
  307. this.pageNum = val;
  308. this.loadPost();
  309. },
  310. //get方式加载数据
  311. loadGet(){
  312. this.$axios.get( this.$httpUrl +'/user/listPage').then (res => {
  313. //console.log(res);
  314. if(res.data.code ===200)
  315. {
  316. this.tableData = res.data.data;
  317. }else {
  318. alert('获取数据失败');
  319. }
  320. })
  321. },
  322. //post方式加载数据
  323. loadPost(){
  324. this.$axios.post( this.$httpUrl + '/user/listPage',{
  325. pageSize: this.pageSize,
  326. pageNum : this.pageNum,
  327. param:{
  328. name: this.userName, //查询的名字
  329. sex: this.sex //查询性别
  330. }
  331. }).then(res => {
  332. //console.log(res);
  333. if(res.data.code ===200)
  334. {
  335. //列表数据
  336. this.tableData = res.data.data;
  337. //总记录数
  338. this.total = res.data.total;
  339. }else {
  340. alert('获取数据失败');
  341. }
  342. })
  343. }
  344. },
  345. created(){
  346. //this.loadGet();
  347. this.loadPost();
  348. }
  349. }
  350. </script>
  351. <style scoped>
  352. </style>

测试截图

 

 

 

 

 

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/369711
推荐阅读
相关标签
  

闽ICP备14008679号