一部分代码的记录

于 2020-01-04 16:03:51 发布
阅读量247 收藏
点赞数
分类专栏： web Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42263238/article/details/103834331
版权
web 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
Java
13 篇文章 0 订阅
订阅专栏

前端

  • 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <title>Title</title>

</head>

<body>
 this is first test html

<button  id="btn">测试</button>
 <button  id="btn2">测试2</button>
 <button  id="btn3">测试3</button>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            alert("加载了吗");
            $.ajax({
                url:"http://localhost:8082/first/ajaxStudy",
                type:"post",
                success:function (data) {

                    alert(data);
                },
                error:function () {
                    alert("错误")
                }
            });
        });

        $("#btn2").click(function () {
            alert("加载了吗");
            $.ajax({
                url:"http://localhost:8082/first/show",
                type:"post",
                success:function (data) {

                    alert(JSON.stringify(data));
                },
                error:function () {
                    alert("错误")
                }
            });
        });
        $("#btn3").click(function () {

            alert("加载了吗  用Thymeleaf来完成操作");
            $.ajax({
                url:"http://localhost:8082/first/test3",
                type:"post",
                success:function (data) {
                    var t = ${data};
                    alert(t);
                    alert(data.tt);
                },
                error:function () {
                    alert("错误")
                }
            });
        });
    })
    // function test() {
    //     alert("good");
    //     $.ajax({
    //         url:"https://wis.qq.com/weather/common",
    //         type:"post",
    //         success:function (data) {
    //             alere(data);
    //         },
    //         error:function () {
    //             alert("错误")
    //         }
    //     });
    // }
</script>
</body>

</html>
  • 控制类
package com.example.mybatisandspringboot.controller;

import com.example.mybatisandspringboot.dao.UserMapper;
import com.example.mybatisandspringboot.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

/**
 * @Author susuper
 * @Date 2020/1/3 17:38
 * @description:
 */
@Controller
@RequestMapping("/first")
public class showController {
    @Autowired
    private UserMapper userMapper;

    static int anInt= 1;

    @ResponseBody
    @RequestMapping("/show")
    public List<User> show(){
        List<User> users = userMapper.queryUserList();
        return users;
    }

    @RequestMapping("/index")
    public String index(){
        System.out.println("进入index.html的方法");
        return "index";
    }

    @ResponseBody
    @RequestMapping("ajaxStudy")
    public String AjaxString(){
        anInt++;
        if(anInt%2==0){
            return "偶数";
        }else{
//            md.addObject("message","这是一个偶数");
            return "jishu";
        }
    }

    @ResponseBody
    @RequestMapping("/test3")
    public void Test3(Model model){
        model.addAttribute("tt","测试正确");

    }
}
  • 配置文件
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root

#mybatis.mapper-locations=classpath:mapper/*Mapper.xml
server.port=8082



spring.thymeleaf.prefix=classpath:templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5

spring.mvc.static-path-pattern=/static/**
#spring.mvc.static-path-pattern=/static/js/**

需要使用themplates 来在前端界面获取数据

  • 文件上传函数
  • 思路：获取前端提交的数据，为此文件存储好位置。
package cn.susuper.controller;

import cn.susuper.entity.Result;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.logging.SimpleFormatter;

/**
 * @author Susuper 果冻
 * @version 1.0
 * @date 2020/1/28 11:51
 * @description
 */
@RestController
public class UploadDownController {
    /**
     * 文件上传
     */
    @RequestMapping(value = "/upload")
    public Result upload(@RequestParam("picture")MultipartFile multipartFile,
                         HttpServletRequest request){
        String path = request.getSession().getServletContext().getRealPath("/upload");
        System.out.println("文件保存路径+"+path);
        File file = new File(path);
        if (!file.exists() && !file.isDirectory()){
            file.mkdir();
        }

        //获取原始文件名称
        String originFileName = multipartFile.getOriginalFilename();
        System.out.println("原始文件名称+"+originFileName);

        //获取文件类型  以最后一个 。为标识
        String type = originFileName.substring(originFileName.lastIndexOf(".")+1);
        System.out.println("文件类型"+type);

        //获取文件名称
        String name = originFileName.substring(0,originFileName.lastIndexOf("."));

        //设置文件新名称  当前时间 +文件名称
        String fileName = System.currentTimeMillis()+name+"."+type;
        System.out.println(fileName+"新文件名称");
        //指定创建文件
        File targetFile = new File(path,fileName);
        try {
            multipartFile.transferTo(targetFile);
            System.out.println("上传成功");
            return new Result(true,"/upload/"+fileName);
        } catch (IOException e) {
            e.printStackTrace();
            System.out.println("上传失败");
            return  new Result(false,"上传失败");
        }
    }
}

//利用resultful+ajax完成增删改查

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/1/31
  Time: 11:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    %>
    <title>Title</title>
    <link rel="stylesheet" href="<%=basePath%>/lib/bootstrap.min.css"/>
</head>
<body>
<div class="sidebar text-left">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">SSM整合</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="<%=basePath%>/customer/toSavePage.do"><strong>添加信息功能</strong></a></li>
                    <li><a href="<%=basePath%>/customer/findByPage"><strong>分页查询功能</strong></a></li>
                    <li><a>Create by TyCoding</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="container">
    <h1 class="text-center">客户列表信息页面</h1>
    <hr/>
    <br/>

    <form class="form-inline" action="<%=basePath%>/customer/findByPage.do" method="post">
        <div class="form-group">
            <label>客户姓名：</label>
            <input type="text" class="form-control" name="name"/>
        </div>
        &nbsp;&nbsp;
        &nbsp;&nbsp;
        <div class="form-group">
            <label>客户电话</label>
            <input type="text" class="form-control" name="telephone"/>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <input type="submit" value="查询" class="form-control btn btn-info"/>
            &nbsp;&nbsp;
            <input type="reset" value="重置" class="form-control btn btn-danger"/>
        </div>
    </form>
    <br/>
    <hr/>

    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th style="text-align: center;">客户编号</th>
                <th style="text-align: center;">客户姓名</th>
                <th style="text-align: center;">客户电话</th>
                <th style="text-align: center;">客户地址</th>
                <th style="text-align: center;">客户备注</th>
                <th style="text-align: center;">操作</th>
            </tr>
            </thead>
            <tbody>
            <%--<tr>--%>
                <%--<td colspan="6">${page.beanList[0].name}</td>--%>
            <%--</tr>--%>
            <c:forEach items="${requestScope.page.beanList}" var="customer">
                <tr class="text-center">
                    <td>${customer.id}</td>
                    <td>${customer.name}</td>
                    <td>${customer.telephone}</td>
                    <td>${customer.address}</td>
                    <td>${customer.remark}</td>
                    <td>
                        <a href="#" onclick="return edit(${customer.id})" style="text-decoration: none;">
                            <span class="fa fa-edit fa-fw">编辑</span>
                        </a>
                        <a href="#" onclick="return trash(${customer.id})" style="text-decoration: none;"
                           data-toggle="modal" data-target="#trashModal">
                            <span class="fa fa-trash-o fa-fw">删除</span>
                        </a>
                    </td>
                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>

    <!-- 删除的模态框 -->
    <div class="modal fade" id="trashModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模糊框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title">警告！</h4>
                </div>
                <!-- 模糊框主体 -->
                <div class="modal-body">
                    <strong>你确定要删除吗？</strong>
                </div>
                <!-- 模糊框底部 -->
                <div class="modal-footer">
                    <button type="button" class="delSure btn btn-info" data-dismiss="modal">确定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑的模态框 -->
    <form class="form-horizontal" role="form" method="post" action="<%=basePath%>/customer/update.do"
          id="form_edit">
        <div class="modal fade" id="editModal" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改客户信息</h4>
                    </div>
                    <div class="modal-body" style="margin-left: 80px;">
                        <input name="id" id="id" hidden="hidden"/>
                        <div class="form-group form-inline">
                            <label>客户姓名：</label>
                            <input type="text" name="name" class="form-control" id="name"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户电话：</label>
                            <input type="text" name="telephone" class="form-control" id="telephone"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户住址：</label>
                            <input type="text" name="address" class="form-control" id="address"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户备注：</label>
                            <input type="text" name="remark" class="form-control" id="remark"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="editSure btn btn-info" data-dismiss="modal">修改</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>


    <%--分页--%>
    <form action="<%=basePath%>/customer/findByPage" method="post" class="listForm">
        <div class="row">
            <div class="form-inline">
            <label style="font-size:14px;margin-top:22px;">
                共${requestScope.page.totalCount}条记录，共${requestScope.page.totalPage}页
                &nbsp;&nbsp;每页显示
                <input name="pageCode" value="${requestScope.page.pageCode}"/>
                <select class="form-control" name="pageSize">
                    <option value="2"
                            <c:if test="${requestScope.page.pageSize == 2}">selected</c:if> >2
                    </option>
                    <option value="3"
                            <c:if test="${requestScope.page.pageSize == 3}">selected</c:if> >3
                    </option>
                    <option value="4"
                            <c:if test="${requestScope.page.pageSize == 4}">selected</c:if> >4
                    </option>
                    <option value="5"
                            <c:if test="${requestScope.page.pageSize == 5}">selected</c:if> >5
                    </option>
                </select>
                条
                &nbsp;&nbsp;
                到&nbsp;&nbsp;
                <input type="text" size="3" id="page" name="pageCode"
                       class="form-control input-sm"
                       style="width:11%">页
                <button type="submit" class="btn btn-sm btn-info">GO!</button>
            </label>


            <ul  class="pagination" style="float:right;">
                <li>
                    <a href="<%=basePath%>/customer/findByPage?pageCode=1">首页</a>
                </li>
                <li>
                    <c:if test="${page.pageCode>2}">
                        <a href="<%=basePath%>/customer/findByPage?pageCode=${page.pageCode-1}">&laquo;</a>
                    </c:if>
                </li>


                <!-- 写关于分页页码的逻辑 -->
                <c:choose>
                    <c:when test="${requestScope.page.totalPage <= 5}">
                        <c:set var="begin" value="1"/>
                        <c:set var="end" value="${requestScope.page.totalPage}"/>
                    </c:when>
                    <c:otherwise>
                        <c:set var="begin" value="${requestScope.page.pageCode - 1}"/>
                        <c:set var="end" value="${requestScope.page.pageCode + 3}"/>
                        <!-- 头溢出 -->
                        <c:if test="${begin < 1}">
                            <c:set var="begin" value="1"/>
                            <c:set var="end" value="5"/>
                        </c:if>
                        <!-- 尾溢出 -->
                        <c:if test="${end > requestScope.page.totalPage}">
                            <c:set var="begin" value="${requestScope.page.totalPage -4}"/>
                            <c:set var="end" value="${requestScope.page.totalPage}"/>
                        </c:if>
                    </c:otherwise>
                </c:choose>

                <!-- 显示页码 -->
                <c:forEach var="i" begin="${begin}" end="${end}">
                    <!-- 判断是否是当前页 -->
                    <c:if test="${i == requestScope.page.pageCode}">
                        <li class="active"><a href="javascript:void(0);">${i}</a></li>
                    </c:if>
                    <c:if test="${i != requestScope.page.pageCode}">
                        <li>
                            <a href="<%=basePath%>/customer/findByPage.do?pageCode=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                        </li>
                    </c:if>
                </c:forEach>


                <li>
                    <c:if test="${requestScope.page.pageCode < requestScope.page.totalPage}">
                        <a href="<%=basePath%>/customer/findByPage?pageCode=${requestScope.page.pageCode + 1}">&raquo;</a>
                    </c:if>
                </li>
                <li>
                    <a href="<%=basePath%>/customer/findByPage?pageCode=${requestScope.page.totalPage}"><strong>末页</strong></a>
                </li>
            </ul>
            </div>
        </div>
    </form>




</div>
</body>
<script src="<%=basePath%>/lib/jquery-3.3.1.min.js"></script>
<script src="<%=basePath%>/lib/bootstrap.min.js"></script>
<script type="text/javascript">
    function trash(id) {
        alert("good");
        if (!id){
            alert("error");
        } else{
            $(".delSure").click(function () {
                $.ajax({
                    url: '<%=basePath%>/customer/delete/'+id,
                    // data:{
                    //     id:id,
                    //     _method:'DELETE'
                    // },
                    // data:JSON.stringify(id),
                    type: 'DELETE',
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data) {
                        // $("body").html(data.message);
                        alert("删除成功");
                    },
                    error: function () {
                        alert("失败了");
                    }
                });
            });
        }
    }


    // 编辑信息的方法
    function edit(id){
        alert("good");
        if (!id){
            alert("错误");
        } else{
            $.ajax({
                url:'<%=basePath%>/customer/findById/'+id,
                type:'GET',
                dataType:"json",  //标准json
                contentType: 'application/json;charset=UTF-8',
                success:function (data) {
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                    $("#telephone").val(data.telephone);
                    $("#address").val(data.address);
                    $("#remark").val(data.remark);
                    $("#editModal").modal('show');
                },
                error:function () {
                    alert("错误绑定");
                }
            });
        }
    }


    $(".editSure").click(function () {
        $("#form_edit").submit();
    });
</script>
</html>

处理增删改查

package susuper.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import susuper.pojo.Customer;
import susuper.pojo.PageBean;
import susuper.service.CustomerService;

/**
 * @author Susuper 果冻
 * @version 1.0
 * @date 2020/1/31 11:19
 * @description
 */
@Controller
@RequestMapping("/customer")
public class CustomerController {
    @Autowired
    private CustomerService customerService;
    @RequestMapping("/toSavePage")
    public ModelAndView toSavePage(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("page/save");
        return modelAndView;
    }

    @RequestMapping("/findByPage")
    public ModelAndView  findByPage(ModelAndView modelAndView, Customer customer,
                                    @RequestParam(value = "pageCode",required = false,defaultValue = "1") int pageCode,
                                    @RequestParam(value = "pageSize",required = false,defaultValue = "2") int pageSize) {

        System.out.println(customer+":pageCode:"+pageCode+"pageSize:"+pageSize);
        PageBean<Customer> byPage = customerService.findByPage(customer, pageCode, pageSize);
        System.out.println(byPage);
        modelAndView.addObject("page",byPage);
        modelAndView.setViewName("page/list");
        return modelAndView;
    }

    @ResponseBody
    @RequestMapping(value = "/delete/{id}",method = RequestMethod.DELETE)
    public ModelAndView delete(@PathVariable("id") Long id,ModelAndView modelAndView){
        System.out.println(id+"------------");
        try {
            customerService.delete(id);
            modelAndView.addObject("message","删除成功");
        }catch (Exception e){
            e.printStackTrace();
        }
        modelAndView.setViewName("page/list");
        return modelAndView;
    }

    @ResponseBody
    @RequestMapping(value = "/findById/{id}",method = RequestMethod.GET)
    public Customer findById(@PathVariable(value = "id") Long id) {
        System.out.println(id+"in");
        Customer customer_info = customerService.findById(id);
        if (customer_info != null) {
            return customer_info;
        }
        System.out.println("out");
        return null;

    }

}

处理分页

    public PageBean findByPage(Customer customer, int pageCode, int pageSize) {
//        return customerMapper.findByPage(customer);
        //使用插件
        PageHelper.startPage(pageCode,pageSize);
        Page<Customer> page= customerMapper.findByPage(customer);
//        return new PageBean(pageCode,(int))
        //
        return new PageBean(pageCode,(int)Math.ceil((double)(page.getTotal() / (double)pageSize)),
                (int)page.getTotal(),pageSize,page.getResult());
//        return new PageBean(pageCode,page.getTotal(),page.getResult());
    }

下面是vue+ssm的整合部分

前端

<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="plugins/select2/select2.css">
    <link rel="stylesheet" href="plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper" id="app">


    <!-- 页面头部 /-->



    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">


        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>

                <div class="box-body">

                    <!-- 数据表格 -->
                    <div class="table-box">

                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建"><i
                                            class="fa fa-file-o"></i> 新建
                                    </button>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
                                        开启
                                    </button>
                                    <button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
                                        屏蔽
                                    </button>
                                    <button type="button" class="btn btn-default" title="刷新"><i
                                            class="fa fa-refresh"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <!--工具栏/-->

                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting_desc">用户名</th>
                                <th class="sorting_asc sorting_asc_disabled">密码</th>
                                <th class="sorting_desc sorting_desc_disabled">性别</th>
                                <th class="sorting">年龄</th>
                                <th class="text-center sorting">邮箱</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="u in userList">
                                <td><input name="ids" type="checkbox"></td>
                                <td>{{u.id}}</td>
                                <td>{{u.username}}
                                </td>
                                <td>{{u.password}}</td>
                                <td>{{u.sex}}</td>
                                <td>{{u.age}}</td>
                                <td class="text-center">{{u.email}}</td>
                                <td class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs">详情</button>
                                    <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button>
                                </td>
                            </tr>

                            </tbody>
                            <!--模态窗口-->
                            <div class="tab-pane" id="tab-model">
                                <div id="myModal" class="modal modal-primary" role="dialog">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">用户信息</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="box-body">
                                                    <div class="form-horizontal">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">用户名:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.username">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">密码:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" :value="user.password">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">性别:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.sex">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">年龄:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" :value="user.age">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">邮箱:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.email">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/raphael/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js"></script>
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="plugins/knob/jquery.knob.js"></script>
<script src="plugins/daterangepicker/moment.min.js"></script>
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<script src="plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/fastclick/fastclick.js"></script>
<script src="plugins/iCheck/icheck.min.js"></script>
<script src="plugins/adminLTE/js/app.min.js"></script>
<script src="plugins/treeTable/jquery.treetable.js"></script>
<script src="plugins/select2/select2.full.min.js"></script>
<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="plugins/ckeditor/ckeditor.js"></script>
<script src="plugins/input-mask/jquery.inputmask.js"></script>
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/chartjs/Chart.min.js"></script>
<script src="plugins/flot/jquery.flot.min.js"></script>
<script src="plugins/flot/jquery.flot.resize.min.js"></script>
<script src="plugins/flot/jquery.flot.pie.min.js"></script>
<script src="plugins/flot/jquery.flot.categories.min.js"></script>
<script src="plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/user.js"></script>
<script>
    $(document).ready(function () {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }
    $(document).ready(function () {

        // 激活导航位置
        setSidebarActive("admin-datalist");

        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        // 全选操作
        $("#selall").click(function () {
            var clicks = $(this).is(':checked');
            if (!clicks) {
                $("#dataList td input[type='checkbox']").iCheck("uncheck");
            } else {
                $("#dataList td input[type='checkbox']").iCheck("check");
            }
            $(this).data("clicks", !clicks);
        });
    });
</script>
</body>

</html>

vue.js

new Vue({
    el:"#app",
    data:{
        user:{
            id:"",
            username:"",
            password:"",
            email:"",
            age:"",
            sex:""
        },
        userList:[]
    },
    methods:{
        findById:function (id) {
            var t = this;
            alert(id);
            // axios.get('/findById',{params:{id:id}})
            axios.get('/findById',{params:{id:id}})
                .then(function (value) {
                console.log(value);
                t.user = value.data;
                $("#myModal").modal("show");
             })
                .catch(function (reason) {
                    console.log(reason);
                })
        },
        update:function () {
            var t = this;
            // alert(user);
            axios.put('/updateUser',t.user)
                .then(function (value) {
                    t.findAll();
                })
                .catch(function (reason) {
                    console.log(reason);
                })
        },
        findAll:function () {
            var t = this;
            axios.get('/findAll')
                .then(function (response) {
                    t.userList = response.data;
                    console.log(response);
                })
                .catch(function (reason) {
                    console.log(reason)
                })
        }
    },
    created:function () {//当我们页面加载的时候触发请求，查询所有
        this.findAll();
    }
});

后端

package cn.susuper.controller;

import cn.susuper.pojo.User;
import cn.susuper.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @author Susuper 果冻
 * @version 1.0
 * @date 2020/2/1 14:29
 * @description
 */
@ResponseBody
@Controller
public class UserController {
    @Autowired
    private IUserService iUserService;

    @RequestMapping(value = "findAll")
    public List<User> findAll(){
        return iUserService.findAll();
    }

    @RequestMapping(value = "/findById",method = RequestMethod.GET)
    public User findById(Integer id){
        System.out.println(id);
        return iUserService.findById(id);
    }

    @RequestMapping(value = "/updateUser",method = RequestMethod.PUT)
    public void updateUser(@RequestBody User user){
        System.out.println(user);
        iUserService.updateUser(user);
    }
}
古德古德
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值