devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+Axios+SSM框架实现增删改查与文件上传_vue增删改查axios

作者：羊村懒王 | 2024-03-27 11:14:05

赞

踩

vue增删改查axios

总结

        随手搭建一个Vue+SSM框架，实现增删改查和上传、预览图片的功能，这里把用到的技术点和工具罗列一下：

前端:

1. 使用VUE作为基础框架。

2. 使用elementUI的一些组件，搭建表格、弹框、表单等。

3. 使用form-generator，在线搭建属于自己的form表单，可以下载自定义的from表单代码，网址：https://mrhj.gitee.io/form-generator/#/

4. 使用axios，将前端数据封装，异步传输给后端。

5. 使用vue实现三级联动、省市区三级信息查询、回显功能。

6. 使用element的组件实现分页查询、文件上传的功能。

后端：

1. 使用ssm框架，搭建分页查询、增删改接口。

2. 定义上传接口，将文件上传至远程服务器。

3. 使用mybatis的逆向工程，生成mybatis的mapper文件、bean实体、mapper接口。

访问以下地址下载源码：

链接：https://pan.baidu.com/s/163wHTpcdLdOfCUSg1PqMgg?pwd=4fb1 
提取码：4fb1 
--来自百度网盘超级会员V3的分享

准备工作

创建数据库表

数据库DDL语句如下：

  1. CREATE TABLE
  2.     gameuser
  3.     (
  4.         usrId INT NOT NULL AUTO_INCREMENT,
  5.         usrLoginNm VARCHAR(183),
  6.         usrLoginPwd VARCHAR(183),
  7.         usrNm VARCHAR(183),
  8.         usrCardNum VARCHAR(18),
  9.         usrAddr VARCHAR(183),
  10.         usrBirDate DATE,
  11.         usrHobby VARCHAR(183),
  12.         usrDetail VARCHAR(183),
  13.         usrFileUrl VARCHAR(183),
  14.         PRIMARY KEY (usrId)
  15.     )
  16.     ENGINE=InnoDB DEFAULT CHARSET=utf8 DEFAULT COLLATE=utf8_general_ci;

搭建前端开发环境

1. 首先，我们需要访问地址：https://mrhj.gitee.io/form-generator/#/

    利用此网站定义我们的form表单，生成完毕后将vue文件下载到本地，后面我们会导入到项目中。

 2. 在本地搭建vue项目，使用黑窗口命令：vue create vueproject 创建前端Vue项目：

3. 在项目的创建目录下运行命令：npm i element-ui -S  安装elementUI

4. 项目中需要与后端接口通信，需要使用的技术为axios，执行 npm install axios 命令安装axios：

5. 使用Hbuilder打开前端项目，在package.json文件的rules中添加以下内容，去掉esline校验：

       "vue/no-unused-components": "off",
      "no-mixed-spaces-and-tabs": 0

6. 解决跨域问题，修改前端配置 vue.config.js 增加跨域配置项，跨域的解决方案有很多，这里选择使用前端代理实现跨域问题，配置以下内容：

  1. devServer: {//配置代理 解决跨域问题
  2.   	  proxy: {
  3.   		  '/api': {
  4.   			  // 此处填写项目的访问地址
  5.   			  target: 'http://localhost:8082/Ajaxd01',
  6.   			  // 允许跨域
  7.   			  changeOrigin: true,
  8.   			  ws: true,
  9.   			  pathRewrite: {
  10.   				  '^/api': ''
  11.   			  }
  12.   		  }
  13.   	  }
  14.   }

7. 因为需要用到elementUI，此处在main.js中导入elementUI相关的信息，此处小编为了省事儿，就直接全部引入了，大家根据自己情况选择按需引入还是全部引入（具体引用方式可参考官网）：

  1. //引入elementUI相关的组件
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. Vue.use(ElementUI);//use之后生效

8. 在main.js引入axios的相关包并use。

  1. //引入axios
  2. import axios from 'axios'
  3. //配置请求的根路径
  4. axios.defaults.baseURL = '/api/'
  5. // 原型上挂载axios， 所有组件都可以通过this.$http来请求
  6. Vue.prototype.$http = axios
  7. Vue.use(axios)

9. 最终mai.js中的配置如下：

10.  我们来运行一下项目试试看，输入命令：npm run serve 项目可以正常运行即可

11. 至此，可以访问前端项目，前端项目准备工作结束，可以进行VUE项目的开发了。

搭建后端开发环境

1. 后端采用传统的SSM框架实现文件的上传下载、三级联动、以及普通的增删改查，这里我们会利用Mybatis的逆向工程为我们提供支持，以简化我们的开发效率。

2. 首先，我们先来创建一个普通SSM的Maven项目，按照图示步骤创建：

3. 创建maven web 项目，补充缺失目录，java、resources、test目录。

4. 更新web.xml中的约束：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  5.          version="4.0">
  6. </web-app>

5. 创建各个层的包：controller、bean、service、impl、mappe

6. 导入maven相关的依赖：

  1. <!--Spring核心包-->
  2. <dependency>
  3.   <groupId>org.springframework</groupId>
  4.   <artifactId>spring-context</artifactId>
  5.   <version>5.3.5</version>
  6. </dependency>
  7. <!--spring切面 包-->
  8. <dependency>
  9.   <groupId>org.springframework</groupId>
  10.   <artifactId>spring-aspects</artifactId>
  11.   <version>5.3.5</version>
  12. </dependency>
  13. <!--aop联盟包-->
  14. <dependency>
  15.   <groupId>aopalliance</groupId>
  16.   <artifactId>aopalliance</artifactId>
  17.   <version>1.0</version>
  18. </dependency>
  19. <!--德鲁伊连接池-->
  20. <dependency>
  21.   <groupId>com.alibaba</groupId>
  22.   <artifactId>druid</artifactId>
  23.   <version>1.1.10</version>
  24. </dependency>
  25. <!--mysql驱动-->
  26. <dependency>
  27.   <groupId>mysql</groupId>
  28.   <artifactId>mysql-connector-java</artifactId>
  29.   <version>8.0.22</version>
  30. </dependency>
  31. <!--springJDBC包-->
  32. <dependency>
  33.   <groupId>org.springframework</groupId>
  34.   <artifactId>spring-jdbc</artifactId>
  35.   <version>5.3.5</version>
  36. </dependency>
  37. <!--spring事务控制包-->
  38. <dependency>
  39.   <groupId>org.springframework</groupId>
  40.   <artifactId>spring-tx</artifactId>
  41.   <version>5.3.5</version>
  42. </dependency>
  43. <!--orm映射依赖-->
  44. <dependency>
  45.   <groupId>org.springframework</groupId>
  46.   <artifactId>spring-orm</artifactId>
  47.   <version>5.3.5</version>
  48. </dependency>
  49. <!--apache commons日志包-->
  50. <dependency>
  51.   <groupId>commons-logging</groupId>
  52.   <artifactId>commons-logging</artifactId>
  53.   <version>1.2</version>
  54. </dependency>
  55. <!--log4j日志包-->
  56. <dependency>
  57.   <groupId>org.apache.logging.log4j</groupId>
  58.   <artifactId>log4j-slf4j-impl</artifactId>
  59.   <version>2.14.0</version>
  60.   <scope>test</scope>
  61. </dependency>
  62. <!--lombok-->
  63. <dependency>
  64.   <groupId>org.projectlombok</groupId>
  65.   <artifactId>lombok</artifactId>
  66.   <version>1.18.12</version>
  67.   <scope>provided</scope>
  68. </dependency>
  69. <!--springtest 支持包-->
  70. <dependency>
  71.   <groupId>org.springframework</groupId>
  72.   <artifactId>spring-test</artifactId>
  73.   <version>5.3.5</version>
  74. </dependency>
  75. <!--junit5单元测试包-->
  76. <dependency>
  77.   <groupId>org.junit.jupiter</groupId>
  78.   <artifactId>junit-jupiter-api</artifactId>
  79.   <version>5.7.0</version>
  80.   <scope>test</scope>
  81. </dependency>
  82. <!--springMVC支持包-->
  83. <dependency>
  84.   <groupId>org.springframework</groupId>
  85.   <artifactId>spring-web</artifactId>
  86.   <version>5.3.5</version>
  87. </dependency>
  88. <dependency>
  89.   <groupId>org.springframework</groupId>
  90.   <artifactId>spring-webmvc</artifactId>
  91.   <version>5.3.5</version>
  92. </dependency>
  93. <!--jsp-->
  94. <dependency>
  95.   <groupId>javax.servlet</groupId>
  96.   <artifactId>javax.servlet-api</artifactId>
  97.   <version>4.0.1</version>
  98.   <scope>provided</scope>
  99. </dependency>
  100. <!--servlet-->
  101. <dependency>
  102.   <groupId>javax.servlet.jsp</groupId>
  103.   <artifactId>javax.servlet.jsp-api</artifactId>
  104.   <version>2.3.3</version>
  105.   <scope>provided</scope>
  106. </dependency>
  107. <!--JSON依赖-->
  108. <dependency>
  109.   <groupId>com.fasterxml.jackson.core</groupId>
  110.   <artifactId>jackson-databind</artifactId>
  111.   <version>2.9.1</version>
  112. </dependency>
  113. <dependency>
  114.   <groupId>com.fasterxml.jackson.core</groupId>
  115.   <artifactId>jackson-core</artifactId>
  116.   <version>2.9.1</version>
  117. </dependency>
  118. <dependency>
  119.   <groupId>com.fasterxml.jackson.core</groupId>
  120.   <artifactId>jackson-annotations</artifactId>
  121.   <version>2.9.1</version>
  122. </dependency>
  123. <!--mybaties的核心jar包-->
  124. <dependency>
  125.   <groupId>org.mybatis</groupId>
  126.   <artifactId>mybatis</artifactId>
  127.   <version>3.5.3</version>
  128. </dependency>
  129. <!--spring和mybatis的整合包-->
  130. <dependency>
  131.   <groupId>org.mybatis</groupId>
  132.   <artifactId>mybatis-spring</artifactId>
  133.   <version>2.0.3</version>
  134. </dependency>
  135. <!--日志包-->
  136. <dependency>
  137.   <groupId>org.slf4j</groupId>
  138.   <artifactId>slf4j-log4j12</artifactId>
  139.   <version>1.6.1</version>
  140. </dependency>
  141. <!--代码生成工具-->
  142. <dependency>
  143.   <groupId>org.mybatis.generator</groupId>
  144.   <artifactId>mybatis-generator-core</artifactId>
  145.   <version>1.3.2</version>
  146. </dependency>
  147. <!--junit-->
  148. <dependency>
  149.   <groupId>junit</groupId>
  150.   <artifactId>junit</artifactId>
  151.   <version>4.12</version>
  152.   <scope>test</scope>
  153. </dependency>

7. 准备配置文件springmvc.xml、log4j2.xml、jdbc.properties、applicationContext.xml、web.xml、generatorConfig.xml。

 generatorConfig.xml：生成mybatis相关的mapper接口和xml、实体类：

  1. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration PUBLIC
  2.         "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
  4.  
  5. <generatorConfiguration>
  6.     <classPathEntry
  7.             location="D:\maven\repository\mysql\mysql-connector-java\8.0.22\mysql-connector-java-8.0.22.jar"/>
  8.     <context id="testTables" targetRuntime="MyBatis3">
  9.         <commentGenerator>
  10.             <!-- 是否去除自动生成的注释 true：是 ： false:否 -->
  11.             <property name="suppressAllComments" value="true"/>
  12.         </commentGenerator>
  13.         <!--数据库连接的信息：驱动类、连接地址、用户名、密码 -->
  14.         <!--<jdbcConnection driverClass="${jdbc.driver}"--> <!--connectionURL="${jdbc.url}"--> <!--userId="${jdbc.username}"--> <!--password="${jdbc.password}">--> <!--</jdbcConnection>-->
  15.         <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
  16.                         connectionURL="jdbc:mysql://127.0.0.1:3306/test?useSSL=false&amp;useUnicode=true&amp;characterEncoding=UTF-8&amp;serverTimezone=Asia/Shanghai&amp;allowPublicKeyRetrieval=true"
  17.                         userId="root" password="******">
  18.         </jdbcConnection>
  19.         <!-- 默认false，把JDBC DECIMAL 和 NUMERIC 类型解析为 Integer，为 true时把JDBC DECIMAL 和 NUMERIC 类型解析为java.math.BigDecimal -->
  20.         <javaTypeResolver>
  21.             <property name="forceBigDecimals" value="false"/>
  22.         </javaTypeResolver>
  23.         <!-- targetProject:生成PO类的位置 -->
  24.         <javaModelGenerator targetPackage="com.ssm.bean"
  25.                             targetProject="F:\myTestProject\mySsmProject\src\main\java">
  26.             <!-- enableSubPackages:是否让schema作为包的后缀 -->
  27.             <property name="enableSubPackages" value="false"/>
  28.             <!-- 从数据库返回的值被清理前后的空格 -->
  29.             <property name="trimStrings" value="true"/>
  30.         </javaModelGenerator>
  31.         <!-- targetProject:mapper映射文件生成的位置 -->
  32.         <sqlMapGenerator targetPackage="com.ssm.mapper"
  33.                          targetProject="F:\myTestProject\mySsmProject\src\main\resources">
  34.             <!-- enableSubPackages:是否让schema作为包的后缀 -->
  35.             <property name="enableSubPackages" value="false"/>
  36.         </sqlMapGenerator>
  37.         <!-- targetPackage：mapper接口生成的位置 -->
  38.         <javaClientGenerator type="XMLMAPPER" targetPackage="com.ssm.mapper"
  39.                              targetProject="F:\myTestProject\mySsmProject\src\main\java">
  40.             <!-- enableSubPackages:是否让schema作为包的后缀 -->
  41.             <property name="enableSubPackages" value="false"/>
  42.         </javaClientGenerator>
  43.         <!-- 指定数据库表 -->
  44.         <table tableName="gameuser" domainObjectName="Gameuser"
  45.                enableCountByExample="false"
  46.                enableUpdateByExample="false"
  47.                enableDeleteByExample="false"
  48.                enableSelectByExample="false"
  49.                selectByExampleQueryId="false">
  50.         </table>
  51.         <!-- 有些表的字段需要指定java类型
  52.         <table tableName="area" domainObjectName="Area"
  53.                enableCountByExample="false"
  54.                enableUpdateByExample="false"
  55.                enableDeleteByExample="false"
  56.                enableSelectByExample="false"
  57.                selectByExampleQueryId="false">
  58.         </table>
  59.         -->
  60.     </context>
  61. </generatorConfiguration>

springmvc.xml：springMvc的核心配置文件 ：

  1. <beans xmlns="http://www.springframework.org/schema/beans"
  2.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.        xmlns:p="http://www.springframework.org/schema/p"
  4.        xmlns:c="http://www.springframework.org/schema/c"
  5.        xmlns:util="http://www.springframework.org/schema/util"
  6.        xmlns:context="http://www.springframework.org/schema/context"
  7.        xmlns:aop="http://www.springframework.org/schema/aop"
  8.        xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc"
  9.        xsi:schemaLocation="http://www.springframework.org/schema/beans
  10.         http://www.springframework.org/schema/beans/spring-beans.xsd
  11.         http://www.springframework.org/schema/util
  12.         http://www.sprineframework.ore/schema/util/spring-util.xsd
  13.         http://www.springframework.org/schema/context
  14.         http://www.springframework.org/schema/context/spring-context.xsd
  15.         http://www.springframework.org/schema/aop
  16.         http://www.springframework.org/schema/aop/spring-aop.xsd
  17.         http://www.springframework.org/schema/tx
  18.         http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
  19.     <!-- 扫描comtroller包的路径 -->
  20.     <context:component-scan base-package="com.ssm"></context:component-scan>
  21.  
  22.     <!--开启默认配置器 配置三大组件-->
  23.     <mvc:annotation-driven></mvc:annotation-driven>
  24.  
  25.     <!--配置视图解析器-->
  26.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  27.         <property name="prefix" value="/jsp/"></property>
  28.         <property name="suffix" value=".jsp"></property>
  29.     </bean>
  30.  
  31.     <!--配置静态资源放行-->
  32.     <mvc:default-servlet-handler/>
  33.  
  34. </beans>

log4j2.xml: spring 使用此配置文件打印日志：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <Configuration status="INFO">
  3.     <Appenders>
  4.         <Console name="Console" target="SYSTEM_OUT">
  5.             <PatternLayout pattern="%d{YYYY-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n"/>
  6.         </Console>
  7.     </Appenders>
  8.     <Loggers>
  9.         <Root level="info">
  10.             <AppenderRef ref="Console"/>
  11.         </Root>
  12.     </Loggers>
  13. </Configuration>

 jdbc.properties：数据库连接信息配置

  1. ## key=value
  2. driver=com.mysql.cj.jdbc.Driver
  3. url=jdbc:mysql://127.0.0.1:3306/test?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
  4. username=root
  5. password=12346

applicationContext.xml: spring的核心配置文件

  1. <beans xmlns="http://www.springframework.org/schema/beans"
  2.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.        xmlns:p="http://www.springframework.org/schema/p"
  4.        xmlns:c="http://www.springframework.org/schema/c"
  5.        xmlns:util="http://www.springframework.org/schema/util"
  6.        xmlns:context="http://www.springframework.org/schema/context"
  7.        xmlns:aop="http://www.springframework.org/schema/aop"
  8.        xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc"
  9.        xsi:schemaLocation="http://www.springframework.org/schema/beans
  10.         http://www.springframework.org/schema/beans/spring-beans.xsd
  11.         http://www.springframework.org/schema/util
  12.         http://www.sprineframework.ore/schema/util/spring-util.xsd
  13.         http://www.springframework.org/schema/context
  14.         http://www.springframework.org/schema/context/spring-context.xsd
  15.         http://www.springframework.org/schema/aop
  16.         http://www.springframework.org/schema/aop/spring-aop.xsd
  17.         http://www.springframework.org/schema/tx
  18.         http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
  19.     <!--加载配置文件properties-->
  20.     <context:property-placeholder location="classpath:jdbc.properties"/>
  21.  
  22.     <!--包扫描 扫描service层-->
  23.     <context:component-scan base-package="com.ssm.service"/>
  24.  
  25.     <!--配置数据源 德鲁伊数据库连接池 读取properties配置文件中的信息-->
  26.     <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
  27.         <!--读取properties配置文件中的信息-->
  28.         <property name="driverClassName" value="${driver}"></property>
  29.         <property name="url" value="${url}"></property>
  30.         <property name="username" value="${username}"></property>
  31.         <property name="password" value="${password}"></property>
  32.     </bean>
  33.  
  34.     <!--将sqlsessionfactory对象交由spring创建和管理-->
  35.     <bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
  36.         <!--配置数据源-->
  37.         <property name="dataSource" ref="dataSource"></property>
  38.         <!--配置实体类扫描包路径-->
  39.         <property name="typeAliasesPackage" value="com.lc.ssm.bean"></property>
  40.     </bean>
  41.  
  42.     <!--将mapper交由spring创建和管理 生成mapper对象放入容器-->
  43.     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
  44.         <!--注入sqlsessionfactory-->
  45.         <property name="sqlSessionFactoryBeanName" value="factory"></property>
  46.         <!--扫描所有的mapper接口和映射文件-->
  47.         <property name="basePackage" value="com.lc.ssm.mapper"></property>
  48.     </bean>
  49.  
  50.     <!--配置事务管理器 -->
  51.     <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
  52.         <property name="dataSource" ref="dataSource"></property>
  53.     </bean>
  54.  
  55.     <!--开启事务注解-->
  56.     <tx:annotation-driven transaction-manager="transactionManager"/>
  57.  
  58. </beans>
  59.

 Web.xml：配置基础信息：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  5.          version="4.0">
  6.  
  7.     <!--配置dispacherServlet-->
  8.     <servlet>
  9.         <servlet-name>dispatcherServlet</servlet-name>
  10.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  11.         <init-param>
  12.             <param-name>contextConfigLocation</param-name>
  13.             <param-value>classpath:springmvc.xml</param-value>
  14.         </init-param>
  15.         <load-on-startup>1</load-on-startup>
  16.     </servlet>
  17.     <servlet-mapping>
  18.         <servlet-name>dispatcherServlet</servlet-name>
  19.         <url-pattern>/</url-pattern>
  20.     </servlet-mapping>
  21.  
  22.     <!--配置SpringMVC的编码过滤器 解决post请求乱码-->
  23.     <filter>
  24.         <filter-name>CharacterEncodingFilter</filter-name>
  25.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  26.         <init-param>
  27.             <param-name>encoding</param-name>
  28.             <param-value>UTF-8</param-value>
  29.         </init-param>
  30.         <init-param>
  31.             <param-name>forceEncoding</param-name>
  32.             <param-value>true</param-value>
  33.         </init-param>
  34.     </filter>
  35.     <filter-mapping>
  36.         <filter-name>CharacterEncodingFilter</filter-name>
  37.         <url-pattern>/*</url-pattern>
  38.     </filter-mapping>
  39.  
  40.     <!--配置spring核心容器 配置spring 核心配置文件的位置 -->
  41.     <context-param>
  42.         <param-name>contextConfigLocation</param-name>
  43.         <param-value>classpath:applicationContext.xml</param-value>
  44.     </context-param>
  45.     <!--监听servletContext对象 在创建servletContext对象时创建spring容器放入其中-->
  46.     <listener>
  47.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  48.     </listener>
  49.  
  50. </web-app>
  51.

配置log4j.properties,生成mapper时需要使用此打印日志：

  1. #定义全局日志级别调试阶段推荐debug
  2. log4j.rootLogger=debug,stdout
  3. log4j.appender.stdout=org.apache.log4j.ConsoleAppender
  4. log4j.appender.stdout.Target=System.err
  5. log4j.appender.stdout.layout=org.apache.log4j.SimpleLayout
  6.  
  7. log4j.appender.logfile=org.apache.log4j.FileAppender
  8. log4j.appender.logfile.File=d:/msb.log
  9. log4j.appender.logfile.layout=org.apache.log4j.PatternLayout
  10. log4j.appender.logfile.layout.ConversionPattern=%d(yyyy-MM-dd HH:mm:ss)%1 %F %p %m%n

在test目录下新增测试类，运行时用于生成mybatis相关的代码，代码如下：

  1. package com.ssm.test;
  2.  
  3. import org.mybatis.generator.api.MyBatisGenerator;
  4. import org.mybatis.generator.config.Configuration;
  5. import org.mybatis.generator.config.xml.ConfigurationParser;
  6. import org.mybatis.generator.internal.DefaultShellCallback;
  7.  
  8. import java.io.File;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11.  
  12. /**
  13.  * @{NAME}
  14.  * @Description TODO
  15.  * @Author luocong
  16.  * @Date
  17.  * @Version 1.0
  18.  **/
  19. public class GeneratorCode {
  20.     public void generator() throws Exception {
  21.         List<String> warnings = new ArrayList<String>();
  22.         boolean overwrite = true;
  23.         File configFile = new File("F:\\ideagit\\springall\\mybatisTest01\\target\\classes\\generatorConfig.xml");
  24.         ConfigurationParser cp = new ConfigurationParser(warnings);
  25.         Configuration config = cp.parseConfiguration(configFile);
  26.         DefaultShellCallback callback = new DefaultShellCallback(overwrite);
  27.         MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config,
  28.                 callback,warnings);
  29.         myBatisGenerator.generate(null);
  30.     }
  31.  
  32.     public static void main(String[] args) {
  33.         GeneratorCode generatorSqlmap = new GeneratorCode();
  34.         try {
  35.             generatorSqlmap.generator();
  36.         } catch (Exception e) {
  37.             e.printStackTrace();
  38.         }
  39.     }
  40. }

 执行mian类，生成mapperxml和mapper接口以及mapper实体类。

 至此，ssm开发环境搭建完毕。

开发前端项目代码

App.vue:

  1. <template>
  2.   <div id="app">
  3.     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  4.     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  5. 	<tableInfo/>
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10. // import HelloWorld from './components/HelloWorld.vue'
  11. import tableInfo from './components/tableInfo.vue'
  12. export default {
  13.   name: 'App',
  14.   components: {
  15.     // HelloWorld
  16. 	tableInfo
  17.   }
  18. }
  19. </script>
  20.  
  21. <style>
  22. #app {
  23.   font-family: Avenir, Helvetica, Arial, sans-serif;
  24.   -webkit-font-smoothing: antialiased;
  25.   -moz-osx-font-smoothing: grayscale;
  26.   text-align: center;
  27.   color: #2c3e50;
  28.   margin-top: 60px;
  29. }
  30. </style>

tableInfoVue:

  1. <template>
  2. 	<div>
  3. 		<div>
  4. 		  <el-form ref="elForm" :model="formQueryData" :rules="rules" size="small" label-width="100px"
  5. 		    label-position="left">
  6. 		    <el-form-item label="用户姓名" prop="query_usrNm">
  7. 		      <el-input v-model="formQueryData.query_usrNm" placeholder="请输入用户姓名" :maxlength="20" show-word-limit
  8. 		        clearable prefix-icon='el-icon-s-custom' :style="{width: '100%'}"></el-input>
  9. 		    </el-form-item>
  10. 		    <el-form-item label="用户名称" prop="query_usrLoginNm">
  11. 		      <el-input v-model="formQueryData.query_usrLoginNm" placeholder="请输入用户名称" :maxlength="20"
  12. 		        show-word-limit clearable prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
  13. 		    </el-form-item>
  14. 		    <el-form-item label="身份证号" prop="query_usrCardNum">
  15. 		      <el-input v-model="formQueryData.query_usrCardNum" placeholder="请输入身份证号" :maxlength="18"
  16. 		        show-word-limit clearable prefix-icon='el-icon-postcard' :style="{width: '100%'}"></el-input>
  17. 		    </el-form-item>
  18. 		    <el-form-item label="用户地址" prop="query_usrPro">
  19. 		      <el-select v-model="formQueryData.query_usrPro" placeholder="请选择用户地址" clearable
  20. 		        :style="{width: '100%'}">
  21. 		      </el-select>
  22. 		    </el-form-item>
  23. 		    <el-form-item label="生日" prop="query_usrBirDate">
  24. 		      <el-date-picker v-model="formQueryData.query_usrBirDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
  25. 		        :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
  26. 		    </el-form-item>
  27. 		    <el-form-item label="爱好" prop="query_usrHobby">
  28. 		      <el-checkbox-group v-model="formQueryData.query_usrHobby" :min="1" size="medium">
  29. 		        <el-checkbox-button v-for="(item, index) in query_usrHobbyOptions" :key="index" :label="item.value"
  30. 		          :disabled="item.disabled" border>{{item.label}}</el-checkbox-button>
  31. 		      </el-checkbox-group>
  32. 		    </el-form-item>
  33. 		    <el-form-item label="用户简介" prop="query_usrDetail">
  34. 		      <el-input v-model="formQueryData.query_usrDetail" type="textarea" placeholder="请输入用户简介"
  35. 		        :maxlength="50" show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}">
  36. 		      </el-input>
  37. 		    </el-form-item>
  38. 		    <el-form-item size="large">
  39. 		      <el-button type="primary" @click="submitForm">提交</el-button>
  40. 		      <el-button @click="resetForm">重置</el-button>
  41. 		    </el-form-item>
  42. 		  </el-form>
  43. 		</div>
  44. 		<el-button style="margin-left: 20px;" @click="addUser()">新增</el-button>
  45. 		<el-table
  46. 		  :data="tableData"
  47. 		  border
  48. 		  style="width: 100%">
  49. 		  <el-table-column
  50. 		    prop="usrFileUrl"
  51. 		    label="头像"
  52. 		    width="200">
  53. 			<template v-slot:default="scope">
  54. 			  <el-image :src="scope.row.usrFileUrl"/>
  55. 			  <el-link :href="scope.row.usrFileUrl">查看详情</el-link>
  56. 			</template>
  57. 		  </el-table-column>
  58. 			<el-table-column
  59. 			  prop="usrNm"
  60. 			  label="用户姓名"
  61. 			  width="200">
  62. 			</el-table-column>
  63. 			<el-table-column
  64. 			  prop="usrCardNum"
  65. 			  label="身份证号"
  66. 			  width="200">
  67. 			</el-table-column>
  68. 			<el-table-column
  69. 			  prop="usrAddr"
  70. 			  label="通信地址"
  71. 			  width="200">
  72. 			</el-table-column>
  73. 			<el-table-column
  74. 			  prop="usrBirDate"
  75. 			  label="出生日期"
  76. 			  width="200">
  77. 			</el-table-column>
  78. 			<el-table-column
  79. 			  prop="usrHobby"
  80. 			  label="爱好"
  81. 			  width="200">
  82. 			</el-table-column>
  83. 			<el-table-column
  84. 			  prop="usrDetail"
  85. 			  label="个人简介"
  86. 			  width="300">
  87. 			</el-table-column>
  88. 			<el-table-column
  89. 			      fixed="right"
  90. 			      label="操作"
  91. 			      width="200">
  92. 			<template slot-scope="scope">
  93. 			  <template>
  94. 				<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleClick(scope.row)" >
  95. 					<el-button slot="reference">删除</el-button>
  96. 				</el-popconfirm>
  97. 			  </template>
  98. 			 <el-button style="margin-left: 20px;" @click="upuser(scope.row)">修改</el-button>
  99. 			</template>
  100. 			</el-table-column>
  101. 		</el-table>
  102. 		<div class="block">
  103. 		    <span class="demonstration"></span>
  104. 		    <el-pagination
  105. 		      @size-change="handleSizeChange"
  106. 		      @current-change="handleCurrentChange"
  107. 		      :current-page="currentPage"
  108. 		      :page-sizes="pageSizes"
  109. 		      :page-size="PageSize"
  110. 		      layout="total, sizes, prev, pager, next, jumper"
  111. 		      :total="totalCount">
  112. 		    </el-pagination>
  113. 		  </div>
  114. 		  <div>
  115. 		    <el-dialog title="用户信息新增" :visible.sync="addialogFormVisible" >
  116. 				<el-form ref="elForm" :model="formAddData.usrFileUrl" :rules="rules" size="medium" label-width="100px">
  117. 						    	  <el-form-item label="点击上传" prop="usrImg" required>
  118. 						    	    <el-upload
  119. 						    	      class="avatar-uploader"
  120. 						    	      action="http://localhost:8080/api/uploadFile"
  121. 						    	      :show-file-list="false"
  122. 						    	      :on-success="handleAvatarSuccess"
  123. 						    	      :before-upload="beforeAvatarUpload">
  124. 						    	      <img v-if="imageUrl" :src="imageUrl" class="avatar">
  125. 						    	      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  126. 						    	    </el-upload>
  127. 						    	  </el-form-item>
  128. 						    	  <el-form-item label="用户名称" prop="usrLoginNm">
  129. 						    	    <el-input v-model="formAddData.usrLoginNm" placeholder="请输入用户名称" :maxlength="20" show-word-limit
  130. 						    	      clearable prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
  131. 						    	  </el-form-item>
  132. 						    	  <el-form-item label="用户密码" prop="usrLoginPwd">
  133. 						    	    <el-input v-model="formAddData.usrLoginPwd" placeholder="请输入用户密码" :maxlength="12" show-word-limit
  134. 						    	      clearable prefix-icon='el-icon-star-on' show-password :style="{width: '100%'}"></el-input>
  135. 						    	  </el-form-item>
  136. 						    	  <el-form-item label="确认密码" prop="usrLoginPwd1">
  137. 						    	    <el-input v-model="formAddData.usrLoginPwd1" placeholder="请再次确认密码" :maxlength="12" show-word-limit
  138. 						    	      clearable prefix-icon='el-icon-star-on' show-password :style="{width: '100%'}"></el-input>
  139. 						    	  </el-form-item>
  140. 						    	  <el-form-item label="用户姓名" prop="usrNm">
  141. 						    	    <el-input v-model="formAddData.usrNm" placeholder="请输入用户姓名" :maxlength="20" show-word-limit clearable
  142. 						    	      prefix-icon='el-icon-s-custom' :style="{width: '100%'}"></el-input>
  143. 						    	  </el-form-item>
  144. 						    	  <el-form-item label="身份证号" prop="usrCardNum">
  145. 						    	    <el-input v-model="formAddData.usrCardNum" placeholder="请输入身份证号" :maxlength="18" show-word-limit
  146. 						    	      clearable prefix-icon='el-icon-postcard' :style="{width: '100%'}"></el-input>
  147. 						    	  </el-form-item>
  148. 						    	  <el-form-item label="所属省份" prop="usrPro">
  149. 						    	    <el-select v-model="formAddData.usrPro" placeholder="请选择所属省份" clearable :style="{width: '100%'}" @change="changeAddCitySelect($event)">
  150. 						    	    <el-option
  151. 						    	          v-for="(item,index) in usrAddProList"
  152. 						    	          :key="index"
  153. 						    	          :label="item.areaname"
  154. 						    	          :value="item.areaid">
  155. 						    	    </el-option>
  156. 									</el-select>
  157. 						    	  </el-form-item>
  158. 						    	  <el-form-item label="所属市" prop="usrCity">
  159. 						    	    <el-select v-model="formAddData.usrCity" placeholder="请选择所属市" filterable clearable
  160. 						    	      :style="{width: '100%'}" @change="changeAddFaddrSelect($event)" >
  161. 									  <el-option
  162. 									        v-for="(item,index) in usrAddCityList"
  163. 									        :key="index"
  164. 									        :label="item.areaname"
  165. 									        :value="item.areaid">
  166. 									  </el-option>
  167. 									</el-select>
  168. 						    	  </el-form-item>
  169. 						    	  <el-form-item label="所属县/区" prop="usrFaddr">
  170. 						    	    <el-select v-model="formAddData.usrFaddr" placeholder="请选择所属县/区" filterable clearable
  171. 						    	      :style="{width: '100%'}">
  172. 									  <el-option
  173. 									        v-for="(item,index) in usrAddFaddrList"
  174. 									        :key="index"
  175. 									        :label="item.areaname"
  176. 									        :value="item.areaid">
  177. 									  </el-option>
  178. 									  </el-select>
  179. 						    	  </el-form-item>
  180. 						    	  <el-form-item label="生日" prop="usrBirDate">
  181. 						    	    <el-date-picker v-model="formAddData.usrBirDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
  182. 						    	      :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
  183. 						    	  </el-form-item>
  184. 						    	  <el-form-item label="爱好" prop="usrHobby">
  185. 						    	    <el-checkbox-group v-model="formAddData.usrHobby" :min="1" size="medium">
  186. 						    	      <el-checkbox-button v-for="(item, index) in usrHobbyOptions" :key="index" :label="item.value"
  187. 						    	        :disabled="item.disabled" border>{{item.label}}</el-checkbox-button>
  188. 						    	    </el-checkbox-group>
  189. 						    	  </el-form-item>
  190. 						    	  <el-form-item label="用户简介" prop="usrDetail">
  191. 						    	    <el-input v-model="formAddData.usrDetail" type="textarea" placeholder="请输入用户简介" :maxlength="50"
  192. 						    	      show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
  193. 						    	  </el-form-item>
  194. 						    	</el-form>
  195. 			<div slot="footer" class="dialog-footer">
  196. 				<el-button @click="addialogFormVisible = false">取 消</el-button>
  197. 				<el-button type="primary" @click="addSubmit">确 定</el-button>
  198. 			</div>
  199. 			</el-dialog>
  200. 		  </div>
  201. 		  <div>
  202. 		    <el-dialog title="用户信息修改" :visible.sync="updialogFormVisible" >
  203. 		    	<el-form ref="elForm" :model="formData.usrFileUrl" :rules="rules" size="medium" label-width="100px">
  204. 		    	  <el-form-item label="点击上传" prop="usrImg" required>
  205. 		    	    <el-upload
  206. 		    	      class="avatar-uploader"
  207. 		    	      action="http://localhost:8080/api/uploadFile"
  208. 		    	      :show-file-list="false"
  209. 		    	      :on-success="handleAvatarSuccess"
  210. 		    	      :before-upload="beforeAvatarUpload">
  211. 		    	      <img v-if="imageUrl" :src="imageUrl" class="avatar">
  212. 		    	      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  213. 		    	    </el-upload>
  214. 		    	  </el-form-item>
  215. 		    	  <el-form-item label="用户名称" prop="usrLoginNm">
  216. 		    	    <el-input v-model="formData.usrLoginNm" placeholder="请输入用户名称" :maxlength="20" show-word-limit
  217. 		    	      clearable prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
  218. 		    	  </el-form-item>
  219. 		    	  <el-form-item label="用户密码" prop="usrLoginPwd">
  220. 		    	    <el-input v-model="formData.usrLoginPwd" placeholder="请输入用户密码" :maxlength="12" show-word-limit
  221. 		    	      clearable prefix-icon='el-icon-star-on' show-password :style="{width: '100%'}"></el-input>
  222. 		    	  </el-form-item>
  223. 		    	  <el-form-item label="确认密码" prop="usrLoginPwd1">
  224. 		    	    <el-input v-model="formData.usrLoginPwd1" placeholder="请再次确认密码" :maxlength="12" show-word-limit
  225. 		    	      clearable prefix-icon='el-icon-star-on' show-password :style="{width: '100%'}"></el-input>
  226. 		    	  </el-form-item>
  227. 		    	  <el-form-item label="用户姓名" prop="usrNm">
  228. 		    	    <el-input v-model="formData.usrNm" placeholder="请输入用户姓名" :maxlength="20" show-word-limit clearable
  229. 		    	      prefix-icon='el-icon-s-custom' :style="{width: '100%'}"></el-input>
  230. 		    	  </el-form-item>
  231. 		    	  <el-form-item label="身份证号" prop="usrCardNum">
  232. 		    	    <el-input v-model="formData.usrCardNum" placeholder="请输入身份证号" :maxlength="18" show-word-limit
  233. 		    	      clearable prefix-icon='el-icon-postcard' :style="{width: '100%'}"></el-input>
  234. 		    	  </el-form-item>
  235. 		    	  <el-form-item label="所属省份" prop="usrPro">
  236. 		    	    <el-select v-model="formData.usrPro" placeholder="请选择所属省份" clearable :style="{width: '100%'}" @change="changeCitySelect($event)">
  237. 		    	    <el-option
  238. 		    	          v-for="(item,index) in usrProList"
  239. 		    	          :key="index"
  240. 		    	          :label="item.areaname"
  241. 		    	          :value="item.areaid">
  242. 		    	    </el-option>
  243. 					</el-select>
  244. 		    	  </el-form-item>
  245. 		    	  <el-form-item label="所属市" prop="usrCity">
  246. 		    	    <el-select v-model="formData.usrCity" placeholder="请选择所属市" filterable clearable
  247. 		    	      :style="{width: '100%'}" @change="changeFaddrSelect($event)" >
  248. 					  <el-option
  249. 					        v-for="(item,index) in usrCityList"
  250. 					        :key="index"
  251. 					        :label="item.areaname"
  252. 					        :value="item.areaid">
  253. 					  </el-option>
  254. 					</el-select>
  255. 		    	  </el-form-item>
  256. 		    	  <el-form-item label="所属县/区" prop="usrFaddr">
  257. 		    	    <el-select v-model="formData.usrFaddr" placeholder="请选择所属县/区" filterable clearable
  258. 		    	      :style="{width: '100%'}">
  259. 					  <el-option
  260. 					        v-for="(item,index) in usrFaddrList"
  261. 					        :key="index"
  262. 					        :label="item.areaname"
  263. 					        :value="item.areaid">
  264. 					  </el-option>
  265. 					  </el-select>
  266. 		    	  </el-form-item>
  267. 		    	  <el-form-item label="生日" prop="usrBirDate">
  268. 		    	    <el-date-picker v-model="formData.usrBirDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
  269. 		    	      :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
  270. 		    	  </el-form-item>
  271. 		    	  <el-form-item label="爱好" prop="usrHobby">
  272. 		    	    <el-checkbox-group v-model="formData.usrHobby" :min="1" size="medium">
  273. 		    	      <el-checkbox-button v-for="(item, index) in usrHobbyOptions" :key="index" :label="item.value"
  274. 		    	        :disabled="item.disabled" border>{{item.label}}</el-checkbox-button>
  275. 		    	    </el-checkbox-group>
  276. 		    	  </el-form-item>
  277. 		    	  <el-form-item label="用户简介" prop="usrDetail">
  278. 		    	    <el-input v-model="formData.usrDetail" type="textarea" placeholder="请输入用户简介" :maxlength="50"
  279. 		    	      show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
  280. 		    	  </el-form-item>
  281. 		    	</el-form>
  282. 		      <div slot="footer" class="dialog-footer">
  283. 		    	<el-button @click="updialogFormVisible = false">取 消</el-button>
  284. 		    	<el-button type="primary" @click="uponSubmit">确 定</el-button>
  285. 		      </div>
  286. 		    </el-dialog>
  287. 		  </div>
  288. 	</div>
  289. </template>
  290.  
  291. <script>
  292.   export default {
  293. 	name:'tableInfo',
  294. 	inheritAttrs: false,
  295. 	components:{
  296. 	},
  297.     data() {
  298.       return {
  299. 		addialogFormVisible:false,
  300. 		imageUrl: '',
  301. 		usrAddProList:[],
  302. 		usrAddCityList:[],
  303. 		usrAddFaddrList:[],
  304. 		usrProList:[],
  305. 		usrCityList:[],
  306. 		usrFaddrList:[],
  307.         tableData: [{
  308. 			usrId:'',
  309. 			usrLoginNm:'',
  310. 			usrLoginPwd:'',
  311. 			usrNm:'',
  312. 			usrCardNum:'',
  313. 			usrAddr:'',
  314. 			usrBirDate:null,
  315. 			usrHobby:[],
  316. 			usrDetail:'',
  317. 			usrFileUrl:''
  318. 		}],
  319. 		fits: [''],//图片展示的属性
  320. 		// 默认显示第几页
  321. 	    currentPage:1,
  322. 	    // 总条数，根据接口获取数据长度(注意：这里不能为空)
  323. 	    totalCount:1,
  324. 	    // 个数选择器（可修改）
  325. 	    pageSizes:[10,20,30,40,50,100],
  326. 	    // 默认每页显示的条数（可修改）
  327. 	    PageSize:10,
  328. 		updialogFormVisible:false,
  329. 		formQueryData: {
  330. 		  query_usrNm: '',
  331. 		  query_usrLoginNm: "",
  332. 		  query_usrCardNum: '',
  333. 		  query_usrPro: '',
  334. 		  query_usrBirDate: null,
  335. 		  query_usrHobby: [],
  336. 		  query_usrDetail: ''
  337. 		},
  338. 		formData: {
  339. 		  usrImg: null,
  340. 		  usrLoginNm: "",
  341. 		  usrLoginPwd: undefined,
  342. 		  usrLoginPwd1: undefined,
  343. 		  usrNm: undefined,
  344. 		  usrCardNum: undefined,
  345. 		  usrPro: undefined,
  346. 		  usrCity: undefined,
  347. 		  usrFaddr: undefined,
  348. 		  usrBirDate: null,
  349. 		  usrHobby: [],
  350. 		  usrDetail: undefined,
  351. 		},
  352. 		formAddData: {
  353. 		  usrImg: null,
  354. 		  usrLoginNm: "",
  355. 		  usrLoginPwd: undefined,
  356. 		  usrLoginPwd1: undefined,
  357. 		  usrNm: undefined,
  358. 		  usrCardNum: undefined,
  359. 		  usrPro: undefined,
  360. 		  usrCity: undefined,
  361. 		  usrFaddr: undefined,
  362. 		  usrBirDate: null,
  363. 		  usrHobby: [],
  364. 		  usrDetail: undefined,
  365. 		},
  366. 		//表单校验
  367. 		rules: {
  368. 		  query_usrNm: [],
  369. 		  query_usrLoginNm: [{
  370. 		    pattern: /^[a-zA-Z0-9_-]{4,16}$/,
  371. 		    message: '用户名必须由字母、数字、下划线或减号组成!',
  372. 		    trigger: 'blur'
  373. 		  }],
  374. 		  query_usrCardNum: [{
  375. 		    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
  376. 		    message: '请输入正确格式的身份证号码!',
  377. 		    trigger: 'blur'
  378. 		  }],
  379. 		  query_usrPro: [],
  380. 		  query_usrBirDate: [],
  381. 		  query_usrHobby: [],
  382. 		  query_usrDetail: [],
  383. 		},
  384. 		query_usrHobbyOptions: [{
  385. 		  "label": "唱歌",
  386. 		  "value": 1
  387. 		}, {
  388. 		  "label": "游泳",
  389. 		  "value": 2
  390. 		}, {
  391. 		  "label": "看书",
  392. 		  "value": 3
  393. 		}, {
  394. 		  "label": "打游戏",
  395. 		  "value": 4
  396. 		}, {
  397. 		  "label": "party",
  398. 		  "value": 5
  399. 		}],
  400. 		usrLoginNm: [{
  401. 		  required: true,
  402. 		  message: '请输入用户名称',
  403. 		  trigger: 'blur'
  404. 		}, {
  405. 		  pattern: /^[a-zA-Z0-9_-]{4,16}$/,
  406. 		  message: '用户名必须由字母、数字、下划线或减号组成!',
  407. 		  trigger: 'blur'
  408. 		}],
  409. 		usrLoginPwd: [{
  410. 		  required: true,
  411. 		  message: '请输入用户密码',
  412. 		  trigger: 'blur'
  413. 		}, {
  414. 		  pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
  415. 		  message: '密码长度必须满足6位且由大写字母、小写字母、数字、和特殊字符组成!',
  416. 		  trigger: 'blur'
  417. 		}],
  418. 		usrLoginPwd1: [{
  419. 		  required: true,
  420. 		  message: '请再次确认密码',
  421. 		  trigger: 'blur'
  422. 		}, {
  423. 		  pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
  424. 		  message: '密码长度必须满足6位且由大写字母、小写字母、数字、和特殊字符组成!',
  425. 		  trigger: 'blur'
  426. 		}],
  427. 		usrNm: [{
  428. 		  required: true,
  429. 		  message: '请输入用户姓名',
  430. 		  trigger: 'blur'
  431. 		}],
  432. 		usrCardNum: [{
  433. 		  required: true,
  434. 		  message: '请输入身份证号',
  435. 		  trigger: 'blur'
  436. 		}, {
  437. 		  pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
  438. 		  message: '请输入正确格式的身份证号码!',
  439. 		  trigger: 'blur'
  440. 		}],
  441. 		usrPro: [{
  442. 		  required: true,
  443. 		  message: '请选择所属省份',
  444. 		  trigger: 'change'
  445. 		}],
  446. 		usrCity: [{
  447. 		  required: true,
  448. 		  message: '请选择所属市',
  449. 		  trigger: 'change'
  450. 		}],
  451. 		usrFaddr: [{
  452. 		  required: true,
  453. 		  message: '请选择所属县/区',
  454. 		  trigger: 'change'
  455. 		}],
  456. 		usrBirDate: [{
  457. 		  required: true,
  458. 		  message: '请选择生日',
  459. 		  trigger: 'change'
  460. 		}],
  461. 		usrHobby: [],
  462. 		usrDetail: [{
  463. 		  required: true,
  464. 		  message: '请输入用户简介',
  465. 		  trigger: 'blur'
  466. 		}],
  467. 		usrImgAction: 'http://localhost:8080/api/uploadFile',
  468. 		usrImgfileList: [],
  469. 		usrHobbyOptions: [{
  470. 		  "label": "唱歌",
  471. 		  "value": 1
  472. 		}, {
  473. 		  "label": "游泳",
  474. 		  "value": 2
  475. 		}, {
  476. 		  "label": "看书",
  477. 		  "value": 3
  478. 		}, {
  479. 		  "label": "打游戏",
  480. 		  "value": 4
  481. 		}, {
  482. 		  "label": "party",
  483. 		  "value": 5
  484. 		}]
  485.       }
  486.     },
  487. 	methods:{
  488. 		addSubmit(){
  489. 			var fileurl=''
  490. 			if(this.formAddData.usrFileUrl==undefined){
  491. 				fileurl=''
  492. 			}else{
  493. 				fileurl=this.formAddData.usrFileUrl
  494. 			}
  495. 			//获取formAddData的数据 修改用户信息
  496. 			this.$http.get('/addGameUserInfo', {params:{
  497. 				usrLoginNm:this.formAddData.usrLoginNm,
  498. 				usrLoginPwd:this.formAddData.usrLoginPwd,
  499. 				usrNm:this.formAddData.usrNm,
  500. 				usrCardNum:this.formAddData.usrCardNum,
  501. 				usrAddr:this.formAddData.usrPro+"-"+this.formAddData.usrCity+"-"+this.formAddData.usrFaddr,
  502. 				usrBirDate:this.formAddData.usrBirDate,
  503. 				usrHobby:this.formAddData.usrHobby.join(","),
  504. 				usrDetail:this.formAddData.usrDetail,
  505. 				usrFileUrl:fileurl
  506. 			}}).then((response) =>{
  507. 			   if(response.data.msg=='success'){
  508. 				   this.addialogFormVisible=false;
  509. 				   this.getTableList()
  510. 			   }
  511. 			}).catch((error) =>{
  512. 				alert("error"+error)
  513. 			});
  514. 		},
  515. 		addUser(){
  516. 			this.addialogFormVisible=true;
  517. 			//调用接口获取省份信息
  518. 			this.getAddProList(0,0)
  519. 		},
  520. 		changeFaddrSelect(event){
  521. 		  this.usrFaddrList=[]
  522. 		  this.formData.usrFaddr=''
  523. 		  console.log("选择县区",event)
  524. 		  //调用查询市信息的接口查询市信息 为县区列表赋值
  525. 		  this.$http.get('/getAreaInfo', {params:{
  526. 		  	parentid:event
  527. 		  }}).then((response) =>{
  528. 		  	this.usrFaddrList=response.data
  529. 		  }).catch((error) => {
  530. 		  	console.log(error.getMessage);
  531. 		  });
  532. 		},
  533. 		changeCitySelect(event){
  534. 			this.usrCityList=[]
  535. 			this.formData.usrCity=''
  536. 			this.formData.usrFaddr=''
  537. 			console.log("选择市1",event)
  538. 			//调用查询市信息的接口查询市信息 为市列表赋值
  539. 			this.$http.get('/getAreaInfo', {params:{
  540. 				parentid:event
  541. 			}}).then((response) =>{
  542. 				this.usrCityList=response.data
  543. 			}).catch((error) => {
  544. 				console.log(error.getMessage);
  545. 			});
  546. 		},
  547. 		getProList(parentid,listInfo){//获取省份信息
  548. 			this.$http.get('/getAreaInfo', {params:{
  549. 				parentid:parentid
  550. 			}}).then((response) =>{
  551. 				console.log(response.data.areaList)
  552. 				if(listInfo==0){//0-查询省信息
  553. 					this.usrProList=response.data
  554. 				}else if(listInfo==1){//1-查询市信息
  555. 					this.usrCityList=response.data
  556. 				}else{//2-查询县/区信息
  557. 					this.usrFaddrList=response.data
  558. 				}
  559. 			}).catch((error) => {
  560. 				console.log(error.getMessage);
  561. 			});
  562. 		},
  563. 		changeAddFaddrSelect(event){
  564. 		  this.usrAddFaddrList=[]
  565. 		  this.formAddData.usrFaddr=''
  566. 		  console.log("选择县区",event)
  567. 		  //调用查询市信息的接口查询市信息 为县区列表赋值
  568. 		  this.$http.get('/getAreaInfo', {params:{
  569. 		  	parentid:event
  570. 		  }}).then((response) =>{
  571. 		  	this.usrAddFaddrList=response.data
  572. 		  }).catch((error) => {
  573. 		  	console.log(error.getMessage);
  574. 		  });
  575. 		},
  576. 		changeAddCitySelect(event){
  577. 			this.usrAddCityList=[]
  578. 			this.formAddData.usrCity=''
  579. 			this.formAddData.usrFaddr=''
  580. 			console.log("选择市1",event)
  581. 			//调用查询市信息的接口查询市信息 为市列表赋值
  582. 			this.$http.get('/getAreaInfo', {params:{
  583. 				parentid:event
  584. 			}}).then((response) =>{
  585. 				this.usrAddCityList=response.data
  586. 			}).catch((error) => {
  587. 				console.log(error.getMessage);
  588. 			});
  589. 		},
  590. 		getAddProList(parentid,listInfo){//获取省份信息
  591. 			this.$http.get('/getAreaInfo', {params:{
  592. 				parentid:parentid
  593. 			}}).then((response) =>{
  594. 				console.log(response.data.areaList)
  595. 				if(listInfo==0){//0-查询省信息
  596. 					this.usrAddProList=response.data
  597. 				}else if(listInfo==1){//1-查询市信息
  598. 					this.usrAddCityList=response.data
  599. 				}else{//2-查询县/区信息
  600. 					this.usrAddFaddrList=response.data
  601. 				}
  602. 			}).catch((error) => {
  603. 				console.log(error.getMessage);
  604. 			});
  605. 		},
  606. 		handleClick(row) {//传入选中这一行的数据，可以进行操作
  607. 			this.$http.get('/delGameUserInfoById', {params:{
  608. 				usrId:row.usrId
  609. 			}}).then((response) =>{
  610. 				if(response.data.msg=='success'){
  611. 					this.getTableList()
  612. 				}
  613. 			}).catch((error) => {
  614. 				console.log(error.getMessage);
  615. 			});
  616. 		},
  617. 		getTableList(){
  618. 			console.log("this.formQueryData: "+this.formQueryData.query_usrHobby.join(","))
  619. 			this.$http.get('/getAllGameUserList', {params:{
  620. 			currentPage:this.currentPage,
  621. 			pageSize:this.PageSize,
  622. 			recordCount:this.totalCount,
  623. 			usrLoginNm:this.formQueryData.query_usrLoginNm,
  624. 			usrNm:this.formQueryData.query_usrNm,
  625. 			usrCardNum:this.formQueryData.query_usrCardNum,
  626. 			usrAddr:this.formQueryData.query_usrPro,
  627. 			usrBirDate:this.formQueryData.query_usrBirDate,
  628. 			usrHobby:this.formQueryData.query_usrHobby.join(","),
  629. 			usrDetail:this.formQueryData.query_usrDetail
  630. 		}}).then((response) =>{
  631. 			this.totalCount=response.data.totalCount
  632. 			this.currentPage=response.data.currentPage
  633. 			this.PageSize=response.data.pageSize
  634. 			this.tableData=response.data.recordList
  635. 		}).catch((error) =>{
  636. 			alert("error"+error)
  637. 		});
  638. 		},
  639. 		// 分页
  640. 		// 每页显示的条数
  641. 	   handleSizeChange(val) {
  642. 		   // 改变每页显示的条数 
  643. 		   this.PageSize=val
  644. 		   // 注意：在改变每页显示的条数时，要将页码显示到第一页
  645. 		   this.currentPage=1
  646. 		   //改变条数时触发查询
  647. 		   this.getTableList()
  648. 	   },
  649. 		// 显示第几页
  650. 	   handleCurrentChange(val) {
  651. 		   // 改变默认的页数
  652. 		   this.currentPage=val
  653. 		   //改变页数是触发查询
  654. 		   this.getTableList()
  655. 	   },
  656. 	   submitForm() {
  657. 	     this.$refs['elForm'].validate(valid => {
  658. 	       if (!valid) return
  659. 	       // TODO 提交表单触发查询
  660. 		  this.getTableList()
  661. 	     })
  662. 	   },
  663. 	   resetForm() {
  664. 	     this.$refs['elForm'].resetFields()
  665. 	   },
  666. 	   onOpen() {},
  667. 	   onClose() {
  668. 	     this.$refs['elForm'].resetFields()
  669. 	   },
  670. 	   close() {
  671. 	     this.$emit('update:visible', false)
  672. 	   },
  673. 	   handelConfirm() {
  674. 	     this.$refs['elForm'].validate(valid => {
  675. 	       if (!valid) return
  676. 	       this.close()
  677. 	     })
  678. 	   },
  679. 	   handleAvatarSuccess(res, file) {
  680. 	      this.imageUrl = URL.createObjectURL(file.raw);
  681. 		  this.formData.usrFileUrl=res.fileUrl
  682. 		  this.formAddData.usrFileUrl=res.fileUrl
  683. 		  console.log("imageUrl: "+this.imageUrl);
  684. 	   },
  685. 	   beforeAvatarUpload(file) {
  686. 		  const isJPG = file.type === 'image/jpeg';
  687. 		  const isLt2M = file.size / 1024 / 1024 < 2;
  688. 		  if (!isJPG) {
  689. 			this.$message.error('上传头像图片只能是 JPG 格式!');
  690. 		  }
  691. 		  if (!isLt2M) {
  692. 			this.$message.error('上传头像图片大小不能超过 2MB!');
  693. 		  }
  694. 		  return isJPG && isLt2M;
  695. 	  },
  696. 	   upuser(row){
  697. 		   this.updialogFormVisible = true
  698. 		   //使用map将字符串数组转化为数字数组 用于checkBox回显数据
  699. 		   var arr=row.usrHobbys.split(',')
  700. 		   arr=arr.map(Number)
  701. 		   console.log("arr "+arr)
  702. 		   //将用户信息回显在form表单上
  703. 		   const userinfo={
  704. 			  usrId:row.usrId,
  705. 			  usrLoginNm:row.usrLoginNm,
  706. 			  usrLoginPwd:row.usrLoginPwd,
  707. 			  usrLoginPwd1:row.usrLoginPwd,
  708. 			  usrNm:row.usrNm,
  709. 			  usrCardNum:row.usrCardNum,
  710. 			  usrPro:row.usrAddr.split("-")[0],
  711. 			  usrCity:row.usrAddr.split("-")[1],
  712. 			  usrFaddr:row.usrAddr.split("-")[2],
  713. 			  usrBirDate:row.usrBirDate,
  714. 			  usrHobby:arr,
  715. 			  usrDetail:row.usrDetail
  716. 		   }
  717. 		   this.formData=userinfo
  718. 		   //调用接口获取省份信息
  719. 		   this.getProList(0,0)
  720. 	   },
  721. 	   uponSubmit(){
  722. 		   var fileurl=''
  723. 		   if(this.formData.usrFileUrl==undefined||this.formData.usrFileUrl==''){
  724. 			   fileurl=''
  725. 		   }else{
  726. 			   fileurl=this.formData.usrFileUrl
  727. 		   }
  728. 		   //获取formData的数据 修改用户信息
  729. 		   this.$http.get('/updateGameUserInfo', {params:{
  730. 				usrId:this.formData.usrId,
  731. 				usrLoginNm:this.formData.usrLoginNm,
  732. 				usrLoginPwd:this.formData.usrLoginPwd,
  733. 				usrNm:this.formData.usrNm,
  734. 				usrCardNum:this.formData.usrCardNum,
  735. 				usrAddr:this.formData.usrPro+"-"+this.formData.usrCity+"-"+this.formData.usrFaddr,
  736. 				usrBirDate:this.formData.usrBirDate,
  737. 				usrHobby:this.formData.usrHobby.join(","),
  738. 				usrDetail:this.formData.usrDetail,
  739. 				usrFileUrl:fileurl
  740. 		   }}).then((response) =>{
  741. 			   if(response.data.msg=='success'){
  742. 				   this.updialogFormVisible=false;
  743. 				   this.getTableList()
  744. 			   }
  745. 		   }).catch((error) =>{
  746. 				alert("error"+error)
  747. 		   });
  748. 	   },
  749. 	   handleChange (value) {
  750. 	     console.log(value)
  751. 	   }
  752. 	},
  753. 	mounted(){
  754. 		this.getTableList()
  755. 	}
  756.   }
  757. </script>
  758.  
  759. <style>
  760. 	.el-upload__tip {
  761. 	  line-height: 1.2;
  762. 	}
  763. 	.avatar-uploader .el-upload {
  764. 	    border: 1px dashed #d9d9d9;
  765. 	    border-radius: 6px;
  766. 	    cursor: pointer;
  767. 	    position: relative;
  768. 	    overflow: hidden;
  769. 	  }
  770. 	  .avatar-uploader .el-upload:hover {
  771. 	    border-color: #409EFF;
  772. 	  }
  773. 	  .avatar-uploader-icon {
  774. 	    font-size: 28px;
  775. 	    color: #8c939d;
  776. 	    width: 178px;
  777. 	    height: 178px;
  778. 	    line-height: 178px;
  779. 	    text-align: center;
  780. 	  }
  781. 	  .avatar {
  782. 	    width: 178px;
  783. 	    height: 178px;
  784. 	    display: block;
  785. 	  }
  786. </style>

开发后端项目代码

后端项目目录结构如下：

源码下载地址：

链接：https://pan.baidu.com/s/163wHTpcdLdOfCUSg1PqMgg?pwd=4fb1 
提取码：4fb1 
--来自百度网盘超级会员V3的分享

        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/324064
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号