黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)
黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)
黑马eesy_15 Vue:04.综合案例(前端Vue实现)
04.Vue案例(ssm环境搭建)
1、Vue的快速入门
2、Vue的语法
插值表达式
事件的绑定
数据的显示
逻辑判断和循环输出
3、Vue的生命周期
8个生命周期的执行点
4个基本的
4个特殊的
axios的ajax异步请求
它和jquery的ajax比较相似
4、综合案例
实现用户的查询列表和更新操作
前端:Vue
后端:ssm
18案例-创建数据库和工程
vuejsdemo.sql
DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `age` int(11) DEFAULT NULL, `username` varchar(20) DEFAULT NULL, `PASSWORD` varchar(50) DEFAULT NULL, `email` varchar(50) DEFAULT NULL, `sex` varchar(20) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8; INSERT INTO `user` VALUES ('1', '33', '张老师', '123', 'zzz@itcast.cn', '男 '); INSERT INTO `user` VALUES ('2', '31', '刘老师', '123', 'lll@itcast.cn', '女'); INSERT INTO `user` VALUES ('3', '17', '赵工', '213', 'zg@itcast.cn', '女'); INSERT INTO `user` VALUES ('4', '40', '高管', '213', 'gg@itcast.cn', 'female'); INSERT INTO `user` VALUES ('5', '28', '李总', '312', 'lz@jxjt.com', 'male'); INSERT INTO `user` VALUES ('6', '34', '王董', '312', 'wd@jxjt.com', 'male'); INSERT INTO `user` VALUES ('7', '55', '孙老板', '4321', 'slb@xzjt.com', '男'); INSERT INTO `user` VALUES ('8', '19', '陈秘书', '4321', 'cms@xzjt.com', '女');
maven项目的pom.xml
<?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>cn.bjut</groupId> <artifactId>day01_eesy_vuejsdemo</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>day01_eesy_vuejsdemo Maven Webapp</name> <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> <spring.version>5.0.10.RELEASE</spring.version> <slf4j.version>1.7.12</slf4j.version> <log4j.version>1.2.17</log4j.version> <mybatis.version>3.4.5</mybatis.version> </properties> <dependencies> <!-- spring --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.9.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</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-test</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- log start --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>${slf4j.version}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${slf4j.version}</version> </dependency> <!-- log end --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.3</version><!--1.3.3是1.X.X版本最新--> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.45</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.9</version> </dependency> </dependencies> <build> <finalName>day01_eesy_vuejsdemo</finalName> <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --> <plugins> <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>
19案例-编写实体类持久层和业务层代码
因为是mysql单表操作CRUD
所以可以选用: 通用mapper插件 + DAO层接口继承 + 实体类注解映射 的方案
<dependency><!--Mybatis 通用 Mapper Jar 集成--> <groupId>tk.mybatis</groupId> <artifactId>mapper</artifactId> <version>4.1.5</version> </dependency>
DAO层的接口Interface
cn.bjut.mapper.UserMapper
/** * 用户表的持久层接口 */ @Repository //IOC注入容器对象 //引入通用mapper启动器依赖后,DAO层接口继承Mapper<E> public interface UserMapper extends Mapper<User> { /** * 更新用户信息是第3个业务用到的方法,其它2个查询用继承Mapper<E>接口的方法。 */ @Update({"update user set username=#{username},password=#{password},",
"age=#{age},sex=#{sex},email=#{email} where id=#{id}"}) void updateUser(User user); //接口方法的public关键字可以省略 }
数据库实体类
cn.bjut.domain.User
package cn.bjut.domain; import tk.mybatis.mapper.annotation.KeySql; import javax.persistence.Id; import javax.persistence.Table; import java.io.Serializable; /** * 用户表的实体类 */ @Table(name = "user") public class User implements Serializable { @Id @KeySql(useGeneratedKeys = true) private Integer id; private String username; private String password; private Integer age; private String sex; private String email; //不是表中字段的属性必须加@Transient注解 //=========省略get/set方法和toString()===========//
MyBatis
通用 MAPPER 3
<!-- 配置 通用Mapper3 的扫描器,生成DAO层接口包下所有接口的代理对象,并且放入spring容器中 --> <bean id="mapperScanner" class="tk.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="cn.bjut.mapper"/> </bean>在applicationContext.xml里面,用上面的 通用mapper接口扫描器 替换 mybatis-spring的官方接口代理扫描器。
Service层的实现类
cn.bjut.service.impl.UserServiceImpl
@Service //@Transactional 本次SSM整合案例使用XML配置AOP的方式 public class UserServiceImpl implements IUserService { @Autowired UserMapper userMapper; @Override public List<User> findAll() { return userMapper.selectAll(); } @Override public User findById(Integer userId) { return userMapper.selectByPrimaryKey(userId); } @Override public void updateUser(User user) { userMapper.updateUser(user); //一个成员方法的返回类型是void, //可以省略return; 的关键字。 } }
20案例-导入spring配置文件并编写测试类测试
配置文件在resources目录:
SSM框架整合数据源的
db.properties
jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/leyou?useUnicode=true&characterEncoding=utf8 jdbc.username=root jdbc.password=root
控制台日志输出的
log4j.properties
# Set root category priority to INFO and its only appender to CONSOLE. #log4j.rootCategory=INFO, CONSOLE, LOGFILE debug info warn error fatal log4j.rootCategory=debug, CONSOLE # Set the enterprise logger category to FATAL and its only appender to CONSOLE. log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE # CONSOLE is set to be a ConsoleAppender using a PatternLayout. log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n # LOGFILE is set to be a File appender using a PatternLayout. # log4j.appender.LOGFILE=org.apache.log4j.FileAppender # log4j.appender.LOGFILE.File=d:\axis.log # log4j.appender.LOGFILE.Append=true # log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout # log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
spring整合mybatis的控制事务和IOC容器注入的文件
applicationContext.xml
制定扫包规则,不扫描@Controller 注解的 JAVA 类
<?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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.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 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 配置 spring 创建容器时要扫描的包 --> <context:component-scan base-package="cn.bjut"> <!--制定扫包规则,不扫描@Controller 注解的 JAVA 类,其他的还是要扫描 --> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!--DAO层配置文件开始--> <!-- 加载配置文件 --> <context:property-placeholder location="classpath:db.properties"/> <!-- 配置 MyBatis 的 Session 工厂 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 数据库连接池 --> <property name="dataSource" ref="dataSource"/> </bean> <!-- 配置数据源 c3p0连接池 --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="${jdbc.driver}"></property> <property name="jdbcUrl" value="${jdbc.url}"></property> <property name="user" value="${jdbc.username}"></property> <property name="password" value="${jdbc.password}"></property> </bean> <!-- 配置 Mapper 扫描器,生成包下所有接口的代理对象,并且放入spring容器中 --> <!--<bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="cn.bjut.mapper"/> </bean>--> <!--service层配置文件开始--> <!--<tx:annotation-driven/>--> <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"/> </bean> <!-- 配置事务的通知 --> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes> <!-- 传播行为 --> <tx:method name="*" propagation="REQUIRED" read-only="false"/> <tx:method name="update*" propagation="REQUIRED" read-only="false"/> <tx:method name="find*" propagation="SUPPORTS" read-only="true"/> <tx:method name="select*" propagation="SUPPORTS" read-only="true" /> <tx:method name="get*" propagation="SUPPORTS" read-only="true" /> </tx:attributes> </tx:advice> <!-- 配置aop切面 --> <aop:config> <!-- 配置切入点表达式--> <aop:pointcut expression="execution(* cn.bjut.service.impl.*.*(..))" id="pt1"/> <!--建立切入点表达式和事务通知的对应关系 --> <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/> </aop:config> <!-- 配置 通用Mapper3 的扫描器,生成DAO层接口包下所有接口的代理对象,并且放入spring容器中 --> <bean id="mapperScanner" class="tk.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="cn.bjut.mapper"/> </bean> </beans>
Spring整合JUnit4的测试类
cn.bjut.test.UserTest
@RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = "classpath:applicationContext.xml") public class UserTest { @Autowired private IUserService userService; @Test public void testFindAll(){ List<User> users = userService.findAll(); System.out.println(users); } @Test public void testFindById(){ User user = userService.findById(1); System.out.println(user); } @Test public void testUpdate(){ User user1 = userService.findById(1); System.out.println("修改之前的用户"+ user1); user1.setAge(10); userService.updateUser(user1); user1 = userService.findById(1); System.out.println("修改之后的用户"+ user1); } }
使用Navicat12.1.22连接mysql数据库查看结果,提交事务后和预期结果一致。证明我们整合通用mapper插件在spring下的业务代码编写正确。
21案例-导入springmvc的配置并编写控制器代码
把前端页面的静态资源css、img、js、plugins文件夹拷贝到webapp目录下:
在WEB-INF里面的 web.xml
配置spring的监听器和springMVC的前端控制器等内容。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" 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>Marlon.Kang</display-name> <!-- 手动指定 spring 配置文件位置 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!-- 配置 spring 提供的监听器,用于启动服务时加载容器 。 该间监听器只能加载 WEB-INF 目录中名称为 applicationContext.xml 的配置文件 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- springMVC的前端控制器(服务器启动创建servlet) --> <servlet> <servlet-name>springmvcDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置初始化参数,用于读取 springmvc 的配置文件 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <!-- 配置 servlet 的对象的创建时间点:应用加载时创建。取值只能是非 0 正整数,表示启动顺序 --> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvcDispatcherServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <!-- 配置 springMVC编码过滤器,解决.POST中文乱码过滤器 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <!-- 设置过滤器中的属性值 --> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <!-- 启动过滤器 --> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <!-- 过滤所有请求 --> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 配置创建 spring 容器要扫描的包 --> <context:component-scan base-package="cn.bjut"> <!-- 制定扫包规则 ,只扫描使用@Controller 注解的 JAVA 类 --> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!-- 扫描controller的注解,别的不扫描 --> <!--<context:component-scan base-package="cn.bjut.web.controller"/>--> <!--开启对SpringMVC注解的支持:处理器映射器,处理器适配器--> <mvc:annotation-driven/> <!--释放静态资源,哪些静态资源不拦截--> <mvc:resources location="/css/" mapping="/css/**"/> <mvc:resources location="/img/" mapping="/images/**"/> <mvc:resources location="/js/" mapping="/js/**"/> <mvc:resources location="/plugins/" mapping="/plugins/**" /> <!-- 配置视图解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- JSP文件所在的目录 --> <property name="prefix" value="/WEB-INF/pages/"/> <property name="suffix" value=".jsp"/> </bean> </beans>
WEB视图层
cn.bjut.web.controller.UserController
@Controller @RequestMapping("/user") @ResponseBody //返回页面JSON格式字符串 public class UserController { @Autowired private IUserService userService; @RequestMapping("/findAll") public List<User> findAll(){ return userService.findAll(); } @RequestMapping("/findById") public User findById(Integer id){ return userService.findById(id); } @RequestMapping("/updateUser") public void updateUser(User user){ userService.updateUser(user); } }
==============================
参考资料:
https://mapperhelper.github.io/docs/
end