JavaWeb + Ajax + HTML +Vue 添加数据数据与查询数据（Vue小节案例）

最新推荐文章于 2024-05-14 10:50:15 发布

想给世界留下 1bite 的印象

最新推荐文章于 2024-05-14 10:50:15 发布

阅读量598

点赞数

分类专栏： Vue AJAX Servlet 文章标签： vue.js ajax html java servlet

本文链接：https://blog.csdn.net/qq_51272114/article/details/126848847

版权

Servlet 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 1 订阅

订阅专栏

AJAX

4 篇文章 0 订阅

订阅专栏

本次文章是此下文章的进阶版本！（后端，maven配置，mabatis配置，servlet配置都在这篇文章里面）

JavaWeb + Ajax + HTML 添加数据数据与查询数据，（利用axios响应与json数据传输）_我的猴子的博客-CSDN博客

前提，因为只有前端有改动（增加了一些Vue的特性），所以仅仅展示前端代码，与pom文件

brand2.html（方式一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--
               使用v-for来进行遍历 tr+数据
        -->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{ i + 1 }}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.order}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>

</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            var _this = this;
            //页面加载完成之后，相当于window.load，发送异步请求，查询数据
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp){  //回调函数
                //回调函数相应的集合，这个brands要给到v-for里面使用，所以把这个brands变成一个模型，所以这个数据就得在data里面声明一下
                //this.brands = resp.data;此处的this指向的的是window对象，(axios是由浏览器发出，，即axios的调用者是window对象)
                //如何让this指代为Vue对象？，在axios外围，在Vue的内部写一个this就好了，可以看mounted生命周期的第一行代码
                _this.brands = resp.data;
            })
        },
    });
</script>
</body>
</html>

brand2.html（方式二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--        <div @click="add(e)">{{brands[0]}}</div>-->
        <tr v-for="(brand,i) in brands" :key="brand" align="center">
            <td>{{ i + 1 }}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.order}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.status}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>

</div>
<script src="js/axios-0.18.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.js"
        integrity="sha512-TpgbLHXaTCAZ7ULhjopb1PveTz5Jx6KEQUtMfXhV0m0EArh+6O8ybZjjDN1Yug6oagN6iFm6EoMjuYSiFr0qXQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                brands: []
            }
        },

        mounted() {

            //页面加载完成之后，相当于window.load，发送异步请求，查询数据
             this.getBrandList()
        },

        methods: {

            add: function (e) {
                console.log((e))
            },
            getBrandList: async function () {
                let result = await axios({
                    method: "get",
                    url: "http://localhost:8080/brand-demo/selectAllServlet"
                }).then(function (resp) {
                    console.log((this))

                    this.brands = resp.data
                }.bind(this))
            }
        }
    })

</script>
</body>
</html>

addBrand3.html

添加了Vue的v-model模型，用于绑定数据，然后把数据发送到axios的data发送数据，，后端接收响应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form id="brand" action="" method="post">
    品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
    企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
    排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
    状态：
    <input type="radio" name="status" value="0" v-model="brand.status">禁用
    <input type="radio" checked="checked" name="status" value="1" v-model="brand.status">启用<br>

    <input type="button" id="btn" value="提交" @click="submitForm">
</form>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#brand",
        data() {
            return {
                brand: {}
            }
        },
        methods: {
            submitForm() {
                //发送ajax请求
                var _this = this;//把作用对象上升到Vue，而不是window
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-demo/addServlet",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        window.alert("录入成功")
                        location.href = "http://localhost:8080/brand-demo/brand2.html";
                    }
                })
            }
        }
    });
</script>
</body>
</html>

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>brand-demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>18</maven.compiler.source>
        <maven.compiler.target>18</maven.compiler.target>
    </properties>
    <packaging>war</packaging>

    <build>
        <plugins>
            <!--tomcat 的插件 （相当于在maven内部放置了个tomcat服务器）-->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>17</source>
                    <target>17</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--apache提供的与io适配的工具类，好用-->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <!--mybatis依赖-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.29</version>
        </dependency>
        <!--junit依赖-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>Test</scope>
        </dependency>
        <!--添加slf4j-api日志api-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.36</version>
        </dependency>
        <!--添加logback-classic依赖-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!--添加logback-core依赖-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-core</artifactId>
            <version>1.2.3</version>
        </dependency>
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
    </dependencies>
</project>