springboot中使用分页，文件上传，jquery的具体步骤

分页：

　　pom.xml 加依赖

<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.1.2</version>
 </dependency>

  Service 里方法中

public PageInfo<User> findAll(int page,int size) {
        PageHelper.startPage(page,size);
        //源代码不变
        PageInfo<User> model=new PageInfo<>(集合);
        return model;
}

　　applicattion.yml中

#pagehelper分页插件
pagehelper:
    helperDialect: mysql
    reasonable: true
    supportMethodsArguments: true
    params: count=countSql

文件上传：

　　　　pom.xml中加依赖

<dependency>
            <groupId>com.github.tobato</groupId>
            <artifactId>fastdfs-client</artifactId>
            <version>1.25.2-RELEASE</version>
</dependency>

　　　　总配置application.properties

#fastdfs2
fdfs.soTimeout=1500
fdfs.connectTimeout=600
fdfs.thumbImage.width=150
fdfs.thumbImage.height=150
fdfs.trackerList[0]=192.168.25.133:22122 #默认是22122的端口
fdfs.prefixpath= http://192.168.25.133/  #这是文件管理服务器ip

　　　　Controller中

@CrossOrigin(origins = "*", maxAge = 360)//设置上传最大值
@Controller
public class userAction {

　 @Value("${fdfs.prefixpath}")
   private String prefixpath;



　　//图片上传
    @RequestMapping("/upload")
    @ResponseBody
    public Map<String,Object> upload(MultipartFile file) throws Exception {
        String exname = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
        StorePath storePath = storageClient.uploadFile(file.getInputStream(), file.getSize(), exname, null);
        String url = prefixpath + storePath.getFullPath();
        System.out.println(url);
        Map<String,Object> map=new HashMap<>();
        map.put("urls",url);
        System.out.println("----"+map.get("urls"));
        return map;
    }

　　　　html页面中

<body>

    <form action="addUser" method="post">
        <input type="hidden" id='photo' name='photo'/>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="uname"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="password"/></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input type="date" name="birthday"/></td>
            </tr>
            <tr>
                <td>头像</td>
                <td><input type='file' id='file' name='file' form="pff" />
                    <a id='yla' href='' target='_blank'><img id='ylm' src='' width="200px" height="200px"/></a>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
    </form>
    <form id='pff' method="post" enctype="multipart/form-data" th:action="@{upload}">
    </form>
</body>

<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.form.min.js"></script>
<script type="text/javascript">
    $("#file").change(function(){
        alert(this.value);
        if(this.value!=''){
            $('#pff').ajaxSubmit({
                type:'post',
                dataType:'json',
                success:function(data){
                    alert(data.urls);
                        $("#yla").attr("href",data.urls);
                        $("#ylm").attr("src",data.urls);
                        $("#photo").attr("value",data.urls);
                }
            });
        }
    })
</script>

jQuery

　　pom.xml中加依赖

扫描二维码关注公众号，回复： 157328 查看本文章

　　　　　<!--jquer-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>2.1.4</version>
        </dependency>

　　html页面，引入

<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>

springboot中使用分页，文件上传，jquery的具体步骤

猜你喜欢