elementUi基础入门学习

1.前后端分离(理解)

1.1什么是前后端分离

前后端的认识误解:

​ 前端代码 和 后端代码 分开的代码 那就是前后端分离 – 前后端的分工,真正前后分离,不仅仅是分工那么简单,它是一个种架构模式

(1)web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；

(2)在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求(restful风格进行前后分离的交互)

1.2 前后端分离开发的理解

交互形式:

代码形式:

1.3 为什么要进行前端分离开发:

(1) 分工合作 - 为优质产品打造精益团队 专业的人做专业的事情

(2) 提升开发效率 – >并行开发

(3) 完美应对复杂多变的前端需求

(4) 增强代码可维护性

2 . 先去搭建前端服务

(1)创建一个static web project

(2) 安装 npm install -g vue-cli

(3) vue init webpack 项目名

(4)cd 项目名

​ npm run dev 运行服务

如何去设置代理:

npm config set proxy=null

npm config set registry https://registry.npm.taobao.org

3 elementui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

(1)安装

​ npm i element-ui -S

(2)引入elementui 在 main.js

import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI) //引用

(3)在vue页面 使用elementui的组件

      Button
      
        
Try Element
      
    

在index.js路由router中添加如下代码就可以进行访问

import xxx from '@/components/01_elementui.vue'
import Button from '@/components/02_button.vue'
import Layout from '@/components/03_layout'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/xx',
      name: '123123',
      component: xxx
    }
    ,
    {
      path: '/button',
      name: 'button',
      component: Button
    },

在浏览器url地址栏输入：http://localhost:8080/#/xxx

4 elementui的组件(练习)

el-button 按钮

el-tree 树形

el-table表格

el-form表单

el-pagination分页

el-container容器

el-layout布局

el-tabs页签 选项卡

el-dialog对话框

el-alert 提示框

5 mockjs(了解)

mockjs:前端工程师 来模拟的数据

安装:

(1) npm install mockjs

(2)userMock.js文件引用 mockjs

let Mock=require(‘mockjs’) ;

(3)在js生成数据 ,拦截axios请求(了解)

let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }));
}



//拦截axios请求  this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    //把产生的16数据 放入list对象里面
  var list =dataList;
  console.log(opts.body)
    //取出传递过来的 当前页
  var index = JSON.parse(opts.body).page; //3
    //每页显示条数
  var size = 10;
    //取出总的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list)
  return {
    'total': total, //总的条数
    'data': list //分页之后的数组
  }
})

//分页  
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size); //slice((2-1)*10,2*10)  slice(10,20)
}

(4)crud.vue – 掌握

//安装axios

npm install axios --save

getUsers(){
        //这个是对象  {key:value} 传递参数
        let para = {
          page:this.page
        }
        //加载数据
        //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
        this.$http.post('/user/list',para).then(res=>{
          console.log(res.data);//返回数组 {'total': total, 'data': list}
         this.users = res.data.data; //返回分页list
          this.total = res.data.total;//返回总的条数
        });

      },
      handleCurrentChange(val){
          //currentPage  每次点击分页条执行的方法
        console.log(val);
        //把当前页 赋值给page这个字段
        this.page = val;
        this.getUsers();
      }


-----------------------------------------------------------------------------
    <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px"
    >

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>

(5)注意事项 引入usermock.js --在main.js

import UserMock from './usermock.js'

6.axios请求配置

Ajax请求优化-axios
vue更新到2.0之后，官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中
理解 就是ajax请求 --在vue里面axios
6.1、安装

npm install axios --save

6.2、局部使用

6.3、全局使用
main.js:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import routes from './router'
import VueRouter from 'vue-router'
import axios from 'axios'

//配置axios的全局基本路径 t
axios.defaults.baseURL='http://localhost:80'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueRouter)
const router = new VueRouter({
    routes
})

具体文件使用

7 集成spring，spring-mvc，mybatis—>ssm三大框架集成

（1）创建一个maven-web项目
（2）在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.itsource</groupId>
  <artifactId>crm</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>crm</name>
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- spring版本号 -->
    <spring.version>4.1.2.RELEASE</spring.version>
    <!-- mybatis版本号 -->
    <mybatis.version>3.2.1</mybatis.version>
    <!-- log4j日志文件管理包版本 -->
    <slf4j.version>1.7.2</slf4j.version>
    <log4j.version>1.2.17</log4j.version>
    <!-- jackson包版本 -->
    <jackson.version>2.5.0</jackson.version>
  </properties>

  <dependencies>
    <!--JUnit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!--Spring核心-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-expression</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</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-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>

    <!--SpringMVC-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--aop依赖包-->
    <dependency>
      <groupId>aopalliance</groupId>
      <artifactId>aopalliance</artifactId>
      <version>1.0</version>
    </dependency>
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.6.8</version>
    </dependency>

    <!--文件上传-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.2</version>
    </dependency>
    <!--jackson-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <!--数据库连接池-->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>1.2.2</version>
    </dependency>
    <dependency>
      <groupId>commons-pool</groupId>
      <artifactId>commons-pool</artifactId>
      <version>1.5.3</version>
    </dependency>

    <!--Mybatis集成-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.2.0</version>
    </dependency>

    <!--log4j-->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>

    <!--slf4j-->
    <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>
      <scope>test</scope>
    </dependency>

    <!--数据库连接驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.46</version>
    </dependency>

    <!-- JSTL标签类 -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!--servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.0.1</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>

  <build>
    <finalName>crm</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.0.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.7.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.20.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.0</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>

（3）web.xml

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
  <display-name>crm</display-name>
  <!-- Spring的配置文件 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <!--Spring监听器 ApplicationContext 载入 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!-- Spring MVC 核心配置开始 -->
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!-- 编码过滤器 -->
  <filter>
    <filter-name>encodingFilter</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>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*
  

（4）applicationContext-mvc.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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 -->
    <context:component-scan base-package="cn.itsource.crm.web.controller" />

    <!-- 启动SpringMVC的注解功能 -->
    <mvc:annotation-driven/>

    <!--静态资源放行-->
    <mvc:default-servlet-handler/>

    <!-- 定义跳转的文件的前后缀 ，视图解析器配置-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 配置文件上传解析器 -->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 默认编码 -->
        <property name="defaultEncoding" value="utf-8" />
        <!-- 文件大小最大值 -->
        <property name="maxUploadSize" value="10485760000" />
    </bean>
</beans>

（5）db.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql:///itsource_dms?useUnicode=true&characterEncoding=utf-8
username=root
password=123456

（6）log4j.properties

log4j.rootLogger=ERROR, stdout
#log4j.rootLogger=NONE
log4j.logger.cn.itsource=TRACE
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout

（7）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:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--扫描的包-->
    <context:component-scan base-package="cn.itsource.crm.service"/>

    <!-- Jdbc配置文件 -->
    <context:property-placeholder location="classpath:db.properties" />

    <!-- 数据源dataSource -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="${jdbc.driverClassName}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!--maxActive: 最大连接数量 -->
        <property name="maxActive" value="150" />
        <!--minIdle: 最小空闲连接 -->
        <property name="minIdle" value="5" />
        <!--maxIdle: 最大空闲连接 -->
        <property name="maxIdle" value="20" />
        <!--initialSize: 初始化连接 -->
        <property name="initialSize" value="30" />
        <!--maxWait: 超时等待时间以毫秒为单位 1000等于60秒 -->
        <property name="maxWait" value="1000" />
        <!-- 在空闲连接回收器线程运行期间休眠的时间值,以毫秒为单位. -->
        <property name="timeBetweenEvictionRunsMillis" value="10000" />
        <!-- 在每次空闲连接回收器线程(如果有)运行时检查的连接数量 -->
        <property name="numTestsPerEvictionRun" value="10" />
        <!-- 1000 * 60 * 30 连接在池中保持空闲而不被空闲连接回收器线程 -->
        <property name="minEvictableIdleTimeMillis" value="10000" />
        <property name="validationQuery" value="SELECT NOW() FROM DUAL" />
    </bean>

    <!--Mybatis核心对象-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据源 -->
        <property name="dataSource" ref="dataSource" />
        <!-- 配置mybatis (mapper)映射器路径 -->
        <property name="mapperLocations" value="classpath*:cn/itsource/crm/mapper/*Mapper.xml" />
        <!-- 配置mybatis 类型别名 -->
        <property name="typeAliasesPackage">
            <value>
                cn.itsource.crm.domain
                Cn.itsource.crm.query
            </value>
        </property>
    </bean>

    <!--注入映射器，一劳永逸的做法-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.itsource.crm.mapper"></property>
    </bean>

    <!--事务管理-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    
    <!--以注解的方式进行事务管理-->
    <tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

（8）抽取Base
domain
query
mapper
service
controller

8 模块拆分

8.1 原先的方式：

但随着项目的进行，我们可能遇到下面一系列的问题：
（1） 大部分的domain或者一些service以及mapper在多个项目中是通用的
（2） Pom.xml中的依赖越来越长
（3） Build整个项目的时间越来越长，尽管你只是一直在web层工作，但是不得不build整个项目
（4） 某个模块，比如mapper，你只想让一些经验丰富的人来维护，但是现在每个开发者都能修改这个模块，这导致关键模块的代码质量达不到你的要求

一个大项目拆分为多个小项目(maven模块)组成,而且它们是有依赖关系的.

拆分方式：
写项目写代码 尽量满足下面内容
开闭原则
对扩展开放
对修改关闭 – 公共的不要乱修改
总而言之，我们前面设计的项目并没有遵循一个很重要的设计原则“高内聚，低耦合”。为了解决这些问题，我们可以使用maven对项目模块进行重新的划分。
使用Maven管理的比较大的项目都是分模块的，每个模块都对应自己的pom.xml,这样方便项目的管理和开发，避免所有的功能都糅合在一起，这也是公司里比较常见的开发模式。
低耦合: 尽量的分层开发 service mapper controller --为了维护
高内聚: 比如一个方法 (方法就应该完成一个方法该干的事情 save ) --最多40行

优雅–代码之美

拆分效果：
(1)代码拆分

​ basic-util 工具类 —>jsonResult，PageList

​ basic-core 公共内容 -----> Base父类装这里

​ crm-common 具体项目公共内容 ---->domain，query

​ crm-mapper 项目里面具体mapper ------>mapper，*Mapper.xml ，数据库相关包

​ crm-service 项目里面service类 ----->service，serviceImpl，applicationContext.xml

​ crm-web 项目的controller层 ----> applicationContion-mvc.xml ，spring-mvc相关包

…

​ pss-common

(2)配置文件拆分

​ web.xml applicationContext-mvc.xml -->crm-web模块

​ applicationContext.xml–crm-service模块

8.2 项目公用的pom.xml包

<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring.version}</version>
        </dependency>


        <!--Mybatis集成-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>${mybatis.version}</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.0</version>
        </dependency>
        <!--log4j-->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>${log4j.version}</version>
        </dependency>

        <!--slf4j-->
        <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>
            <scope>test</scope>
        </dependency>

        <!--数据库连接驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <!--数据库连接池-->
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>commons-pool</groupId>
            <artifactId>commons-pool</artifactId>
            <version>1.5.3</version>
        </dependency>

9 restful风格

前端代码 —> 后端代码进行交互 , 交互的时候,前台代码(axios)发送请求到后端代码

axios --> get/post/put/delete/patch

9.1 restful风格理解

 --->get
-->post
ajax --> get/post
除了get/post以外 还支持其他请求 put/delete/patch  --->http协议扩展出来

没有restfull以前:
	/addUser?name='xiaoping'&age=38  -- get
	/delete?id=1
	

restful风格: 传输请求风格写法   -- http get/post/patch/put/delete  完成增删改查

put动作 + /user(资源路径) {"name":"xiaozhaozhao","age":28}  --新增
post动作 + /user(资源路径) {"name":"xiaozhaozhao","age":28} --修改
delete 动作 +/user/1   -->表示删除id为1的用户
get 动作 + /user/10  -->查询id为10的用户
patch 动作 + /user  -->批量查询 

为什么要使用restfull
  restfull 安全性好一点  现在比较流行风格  不会暴露动作 

9.2 restfull代码实现

新增:
  @RequestMapping(value="/xxx",method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Department department){
        System.out.println("新增:"+department);
        return new AjaxResult();

    }

修改:
	 @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Department department){
        System.out.println("修改:"+department);
        return new AjaxResult();
    }

删除
@RequestMapping(value="/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable Long id){
        System.out.println("删除数据的id为:"+id);
        return new AjaxResult();
    }

 //查询
    @RequestMapping(value="/{id}",method = RequestMethod.GET)
    @ResponseBody
    public AjaxResult queryOne(@PathVariable Long id){
        System.out.println("查询数据的id为:"+id);
        return new AjaxResult();
    }
    
     @RequestMapping(value="/list",method=RequestMethod.PATCH)
    @ResponseBody
    public List<Department> list(){
        return departmentService.queryAll();
    }

9.3 swagger(理解)

和spring整合,根据controller 生成的接口的文档 ,通过页面访问

给前端看的…

9.4 postman来测试(掌握)

测试 put/get/post/delete/patch这些请求

10 前端vue-maven-admin模板框架

基于 vue-cli 和 elementui 搭建出来一个模块框架, 框架基本功能 ,路由,插件 ,国际化等\

10.1 搭建模板(掌握)

​ (1)解压文件 --修改名称

(2)使用idea 打开

​ (3)执行命令 npm install 安装依赖

(4)启动 npm run dev

​ (5) 访问