第08讲：Vue+axios

最新推荐文章于 2024-04-26 17:37:33 发布

Java秦老师

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量435

点赞数 1

分类专栏：第2阶段-动态网站开发文章标签： vue.js java servlet

本文链接：https://blog.csdn.net/qzc70919700/article/details/128915131

版权

第2阶段-动态网站开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、浅试axios

实现如图效果

思路分析：

图片.png
数据库中的数据：

使用vue请求servlet响应的数据效果：

1.1、后台开发

1.1.1、实体层开发

package entity;

public class Account {
    private String cardNo; //卡号
    private String passwd; //密码
    private float money; //余额

    public String getCardNo() {
        return cardNo;
    }

    public void setCardNo(String cardNo) {
        this.cardNo = cardNo;
    }

    public String getPasswd() {
        return passwd;
    }

    public void setPasswd(String passwd) {
        this.passwd = passwd;
    }

    public float getMoney() {
        return money;
    }

    public void setMoney(float money) {
        this.money = money;
    }
}

1.1.2、DAO层开发

接口：

package dao;

import entity.Account;

import java.util.List;

public interface AccountDAO {
    public List<Account> selectAll();
}

实现类：

package dao.impl;

import dao.AccountDAO;
import entity.Account;
import utils.BaseDAO;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class AccountDAOImpl extends BaseDAO implements AccountDAO {

    public List<Account> selectAll() {
        List<Account> acs = new ArrayList<Account>();
        String sql = "select * from t_atm";
        ResultSet rs = this.executeQuery(sql);
        try {
            while(rs.next()){
                Account a = new Account();
                a.setCardNo(rs.getString("card_no"));
                a.setPasswd(rs.getString("passwd"));
                a.setMoney(rs.getFloat("money"));
                acs.add(a);
            }
            this.closeAll(); //释放资源
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return acs;
    }
}

1.1.3、controller层开发

pom添加fastjson坐标

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.79</version>
</dependency>

创建Servlet

package controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONWriter;
import com.mysql.cj.xdevapi.JsonParser;
import com.mysql.cj.xdevapi.JsonString;
import dao.AccountDAO;
import dao.impl.AccountDAOImpl;
import entity.Account;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/account_list")
public class AccountServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理中文乱码问题
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
//        resp.setContentType("text/html;charset=utf8");
        resp.setContentType("application/json;charset=utf8");

        //向页面输出内容
        PrintWriter writer = resp.getWriter();

        //将数据查出来
        AccountDAO dao = new AccountDAOImpl();
        List<Account> acs = dao.selectAll();

        //向页面输出内容
        String str = JSON.toJSONString(acs);
        writer.print(str);

        writer.close(); //释放资源
    }
}

1.1.4、测试

1.2、开发前端vue

1.2.1、使用axios请求Servlet

在html中借助vue使用axios请求servlet

第1步：导入axios的js库

图片.png

第2步：使用axios发送请求

图片.png

全部代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assests/vue.min-v2.5.16.js"></script>
    <script src="assests/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>卡号</th>
                <th>余额</th>
                <th>密码</th>
            </tr>
            <tr v-for="ac in accounts">
                <td>{{ac.cardNo}}</td>
                <td>{{ac.money}}</td>
                <td>{{ac.passwd}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                accounts: null
            },
            //页面价值完成后执行
            created: function () {
                console.log("页面加载完成了")
                //发送请求，请求Sevlet获取数据
                axios.get("account_list").then(response => {
                    console.log(response);
                    this.accounts = response.data;
                });
            }
        });
    </script>
</body>
</html>

1.2.2、运行效果

将项目部署到tomcat中，浏览器访问html页面
http://localhost:8080/demo01.html

图片.png

Java秦老师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第08讲：Vue+axios

思路分析：数据库中的数据：使用vue请求servlet响应的数据效果：1.1.2、DAO层开发接口：实现类：1.1.3、controller层开发pom添加fastjson坐标创建Servlet1.1.4、测试1.2、开发前端vue1.2.1、使用axios请求Servlet在html中借助vue使用axios请求servlet1.2.2、运行效果将项目部署到tomcat中，浏览器访问html页面http://localhost:8080/demo01.html
复制链接

扫一扫