Frame review

1, Maven

1. Concept

• Project architecture management tool
• Agreed approximate configuration

2. Environment configuration

Configure environment variables

1. download apache-maven-3.6.3-bin.tar.gz
2. Configure environment variable M2_HOME,MAVEN_HOME, add the path variable
3. Check whether the configuration is successful

Alibaba cloud image

Slow download from the Internet, download from Alibaba image

1. apache-maven-3.6.1\conf\settings. Add Alibaba cloud warehouse configuration using XML
2. Establish a local warehouse Maven repo in settings Specify the absolute path in the XML file

3. IDEA+Maven

1. New ordinary Maven project
2. Tag folder
3. Manually set Maven version and warehouse Path

4. Configure Tomcat

Name, hot deployment, path

5. pom.xml download dependency

Official website Maven warehouse

2, Mybatis

1. Concept

A persistent layer framework

Get Mybatis dependency from Maven warehouse

2. Use Mybatis

1. Build database
2. Create a new Maven project, import Mybatis and mysql driver dependency
3. Configure mybatis config. In the main/resource path File (username, password, driver, XML)
4. Writing tool class: load xml configuration file stream → get sqlSessionFactory object → get sqlSession instance
5. Write entity classes, mapper interfaces (functions to be implemented), mapper XML configuration file (binding interface)
6. In mybatis config Configure mapper xml file in XML file
7. test
   1. Get sqlsession instance
   2. Call the getMapper() method to get the mapper interface instance
   3. Call the addition, deletion, modification and query method

Note POM Resource filtering in xml files enables xml files to be exported

map can be used as a parameter for multiple parameter types

Result set mapping resultMap

journal

1. Import log4j rely on
2. mybatis-config.xml to configure
3. log4j properties configuration file

3. Annotation development

@select("select sentence")
@delete("")
@update("")

4. One to many and many to one

Teacher to student: teacher is an association and student is a collection

Nested processing by query

Nested processing according to results

5. Dynamic sql

6. Cache

L1 cache

L2 cache

3, Spring

1. Concept

Hodgepodge and integration of existing technology framework

2. IOC

Control inversion IOC DI (dependency injection) and passively accept the creation of objects; Implement IOC with xml configuration or annotation

3. Use spring

1. Import spring webmvc dependencies
2. Write entity class pojo
3. Configure beans XML file (spring creates management bean object)

<bean id="UserDAOMysqlImpl" class="com.study.dao.UserDAOMysqlImpl"></bean>
<bean id="userService" class="com.study.service.UserServiceImpl">
        <property name="userDAO" ref="UserDAOMysqlImpl"></property>
        <!-- property call set Method assignment
        ref Corresponding to bean of id，Represents the implementation class
        value The corresponding is the specific value
		-->
</bean>

1. test

 public void test(){
        //Parse the xml file and generate and manage the corresponding bean object
       ApplicationContext context = new ClassPathXmlApplicationContext("beans.xml");
       //The parameter is the id attribute of the bean tag in spring
        UserServiceImpl userService = (UserServiceImpl) context.getBean("userService");
        userService.getService();
 }

4. Dependency injection

1.  Constructor Injection  
2.  set Injection: the injected attribute must have set method; Boolean is start
3.  Extension injection: namespace injection( p Namespace/c Namespace)

5. Automatic assembly

Spring will find the dependent bean for a bean in the context

Assembly mechanism

1. Explicit configuration using xml

    <bean id="cat" class="com.study.pojo.Cat"></bean>
    <bean id="dog" class="com.study.pojo.Dog"></bean>
    <bean id="person" class="com.study.pojo.Person" > 
        autowire="byName/byType" set Method properties can be id name/Type assembly
        <property name="name" value="Happy code"></property>
        <property name="cat" ref="cat"></property>
        <property name="dog" ref="dog"></property>
     </bean>

1. java explicit configuration

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration//Represents a configuration class instead of an xml file
@import("Class name.class")  //Import other configuration classes
public class CDPlayerConfig {

	@Bean(name="longelyHeartsClub")//Register bean
	public CompactDisc sgtPeppers() {
		return new SgtPeppers();
	}

    @Bean
	public CDPlayer cdPlayer() {
		return new CDPlayer(SgtPeppers());
	}
}

1. Implicit bean discovery mechanism and automatic assembly

   Use annotation auto assembly: introduce constraints, enable annotation support, @ Autowired, @ Qualifier (value = "") can specify unique bean s

   @Resource specifies name - byName - byType

6. Development using annotations

Import aop packages

In the configuration file, the context constraint is introduced

Enable annotation support and scan the annotations under the package so that the class can be assembled into the spring container

 <!--Enable annotation support:Make values injectable-->
    <context:annotation-config/>
<!--Scan the annotations under the package so that the class can be assembled to Spring container-->
    <context:component-scan base-package="com.study.pojo"/>

injection

@Component("class bean id name") Injection container registration bean
    @Controller: web layer
	@Service: service layer
	@Repository: dao layer
@value("") Attribute injection
@Autowired("") @Resource Class injection

7. AOP

1. Import dependent aspectjweaver

2. Write pre / post enhancement classes for business implementation classes

   • spring API implements AOP configuration file entry point and execution method

   • The custom class implements the AOP custom class - > configuration xml file aspect pointcut execution method

   • Use annotations to implement AOP custom class methods. Use annotations @ after("pointcut") and @ before("pointcut") to enable annotation support

8. Integration with Mybatis

1. Import mybatis dependency
2. xml file for configuring spring
   • springfamework.jdbc replaces mybatis config datasource configuration in XML
   • Use SqlSessionFactoryBean to create sqlsessionfactory (using data source) and inject SqlSessionTemplate
   • Bind the Mybatis configuration file and connect the bean with Mybatis config XML can also be linked with xxxmapper XML file binding
   • Register the Mapper interface implementation class and throw it into sqlSessionTemplate

You can also directly inherit the SqlSessionDaoSupport implementation interface and register bean s

9. Services

• Declarative transaction
• Coded transaction

Transactional configuration xml

1. Configure transaction notifications
2. Configure transaction entry (entry point)

4, Spring MVC

Spring MVC execution process

1. Use spring MVC

1. Create a new module and add web Framework Support
2. Configure web Register DispatcherServlet with XML, filter requests, and bind spring MVC servlet XML file
3. Configure spring MVC servlet XML processor mapper processor adapter view parser
4. Implement the Controller interface, interact with the view of the model layer, process the data, and return it to the view parser
5. Register bean Controller interface implementation class
6. Write the returned jsp page
7. Configure Tomcat server

Pay attention to some minor problems. Import dependencies and add lib dependencies

2. Annotation development spring MVC

In spring MVC servlet Configuration on XML file

 <!-- Automatically scan the package to make the comments under the specified package effective,from IOC Unified container management -->
    <context:component-scan base-package="com.study.controller"/>
 <!-- Give Way Spring MVC Do not process static resources -->
    <mvc:default-servlet-handler />
    <!--
Usually, we only need to manually configure the view parser, while the processor mapper and processor adapter only need to turn on the annotation driver, eliminating a large section of xml to configure
    support mvc Annotation driven
        stay spring Generally used in@RequestMapping Annotation to complete the mapping relationship
        To make@RequestMapping Note effective	
        Must register with context DefaultAnnotationHandlerMapping
        And one AnnotationMethodHandlerAdapter example
        These two instances are handled at the class level and method level respectively.
        and annotation-driven Configuration helps us automatically complete the injection of the above two instances.
     -->
    <mvc:annotation-driven />

Create controller

@ Controller enables Spring IOC container to automatically scan when initializing

@ RequestMapping map request path

Create view layer

3. RestFul style

Request style: http://localhost:8080/springAnnotation/t2/1/3

    @RequestMapping("/t2/{a}/{b}")
    public String test2(@PathVariable int a,@PathVariable int b, Model model){
        model.addAttribute("msg","RestFul style: "+(a+b));
        return "hello";

springAnnotation/t2 is the path

1 / 3 is the parameter

/*In RequestMapping, you can use the method property to specify
@RequestMapping(value = "/t1/{a}/{b}",method = RequestMethod.POST)
Equivalent to
@PostMapping("/t1/{a}/{b}")

*/
@GetMapping
@PostMapping
@PutMapping
@DeleteMapping
@PatchMapping

4. Forwarding and redirection

forward forwarding does not require a view parser

Redirect redirect

5. Return parameters

ModelAndView and ModelMap, Model

6. Solve the form garbled code

Configure web XML file

SSM framework integration

5, Vue

1. MVVM

MVVM separates views and models: low coupling, reusable, independently developed and testable

• Model: the model layer, where JavaScript objects are represented
• View: view layer, which represents DOM (element of HTML operation)
• ViewModel: middleware connecting views and data, Vue JS is the implementer of the View Model layer in MVVM

In MVVM architecture, data and view are not allowed to communicate directly, but only through ViewModel, which defines an Observer observer

• ViewModel can observe the changes of data and update the content corresponding to the view
• ViewModel can monitor the change of view and inform the data of the change

Vue.js is the implementer of MVVM

2. Vue syntax

Need IDEA to download Vue plug-in

Without DOM operation, the content in div changes, which is realized with the help of Vue's data binding function; In MV VM mode, the View Model layer is required to use observer mode to realize data monitoring and binding, so as to achieve rapid response between data and view.

Basic grammar

Properties of v-bind binding tag

​ v-if ,v-else ； Judgment statement

V-IF, v-else-if, v-else judgment statement

v-for loop traversal

v-on binding event response method

Single line, single line and multi line data binding can be changed with the drop-down boxes of one party, single line and v-model

3. Components

Reusable Vue templates

Define and use components

	<!--Register components-->
Vue.component("yao",{ /*Custom component names use components < Yao > < / Yao >*/
        template:'<h1 style=\"font-size: 16px\">Happy code<h1>' /*Component template*/
    });
      

Pass parameters to components

<!--Components that define parameters-->
    Vue.component("yao",{
        props:['temp'],
        template:'<li>{{temp}}</li>'
    })
/*Using components*/
    <!--3. ergodic Vue Object Data Medium array array, adopt v-bind Make custom components temp Property and traversed index Properties are consistent-->
    <yao v-for="index in array" v-bind:temp="index"></yao>

4. Axios asynchronous communication

The function is to realize Ajax asynchronous communication

Axjos is based on the ES6 specification and needs to change the IDEA configuration

Using Axios

Prepare a section of json data json, which uses Axios's get method to request Ajax and encapsulate data into Vue instance data objects

var vm = new Vue({
            el:"#vue",
            data(){
                /*The json data structure in data must match the json data format returned by Ajax response!*/
                return{
                    info:{
                        name:null,
                        address:{
                            country:null,
                            city:null,
                            street:null
                        },
                        url:null
                    }
                }
            },
            mounted(){/*Hook function*/
                axios.get('../data.json').then(response=>(this.info=response.data))
            }

        });

5. Calculation attribute

Cache calculation results to save system overhead

• methods: define the method, and the calling method uses currentTime1(), which needs parentheses
• Calculated: defines the calculation attribute. The calling attribute uses currentTime2 without parentheses

6. Content distribution (slot)

When there are components B and C in component A, and the values of B and C are dynamic

1. Leave two slots in assembly A
2. Write B and C components, and define parameters in the components to dynamically bind values
3. Instantiate Vue and initialize data, bind div
4. When using component A, bind the data parameter in Vue to components B and C

Custom event

Delete objects in Vue instances in components

1. Define the removeItems deletion method in the Vue instance (subscript parameter)
2. Customize the event name when calling the component. remove calls the removeItems deletion method in the Vue instance (pass in subscript)
3. When defining a component, the custom method removeMethods calls the remove method
4. When defining the component template, the binding button responds to the event removeMethods

Event response removemethods - > call custom event remove - > call removeItems to delete data

7. Vue cli procedure

environment

Install environment node js

Install Vue cli

Vue development

1. Create project
2. Install Vue router
3. Install element UI
4. Install dependency, sass loader
5. Start test

Configure nested routing

Routing parameter transfer