目录
1、后台
1.1、导入pom依赖
1.2、web.xml
1.3、配置文件
springmvc-serlvet.xml
mybatis.cfg.xml
log4j2.xml
jdbc.properties
generatorConfig.xml
applicationContext-mybatis.xml
applicationCotext.xml
1.4、工具类
CorsFilter.java
JsonData.java
PageBean.java
ResponseUtil.java
StringUtil.java
1.5、数据库访问层、业务逻辑层、空之城
BookMapper.xml
BookMapper.java
BookBiz.java
BookImpl.java
BookController.java
2、前台
2.1、执行命令
2.2、main.js
2.3、连接后台
action.js
http.js
2.4、index.vue
3、运行效果
<?xml version=;1.0; encoding=;UTF-8;?>
<project xmlns=;http://maven.apache.org/POM/4.0.0; xmlns:xsi=;http://www.w3.org/2001/XMLSchema-instance;
xsi:schemaLocation=;http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd;>
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>zsgc</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>zsgc Maven Webapp</name>
<!-- FIXME change it to the project;s website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.plugin.version>3.7.0</maven.compiler.plugin.version>
<!--添加jar包依赖-->
<!--1.spring 5.0.2.RELEASE相关-->
<spring.version>5.0.2.RELEASE</spring.version>
<!--2.mybatis相关-->
<mybatis.version>3.4.5</mybatis.version>
<!--mysql-->
<mysql.version>5.1.44</mysql.version>
<!--pagehelper分页jar依赖-->
<pagehelper.version>5.1.2</pagehelper.version>
<!--mybatis与spring集成jar依赖-->
<mybatis.spring.version>1.3.1</mybatis.spring.version>
<!--3.dbcp2连接池相关 druid-->
<commons.dbcp2.version>2.1.1</commons.dbcp2.version>
<commons.pool2.version>2.4.3</commons.pool2.version>
<!--4.log日志相关-->
<log4j2.version>2.9.1</log4j2.version>
<!--5.其他-->
<junit.version>4.12</junit.version>
<servlet.version>4.0.0</servlet.version>
<lombok.version>1.18.2</lombok.version>
<ehcache.version>2.10.0</ehcache.version>
<slf4j-api.version>1.7.7</slf4j-api.version>
</properties>
<dependencies>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-core</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-web</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
<version>1.3.2</version>
</dependency>
<!--1.spring相关-->
<dependency>
<groupId>org.springFramework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<!--2.mybatis相关-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!--pagehelper分页插件jar包依赖-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
<!--mybatis与spring集成jar包依赖-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${mybatis.spring.version}</version>
</dependency>
<!--3.dbcp2连接池相关-->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-dbcp2</artifactId>
<version>${commons.dbcp2.version}</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-pool2</artifactId>
<version>${commons.pool2.version}</version>
</dependency>
<!--4.log日志相关依赖-->
<!--核心log4j2jar包-->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-core</artifactId>
<version>${log4j2.version}</version>
</dependency>
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-api</artifactId>
<version>${log4j2.version}</version>
</dependency>
<!--web工程需要包含log4j-web;非web工程不需要-->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-web</artifactId>
<version>${log4j2.version}</version>
</dependency>
<!--5.其他-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>${lombok.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- jsp依赖-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<!-- 做服务端参数校验 JSR303 的jar包依赖-->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.0.7.Final</version>
</dependency>
<!--用来支持SpringMvc支持json数据转换-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.3</version>
</dependency>
<dependency>
<groupId>net.sf.ehcache</groupId>
<artifactId>ehcache</artifactId>
<version>${ehcache.version}</version>
</dependency>
<!-- slf4j核心包 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j-api.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${slf4j-api.version}</version>
<scope>runtime</scope>
</dependency>
<!--用于与slf4j保持桥接 -->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-slf4j-impl</artifactId>
<version>${log4j2.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.0.2.RELEASE</version>
<scope>compile</scope>
</dependency>
</dependencies>
<build>
<finalName>zsgc</finalName>
<resources>
<!--解决mybatis-generator-maven-plugin运行时没有将XxxMapper.xml文件放入target文件夹的问题-->
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<!--解决mybatis-generator-maven-plugin运行时没有将jdbc.properites文件放入target文件夹的问题-->
<resource>
<directory>src/main/resources</directory>
<includes>
<include>jdbc.properties</include>
<include>*.xml</include>
</includes>
</resource>
</resources>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>${maven.compiler.plugin.version}</version>
<configuration>
<source>${maven.compiler.source}</source>
<target>${maven.compiler.target}</target>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.2</version>
<dependencies>
<!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
</dependencies>
<configuration>
<overwrite>true</overwrite>
</configuration>
</plugin>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
<web-app xmlns=;http://xmlns.jcp.org/xml/ns/javaee;
xmlns:xsi=;http://www.w3.org/2001/XMLSchema-instance;
xsi:schemaLocation=;http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd;
version=;3.1;>
<display-name>Archetype Created Web Application</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 读取Spring上下文的监听器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- Spring MVC servlet -->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--此参数可以不配置;默认值为;/WEB-INF/springmvc-servlet.xml-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/springmvc-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<!--web.xml 3.0的新特性;是否支持异步-->
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 解决cors跨域问题过滤器 -->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.ssr.util.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>
org.springframework.web.filter.CharacterEncodingFilter
</filter-class>
<async-supported>true</async-supported>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
<?xml version=;1.0; encoding=;UTF-8;?>
<!DOCTYPE configuration PUBLIC ;-//mybatis.org//DTD Config 3.0//EN; ;http://mybatis.org/dtd/mybatis-3-config.dtd;>
<configuration>
<!-- 引入外部配置文件 -->
<properties resource=;jdbc.properties;/>
<settings>
<setting name=;logImpl; value=;LOG4J2;/>
</settings>
<!-- 别名 -->
<typeAliases>
<!--<typeAlias type=;com.javaxl.model.Book; alias=;Book;/>-->
</typeAliases>
<!-- 配置mybatis运行环境 -->
<environments default=;development;>
<environment id=;development;>
<!-- type=;JDBC; 代表使用JDBC的提交和回滚来管理事务 -->
<transactionManager type=;jdbc;/>
<!-- mybatis提供了3种数据源类型;分别是;POOLED,UNPOOLED,JNDI -->
<!-- POOLED 表示支持JDBC数据源连接池 -->
<!-- UNPOOLED 表示不支持数据源连接池 -->
<!-- JNDI 表示支持外部数据源连接池 -->
<dataSource type=;POOLED;>
<property name=;driver;
value=;${jdbc.driver};/>
<property name=;url;
value=;${jdbc.url};/>
<property name=;username; value=;${jdbc.username};/>
<property name=;password; value=;${jdbc.password};/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource=;com/ssr/mapper/BookMapper.xml;/>
</mappers>
</configuration><?xml version=;1.0; encoding=;UTF-8;?>
<!-- status : 指定log4j本身的打印日志的级别.ALL< Trace < DEBUG < INFO < WARN < ERROR
< FATAL < OFF。 monitorInterval : 用于指定log4j自动重新配置的监测间隔时间;单位是s,最小是5s. -->
<Configuration status=;WARN; monitorInterval=;30;>
<Properties>
<!-- 配置日志文件输出目录 ${sys:user.home} -->
<Property name=;LOG_HOME;>/root/workspace/lucenedemo/logs</Property>
<property name=;ERROR_LOG_FILE_NAME;>/root/workspace/lucenedemo/logs/error</property>
<property name=;WARN_LOG_FILE_NAME;>/root/workspace/lucenedemo/logs/warn</property>
<property name=;PATTERN;>%d{yyyy-MM-dd HH:mm:ss.SSS} [%t-%L] %-5level %logger{36} - %msg%n</property>
</Properties>
<Appenders>
<!--这个输出控制台的配置 -->
<Console name=;Console; target=;SYSTEM_OUT;>
<!-- 控制台只输出level及以上级别的信息(onMatch),其他的直接拒绝(onMismatch) -->
<ThresholdFilter level=;trace; onMatch=;ACCEPT;
onMismatch=;DENY; />
<!-- 输出日志的格式 -->
<!-- %d{yyyy-MM-dd HH:mm:ss, SSS} : 日志生产时间 %p : 日志输出格式 %c : logger的名称
%m : 日志内容;即 logger.info(;message;) %n : 换行符 %C : Java类名 %L : 日志输出所在行数 %M
: 日志输出所在方法名 hostName : 本地机器名 hostAddress : 本地ip地址 -->
<PatternLayout pattern=;${PATTERN}; />
</Console>
<!--文件会打印出所有信息;这个log每次运行程序会自动清空;由append属性决定;这个也挺有用的;适合临时测试用 -->
<!--append为TRUE表示消息增加到指定文件中;false表示消息覆盖指定的文件内容;默认值是true -->
<File name=;log; fileName=;logs/test.log; append=;false;>
<PatternLayout
pattern=%d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n; />
</File>
<!-- 这个会打印出所有的info及以下级别的信息;每次大小超过size; 则这size大小的日志会自动存入按年份-月份建立的文件夹下面并进行压缩;作为存档 -->
<RollingFile name=;RollingFileInfo; fileName=;${LOG_HOME}/info.log;
filePattern=;${LOG_HOME}/$${date:yyyy-MM}/info-%d{yyyy-MM-dd}-%i.log;>
<!--控制台只输出level及以上级别的信息;onMatch;;其他的直接拒绝;onMismatch; -->
<ThresholdFilter level=;info; onMatch=;ACCEPT;
onMismatch=;DENY; />
<PatternLayout
pattern=%d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n; />
<Policies>
<!-- 基于时间的滚动策略;interval属性用来指定多久滚动一次;默认是1 hour。 modulate=true用来调整时间;比如现在是早上3am;interval是4;那么第一次滚动是在4am;接着是8am;12am...而不是7am. -->
<!-- 关键点在于 filePattern后的日期格式;以及TimeBasedTriggeringPolicy的interval; 日期格式精确到哪一位;interval也精确到哪一个单位 -->
<!-- log4j2的按天分日志文件 : info-%d{yyyy-MM-dd}-%i.log -->
<TimeBasedTriggeringPolicy interval=;1;
modulate=;true; />
<!-- SizeBasedTriggeringPolicy:Policies子节点; 基于指定文件大小的滚动策略;size属性用来定义每个日志文件的大小. -->
<!-- <SizeBasedTriggeringPolicy size=;2 kB; /> -->
</Policies>
</RollingFile>
<RollingFile name=;RollingFileWarn; fileName=;${WARN_LOG_FILE_NAME}/warn.log;
filePattern=;${WARN_LOG_FILE_NAME}/$${date:yyyy-MM}/warn-%d{yyyy-MM-dd}-%i.log;>
<ThresholdFilter level=;warn; onMatch=;ACCEPT;
onMismatch=;DENY; />
<PatternLayout
pattern=%d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n; />
<Policies>
<TimeBasedTriggeringPolicy />
<SizeBasedTriggeringPolicy size=;2 kB; />
</Policies>
<!-- DefaultRolloverStrategy属性如不设置;则默认为最多同一文件夹下7个文件;这里设置了20 -->
<DefaultRolloverStrategy max=;20; />
</RollingFile>
<RollingFile name=;RollingFileError; fileName=;${ERROR_LOG_FILE_NAME}/error.log;
filePattern=;${ERROR_LOG_FILE_NAME}/$${date:yyyy-MM}/error-%d{yyyy-MM-dd-HH-mm}-%i.log;>
<ThresholdFilter level=;error; onMatch=;ACCEPT;
onMismatch=;DENY; />
<PatternLayout
pattern=%d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n; />
<Policies>
<!-- log4j2的按分钟 分日志文件 : warn-%d{yyyy-MM-dd-HH-mm}-%i.log -->
<TimeBasedTriggeringPolicy interval=;1;
modulate=;true; />
<!-- <SizeBasedTriggeringPolicy size=;10 MB; /> -->
</Policies>
</RollingFile>
</Appenders>
<!--然后定义logger;只有定义了logger并引入的appender;appender才会生效 -->
<Loggers>
<!--过滤掉spring和mybatis的一些无用的DEBUG信息 -->
<logger name=;org.springframework; level=;INFO;></logger>
<logger name=;org.mybatis; level=;INFO;></logger>
<!-- 第三方日志系统 -->
<logger name=;org.springframework; level=;ERROR; />
<logger name=;org.hibernate; level=;ERROR; />
<logger name=;org.apache.struts2; level=;ERROR; />
<logger name=;com.opensymphony.xwork2; level=;ERROR; />
<logger name=;org.jboss; level=;ERROR; />
<!-- 配置日志的根节点 -->
<root level=;all;>
<appender-ref ref=;Console; />
<appender-ref ref=;RollingFileInfo; />
<appender-ref ref=;RollingFileWarn; />
<appender-ref ref=;RollingFileError; />
</root>
</Loggers>
</Configuration>jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/t280?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=123456
<?xml version=;1.0; encoding=;UTF-8; ?>
<!DOCTYPE generatorConfiguration PUBLIC ;-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN;
;http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd; >
<generatorConfiguration>
<!-- 引入配置文件 -->
<properties resource=;jdbc.properties;/>
<!--指定数据库jdbc驱动jar包的位置-->
<classPathEntry location=;D:ruanjianmaven_ckmysqlmysql-connector-java5.1.44mysql-connector-java-5.1.44.jar;/>
<!-- 一个数据库一个context -->
<context id=;infoGuardian;>
<!-- 注释 -->
<commentGenerator>
<property name=;suppressAllComments; value=;true;/><!-- 是否取消注释 -->
<property name=;suppressDate; value=;true;/> <!-- 是否生成注释代时间戳 -->
</commentGenerator>
<!-- jdbc连接 -->
<jdbcConnection driverClass=;${jdbc.driver};
connectionURL=;${jdbc.url}; userId=;${jdbc.username}; password=;${jdbc.password};/>
<!-- 类型转换 -->
<javaTypeResolver>
<!-- 是否使用bigDecimal; false可自动转化以下类型;Long, Integer, Short, etc.; -->
<property name=;forceBigDecimals; value=;false;/>
</javaTypeResolver>
<!-- 01 指定javaBean生成的位置 -->
<!-- targetPackage;指定生成的model生成所在的包名 -->
<!-- targetProject;指定在该项目下所在的路径 -->
<javaModelGenerator targetPackage=;com.ssr.model;
targetProject=;src/main/java;>
<!-- 是否允许子包;即targetPackage.schemaName.tableName -->
<property name=;enableSubPackages; value=;false;/>
<!-- 是否对model添加构造函数 -->
<property name=;constructorBased; value=;true;/>
<!-- 是否针对string类型的字段在set的时候进行trim调用 -->
<property name=;trimStrings; value=;false;/>
<!-- 建立的Model对象是否 不可改变 即生成的Model对象不会有 setter方法;只有构造方法 -->
<property name=;immutable; value=;false;/>
</javaModelGenerator>
<!-- 02 指定sql映射文件生成的位置 -->
<sqlMapGenerator targetPackage=;com.ssr.mapper;
targetProject=;src/main/java;>
<!-- 是否允许子包;即targetPackage.schemaName.tableName -->
<property name=;enableSubPackages; value=;false;/>
</sqlMapGenerator>
<!-- 03 生成XxxMapper接口 -->
<!-- type=;ANNOTATEDMAPPER;,生成Java Model 和基于注解的Mapper对象 -->
<!-- type=;MIXEDMAPPER;,生成基于注解的Java Model 和相应的Mapper对象 -->
<!-- type=;XMLMAPPER;,生成SQLMap XML文件和独立的Mapper接口 -->
<javaClientGenerator targetPackage=;com.ssr.mapper;
targetProject=;src/main/java; type=;XMLMAPPER;>
<!-- 是否在当前路径下新加一层schema,false路径com.oop.eksp.user.model; true:com.oop.eksp.user.model.[schemaName] -->
<property name=;enableSubPackages; value=;false;/>
</javaClientGenerator>
<!-- 配置表信息 -->
<!-- schema即为数据库名 -->
<!-- tableName为对应的数据库表 -->
<!-- domainObjectName是要生成的实体类 -->
<!-- enable*ByExample是否生成 example类 -->
<!--<table schema=;; tableName=;t_book; domainObjectName=;Book;-->
<!--enableCountByExample=;false; enableDeleteByExample=;false;-->
<!--enableSelectByExample=;false; enableUpdateByExample=;false;>-->
<!--<!– 忽略列;不生成bean 字段 –>-->
<!--<!– <ignoreColumn column=;FRED; /> –>-->
<!--<!– 指定列的java数据类型 –>-->
<!--<!– <columnOverride column=;LONG_VARCHAR_FIELD; jdbcType=;VARCHAR; /> –>-->
<!--</table>-->
<!-- <table schema=;; tableName=;t_struts_class; domainObjectName=;Clayy;-->
<!-- enableCountByExample=;false; enableDeleteByExample=;false;-->
<!-- enableSelectByExample=;false; enableUpdateByExample=;false;>-->
<!-- <!– 忽略列;不生成bean 字段 –>-->
<!-- <!– <ignoreColumn column=;FRED; /> –>-->
<!-- <!– 指定列的java数据类型 –>-->
<!-- <!– <columnOverride column=;LONG_VARCHAR_FIELD; jdbcType=;VARCHAR; /> –>-->
<!-- </table>-->
<table schema=;; tableName=;t_mvc_book; domainObjectName=;Book;
enableCountByExample=;false; enableDeleteByExample=;false;
enableSelectByExample=;false; enableUpdateByExample=;false;>
<!-- 忽略列;不生成bean 字段 -->
<!-- <ignoreColumn column=;FRED; /> -->
<!-- 指定列的java数据类型 -->
<!-- <columnOverride column=;LONG_VARCHAR_FIELD; jdbcType=;VARCHAR; /> -->
</table>
</context>
</generatorConfiguration><?xml version=;1.0; encoding=;UTF-8;?>
<beans xmlns=;http://www.springframework.org/schema/beans;
xmlns:xsi=;http://www.w3.org/2001/XMLSchema-instance;
xmlns:context=;http://www.springframework.org/schema/context; xmlns:tx=;http://www.springframework.org/schema/tx;
xmlns:aop=;http://www.springframework.org/schema/aop;
xsi:schemaLocation=;http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd;>
<!--1. 注解式开发 -->
<!-- 注解驱动 -->
<context:annotation-config/>
<!-- 用注解方式注入bean;并指定查找范围;com.javaxl.ssm及子子孙孙包-->
<context:component-scan base-package=;com.ssr;/>
<context:property-placeholder location=;classpath:jdbc.properties;/>
<bean id=;dataSource; class=;org.apache.commons.dbcp2.BasicDataSource;
destroy-method=;close;>
<property name=;driverClassName; value=;${jdbc.driver};/>
<property name=;url; value=;${jdbc.url};/>
<property name=;username; value=;${jdbc.username};/>
<property name=;password; value=;${jdbc.password};/>
<!--初始连接数-->
<property name=;initialSize; value=;10;/>
<!--最大活动连接数-->
<property name=;maxTotal; value=;100;/>
<!--最大空闲连接数-->
<property name=;maxIdle; value=;50;/>
<!--最小空闲连接数-->
<property name=;minIdle; value=;10;/>
<!--设置为-1时;如果没有可用连接;连接池会一直无限期等待;直到获取到连接为止。-->
<!--如果设置为N;毫秒;;则连接池会等待N毫秒;等待不到;则抛出异常-->
<property name=;maxWaitMillis; value=;-1;/>
</bean>
<!--4. spring和MyBatis整合 -->
<!--1) 创建sqlSessionFactory-->
<bean id=;sqlSessionFactory; class=;org.mybatis.spring.SqlSessionFactoryBean;>
<!-- 指定数据源 -->
<property name=;dataSource; ref=;dataSource;/>
<!-- 自动扫描XxxMapping.xml文件;**任意路径 -->
<property name=;mapperLocations; value=;classpath*:com/ssr/**/mapper/*.xml;/>
<!-- 指定别名 -->
<property name=;typeAliasesPackage; value=;com/yzp/**/model;/>
<!--配置pagehelper插件-->
<property name=;plugins;>
<array>
<bean class=;com.github.pagehelper.PageInterceptor;>
<property name=;properties;>
<value>
helperDialect=mysql
</value>
</property>
</bean>
</array>
</property>
</bean>
<!--2) 自动扫描com/javaxl/ssm/**/mapper下的所有XxxMapper接口(其实就是DAO接口);并实现这些接口;-->
<!-- 即可直接在程序中使用dao接口;不用再获取sqlsession对象-->
<bean class=;org.mybatis.spring.mapper.MapperScannerConfigurer;>
<!--basePackage 属性是映射器接口文件的包路径。-->
<!--你可以使用分号或逗号 作为分隔符设置多于一个的包路径-->
<property name=;basePackage; value=;com/ssr/**/mapper;/>
<property name=;sqlSessionFactoryBeanName; value=;sqlSessionFactory;/>
</bean>
<bean id=;transactionManager; class=;org.springframework.jdbc.datasource.DataSourceTransactionManager;>
<property name=;dataSource; ref=;dataSource; />
</bean>
<tx:annotation-driven transaction-manager=;transactionManager; />
<aop:aspectj-autoproxy/>
</beans>
<?xml version=;1.0; encoding=;UTF-8;?>
<beans xmlns=;http://www.springframework.org/schema/beans;
xmlns:xsi=;http://www.w3.org/2001/XMLSchema-instance;
xmlns:context=;http://www.springframework.org/schema/context; xmlns:tx=;http://www.springframework.org/schema/tx;
xmlns:aop=;http://www.springframework.org/schema/aop;
xsi:schemaLocation=;http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd;>
<!--随着后续学习;框架越学越多;不能将所有的框架配置;放到同一个配置文件;否则不利于管理
-->
<import resource=;applicationContext-mybatis.xml;></import>
</beans>
package com.ssr.util;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 配置tomcat允许跨域访问
*
* ;author Administrator
*
*/
public class CorsFilter implements Filter {
;Override
public void init(FilterConfig filterConfig) throws ServletException {
}
// ;Override
// public void doFilter(ServletRequest servletRequest, ServletResponse
// servletResponse, FilterChain filterChain)
// throws IOException, ServletException {
// HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
//
// // Access-Control-Allow-Origin就是我们需要设置的域名
// // Access-Control-Allow-Headers跨域允许包含的头。
// // Access-Control-Allow-Methods是允许的请求方式
// httpResponse.addHeader(;Access-Control-Allow-Origin;, ;*;);// *,任何域名
// httpResponse.setHeader(;Access-Control-Allow-Methods;, ;POST, GET, PUT,
// DELETE;);
// // httpResponse.setHeader(;Access-Control-Allow-Headers;, ;Origin,
// // X-Requested-With, Content-Type, Accept;);
//
// // 允许请求头Token
// httpResponse.setHeader(;Access-Control-Allow-Headers;,
// ;Origin,X-Requested-With, Content-Type, Accept, Token;);
// HttpServletRequest req = (HttpServletRequest) servletRequest;
// System.out.println(;Token=; ; req.getHeader(;Token;));
// if(;OPTIONS;.equals(req.getMethod())) {
// return;
// }
//
//
// filterChain.doFilter(servletRequest, servletResponse);
// }
;Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse resp = (HttpServletResponse) servletResponse;
HttpServletRequest req = (HttpServletRequest) servletRequest;
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
resp.setHeader(;Access-Control-Allow-Origin;, ;*;);// *,任何域名
resp.setHeader(;Access-Control-Allow-Methods;, ;POST, GET, PUT, DELETE;);
// resp.setHeader(;Access-Control-Allow-Headers;, ;Origin,X-Requested-With,
// Content-Type, Accept;);
// 允许客户端;发一个新的请求头jwt
resp.setHeader(;Access-Control-Allow-Headers;, ;Origin,X-Requested-With, Content-Type, Accept, jwt;);
// 允许客户端;处理一个新的响应头jwt
resp.setHeader(;Access-Control-Expose-Headers;, ;jwt;);
// String sss = resp.getHeader(;Access-Control-Expose-Headers;);
// System.out.println(;sss=; ; sss);
// 允许请求头Token
// httpResponse.setHeader(;Access-Control-Allow-Headers;,;Origin,X-Requested-With,
// Content-Type, Accept, Token;);
// System.out.println(;Token=; ; req.getHeader(;Token;));
if (;OPTIONS;.equals(req.getMethod())) {// axios的ajax会发两次请求;第一次提交方式为;option;直接返回即可
return;
}
filterChain.doFilter(servletRequest, servletResponse);
}
;Override
public void destroy() {
}
}package com.ssr.util;
import java.io.Serializable;
import java.util.HashMap;
/**
* 服务器返回给客户端的JSON格式的数据
*
*/
public class JsonData extends HashMap<String, Object> implements Serializable {
private static final long serialVersionUID = -8855960778711040221L;
private int code;
private String msg;
private Object result;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getResult() {
return result;
}
public void setResult(Object result) {
this.result = result;
}
public JsonData(int code, String msg, Object result) {
super();
this.put(;code;, code);
this.put(;msg;, msg);
this.put(;result;, result);
}
public JsonData() {
super();
}
}
package com.ssr.util;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
/**
* 分页工具类
*
*/
public class PageBean {
private int page = 1;// 页码
private int rows = 10;// 页大小
private int total = 0;// 总记录数
private boolean pagination = true;// 是否分页
private String url; //保存上一次请求的URL
private Map<String,String[]> paramMap = new HashMap<>();// 保存上一次请求的参数
/**
* 初始化pagebean的;保存上一次请求的重要参数
* ;param req
*/
public void setRequest(HttpServletRequest req) {
// 1.1 需要保存上一次请求的URL
this.setUrl(req.getRequestURL().toString());
// 1.2 需要保存上一次请求的参数 bname、price
this.setParamMap(req.getParameterMap());
// 1.3 需要保存上一次请求的分页设置 pagination
this.setPagination(req.getParameter(;pagination;));
// 1.4 需要保存上一次请求的展示条目数
this.setRows(req.getParameter(;rows;));
// 1.5 初始化请求的页码 page
this.setPage(req.getParameter(;page;));
}
public void setPage(String page) {
if(StringUtils.isNotBlank(page))
this.setPage(Integer.valueOf(page));
}
public void setRows(String rows) {
if(StringUtils.isNotBlank(rows))
this.setRows(Integer.valueOf(rows));
}
public void setPagination(String pagination) {
// 只有在前台jsp填写了pagination=false;才代表不分页
if(StringUtils.isNotBlank(pagination))
this.setPagination(!;false;.equals(pagination));
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public Map<String, String[]> getParamMap() {
return paramMap;
}
public void setParamMap(Map<String, String[]> paramMap) {
this.paramMap = paramMap;
}
public PageBean() {
super();
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public void setTotal(String total) {
this.total = Integer.parseInt(total);
}
public boolean isPagination() {
return pagination;
}
public void setPagination(boolean pagination) {
this.pagination = pagination;
}
/**
* 获得起始记录的下标
*
* ;return
*/
public int getStartIndex() {
return (this.page - 1) * this.rows;
}
/**
* 最大页
* ;return
*/
public int maxPage() {
// total % rows == 0 ? total / rows : total / rows ;1
return this.total % this.rows == 0 ? this.total / this.rows : this.total / this.rows ; 1;
}
/**
* 下一页
* ;return
*/
public int nextPage() {
// 如果当前页小于最大页;那就下一页为当前页;1;如果不小于;说明当前页就是最大页;那就无需;1
return this.page < this.maxPage() ? this.page ; 1 : this.page;
}
/**
* 上一页
* ;return
*/
public int previousPage() {
return this.page > 1 ? this.page - 1 : this.page;
}
;Override
public String toString() {
return ;PageBean [page=; ; page ; ;, rows=; ; rows ; ;, total=; ; total ; ;, pagination=; ; pagination ; ;];;
}
}
package com.ssr.util;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
public class ResponseUtil {
public static void write(HttpServletResponse response,Object o)throws Exception{
response.setContentType(;text/html;charset=utf-8;);
PrintWriter out=response.getWriter();
out.println(o.toString());
out.flush();
out.close();
}
}
package com.ssr.util;
public class StringUtils {
// 私有的构造方法;保护此类不能在外部实例化
private StringUtils() {
}
/**
* 如果字符串等于null或去空格后等于;;;则返回true;否则返回false
*
* ;param
* ;return
*/
public static boolean isBlank(String s) {
boolean b = false;
if (null == s || s.trim().equals(;;)) {
b = true;
}
return b;
}
/**
* 如果字符串不等于null或去空格后不等于;;;则返回true;否则返回false
*
* ;param s
* ;return
*/
public static boolean isNotBlank(String s) {
return !isBlank(s);
}
}
<?xml version=;1.0; encoding=;UTF-8;?>
<!DOCTYPE mapper PUBLIC ;-//mybatis.org//DTD Mapper 3.0//EN; ;http://mybatis.org/dtd/mybatis-3-mapper.dtd;>
<mapper namespace=;com.ssr.mapper.BookMapper;>
<resultMap id=;BaseResultMap; type=;com.ssr.model.Book;>
<constructor>
<idArg column=;bid; javaType=;java.lang.Integer; jdbcType=;INTEGER; />
<arg column=;bname; javaType=;java.lang.String; jdbcType=;VARCHAR; />
<arg column=;price; javaType=;java.lang.Float; jdbcType=;REAL; />
</constructor>
</resultMap>
<sql id=;Base_Column_List;>
bid, bname, price
</sql>
<select id=;selectByPrimaryKey; parameterType=;java.lang.Integer; resultMap=;BaseResultMap;>
select
<include refid=;Base_Column_List; />
from t_mvc_book
where bid = #{bid,jdbcType=INTEGER}
</select>
<select id=;listPager; parameterType=;java.util.Map; resultType=;java.util.Map;>
select * from t_mvc_book where bname like concat(concat(%,#{bname}),%)
</select>
<delete id=;deleteByPrimaryKey; parameterType=;java.lang.Integer;>
delete from t_mvc_book
where bid = #{bid,jdbcType=INTEGER}
</delete>
<insert id=;insert; parameterType=;com.ssr.model.Book;>
insert into t_mvc_book (bid, bname, price
)
values (#{bid,jdbcType=INTEGER}, #{bname,jdbcType=VARCHAR}, #{price,jdbcType=REAL}
)
</insert>
<insert id=;insertSelective; parameterType=;com.ssr.model.Book;>
insert into t_mvc_book
<trim prefix=;(; suffix=;); suffixOverrides=;,;>
<if test=;bid != null;>
bid,
</if>
<if test=;bname != null;>
bname,
</if>
<if test=;price != null;>
price,
</if>
</trim>
<trim prefix=;values (; suffix=;); suffixOverrides=;,;>
<if test=;bid != null;>
#{bid,jdbcType=INTEGER},
</if>
<if test=;bname != null;>
#{bname,jdbcType=VARCHAR},
</if>
<if test=;price != null;>
#{price,jdbcType=REAL},
</if>
</trim>
</insert>
<update id=;updateByPrimaryKeySelective; parameterType=;com.ssr.model.Book;>
update t_mvc_book
<set>
<if test=;bname != null;>
bname = #{bname,jdbcType=VARCHAR},
</if>
<if test=;price != null;>
price = #{price,jdbcType=REAL},
</if>
</set>
where bid = #{bid,jdbcType=INTEGER}
</update>
<update id=;updateByPrimaryKey; parameterType=;com.ssr.model.Book;>
update t_mvc_book
set bname = #{bname,jdbcType=VARCHAR},
price = #{price,jdbcType=REAL}
where bid = #{bid,jdbcType=INTEGER}
</update>
</mapper>package com.ssr.mapper;
import com.ssr.model.Book;
import com.ssr.util.PageBean;
import java.util.List;
import java.util.Map;
public interface BookMapper {
int deleteByPrimaryKey(Integer bid);
int insert(Book record);
int insertSelective(Book record);
Book selectByPrimaryKey(Integer bid);
int updateByPrimaryKeySelective(Book record);
int updateByPrimaryKey(Book record);
List<Map> listPager(Map map);
}package com.ssr.Biz;
import com.ssr.model.Book;
import com.ssr.util.PageBean;
import java.util.List;
import java.util.Map;
/**
* ;author四金
* ;site 226...
* ;company China
* ;create 2022-09-28-18:18
*/
public interface BookBiz {
int deleteByPrimaryKey(Integer bid);
int insert(Book record);
int insertSelective(Book record);
Book selectByPrimaryKey(Integer bid);
int updateByPrimaryKeySelective(Book record);
int updateByPrimaryKey(Book record);
List<Map> listPager(Map map, PageBean pageBean);
}
package com.ssr.Biz;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssr.mapper.BookMapper;
import com.ssr.model.Book;
import com.ssr.util.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
/**
* ;author四金
* ;site 226...
* ;company China
* ;create 2022-09-28-18:18
*/
;Service
public class BookBizImpl implements BookBiz {
;Autowired
private BookMapper bookMapper;
;Override
public int deleteByPrimaryKey(Integer bid) {
return bookMapper.deleteByPrimaryKey(bid);
}
;Override
public int insert(Book record) {
return bookMapper.insert(record);
}
;Override
public int insertSelective(Book record) {
return bookMapper.insertSelective(record);
}
;Override
public Book selectByPrimaryKey(Integer bid) {
return bookMapper.selectByPrimaryKey(bid);
}
;Override
public int updateByPrimaryKeySelective(Book record) {
return bookMapper.updateByPrimaryKeySelective(record);
}
;Override
public int updateByPrimaryKey(Book record) {
return bookMapper.updateByPrimaryKey(record);
}
;Override
public List<Map> listPager(Map map, PageBean pageBean) {
if(pageBean!=null&&pageBean.isPagination()){
PageHelper.startPage(pageBean.getPage(),pageBean.getRows());
}
List<Map> maps = bookMapper.listPager(map);
if(pageBean!=null&&pageBean.isPagination()){
PageInfo info = new PageInfo(maps);
pageBean.setTotal(info.getTotal();;;);
}
return maps;
}
}
package com.ssr.conreoller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ssr.Biz.BookBiz;
import com.ssr.model.Book;
import com.ssr.util.JsonData;
import com.ssr.util.PageBean;
import com.ssr.util.ResponseUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* ;author四金
* ;site 226...
* ;company China
* ;create 2022-09-28-18:28
*/
;Controller
;RequestMapping(;/book;)
public class BookController {
;Autowired
private BookBiz bookBiz;
;ResponseBody
;RequestMapping(;/list;)
public String list(HttpServletRequest request, HttpServletResponse response){
PageBean pageBean = new PageBean();
pageBean.setRequest(request);
ObjectMapper om = new ObjectMapper();
try{
Map map = new HashMap();
String bname = request.getParameter(;bname;);
if(bname==null){
bname = ;;;
}
map.put(;bname;,bname);
List<Map> list = bookBiz.listPager(map,pageBean);
JsonData jsonData = new JsonData(1,;操作成功;,list);
jsonData.put(;pageBean;,pageBean);
ResponseUtil.write(response,om.writeValueAsString(jsonData));
}catch (Exception e){
e.printStackTrace();
}
return null;
}
;ResponseBody
;RequestMapping(;/add;)
public String add(Book book){
this.bookBiz.insertSelective(book);
return null;
}
;ResponseBody
;RequestMapping(;/del;)
public String del(int bid){
this.bookBiz.deleteByPrimaryKey(bid);
return null;
}
;ResponseBody
;RequestMapping(;/edit;)
public String edit(Book book){
this.bookBiz.updateByPrimaryKeySelective(book);
return null;
}
}
在项目路径下执行
npm install element-ui -S
npm install axios -S
npm install qs -S
npm install vue-axios -S
// The Vue build version to load with the ;import; command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ;vue;
import ElementUI from ;element-ui;
import ;element-ui/lib/theme-chalk/index.css;
import App from ;./App;
import router from ;./router;
import qs from ;qs;
import axios from ;;/api/http; //vue项目对axios的全局配置
import VueAxios from ;vue-axios;
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueAxios, axios);
/* eslint-disable no-new */
new Vue({
el: ;#app;,
router,
components: { App },
template: ;<App/>;
})/**
* 对后台请求的地址的封装;URL格式如下;
* 模块名_实体名_操作
*/
export default {
;SERVER;: ;http://localhost:8080/;, //服务器
;SYSTEM_ARTICLE_list;: ;/bkk/list;, //查询
;SYSTEM_ARTICLE_add;: ;/bkk/add;, //增加
;SYSTEM_ARTICLE_del;: ;/bkk/del;, //删除
;SYSTEM_ARTICLE_edit;: ;/bkk/edit;, //修改
;getFullPath;: k => { //获得请求的完整地址;用于mockjs测试时使用
return this.SERVER ; this[k];
}
}/**
* vue项目对axios的全局配置
*/
import axios from ;axios;
import qs from ;qs;
//引入action模块;并添加至axios的类属性urls上
import action from ;;/api/action;
axios.urls = action
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = ;http://localhost:8080/j2ee15;; // 默认地址
axios.defaults.baseURL = action.SERVER;
//整理数据
// 只适用于 POST,PUT,PATCH;transformRequest; 允许在向服务器发送前;修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};
export default axios;<template>
<div>
<!-- 搜索筛选 -->
<el-form :inline=;true; :model=;formInline; class=;user-search;>
<el-form-item label=;搜索;;>
<el-input size=;small; v-model=;formInline.bname; placeholder=;输入文章标题;></el-input>
</el-form-item>
<el-form-item>
<el-button size=;small; type=;primary; icon=;el-icon-search; ;click=;search;>搜索</el-button>
<el-button size=;small; type=;primary; icon=;el-icon-plus; ;click=;handleEdit();>添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size=;small; :data=;listData; Highlight-current-row style=;width: 100%;>
<!-- <el-table-column align=;center; type=;selection; width=;60;>
</el-table-column> -->
<el-table-column align=;center; sortable prop=;bid; label=;编号; width=;100;>
</el-table-column>
<el-table-column sortable prop=;bname; label=;文章标题; width=;200;>
</el-table-column>
<el-table-column sortable prop=;price; label=;文章价格; width=;300;>
</el-table-column>
<el-table-column align=;center; label=;操作; min-width=;100;>
<template slot-scope=;scope;>
<el-button size=;mini; ;click=;handleEdit(scope.$index, scope.row);>编辑</el-button>
<el-button size=;mini; type=;danger; ;click=;deleteUser(scope.$index, scope.row);>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<el-pagination style=;margin-top: 20px;; ;size-change=;handleSizeChange; ;current-change=;handleCurrentChange;
:current-page=;formInline.page; :page-sizes=;[10, 20, 30, 50]; :page-size=;100;
layout=;total, sizes, prev, pager, next, jumper; :total=;formInline.total;>
</el-pagination>
<!-- 编辑弹窗界面 -->
<el-dialog :title=;title; :visible.sync=;editFormVisible; width=;30% ;click=;closeDialog;>
<el-form label-width=;120px; :model=;editForm; :rules=;rules; ref=;editForm;>
<el-form-item label=;文章标题; prop=;bname;>
<!-- <el-input size=;small; v-model=;editForm.title; auto-complete=;off; maxlength=;10; placeholder=;请输入文章标题;> -->
</el-input>
<el-input type=;text; placeholder=;请输入文章标题; v-model=;editForm.bname; maxlength=;50; show-word-limit>
</el-input>
</el-form-item>
<el-form-item label=;文章价格; prop=;price;>
<!-- <el-input size=;small; v-model=;editForm.body; auto-complete=;off; placeholder=;请输入文章内容;></el-input> -->
<el-input type=;textarea; :rows=;2; placeholder=;请输入文章内容; v-model=;editForm.price;>
</el-input>
</el-form-item>
</el-form>
<div slot=;footer; class=;dialog-footer;>
<el-button size=;small; ;click=;closeDialog;>取消</el-button>
<el-button size=;small; type=;primary; ;click=;submitForm(;editForm;);>保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: ;Articles;,
data() {
return {
listData: {},
editForm: {
price: ;;,
bname: ;;,
bid: 0
},
editFormVisible: false,
rules: {
bname: [{
required: true,
message: ;请输入文章标题;,
trigger: ;blur;
}
],
price: [{
required: true,
message: ;请输入文章价格;,
trigger: ;blur;
}]
},
formInline: {
page: 1,
rows: 10,
total: 0,
title: ;;
}
}
},
created() {
this.dosearch({});
},
methods: {
handleSizeChange(rows) {
console.log(;当前页查询数量为;; ; rows);
this.formInline.page = 1;
this.formInline.rows = rows;
this.search();
},
handleCurrentChange(page) {
console.log(;当前页为;; ; page);
this.formInline.page = page;
this.search();
},
dosearch(param) {
let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
this.axios.post(url, param).then(res => {
console.log(res);
this.listData = res.data.result;
this.formInline.total = res.data.pageBean.total;
}).catch(function(error) {
console.log(error);
});
},
search() {
this.dosearch(this.formInline);
},
closeDialog() {
//关闭窗体
this.clearData();
},
clearData() {
//清除编辑窗体的缓存数据
this.editForm.bname = ;;;
this.editForm.bid = 0;
this.editForm.price = ;;;
this.title = ;;;
this.editFormVisible = false;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url;
if (this.editForm.bid == 0) {
url = this.axios.urls.SYSTEM_ARTICLE_ADD;
} else {
url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
}
this.axios.post(url, this.editForm).then(r => {
//成功后关闭窗体;清空表单数据;并重新查询
this.$message({
message: r.data.msg,
type: ;success;
});
this.clearData();
this.search();
}).catch(e => {
});
} else {
console.log(;error submit!!;);
return false;
}
});
},
handleEdit(index, row) {
this.clearData();
// console.log(row);
//展示新增文章的表单窗体
this.editFormVisible = true;
if (row) {
//编辑
this.title = ;编辑;;
this.editForm.bname = row.bname;
this.editForm.bid = row.bid;
this.editForm.price = row.price;
} else {
//新增
this.title = ;新增窗体;;
}
},
deleteUser(index, row) {
this.$confirm(;此操作将永久删除该文件, 是否继续?;, ;提示;, {
confirmButtonText: ;确定;,
cancelButtonText: ;取消;,
type: ;warning;
}).then(() => {
this.$message({
type: ;success;,
message: ;删除成功!;
});
let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
this.axios.post(url, {
bid: row.bid
}).then(r => {
this.clearData();
this.search();
}).catch(e => {
});
}).catch(() => {
this.$message({
type: ;info;,
message: ;已取消删除;
});
});
}
}
}
</script>
<style>
</style>
