element无法展示数据，Gson中文乱码

最新推荐文章于 2023-09-06 17:06:49 发布

{Tomy}

最新推荐文章于 2023-09-06 17:06:49 发布

阅读量353

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73502703/article/details/130841583

版权

我老师的课程进度已经讲到了element模块。这个模块的运用，她说，无非就是去element官网搬东西，找到合适自己的，自己复制过来，根据自己的情况修改下一些要显示数据，直接用，框架是现成的。

（传送地址：Element - 网站快速成型工具）

在这里面就很多元素可以直接用，效果十分美观。

但在我自己的测试中，问题接踵而来：数据无法展示出来；展示出来之后，中文又无法显示，只显示一堆问号。在求助我的老师之后，问题才得到解决。

1.数据无法显示：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 导入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

    <!-- 导入 axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <!--引入element-plus的组件库-->
    <script src="//unpkg.com/element-plus"></script>


</head>
<body>
<div id="users">
    <el-button type="primary" @click="getUsers">主要按钮</el-button>
    <div class="userlist">
        <!--el-table标签：表格设置
                       :data：绑定对应数组名
                       border：加竖直的边框
                       style：设置总宽度占比
                       -->
        <el-table
                :data="usersA"
                border
                style="width: 100%">
            <!--el-table-column标签：列设置
                            prop：绑定属性名
                            label：设置表头名
                            width：
                                   -->
            <el-table-column
                    prop="quetionId"
                    label="试题编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="Title"
                    label="题目"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="OptionA"
                    label="A"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionB"
                    label="B"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionC"
                    label="C"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionD"
                    label="D"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="answer"
                    label="答案"
                    width="180">
            </el-table-column>

        </el-table>
    </div>
</div>
<script setup>
    const app = {
        data() {
            return {
                usersA: [],
            }
        },
        methods: {//方法区
            getUsers() {//方法
                axios.get('TryElement')//传入url地址
                    //请求响应成功执行的函数
                    .then(response => {//箭头函数
                            //从data属性中获得服务端回传数据
                            this.usersA = response.data;//将获得的数据赋值于data域中的users
                            console.log(this.usersA);
                        }
                        //请求或响应失败执行的函数
                    )
                    .catch(err => {
                            alert("错误");
                            console.log(err);
                        }
                    )
            }
        },
    }


    const vv = Vue.createApp(app)
    vv.use(ElementPlus)   //在vue3项目中需要先添加引用ElementPlus，后在挂载
    vv.mount('#users')
    // Vue.createApp(app).mount('#users')
</script>
</body>
</html>

Servlet文件：

package Try;

import com.google.gson.Gson;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "Servlet", value = "/TryElement")
public class TryElementServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
        // test为数据库名,?后面这句很重要,设置useSSl=false
        final String DB_URL = "jdbc:mysql://localhost:3306/user?characterEncoding=UTF8&autoReconnect=true&useSSL=false";

        // 数据库的用户名与密码，需要根据自己的设置
        final String USER = "root";
        final String PASS = "123456";

        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;
        List list = new ArrayList();  //相比于ArrayList<Quetion>  list = new ArrayList<>();前者能写的字母少，还能实现等效的功能
        try {
            //驱动
            Class.forName(JDBC_DRIVER);
            //打开连接
            conn = DriverManager.getConnection(DB_URL, USER, PASS);

            String sql = "select * from quetion";  //“*”不能省略
            stmt = conn.prepareStatement(sql);
            rs = stmt.executeQuery();
            while (rs.next()){
                Question quet = new Question();
                quet.setQuestionId(rs.getInt("quetionId"));
                quet.setTitle(rs.getString("title"));
                quet.setOptionA(rs.getString("optionA"));
                quet.setOptionB(rs.getString("optionB"));
                quet.setOptionC(rs.getString("optionC"));
                quet.setOptionD(rs.getString("optionD"));
                quet.setAnswer(rs.getString("answer"));
                list.add(quet);
            }
        }catch (SQLException throwables) {
            throwables.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) { /* ignored */}
            }
            if (stmt != null) {
                try {
                    stmt.close();
                } catch (SQLException e) { /* ignored */}
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) { /* ignored */}
            }
        }
        response.setContentType("application/json");
        Gson gson =new Gson();
        String json=gson.toJson(list);


        System.out.println(json);
        PrintWriter writer  =response.getWriter();
        writer.print(json);
        writer.close();

    }
}

由于我也是迷迷糊糊搬element的东西，我也不太懂，我就说一下的我Servlet文件：从quetion数据表里拿出所有数据给quet这个自定义类赋值，因为表里的数据不只一条，所以就拿个list存放，继而把list放进json，最后又把json写到response响应体里面，谁请求这个Servlet就可以用json里面的数据。上面我的HTML就是请求这个Servlet，然后用里面的数据。

运行结果：

就只有答案显示出来了，而数据表里的其他键值都没有展示。我无意间访问上面的那个Servlet文件，恍然大悟：prop属性中的字母大小写和json中的不一致！

<el-table-column
                    prop="quetionId"
                    label="试题编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="Title"
                    label="题目"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="OptionA"
                    label="A"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionB"
                    label="B"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionC"
                    label="C"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="OptionD"
                    label="D"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="answer"
                    label="答案"
                    width="180">
            </el-table-column>

把HTML中prop属性的字母改了之后：

都显示出来。

2.中文编译乱码：

有中文的地方为什么都是问号？

原来，我把数据写进json的时候，就没有用utf-8来编译中文。解决措施，只需要在Servlet文件中的第73行代码做如下修改：

response.setContentType("application/json;charset=utf-8");

结果全显示出来了！

还有一点我刚开始就犯的错误是：我直接从地址访问Servlet文件，出现乱七八糟的东西（下图），没有element元素，我刚开始还以为会重定向跳到HTML网页。倒腾了好一会，我老师说得直接访问HTML 文件才会显示。

总结：

1.element的prop属性中的单词（大小写和字母拼写）要和json 里的一致。

2.把数据写进响应体里的时候，有中文得 response.setContentType("application/json;charset=utf-8");有utf-8编译。

{Tomy}

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
element无法展示数据，Gson中文乱码

1.element的prop属性中的单词（大小写和字母拼写）要和json 里的一致。2.把数据写进响应体里的时候，有中文得response.setContentType("application/json;charset=utf-8");有utf-8编译。
复制链接

扫一扫