• JavaWeb学习——IDEA通过MyBatis搭建,Vue编写,axios交互的增删查改项目

    目录

    1 创建webapp结构

    打开如图所示的idea界面
    在这里插入图片描述

    找到archetype下的webapp，点击，next
    在这里插入图片描述

    再编写包命名以及存放路径
    在这里插入图片描述

    再点finish
    在这里插入图片描述

    然后会生成一些文件，像下面这样如果缺失了一些包的话去这里找
    在这里插入图片描述

    标准的是这样：
    在这里插入图片描述

    到此为止我们webapp结构就创建完毕了

    2 导入坐标

    在pom.xml里面导入需要的依赖

    <dependency>
            
            <groupId>junitgroupId>
            <artifactId>junitartifactId>
            <version>4.11version>
            <scope>testscope>
        dependency>
        <dependency>
            
            <groupId>org.mybatisgroupId>
            <artifactId>mybatisartifactId>
            <version>3.5.5version>
        dependency>
        <dependency>
            
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.46version>
        dependency>
        <dependency>
            
            <groupId>org.slf4jgroupId>
            <artifactId>slf4j-apiartifactId>
            <version>1.7.32version>
        dependency>
        <dependency>
            
            <groupId>ch.qos.logbackgroupId>
            <artifactId>logback-classicartifactId>
            <version>1.2.7version>
        dependency>
        <dependency>
            
            <groupId>ch.qos.logbackgroupId>
            <artifactId>logback-coreartifactId>
            <version>1.2.7version>
            
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
            <scope>providedscope>
        dependency>
        
        <dependency>
            <groupId>javax.servlet.jspgroupId>
            <artifactId>jsp-apiartifactId>
            <version>2.2version>
            <scope>providedscope>
        dependency>
        
        <dependency>
            <groupId>jstlgroupId>
            <artifactId>jstlartifactId>
            <version>1.2version>
        dependency>
        
        <dependency>
            <groupId>taglibsgroupId>
            <artifactId>standardartifactId>
            <version>1.1.2version>
        dependency>
dependency>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    同时我们还需要一个logback.xml文件放到resources目录下
    在这里插入图片描述

    
<configuration>
    
    <appender name="Console" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>[%level] %blue(%d{HH:mm:ss.SSS}) %cyan([%thread]) %boldGreen(%logger{15}) - %msg %npattern>
        encoder>
    appender>

    <logger name="cn.hoorus" level="DEBUG" additivity="false">
        <appender-ref ref="Console"/>
    logger>


    
    <root level="DEBUG">
        <appender-ref ref="Console"/>
    root>
configuration>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    运行处

    由于我们之前没有导入tomcat&maven的坐标，所以需要在pom.xml里面导一下（自带的几个功能可以删掉换成tomcat）

    <build>

        <finalName>login_casefinalName>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.mavengroupId>
                <artifactId>tomcat7-maven-pluginartifactId>
                <version>2.2version>
            plugin>
        plugins>
    build>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    3 补全与配置

    在resources下创建新文件mybatis.config.xml
    在这里插入图片描述

    然后从mybatis官网上找配置代码

    
DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
  <environments default="development">
    <environment id="development">
      <transactionManager type="JDBC"/>
      <dataSource type="POOLED">
        <property name="driver" value="${driver}"/>
        <property name="url" value="${url}"/>
        <property name="username" value="${username}"/>
        <property name="password" value="${password}"/>
      dataSource>
    environment>
  environments>
  <mappers>
    <mapper resource="org/mybatis/example/BlogMapper.xml"/>
  mappers>
configuration>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    然后需要自己改造

    在这里插入图片描述

    而这里的映射文件，需要我们后面再修改路径
    在这里插入图片描述

    现在补全Web文件夹
    在这里插入图片描述

    好的补完后我们开始编写实体类对象，在pojo里面新建一个User，里面使用快捷键alt+ins来创建一些构造函数以及方法

    package cn.calendo.pojo;

public class User {
    private Integer id;
    private String userName;
    private String passWord;
    private String userGender;
    private String userAddress;

    public User() {

    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }

    public String getUserGender() {
        return userGender;
    }

    public void setUserGender(String userGender) {
        this.userGender = userGender;
    }

    public String getUserAddress() {
        return userAddress;
    }

    public void setUserAddress(String userAddress) {
        this.userAddress = userAddress;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", userName='" + userName + '\'' +
                ", passWord='" + passWord + '\'' +
                ", userGender='" + userGender + '\'' +
                ", userAddress='" + userAddress + '\'' +
                '}';
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    配置包扫描映射xml，接下来是UserMapper.xml映射文件，在resources下面创建对应文件夹，再把resources里面加上映射文件UserMapper.xml
    在这里插入图片描述

    然后再去mybatis-config.xml里面修改UserMapper.xml的位置坐标即可
    在这里插入图片描述

    这时候UserMapper.xml会爆红，因为我们少了对应的映射接口，需要在mapper层里创建UserMapper.java（这是一个接口类型的！因为我们在里面只写注解，映射以及方法名！）
    在这里插入图片描述

    然后我们回去发现UserMapper.xml不爆红了

    好了到此为止我们的结构都创建完毕了

    4 编写前端（vue&element）

    这里不多说，我们直接上代码（由于用了vue脚本和element组件所以需要自己从官网下载）

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    style>

head>
<body>
<div id="app">

    
    

    
    
    
    
    
    

    
    
    

    
    
    

    
    
    
    

    

    <el-row>

        <el-button type="danger" plain>批量删除el-button>
        <el-button type="primary" plain @click="(dialogVisible = true)" id="addUser">新增el-button>

    el-row>

    
    <el-dialog
            title="修改用户"
            :visible.sync="dialogVisible"
            width="30%"
            ref="modify"
    >

        <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户昵称">
                <el-input v-model="user.userName">el-input>
            el-form-item>

            <el-form-item label="用户密码">
                <el-input v-model="user.passWord">el-input>
            el-form-item>

            <el-form-item label="性别">
                <el-input v-model="user.userGender">el-input>
            el-form-item>

            <el-form-item label="地址">
                <el-input type="textarea" v-model="user.userAddress">el-input>
            el-form-item>

            <el-form-item>
                <el-button type="primary" @click="modify" v-if="remodify">修改el-button>
                <el-button type="primary" @click="addUser" v-if="readdUser">提交el-button>
                <el-button @click="dialogVisible = false">取消el-button>
            el-form-item>
        el-form>
    el-dialog>

    
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-row
                    type="selection"
                    width="55">
            el-table-row>
            <el-table-column
                    type="index"
                    width="50">
            el-table-column>
            <el-table-column
                    prop="id"
                    label="唯一码"
                    align="center"
            >
            el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名称"
                    align="center"
            >
            el-table-column>
            <el-table-column
                    prop="passWord"
                    label="用户密码"
                    align="center"
            >
            el-table-column>
            <el-table-column
                    prop="userGender"
                    align="center"
                    label="性别">
            el-table-column>
            <el-table-column
                    prop="userAddress"
                    align="center"
                    label="地址">
            el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <el-button type="primary" @click="updateUser(scope.row)" id="modify">修改el-button>
                    <el-button type="danger" @click="deleteById(scope.row)">删除el-button>
                template>

            el-table-column>

        el-table>
    template>

    
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    el-pagination>

div>


<script src="js/vue.js">script>
<script src="element-ui/lib/index.js">script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js">script>



<script>
    new Vue({
        el: "#app",
        mounted() {
            //当页面加载完成后发生异步请求获取数据
            this.selectAll();
        },
        methods: {
            modify() {
                // console.log(this.brand);
                //发送ajax请求，添加数据
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/login_case/User_UpdateServlet",
                    data: _this.user,
                }).then(function (response) {
                    if (response.data === "success") {
                        //关闭窗口
                        _this.dialogVisible = false
                        //重新查询数据
                        _this.selectAll();
                        // 下面是element抬头显示
                        _this.$message({
                            message: '成功新增一条数据',
                            type: 'success'
                        });
                    } else {
                        _this.$message({
                            message: '新增失败！',
                            type: 'error'
                        });
                    }
                })
            },
            updateUser(data) {
                var _this = this;
                // console.log(data.id);
                axios({
                    method: "post",
                    url: "http://localhost:8080/login_case/User_SelectByIdServlet",
                    data: data.id,
                }).then(function (response) {
                    if (response.data !== null) {
                        _this.dialogVisible = true
                        // response.data.userName
                        _this.user = response.data
                        // console.log(_this.data)
                        // console.log(response.data)
                        // console.log(_this.user)
                    } else {
                        _this.$message({
                            message: '出错了，请重试！',
                            type: "warning",
                        })
                    }
                })
            },
            deleteById(data) {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/login_case/User_DeleteUserServlet",
                    data: data.id,
                }).then(function (response) {
                    if (response.data === "success") {
                        _this.selectAll();
                        _this.$message({
                            message: '成功删除一条数据',
                            type: 'success'
                        });
                    } else {
                        _this.$message({
                            message: '删除失败！',
                            type: 'error'
                        });
                    }
                })
            },
            selectAll() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/login_case/User_SelectAllUserServlet",
                }).then(function (response) {
                    _this.tableData = response.data;
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.user);
            },
            // 添加数据
            addUser() {
                // console.log(this.brand);
                //发送ajax请求，添加数据
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/login_case/User_AddUserServlet",
                    data: _this.user,
                }).then(function (response) {
                    if (response.data === "success") {
                        //关闭窗口
                        _this.dialogVisible = false
                        //重新查询数据
                        _this.selectAll();
                        // 下面是element抬头显示
                        _this.$message({
                            message: '成功新增一条数据',
                            type: 'success'
                        });
                    } else {
                        _this.$message({
                            message: '新增失败！',
                            type: 'error'
                        });
                    }
                })
            },

            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        },
        data() {
            return {
                remodify: true,
                readdUser: true,
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                //选中的id
                selectedId: '',
                // 品牌模型数据
                user: {
                    id: '',
                    userName: '',
                    passWord: '',
                    userGender: '',
                    userAddress: '',
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{}]
            }
        }
    })

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338

    5 说一下编写位置与规范

    增add()&查select()

    我们对于新增的逻辑是：void add(对象)，它需要引入一个对象格式的数据来对数据库进行添加，而且，它不需要返回值！因此，在mapper层内，我们就可以很容易地写出增这个接口

    //注册一个用户
    @Insert("insert into table1 values(null,#{userName}, #{passWord}, #{userGender}, #{userAddress})")
    @ResultMap("userResultMap")
    void addUser(User user);

    • 1
    • 2
    • 3
    • 4
    //查询所有用户
    @Select("select * from 20220806lige.all_user")
    @ResultMap("userResultMap")
    List<User> selectAllUser();

    • 1
    • 2
    • 3
    • 4

    所以对应的service思路是：
    add的service

    public void addUser(User user) {//实现一下add这个方法
        SqlSession sqlSession = factory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);//得到代理对象
        mapper.addUser(user);//不需要返回任何值
        sqlSession.commit();//除了select其它都要commit一下
        sqlSession.close();
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    select的service

    public List<User> selectAllUser() {
        //获取sqlsession对象
        SqlSession sqlSession = factory.openSession();
//        通过动态代理开发模式，我们只编写一个接口，不写实现类，我们通过 getMapper()
//        方法最终获取到 org.apache.ibatis.binding.MapperProxy 代理对象，然后执行功能，
//        而这个代理对象正是 MyBatis 使用了 JDK 的动态代理技术，帮助我们生成了代理实现类对象。从而可以进行相关持久化操作。
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
//        调用方法，并返回users的list值
        List<User> users = mapper.selectAllUser();
//        关闭会话
        sqlSession.close();
        return users;
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    add的servlet：

    //1接收用户数据
        BufferedReader bufferedReader = request.getReader();
        //json字符串
        String json = bufferedReader.readLine();
        //转化为User对象
        User users = JSON.parseObject(json, User.class);
        //调用方法
        service.addUser(users);
        //下面都是response
        response.getWriter().write("success");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    select的servlet

    				//调用方法
        List<User> users = service.selectAllUser();
        //转为json
        String jsonString = JSON.toJSONString(users);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    `跑起项目后测试请求成功转发
    在这里插入图片描述
    在这里插入图片描述

    数据库成功插入，表明这个方法成功实现！
    在这里插入图片描述

    删delete()

    首先还是编写dao层

    //注销一个用户，只要返回一个id即可删除一行
    @Delete("delete from 20220806lige.all_user where id = #{id}")
    @ResultMap("userResultMap")
    void deleteUser(int id);

    • 1
    • 2
    • 3
    • 4

    然后是service层

    public void deleteUser(int id) {
        SqlSession sqlSession = factory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        mapper.deleteUser(id);
        sqlSession.commit();
        sqlSession.close();
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    然后就是servlet

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1接收用户数据
        BufferedReader bufferedReader = request.getReader();
        //json字符串
        String json = bufferedReader.readLine();
        //转化为int对象
        int id = JSON.parseObject(json, int.class);
        //调用方法
        service.deleteUser(id);
        //下面都是response
        response.getWriter().write("success");
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    前端：
    在这里插入图片描述然后点击删除，成功：
    在这里插入图片描述

    改update()

    我们可以利用新增里面的数据对话框进行修改提交，逻辑为这样：①点击修改，触发对话框显示，②并把修改那一行的数据填充到对话框内，③接下来就是用户自己修改，修改完后提交，④重新select即可
    由于改这个方法有点复杂，我们可以看作是根据id选择一条记录，并由发送给selectById的servlet来查询到一条数据，并回显给表单提交页面，再由add方法接管
    因此我们需要增加底层代码：
    UserMapper层：

    //修改用户信息
    @Update("update 20220806lige.all_user set username = #{userName},password=#{passWord},gender=#{userGender},address=#{userAddress} where id = #{id}")
    @ResultMap("userResultMap")
    void updateUser(User user);

    • 1
    • 2
    • 3
    • 4

    service:

    public void updateUser(User user) {
        SqlSession sqlSession = factory.openSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        mapper.updateUser(user);
        sqlSession.commit();
        sqlSession.close();
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    selectByIdServlet（回显数据的servlet）

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1接收用户数据
        BufferedReader bufferedReader = request.getReader();
        //json字符串
        String json = bufferedReader.readLine();
        //转化为int对象
        int id = JSON.parseObject(json, int.class);
        //调用方法
        User user = service.selectById(id);

        //转为json
        String jsonString = JSON.toJSONString(user);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    updateServlet（增加数据的servlet）

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1接收用户数据
        BufferedReader bufferedReader = request.getReader();
        //json字符串
        String json = bufferedReader.readLine();
        //转化为User对象
        User users = JSON.parseObject(json, User.class);
        //调用方法
        service.updateUser(users);
        //下面都是response
        response.getWriter().write("success");
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    这里说一下，由于本人尚未系统学习前端，因此不知道如何给按钮添加可切换的触发事件，导致修改数据会让修改后的数据执行了addUser方法，导致新增一条数据！

    6 编写方式

    Dao层（UserMapper.java与UserMapper.xml）

    这个显而易见的是写CRUD操作的地方，而且我们是用了注解（简化sql）以及映射，然后只要提供一个方法即可
    我们显而易见的是，add方法,dlt方法,upd方法返回值为void，slt方法与返回值为List<你实体类名>
    在这里插入图片描述

    这里我们要说一下，映射需要我们在UserMapper.xml里面编写，接下来是编写规则：
    在这里插入图片描述

    service层（UserService.java与SqlSessionFactoryUtils.java）

    我们命名一个service放在service包下，命名SqlSessionFactoryUtils.java放在utils包下
    在这里插入图片描述

    将下列sqlsession工厂(mybatis需求)创建的代码放在里面然后导入(alt+enter)即可（我们做了抽出，不在每个service里面频繁调用）

    package cn.calendo.utils;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;

    static {
        //静态代码块会随着类的加载而自动执行，且只执行一次

        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static SqlSessionFactory getSqlSessionFactory() {
        return sqlSessionFactory;
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    这样的话我们就只要在service里面通过factory来获取sqlSessionFactory对象以及对方法进行调用就好了

    编写service

    我们因为建好了sqlsession工厂，所以在service里面调用一下，然后写一下逻辑即可，现在我们来演示查询全部的service
    下面这句话（创建工厂对象）作为service的头
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    然后我们编写service里面的那些方法来实现mapper的接口：

    public List<User> selectAllUser() {
        //获取sqlsession对象
        SqlSession sqlSession = factory.openSession();
//        通过动态代理开发模式，我们只编写一个接口，不写实现类，我们通过 getMapper() 
//        方法最终获取到 org.apache.ibatis.binding.MapperProxy 代理对象，然后执行功能，
//        而这个代理对象正是 MyBatis 使用了 JDK 的动态代理技术，帮助我们生成了代理实现类对象。从而可以进行相关持久化操作。
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//        调用方法，并返回users的list值
        List<User> users = userMapper.selectAllUser();
//        关闭会话
        sqlSession.close();
        return users;
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    编写Web层（servlet）

    我们发现idea其实知道我们需要什么，所以直接用它给我们提供的servlet模板创建即可
    在这里插入图片描述

    我们命名一下
    在这里插入图片描述

    我们就可以发现其实已经帮我们写好了doget与dopost方法了
    然后我们再写方法即可
    在这里插入图片描述

  • 相关阅读:
    Linux内核代码中常用的数据结构
    深度学习——池化层笔记+代码
    LC1713. 得到子序列的最少操作次数（java - 动态规划）
    【SpringBoot】搭建第一个SpringBoot项目 - group、artifact等项目元数据详解
    MySQL 表分区使用实践
    【LeetCode刷题-滑动窗口】--1456.定长子串中元音的最大数目
    遥感基础与电磁波性质
    基于JAVA的农产品生鲜销售管理系统【数据库设计、源码、开题报告】
    python+django+vue房屋租赁系统 8gwmf
    RabbitMQ 常见问题
  • 原文地址：https://blog.csdn.net/qq_52480906/article/details/126299555