黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）

黑马eesy_15 Vue：02.常用语法

黑马eesy_15 Vue：03.生命周期

黑马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', '[email protected]', '男 ');
INSERT INTO `user` VALUES ('2', '31', '刘老师', '123', '[email protected]', '女');
INSERT INTO `user` VALUES ('3', '17', '赵工', '213', '[email protected]', '女');
INSERT INTO `user` VALUES ('4', '40', '高管', '213', '[email protected]', 'female');
INSERT INTO `user` VALUES ('5', '28', '李总', '312', '[email protected]', 'male');
INSERT INTO `user` VALUES ('6', '34', '王董', '312', '[email protected]', 'male');
INSERT INTO `user` VALUES ('7', '55', '孙老板', '4321', '[email protected]', '男');
INSERT INTO `user` VALUES ('8', '19', '陈秘书', '4321', '[email protected]', '女');

 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.0modelVersion>

  <groupId>cn.bjutgroupId>
  <artifactId>day01_eesy_vuejsdemoartifactId>
  <version>1.0-SNAPSHOTversion>
  <packaging>warpackaging>

  <name>day01_eesy_vuejsdemo Maven Webappname>

  <properties>
      <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
      <maven.compiler.source>1.8maven.compiler.source>
      <maven.compiler.target>1.8maven.compiler.target>
      <spring.version>5.0.10.RELEASEspring.version>
      <slf4j.version>1.7.12slf4j.version>
      <log4j.version>1.2.17log4j.version>
      <mybatis.version>3.4.5mybatis.version>
  properties>
  <dependencies> 
    <dependency>
      <groupId>org.aspectjgroupId>
      <artifactId>aspectjweaverartifactId>
      <version>1.9.2version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-contextartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-context-supportartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-ormartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-testartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webmvcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-txartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>junitgroupId>
      <artifactId>junitartifactId>
      <version>4.12version>
      <scope>testscope>
    dependency>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>javax.servlet-apiartifactId>
      <version>3.1.0version>
      <scope>providedscope>
    dependency>
    <dependency>
      <groupId>javax.servlet.jspgroupId>
      <artifactId>jsp-apiartifactId>
      <version>2.2version>
      <scope>providedscope>
    dependency>
    <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>1.2version>
    dependency> 
    <dependency>
      <groupId>log4jgroupId>
      <artifactId>log4jartifactId>
      <version>${log4j.version}version>
    dependency>
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-apiartifactId>
      <version>${slf4j.version}version>
    dependency>
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-log4j12artifactId>
      <version>${slf4j.version}version>
    dependency> 
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatisartifactId>
      <version>${mybatis.version}version>
    dependency>
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatis-springartifactId>
      <version>1.3.3version>
    dependency>
    <dependency>
      <groupId>c3p0groupId>
      <artifactId>c3p0artifactId>
      <version>0.9.1.2version>
    dependency>
    <dependency>
      <groupId>com.github.pagehelpergroupId>
      <artifactId>pagehelperartifactId>
      <version>5.1.10version>
    dependency>
    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <version>5.1.45version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-coreartifactId>
      <version>2.9.9version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-databindartifactId>
      <version>2.9.9version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-annotationsartifactId>
      <version>2.9.9version>
    dependency>
  dependencies>

  <build>
    <finalName>day01_eesy_vuejsdemofinalName>
    <pluginManagement>
      <plugins>
        <plugin>
          <artifactId>maven-clean-pluginartifactId>
          <version>3.1.0version>
        plugin>
        
        <plugin>
          <artifactId>maven-resources-pluginartifactId>
          <version>3.0.2version>
        plugin>
        <plugin>
          <artifactId>maven-compiler-pluginartifactId>
          <version>3.8.0version>
        plugin>
        <plugin>
          <artifactId>maven-surefire-pluginartifactId>
          <version>2.22.1version>
        plugin>
        <plugin>
          <artifactId>maven-war-pluginartifactId>
          <version>3.2.2version>
        plugin>
        <plugin>
          <artifactId>maven-install-pluginartifactId>
          <version>2.5.2version>
        plugin>
        <plugin>
          <artifactId>maven-deploy-pluginartifactId>
          <version>2.8.2version>
        plugin>
      plugins>
    pluginManagement>
  build>
project>

19案例-编写实体类持久层和业务层代码

因为是mysql单表操作CRUD

所以可以选用： 通用mapper插件 + DAO层接口继承 + 实体类注解映射 的方案

    <dependency>
      <groupId>tk.mybatisgroupId>
      <artifactId>mapperartifactId>
      <version>4.1.5version>
    dependency>

DAO层的接口Interface

cn.bjut.mapper.UserMapper

 

/**
 * 用户表的持久层接口
 */
@Repository  //IOC注入容器对象
//引入通用mapper启动器依赖后，DAO层接口继承Mapper
public interface UserMapper extends Mapper {

    /**
     * 更新用户信息是第3个业务用到的方法，其它2个查询用继承Mapper接口的方法。
     */
    @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

MyBatis-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 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">
    
    <context:component-scan base-package="cn.bjut">
        
        <context:exclude-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    context:component-scan>
    
    
    <context:property-placeholder location="classpath:db.properties"/>
    
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource"/>
    bean>
    
    <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>
    
    
    
    
    
    <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:config>
        
        <aop:pointcut expression="execution(* cn.bjut.service.impl.*.*(..))" id="pt1"/>
        
        <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    aop:config>
    
    <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 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.Kangdisplay-name>

  
  <context-param>
    <param-name>contextConfigLocationparam-name>
    <param-value>classpath:applicationContext.xmlparam-value>
  context-param>
  
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
  listener>
  
  <servlet>
    <servlet-name>springmvcDispatcherServletservlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
    
    <init-param>
      <param-name>contextConfigLocationparam-name>
      <param-value>classpath:springmvc.xmlparam-value>
    init-param>
    
    <load-on-startup>1load-on-startup>
  servlet>
  <servlet-mapping>
    <servlet-name>springmvcDispatcherServletservlet-name>
    <url-pattern>*.dourl-pattern>
  servlet-mapping>

  
  <filter>
    <filter-name>CharacterEncodingFilterfilter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
    
    <init-param>
      <param-name>encodingparam-name>
      <param-value>UTF-8param-value>
    init-param>
    
    <init-param>
      <param-name>forceEncodingparam-name>
      <param-value>trueparam-value>
    init-param>
  filter>
  
  <filter-mapping>
    <filter-name>CharacterEncodingFilterfilter-name>
    <url-pattern>/*url-pattern>
  filter-mapping>

  <welcome-file-list>
    <welcome-file>index.htmlwelcome-file>
    <welcome-file>index.htmwelcome-file>
    <welcome-file>index.jspwelcome-file>
    <welcome-file>default.htmlwelcome-file>
    <welcome-file>default.htmwelcome-file>
    <welcome-file>default.jspwelcome-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">
    
    <context:component-scan base-package="cn.bjut">
        
        <context:include-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    context:component-scan>
    
    

    
    <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">
        
        <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 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