brief introduction
Spring boot: designed to accelerate development and reduce xml configuration. If you don't want to write a configuration file, you can quickly start the program by adding the corresponding configuration in the configuration file.
General mapper: General mapper only supports the operation of single table, and the addition, deletion, modification and query of single table do not need to be in mapper XML to write the corresponding sql statement, we only need to call the corresponding interface.
pagehelp: pagehelper is mainly used to perform a paging query on the queried data.
- First, in the maven project, in POM Introducing mapper and pagehelper dependency into XML
<!-- pagehelp --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.3</version> </dependency> <!-- currency mapper --> <dependency> <groupId>tk.mybatis</groupId> <artifactId>mapper-spring-boot-starter</artifactId> <version>1.0.0</version> </dependency>
2. Create a new mymapper Java file, inheriting mapper interface
public interface MyMapper<T> extends Mapper<T>, MySqlMapper<T>,ConditionMapper<T> {
//FIXME should pay special attention to that the interface cannot be scanned, otherwise an error will occur
}
This java file cannot be placed with other mapper s to avoid being scanned. This method is called directly for all operations to obtain single table data.
3 add later attribute fields on the configuration file
#jdbc spring.datasource.url=jdbc:mysql://127.0.0.1:3306/news spring.datasource.username=Database user name spring.datasource.password=Database password spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.freemarker.request-context-attribute=request #mapper mapper.mappers=com.imooc.springboot.mapper.util.MyMapper mapper.not-empty=false mapper.identity=MYSQL #pagehelper pagehelper.helper-dialect = mysql pagehelper.reasonable = true pagehelper.support-methods-arguments = true pagehelper.params= count= countSql
The above configuration mapper Mappers is the path of the file in step 2.
4 after adding the controller file, the methods in the controller call the methods in the server. Although there are general mapper methods, each time a server method is added, the corresponding mapper method must be added, which makes the development more cumbersome. Therefore, we need a general server class, which can be used to call the method in step 2.
public interface BaseService<T> {
/**
* Query all
*
* @return Return all data
*/
List<T> findAll();
/**
* add to
*
* @param t entity
*
* @return
*/
int save(T t);
/**
* modify
*
* @param t
* entity
* @return
*/
int updateByPrimaryKey(T t);
/**
* Delete by primary key
*
* @param t Primary key
*
* @return
*/
int deleteByPrimaryKey(int t);
/**
* Query table list
* @param t Paging parameters
* @return
*/
TableData<T> getTableData(PageBean pageBean);
}
The above only encapsulates the basic addition, deletion, modification and query methods. You can add methods yourself later.
Then add the implementation class
public abstract class BaseServiceImpl<T> implements BaseService<T> {
@Autowired
protected MyMapper<T> mapper;
@Override
public List<T> findAll() {
return mapper.selectAll();
}
@Override
public int save(T t) {
return mapper.insert(t);
}
@Override
public int updateByPrimaryKey(T t) {
return mapper.updateByPrimaryKey(t);
}
@Override
public int deleteByPrimaryKey(int t) {
return mapper.deleteByPrimaryKey(t);
}
@Override
public TableData<T> getTableData(PageBean bean) {
int count = mapper.selectAll().size();
if (count > 0) {
PageHelper.startPage((bean.getOffset()/bean.getLimit()) + 1, bean.getLimit());
List<T> list = this.findAll();
return TableData.bulid(count, list);
}
return TableData.empty();
}
}
Note: the editor I use is eclipse. If I use the idea editor, I can remove abstract here.
Then add corresponding interfaces and implementation classes to inherit the above interfaces and methods. For example, add a newsserver interface and a newsserverImpl class
public interface NewsService extends BaseService<SysUser> {
}
@Service
public class NewsServiceImpl extends BaseServiceImpl<SysUser> implements NewsService{
}
5 in order to reduce the pressure on the database server, we usually use pagehelper for paging query when querying data. In order to more clearly display the data we display, we use bootstrap table to display the data. Bootstrap table has two ways to obtain the data. One is the client mode, that is, after obtaining all the data, we display the data in the front end. The other is the server mode that we will talk about next: the data information to be obtained, such as the data page number and the size of each page of data, can be sent to the back-end through the front-end to send the above parameters, and the back-end can return the data after obtaining these parameter information.
6 after introducing the js css files related to bootstrap table, I began to find some information on the Internet and found that many of them need to add the following cumbersome configurations on the front-end page,
$('#mytable').bootstrapTable({
//Request method
method: 'get',
//Whether to display interlaced color
striped: true,
//Whether to use cache or not is set to true by default, so this property (*) needs to be set in general
cache: false,
//Show pagination (*)
pagination: true,
//Enable sorting
sortable: false,
//sort order
sortOrder: "desc",
//Initialize loading the first page, and the default is the first page
//I set this item, but it doesn't seem to work, and my default is 0, --
//pageNumber:1,
//Number of record lines per page (*)
pageSize: 10,
//Number of rows per page (*) available for selection
pageList: [10, 25, 50, 100],
//This interface needs to handle the fixed parameters passed by bootstrap table and return json data in a specific format
url: "${contextPath}/mapper/getTableData",
//The default value is' limit '. The parameters passed to the server are: limit, offset, search, sort, order Else
//queryParamsType:'',
Query parameters,This parameter will be brought with each call, which can be customized
queryParams: queryParams : function(params) {
var subcompany = $('#subcompany option:selected').val();
var name = $('#name').val();
return {
pageNumber: params.offset+1,
pageSize: params.limit,
companyId:subcompany,
name:name
};
},
//Paging method: client paging, server paging (*)
sidePagination: "server",
//Show search
search: false,
//Enable the strict search.
strictSearch: true,
//Indicate which field is an identity field.
idField : "id",
columns: [],
pagination:true
});
It is cumbersome to add the above configuration information every time you add a page, but bootstrap table JS has a default configuration. You only need to modify several configurations.
contentType: 'application/json',//post request header application/x-www-form-urlencoded; charset=UTF-8' dataType: 'json', sidePagination: 'server', // Change to server
When we click the page number of the table, when we get and change the page number displayed on each page, the front end will automatically call the queryParams() method, and we need to pass these data to the background,
function queryParams(params) {
var query={};
query["limit"] = params.limit;//What data does it start with
query["offset"] = params.offset;//data size
return query;
}
6. In conjunction with the front-end paging in the previous step, we need to use the pagehelp plug-in. Similarly, we put this paging method on the general server class,
public TableData<T> getTableData(PageBean bean) {
int count = mapper.selectAll().size();
if (count > 0) {
PageHelper.startPage((bean.getOffset()/bean.getLimit()) + 1, bean.getLimit());
List<T> list = this.findAll();
return TableData.bulid(count, list);
}
return TableData.empty();
}
PageHelper A little change needs to be made to the startpage. The first parameter of the startpage method is to display the data of the page. Therefore, make a conversion of pageoffset/limit +1, and then query the data. It should be noted that the first line of the data query statement of the startpage method must not be empty or newline.
###Appendix:
github source code
demo display