elementUi基础入门学习
2024-04-10 10:08:15
elementUi基础入门学习
- 1.前后端分离(理解)
- 1.1什么是前后端分离
- 1.2 前后端分离开发的理解
- 1.3 为什么要进行前端分离开发:
- 2 . 先去搭建前端服务
- 3 elementui
- 4 elementui的组件(练习)
- 5 mockjs(了解)
- 6.axios请求配置
- 7 集成spring，spring-mvc，mybatis--->ssm三大框架集成
- 8 模块拆分
- 8.1 原先的方式：
- 8.2 项目公用的pom.xml包
- 9 restful风格
- 9.1 restful风格理解
- 9.2 restfull代码实现
- 9.3 swagger(理解)
- 9.4 postman来测试(掌握)
- 10 前端vue-maven-admin模板框架
- 10.1 搭建模板(掌握)
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的组件
<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 从后台查询出来...没有写后台 --模拟后台数据 mockjsthis.$http.post('/user/list',para).then(res=>{console.log(res.data);//返回数组 {'total': total, 'data': list}this.users = res.data.data; //返回分页listthis.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%"borderheight="450px"><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="email"label="邮件"></el-table-column><el-table-columnprop="phone"label="电话"></el-table-column><el-table-columnprop="createTime"label="创建时间"width="180"></el-table-column><el-table-columnfixed="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.domainCn.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=1restful风格: 传输请求风格写法 -- 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 -->批量查询 为什么要使用restfullrestfull 安全性好一点 现在比较流行风格 不会暴露动作 9.2 restfull代码实现
新增:@RequestMapping(value="/xxx",method = RequestMethod.PUT)@ResponseBodypublic AjaxResult add(@RequestBody Department department){System.out.println("新增:"+department);return new AjaxResult();}
修改:@RequestMapping(method = RequestMethod.POST)@ResponseBodypublic AjaxResult update(@RequestBody Department department){System.out.println("修改:"+department);return new AjaxResult();}
删除
@RequestMapping(value="/{id}",method = RequestMethod.DELETE)@ResponseBodypublic AjaxResult delete(@PathVariable Long id){System.out.println("删除数据的id为:"+id);return new AjaxResult();}
//查询@RequestMapping(value="/{id}",method = RequestMethod.GET)@ResponseBodypublic AjaxResult queryOne(@PathVariable Long id){System.out.println("查询数据的id为:"+id);return new AjaxResult();}@RequestMapping(value="/list",method=RequestMethod.PATCH)@ResponseBodypublic 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) 访问
elementUi基础入门学习相关推荐
- MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时 包含 ...
- Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么 教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
- 三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么 为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
- SketchUp Pro 2021基础入门学习视频教程
SketchUp Pro 2021基础入门学习视频教程 1280X720 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 流派:电子学习|语言:英语+中文字幕( ...
- Maya基础入门学习教程
Maya基础入门学习教程 视频:.MKV, 1280x720, 共57节课 时长 4小时25分钟,3GB 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕 指导老师:Shane Whitt ...
- Maya2022基础入门学习教程
Maya2022基础入门学习教程 Maya 2022 Essential Training Maya2022基础入门学习教程 Maya 2022 Essential Training MP4 |视频: ...
- Blender基础入门学习教程 Learning Blender from Scratch
Blender基础入门学习教程 Learning Blender from Scratch 流派:电子学习| MP4 |视频:h264,1280×720 |音频:aac,48000 Hz 语言:英语+ ...
- 零基础入门学习Python，我与python的第一次亲密接触后的感受！
前言:Python是适合初学者入门最好的语言 Python适合初学者入门最好的语言 人工智能用Python?高考要加入Python?现在连微软官方Excel都要把Python作为官方语言!Python ...
- 零基础入门学习Python(33)-图形用户界面编程（GUI编程）EasyGui
用户界面编程,即平时说的GUI(Graphical User Interface)编程,那些带有按钮.文本.输入框的窗口的编程 EasyGui是一个非常简单的GUI模块,一旦导入EasyGui模块,P ...
最新文章
- 艾伟也谈项目管理，如何做一个合格的项目经理
- javascript搜索框联想搜索_js实现类似于联想关键词的搜索功能（附代码）
- 基于 Spring Boot 的车牌识别系统（附项目地址）ba
- 运行Python程序的2种方式
- How to use external classes and PHP files in Laravel Controller?
- （41）System Verilog输出变量时序延迟
- sklearn保存svm分类模型_机器学习100天-Day1601线性支持向量机分类
- JQuery 登录，记住密码，密码小眼睛
- PHP常用函数之字符串处理
- DAY 34 进程通信、消费者模型和线程
- 水晶报表PUSH方法Demo
- Windows下一个MySQL有些错误的解决方法
- 基于微信小程序的外卖点餐系统
- Redis 实战指南
- 轻量级Qt键盘-介绍篇
- neo4j构建算法_使用neo4j构建餐厅推荐引擎
- 英文建站必备：Namesilo 购买注册流程
- vivox50支持鸿蒙,vivo X50厚度刷新纪录：迄今为止最薄5G手机
- Git操作 【详细】【详细】
- 网线还能这样玩？？？(哈哈哈，记一次差点被揍事件)