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

2022-09-22 13:30:28

黑马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 ('', '', '张老师', '', 'zzz@itcast.cn', '男 ');

INSERT INTO `user` VALUES ('', '', '刘老师', '', 'lll@itcast.cn', '女');

INSERT INTO `user` VALUES ('', '', '赵工', '', 'zg@itcast.cn', '女');

INSERT INTO `user` VALUES ('', '', '高管', '', 'gg@itcast.cn', 'female');

INSERT INTO `user` VALUES ('', '', '李总', '', 'lz@jxjt.com', 'male');

INSERT INTO `user` VALUES ('', '', '王董', '', 'wd@jxjt.com', 'male');

INSERT INTO `user` VALUES ('', '', '孙老板', '', 'slb@xzjt.com', '男');

INSERT INTO `user` VALUES ('', '', '陈秘书', '', '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

MyBatis-Spring配置简单了解

    <!-- 配置 通用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目录下：

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

在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);

    }

}

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

==============================

参考资料：

https://mapperhelper.github.io/docs/

记录火狐浏览器的一些开发使用总结

end

上一篇：一周学会Mootools 1.4中文教程:(7)汇总收尾


下一篇：在eclipse中用gradle搭建MapReduce项目