• 智慧社区管理系统03(用户列表增删查改)

    目录

    后端部分

    mapper层

     mapper sql文件

    Service层 

    接口

    Controller层

    前端部分 

    源码

     效果图​编辑

     

    后端部分

    mapper层

    1. package com.woniu.community.mapper;
    2.  
    3. import com.woniu.community.entity.User;
    4.  
    5. import java.util.List;
    6.  
    7. public interface UserMapper {
    8.     User selectByNameAndPwd(String username, String passwd);
    9.  
    10.     List selectAll(int start, int size);
    11.  
    12.     int  selectCount();
    13.  
    14.     int insertUser(User user);
    15.  
    16.     int updateUser(User user);
    17.  
    18.     int deleteUser(int id);
    19.  
    20.     User selectUserById(int id);
    21. }

     mapper sql文件

    1.  <insert id="insertUser">
    2.     insert into userinfo(username,password) values(#{username},#{password})
    3.     insert>
    4.     <update id="updateUser">
    5.         update userinfo set username=#{username},password=#{password} where id=#{id}
    6.     update>
    7.     <delete id="deleteUser">
    8.         delete from userinfo where id=#{id}
    9.     delete>
    10.     <select id="selectUserById" resultMap="userResult">
    11.         select * from userinfo where id=#{id}
    12.     select>

    Service层 

    接口

    1.  /**
    2.      * 添加用户
    3.      * @param user
    4.      * @return
    5.      */
    6.     HttpResult addUser(User user);
    7.  
    8.     /**
    9.      * 删除用户,根据id
    10.      * @param id
    11.      * @return
    12.      */
    13.     HttpResult removeUser(int id);
    14.  
    15.     /**
    16.      * 修改用户
    17.      * @param user
    18.      * @return
    19.      */
    20.     HttpResult updateUser(User user);
    21.  
    22.     /**
    23.      * 查询用户,根据id
    24.      * @param id
    25.      * @return
    26.      */
    27.     HttpResult getUserInfo(int id);
    1. @Override
    2.     public HttpResult addUser(User user) {
    3.         int count = userMapper.insertUser(user);//添加用户
    4.         HttpResult result = null;
    5.         if (count > 0 ) {
    6.             result = new HttpResult(null, 0, 200, "新增成功");
    7.         } else {
    8.             result = new HttpResult(null, 0, 500, "新增失败");
    9.         }
    10.         return result;
    11.     }
    12.  
    13.     @Override
    14.     public HttpResult removeUser(int id) {
    15.         int count = userMapper.deleteUser(id);//添加用户
    16.         HttpResult result = null;
    17.         if (count > 0 ) {
    18.             result = new HttpResult(null, 0, 200, "删除成功");
    19.         } else {
    20.             result = new HttpResult(null, 0, 500, "删除失败");
    21.         }
    22.         return result;
    23.     }
    24.  
    25.     @Override
    26.     public HttpResult updateUser(User user) {
    27.         int count = userMapper.updateUser(user);//添加用户
    28.         HttpResult result = null;
    29.         if (count > 0 ) {
    30.             result = new HttpResult(null, 0, 200, "修改成功");
    31.         } else {
    32.             result = new HttpResult(null, 0, 500, "修改失败");
    33.         }
    34.         return result;
    35.     }
    36.  
    37.     @Override
    38.     public HttpResult getUserInfo(int id) {
    39.         User user = userMapper.selectUserById(id);
    40.         HttpResult result = null;
    41.         if (user != null ) {
    42.             result = new HttpResult(user, 0, 200, null);
    43.         } else {
    44.             result = new HttpResult(null, 0, 500, "没有更多数据");
    45.         }
    46.         return result;
    47.     }

    Controller层

    1. @PostMapping("/add")
    2.     public HttpResult addUser(@RequestBody UserVO vo) {
    3.         User user = new User();
    4.         user.setUsername(vo.getUsername());
    5.         user.setPassword(vo.getPassword());
    6.         return userService.addUser(user);
    7.     }
    8.  
    9.     @RequestMapping("/remove")
    10.     public HttpResult removeUser(int id) {
    11.         return userService.removeUser(id);
    12.     }
    13.     @PostMapping("/update")
    14.     public HttpResult updateUser(@RequestBody User user) {
    15.         return userService.updateUser(user);
    16.  
    17.     }
    18.     @RequestMapping("/info")
    19.     public HttpResult getUserInfo(int id) {
    20.         return userService.getUserInfo(id);
    21.     }

    前端部分 

    源码

    列表(增加和修改的跳转,删除功能)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    7.     <link href="assets/css/right.css" rel="stylesheet">
    8.     <script src="assets/jquery-3.5.1.min.js">script>
    9.     <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
    10.     <script src="assets/vue.min-v2.5.16.js">script>
    11.     <script src="assets/vue-router.min-2.7.0.js">script>
    12.     <script src="assets/axios.min.js">script>
    13. head>
    14. <body>
    15. <div id="app" class="container">
    16.     <div class="row">
    17.         <div class="col-md-12" style="height: 50px; line-height: 50px;">
    18.             <button class="btn btn-info"@click="doAdd">新增button>
    19.         div>
    20.     div>
    21.     <div class="row">
    22.         <div class="col-md-12">
    23.             <table class="table table-striped">
    24.                 <caption>用户列表caption>
    25.                 <thead>
    26.                 <tr>
    27.                     <th>IDth>
    28.                     <th>用户名th>
    29.                     <th>操作th>
    30.                 tr>
    31.                 thead>
    32.                 <tbody>
    33.                 <tr v-for="u in userList">
    34.                     <td>{{u.id}}td>
    35.                     <td>{{u.username}}td>
    36.                     <td>
    37.                         <button class="btn btn-link"@Click="doUpdate(u.id)">修改button>
    38.                         <button class="btn btn-link"@Click="doDelete(u.id)">删除button>
    39.                     td>
    40.                 tr>
    41.                 tbody>
    42.             table>
    43.             <ul class="pagination" v-for="p in pageNum">
    44.                 <li v-if="p==pageIndex" class="active"><a @click="doGo(p)">{{p}}a>li>
    45.                 <li v-else="p==pageIndex" ><a @click="doGo(p)">{{p}}a>li>
    46.             ul>
    47.         div>
    48.     div>
    49. div>
    50. <script>
    51.     new Vue({
    52.         el: '#app',
    53.         data: {
    54.             userList: null,//用户列表
    55.             //用于分页
    56.             pageIndex: 1,//当前页数
    57.             pageSize: 10,//每页显示的条数
    58.             pageTotle: 0,//总条数
    59.             pageNum: 0,//页数(分页器)
    60.         },
    61.         methods: {
    62.             //请求用户列表
    63.             requestUserList(p) {
    64.                 //通过axios发送请求获取用户列表
    65.                 axios.get("http://localhost:8080/user/list?pageIndex=" + p + "&pageSize=" + this.pageSize).then(response => {
    66.                     console.log(response.data);
    67.                     this.userList = response.data.data;//给用户列表赋值
    68.                     this.pageTotle = response.data.pageTotle;//给总条数赋值
    69.                     //计算页数,通过Math.ceil函数,小数取整,向上取整
    70.                     this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
    71.                 });
    72.             },
    73.             //点击分页按钮
    74.             doGo(p){
    75.                 this.pageIndex=p;
    76.                 this.requestUserList(p);//调用请求用户列表的函数
    77.             },
    78.             //点击添加按钮时执行
    79.             doAdd() {
    80.                 //页面跳转
    81.                 window.parent.main_right.location.href="user_add_update.html";
    82.             },
    83.             //点击修改按钮时执行
    84.             doUpdate(id) {
    85.                 window.parent.main_right.location.href="user_add_update.html?id="+id;
    86.             },
    87.             //点击删除按钮时执行
    88.             doDelete(id) {
    89.                 //通过axios发送请求
    90.                 axios.get("http://localhost:8080/user/remove?id="+id).then(response=>{
    91.                     if (response.data.code==200){//删除成功
    92.                         this.pageIndex=1;//返回第一页
    93.                         this.requestUserList(this.pageIndex);//调用请求用户列表的函数
    94.                     }else{//删除失败
    95.                         alert(response.data.msg)
    96.                     }
    97.                 });
    98.             }
    99.         },
    100.  
    101.  
    102.         created: function () {
    103.             this.requestUserList(this.pageIndex);//调用请求用户列表的函数
    104.         }
    105.     });
    106. script>
    107. body>
    108. html>

    删除功能当删除成功的时候直接返回到第一页 

    修改和增加功能

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    7.     <link href="assets/css/right.css" rel="stylesheet">
    8.     <script src="assets/jquery-3.5.1.min.js">script>
    9.     <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
    10.     <script src="assets/vue.min-v2.5.16.js">script>
    11.     <script src="assets/vue-router.min-2.7.0.js">script>
    12.     <script src="assets/axios.min.js">script>
    13.     <script src="assets/date_picker.js">script>
    14. head>
    15. <body>
    16. <div id="app" class="container">
    17.     <div class="row">
    18.         <div class="col-md-8 col-md-offset-2">
    19.             <div class="row">
    20.                 <div class="col-md-12"
    21.                      style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
    22.                     {{title}}
    23.                 div>
    24.             div>
    25.             <div class="row">
    26.                 <div class="col-md-6 col-md-offset-3" style="height: 80px;">
    27.                     <label>用户名label>
    28.                     <input type="text" class="form-control" v-model="userName">
    29.                 div>
    30.             div>
    31.             <div class="row">
    32.                 <div class="col-md-6 col-md-offset-3" style="height: 80px;">
    33.                     <button class="btn btn-primary" @Click="doSave">保存button>
    34.                     <button class="btn btn-default" @Click="doCancel">取消button>
    35.                 div>
    36.             div>
    37.         div>
    38.     div>
    39. div>
    40. <script>
    41.     new Vue({
    42.         el: '#app',
    43.         data: {
    44.             title: null,
    45.             userId: null,//接受页面跳转传参
    46.             userName: null,
    47.             passwd: null,
    48.         },
    49.         methods: {
    50.             //保存按钮
    51.             doSave() {
    52.                 if (this.userId == null) {//添加
    53.                     axios.post("http://localhost:8080/user/add", {
    54.                         username: this.userName,
    55.                         password: "12345",
    56.                     }).then(response => {
    57.                         if (response.data.code == 200) {//添加成功
    58.                             //跳转到用户列表页面
    59.                             window.parent.main_right.location.href="user_list.html";
    60.                         } else {//添加失败
    61.                             alert(response.data.msg);
    62.                         }
    63.                     });
    64.                 } else {//修改
    65.                 //通过axios发送请求,修改用户
    66.                     axios.post("http://localhost:8080/user/update",{
    67.                         id:this.userId,
    68.                         username: this.userName,
    69.                         password: this.passwd,
    70.                     }).then(response => {
    71.                 if (response.data.code == 200) {//添加成功
    72.                     //跳转到用户列表页面
    73.                     window.parent.main_right.location.href="user_list.html";
    74.                 } else {//添加失败
    75.                     alert(response.data.msg);
    76.                 }
    77.             });
    78.                 }
    79.             },
    80.             //取消按钮
    81.             doCancel() {
    82.                 //返回上一个页面
    83.                 history.go(-1);
    84.             },
    85.         },
    86.         created: function () {
    87.             //获取页面跳转传的id
    88.             var url = window.location.href;
    89.             if (url.indexOf("id") != -1) {//是否传递了id
    90.                 this.userId = url.substring(url.indexOf("=") + 1);
    91.             }
    92.             console.log(this.userId);
    93.             if (this.userId == null) {//添加
    94.                 this.title = "添加用户";
    95.             } else {//修改
    96.                 this.title = "修改用户";
    97.                 //发送请求获取用户信息,回显数据
    98.                 axios.get("http://localhost:8080/user/info?id="+this.userId).then(response=>{
    99.                     this.userName=response.data.data.username;
    100.                     this.passwd=response.data.data.password;
    101.                 });
    102.             }
    103.         }
    104.     });
    105. script>
    106. body>
    107. html>

    先判断我们是点击的新增还是修改,之后当我们新增和修改取消的时候,我们直接返回上一级 

     效果图

     

     

     

     

     

     

  • 相关阅读:
    常见的近似算法
    win10搭建ESP8266_RTOS_SDK编译环境
    D - Snuke Panic (1D)
    The timestamp difference between admin and executor exceeds the limit.解决办法
    使用docker-compose部署wordpress
    DERT：End-to-End Object Detection with Transformers
    【爬虫】7.1. JavaScript动态渲染界面爬取-Selenium
    c＜7＞存储
    高新企业认定条件
    [SQL] union all
  • 原文地址：https://blog.csdn.net/magic_818/article/details/128084322