SpringBoot+ElementUI—客户信息展示的示例,这个示例使用 前后端分离的开发模式来完成.
学习目的: 了解前端、后端、相关工具使用,以及完整的项目实例,帮助新手快速入门。
前端:Element UI + VUE
后端:SpringBoot、MybatisPlus、Lombok、EasyCode代码生成器
后端开发工具:IDEA
API测试工具:PostMan
前端开发工具:VSCode
mysql,
customer_db
customer_table
工具:IDEA。用快速创建方式创建一个SpringBoot项目
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.9.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<dependencies>
<!-- spring boot 启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- spring boot web 启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- spring boot test 启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- lombok简化java代码 如果没有安装,先安装这个插件-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- mybatis-plus插件 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.0</version>
</dependency>
<!-- mysql jdbc驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
如果用maven创建项目,需要手工创建程序启动类:
@SpringBootApplication
public static void main(String[] args) {
SpringApplication.run (xx.class, args);
}
如果用maven创建项目,默认是没有测试类的,如果需要创建测试类,需要在测试类头增加注解:
@RunWith(SpringRunner.class)
@SpringBootTest
新建application.yml配置文件
server:
port: 8088
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3309/XXXX
username: root
password: 8888
mybatis-plus:
#信息输出设置
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
为了高效, 使用EasyCode工具来生成后台java代码,也就是API接口程序。
1)、在主程序添加注解 @MapperScan,作用是:一次性扫描Mapper映射接口的包路径;
2)、在项目中加入配置类,在类中用@bean注解来注册分页插件;
//Spring boot方式
@EnableTransactionManagement
@Configuration
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
// paginationInterceptor.setOverflow(false);
// 设置最大单页限制数量,默认 500 条,-1 不受限制
// paginationInterceptor.setLimit(500);
return paginationInterceptor;
}
}
开启 PostMan工具测试。get、post
前端用:Element UI+VUE。手工简单创建项目(不使用vue-cli)
用vsCode工具编辑
vue基本方法框架:
<script>
var Main = {
data() {
return {
}
},
//web页面初始化时,调用
created() {
},
//定义一些方法,放在这里面
methods: {
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
// 用ajax去请求服务端数据
getData() {
let that = this;
let url = "http://localhost:8089/customerTable";
that.$http.get(url, null, { emulateJSON: true })
.then(res => {
let rs = JSON.parse(res.body);
if (rs.code == 0) {
that.tableData = rs.data.records;
}
});
}
获取远程数据:
this.$http.get(url, data,{emulateJSON:true})
.then( res => {
let rs = JSON.parse(res.body);
});
封装好的ajax:
/**
* 简单封装了ajax对象
*/
class Ajax {
vueObj = null;
baseUrl = "http://localhost:8099/";
/**
* 构造方法
* @param {*} vueObj
*/
constructor(vueObj) {
this.vueObj = vueObj;
}
/**
* get方法
* @param {*} api
* @param {*} callback
* @param {*} params
*/
get(api,callback,params){
let url = this.baseUrl + api ;
let data = JSON.stringify(params);
this.vueObj.$http.get(url, data,{emulateJSON:true})
.then( res => {
callback(JSON.parse(res.body));
});
}
/**
* post方法
* @param {*} api
* @param {*} callback
* @param {*} params
*/
post(api,callback,params){
let url = this.baseUrl + api ;
let data = JSON.stringify(params);
this.vueObj.$http.post(url, data,{emulateJSON:true})
.then( res => {
callback(JSON.parse(res.body));
});
}
/**
* put方法
* @param {*} api
* @param {*} callback
* @param {*} params
*/
put(api,callback,params){
let url = this.baseUrl + api ;
let data = JSON.stringify(params);
this.vueObj.$http.put(url, data,{emulateJSON:true})
.then( res => {
callback(JSON.parse(res.body));
});
}
/**
* delete方法
* @param {*} api
* @param {*} callback
* @param {*} params
*/
delete(api,callback,params){
let url = this.baseUrl + api ;
let data = JSON.stringify(params);
this.vueObj.$http.delete(url, data ,{emulateJSON:true})
.then( res => {
callback(JSON.parse(res.body));
});
}
}
主要代码:
//分页点击事件
currentChange(current){
// console.log(current);
this.page.current = current;
this.getData();
}
<el-pagination
v-if="page.total>page.size"
background
layout="prev, pager, next"
@current-change="currentChange"
:page-size="page.size"
:current-page="page.current"
:total="page.total">
</el-pagination>
// 删除数据
del() {
if (this.idList.length > 0) {
let that = this;
let idList = that.idList.toString();
let url = "customerTable?idList=" + idList;
//调用Ajax的delete方法
that.ajax.delete(url, function (rs) {
if (rs.code == 0) {
//重新获取数据
that.getData();
}
});
}
}
onSubmit() {
let that = this;
let url = "customerTable";
let data = that.form;
//调用Ajax的post方法
that.ajax.post(url, function (rs) {
if (rs.code == 0) {
//重新获取数据
that.getData();
}
},data);
}