黑马eesy_15 Vue：04.vue案例

黑马eesy_15 Vue：02.常用语法

黑马eesy_15 Vue：03.生命周期


1、Vue的快速入门
2、Vue的语法
　　插值表达式
　　事件的绑定
　　数据的显示
　　逻辑判断和循环输出
3、Vue的生命周期
　　8个生命周期的执行点
　　　　4个基本的
　　　　4个特殊的
4、axios的ajax异步请求
　　它和jquery的ajax比较相似

5、综合案例
    实现用户的查询列表和更新操作
        前端：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.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><!--通用mapper对spring的集成-->
      <groupId>tk.mybatis</groupId>
      <artifactId>mapper-spring</artifactId>
      <version>1.1.5</version>
    </dependency>
    <dependency><!--Mybatis 通用 Mapper Jar 集成-->
      <groupId>tk.mybatis</groupId>
      <artifactId>mapper</artifactId>
      <version>4.1.5</version>
    </dependency>

DAO层的接口类

cn.bjut.mapper.IUserMapper

package cn.bjut.mapper;

import cn.bjut.domain.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;

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

数据库实体类

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;

    //=========省略get/set方法和toString()===========//

配置文件在resources目录：

SSM框架整合数据源的

db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/leyou
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

<?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>
    <!-- 加载配置文件 -->
    <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 扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.bjut.mapper"/>
    </bean>
    <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="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:method name="query*" 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>
</beans>

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

参考资料：

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

end

原文地址：https://www.cnblogs.com/MarlonKang/p/11630589.html

时间： 2024-10-10 07:03:33

黑马eesy_15 Vue：04.vue案例的相关文章

黑马eesy_15 Vue：03.生命周期与ajax异步请求&amp;&amp;04.vue案例

黑马eesy_15 Vue:02.常用语法 vue的生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的ajax比较相似 5.综合案例    实现用户的查询列表和更新操作        前端:Vue        后端:ssm 3.VueJS生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程. v

黑马eesy_15 Vue：vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj

Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器）

Vue,品牌列表案例(仅添加,删除,搜索,全局过滤器,私有过滤器) 添加了时间过滤器(私有的) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../../js/vue.js"></script> 7 <link rel=&qu

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

vue图书小案例

小知识点: vue中计算属性有缓存(对象属性变化时才会更新),方法没有缓存,所以计算属性比方法效率高js中let有块级作用域,var没有块级作用域,所以var是有缺陷的this.letters[0] = 'bb'; //vue中,这种做法并不是响应式的:推荐使用响应式方法:this.letters.splice(0,1,'cc'); <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

vue入门 vue与react和Angular的关系和区别

一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上增量开发的设计 vue的核心库"只关注视图层",并

new Vue/Vue.Component/Vue.extend的区别

刚开始学习Vue时,当我们看到创建Vue实例和创建一个组件时,会发现Vue实例的参数和组件参数是那么的相似:当我们学习路由时, 又发现Vue.extend创建的对象和自定义的组件非常的相似,那么这三者究竟是什么关系呢,对于3个对象了解清楚对后续精准编程很有意义, 因此,我们需要好好的了解一下他们的区别和使用场景 Vue.extend和Vue.component区别比较 运行示例 var PageNotFind = Vue.component("pagenotfind",{templat

[vue]webpack&amp;vue组件工程化实践

webpack将app.vue(根节点)挂到html - 安装 npm i --save-dev [email protected] [email protected] // vue-loader: 1.解析.vue文件 2.会自动调用 vue-template-complier - webpack.config.js {test: /\.vue$/, use: 'vue-loader'}, - app.vue 1.render函数 app.vue的本质: 1.一个对象(组件,vNode) 2,

Vue.mixin Vue.extend(Vue.component)的原理与区别

1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue.mixin( mixin )全局注册一个混入,影响注册之后所有创建的每个 Vue 实例.插件作者可以使用混入,向组件注入自定义的行为. 既然可以影响到注册后的所有实例,那么该方法注入的方法和属性都存放在哪里呢(构造函数的options属性上),我们一起来看看该方法的定义 Vue.mixin = fu