elementUi基础入门学习

最新推荐文章于 2024-05-14 21:37:06 发布

涨工资叭

最新推荐文章于 2024-05-14 21:37:06 发布

阅读量1.1k

点赞数 1

分类专栏： ssm框架 Dao持久层 javaweb

本文链接：https://blog.csdn.net/weixin_45591311/article/details/103393379

版权

Dao持久层同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

javaweb

2 篇文章 0 订阅

订阅专栏

ssm框架

1 篇文章 0 订阅

订阅专栏

1.前后端分离(理解)

1.1什么是前后端分离

前后端的认识误解:

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

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

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

1.2 前后端分离开发的理解

交互形式:
在这里插入图片描述

代码形式:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uREWeZTW-1575459996907)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191204092316667.png)]$

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的组件

<div id="app">
      <el-button @click="visible = true">Button</el-button>
      <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
      </el-dialog>
    </div>
<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

在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>/*</url-pattern>
  </filter-mapping>
</web-app>

（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风格理解

<a href="/xxx"> --->get
<form method="post">-->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) 访问

涨工资叭

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
elementUi基础入门学习

elementUi基础入门学习1.前后端分离(理解)1.1什么是前后端分离1.2 前后端分离开发的理解1.3 为什么要进行前端分离开发:2 . 先去搭建前端服务3 elementui4 elementui的组件(练习)5 mockjs(了解)6.axios请求配置欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码...
复制链接

扫一扫