基于vue-ElementUI-javaweb_servlet-mysql简单小例子实现增删改查

最新推荐文章于 2023-10-10 00:56:30 发布

nuurgg

最新推荐文章于 2023-10-10 00:56:30 发布

阅读量1.6k

点赞数 5

分类专栏： vue 文章标签： vue java

本文链接：https://blog.csdn.net/nuurgg/article/details/109864688

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ElementUI-javaweb_servlet-mysql简单小例子实现增删改查

前言
一、mysql部分
- 1.新建表
二、javaweb_servlet部分
ElementUI部分
- App.vue部分
- main.js部分
总结
- 第一步：前台填写数据并发送
- 第二步后台获取数据并处理
遇到的问题
- 关于前台到后台传数据的问题
- 关于fastjson

前言

最后做出来的页面如下：
在这里插入图片描述

以下是本篇文章正文内容

一、mysql部分

mysql的主要工作是写一个数据表来提供数据，当servlet被访问的时候对数据库进行增删改查操作

1.新建表

此处我们使用数据库的可视化操作来创建表，结果如下图
在这里插入图片描述

二、javaweb_servlet部分

1.查询部分

此处只给出doPost部分

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
        response.setHeader("Access-Control-Allow-Origin", "*"); // 解决请求头跨域问题
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Access-Control-Allow-Headers","Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Current-Page");
		response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
		//jdbc工具类具体实现自己可以写
		jdbc jd = new jdbc();
	    String sql = "select rate, title, id, url, watched, descr, type1 from movie"; 
	    try {
			jd.listAll(response, sql);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

2.添加数据

代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Access-Control-Allow-Origin", "*");
		/* 星号表示所有的域都可以接受， */
		response.setHeader("Access-Control-Allow-Methods", "GET,POST");
		request.setCharacterEncoding("utf-8");
		//下面这一行代码是获得前台发送的数据
		String tempid = request.getParameter("id");
		int id = Integer.parseInt(tempid);
		String temprate = request.getParameter("rate");
		double rate = Double.parseDouble(temprate);
		String title = request.getParameter("title");
		String url = request.getParameter("url");
		String watched = request.getParameter("watched");
		String descr = request.getParameter("descr");
		String type1 = request.getParameter("type1");
	
		jdbc jd = new jdbc();
	    String sql = "insert into movie (rate, title, id, url, watched, descr, type1) values(?,?,?,?,?,?,?)"; 
	    try {
			jd.update(sql, rate, title, id, url, watched, descr, type1);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

3.修改数据

代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("utf-8");
		response.setHeader("Access-Control-Allow-Origin", "*");
		/* 星号表示所有的域都可以接受， */
		response.setHeader("Access-Control-Allow-Methods", "GET,POST");
		
		String tempid = request.getParameter("id");
		int id = Integer.parseInt(tempid);
		String temprate = request.getParameter("rate");
		double rate = Double.parseDouble(temprate);
		String title = request.getParameter("title");
		String url = request.getParameter("url");
		String watched = request.getParameter("watched");
		String descr = request.getParameter("descr");
		String type1 = request.getParameter("type1");
		
		jdbc jd = new jdbc();
	    String sql = "update movie set rate = ?, title = ?, id = ?, url = ?, watched = ?, descr = ?, type1 = ? where id = ?"; 
	    try {
			jd.update(sql, rate, title, id, url, watched, descr, type1, id);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

4.删除数据

代码如下：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Access-Control-Allow-Origin", "*");
		/* 星号表示所有的域都可以接受， */
		response.setHeader("Access-Control-Allow-Methods", "GET,POST");
		String tempid = request.getParameter("id");
		int id = Integer.parseInt(tempid);
		jdbc jd = new jdbc();
	    String sql = "delete from movie where id = ?"; 
	    try {
			jd.update(sql, id);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	    
	}

ElementUI部分

App.vue部分

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="电影管理" name="first">
  <div>
    <el-table
            v-loading="loading"
            :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column
              label="#"
              type="index"
              width="180"
              >
      </el-table-column>
      <el-table-column
              prop="id"
              label="Id"
              sortable
              width="180">
      </el-table-column>
      <el-table-column
              prop="title"
              label="Title"
              sortable
              width="180">
      </el-table-column>
      <el-table-column
              prop="type"
              label="type"
              width="180">
      </el-table-column>
      <el-table-column
              prop="watched"
              label="是否看过"
              width="180">
      </el-table-column>
      <el-table-column
              prop="rate"
              label="Score"
              sortable
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popover
                  placement="top-start"
                  title="点击进入电影详情界面"
                  width="180"
                  trigger="hover">
                <p>电影描述：{{scope.row.descr}}</p>
          <el-button
                  size="mini"
                  type="primary"
                  :loading="detailloading"
                  slot="reference"
                  @click="handledeatil(scope.$index, scope.row)">详情</el-button>
          </el-popover>
          <el-popover
                  placement="top-start"
                  title="增加"
                  width="10"
                  trigger="hover">
            <p>点击进入增加页面</p>
            <el-button
                    size="mini"
                    type="success"
                    :loading="addloading"
                    slot="reference"
                    @click="handleadd(scope.$index, scope.row)">增加</el-button>
          </el-popover>
          <el-popover
                  placement="top-start"
                  title="编辑"
                  width="180"
                  trigger="hover">
            <p>点击进入编辑界面</p>
            <el-button
                    size="mini"
                    type="info"
                    :loading="editloading"
                    slot="reference"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </el-popover>
          <el-popover
                  placement="top-start"
                  title="删除"
                  width="180"
                  trigger="hover">
            <p>点击进入删除页面</p>
            <el-button
                    size="mini"
                    type="danger"
                    :loading="Deleteloading"
                    slot="reference"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="title" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="url" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="score" :label-width="formLabelWidth">
          <el-input placeholder="请输入数字不超过八位" v-model="form.score" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input  placeholder="请输入数字不超过八位" v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否看过" :label-width="formLabelWidth">
          <el-radio v-model="radio" label="看过">我看过</el-radio>
          <el-radio v-model="radio" label="没看过">没看过</el-radio>
        </el-form-item>
        <el-form-item label="电影描述" :label-width="formLabelWidth">
          <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容不超过五个字"
                  v-model="textarea">
          </el-input>
        </el-form-item>
        <el-form-item label="电影种类" :label-width="formLabelWidth">
          <el-select v-model="value" placeholder="请选择" >
            <el-option
                    :label-width="formLabelWidth"
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">修改</el-button>
        <el-button type="primary" @click="submitadd">添加</el-button>
      </div>
    </el-dialog>
  </div>

    </el-tab-pane>
    <el-tab-pane label="主页" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="介绍" name="third">角色管理</el-tab-pane>
  </el-tabs>
</template>
<script>
    export default {
        data () {
            return {
                activeName: 'first',
                loading:true,
                textarea: '',

                radio: '1',

                value: "",
                options: [{
                    value: '恐怖',
                    label: '恐怖'
                }, {
                    value: '玄幻',
                    label: '玄幻'
                }, {
                    value: '搞笑',
                    label: '搞笑'
                }, {
                    value: '僵尸',
                    label: '僵尸'
                }, {
                    value: '鬼怪',
                    label: '鬼怪'
                }],

                dialogFormVisible:false,
                addloading:false,
                editloading:false,
                detailloading:false,
                Deleteloading:false,
                pagesize:10,
                currentPage:1,
                pageSizes:[1,2,3,4],
                PageSize:10,
                tableData:[{}],
                form: {
                   title:"",
                    score:"",
                    id:"",
                    url:"",

                },
                formLabelWidth: '120px'

            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            submitadd:function(){
                this.dialogFormVisible = true;
                this.$confirm('此操作将添加, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    const url = `http://localhost:8080/web/AddServlet`;
                    fetch(url,{
                        method:'post',
                        mode:"no-cors",
                        body:`id=${this.form.id}&title=${this.form.title}&rate=${this.form.score}&url=${this.form.url}&watched=${this.radio}&descr=${this.textarea}&type1=${this.value}`,
                        headers:{'Content-Type': 'application/x-www-form-urlencoded',}
                    }).then(res => {
                        if (res.ok) {
                            //如果响应状态码为200，表示响应成功
                            // json(）方法返回Promise对象，其值被下一个then(）方法接收
                            return res.json();
                        }
                        else {
                            console.error(res.status);
                        }
                    }).then(res => {
                        window.console.log(res);
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.getdata()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',

                    });
                    this.dialogFormVisible = true;
                })
                this.dialogFormVisible = false;
                this.getdata()

            },
            submit:function(){
                this.dialogFormVisible = true;
                this.$confirm('此操作将永久修改该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const url = `http://localhost:8080/web/editServlet`;
                    fetch(url,{
                        method:'post',
                        mode:"no-cors",
                        body:`id=${this.form.id}&title=${this.form.title}&rate=${this.form.score}&url=${this.form.url}&watched=${this.radio}&descr=${this.textarea}&type1=${this.value}`,
                        headers:{'Content-Type': 'application/x-www-form-urlencoded',}
                    }).then(res => {
                        if (res.ok) {
                            //如果响应状态码为200，表示响应成功
                            // json(）方法返回Promise对象，其值被下一个then(）方法接收
                            return res.json();
                        }
                        else {
                            console.error(res.status);
                        }
                    }).then(res => {
                        window.console.log(res);
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        })
                        this.getdata()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改',

                    });
                    this.dialogFormVisible = true;
                })
                this.dialogFormVisible = false;
                this.getdata()
            },
            handleSizeChange(val) {
                this.PageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            getdata:function () {
                // this.loading = true;
                fetch('http://localhost:8080/web/register/servlet').then(response => {
                    if (response.ok) {
                        //如果响应状态码为200，表示响应成功
                        // json(）方法返回Promise对象，其值被下一个then(）方法接收
                        return response.json();
                    }
                    else {
                        console.error(response.status);
                    }
                }).then(content => {
                    window.console.log(content);
                    this.tableData = content;
                    this.loading = false;
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.editloading = true;
                this.dialogFormVisible = true;
                this.form.title = row.title;
                this.form.score = row.rate;
                this.form.id = row.id;
                this.form.url = row.url;
                this.value = row.type;
                this.radio = row.watched;
                this.textarea = row.descr;
                this.editloading = false;



            },
            handleDelete: function (index, row) {
                this.Deleteloading = true;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const url = `http://localhost:8080/web/DeleteServlet`;
                    fetch(url,{
                        method:'post',
                        mode:"no-cors",
                        body:`id=${row.id}`,
                        headers:{'Content-Type': 'application/x-www-form-urlencoded',}
                    }).then(res => {
                        if (res.ok) {
                            //如果响应状态码为200，表示响应成功
                            // json(）方法返回Promise对象，其值被下一个then(）方法接收
                            return res.json();
                        }
                        else {
                            console.error(res.status);
                        }
                    }).then(res => {
                        window.console.log(res);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.getdata()
                        this.Deleteloading = false;
                    })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    console.log(index, row);
                    this.Deleteloading = false;
                })
            },
            handleadd(index, row) {
                this.addloading = true;
                this.dialogFormVisible = true;
                // this.form.title = row.title;
                // this.form.score = row.rate;
                // this.form.id = row.id;
                // this.form.url = row.url;
                this.addloading = false;
                console.log(index, row);
            },
            handledeatil(index, row) {
                this.detailloading = true;
                window.location.href=`${row.url}`;
                console.log(index, row);
            },

        },
        created(){
            this.getdata()
        }
        }
</script>

main.js部分

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import store from './store/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import router from  './router/index.js'
new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

总结

我们从一次点击增加按钮的实现来描述一下数据的流动

第一步：前台填写数据并发送

点击增加后弹出一个表单
在这里插入图片描述
在里面填写表单的相关信息：

填写后点击添加会触发相应事件：相关代码如下

submitadd:function(){
                this.dialogFormVisible = true;//这个属性设置为true，表单显示
                this.$confirm('此操作将添加, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    const url = `http://localhost:8080/web/AddServlet`;
                    fetch(url,{
                        method:'post',//注意这里的方法post才能在body上携带数据
                        mode:"no-cors",
                        body:`id=${this.form.id}&title=${this.form.title}&rate=${this.form.score}&url=${this.form.url}&watched=${this.radio}&descr=${this.textarea}&type1=${this.value}`,//这里我采用了麻烦的方式，还有另外一种方法更为简洁
                        headers:{'Content-Type': 'application/x-www-form-urlencoded',}//如果body携带的数据是上面那样写的，这里 必须设置成这样的
                    }).then(res => {
                        if (res.ok) {
                            //如果响应状态码为200，表示响应成功
                            // json(）方法返回Promise对象，其值被下一个then(）方法接收
                            return res.json();
                        }
                        else {
                            console.error(res.status);
                        }
                    }).then(res => {
                        window.console.log(res);
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.getdata()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',

                    });
                    this.dialogFormVisible = true;
                })
                this.dialogFormVisible = false;
                this.getdata()

            },

与此代码对应的获取后台代码为

        response.setCharacterEncoding("UTF-8");
		response.setHeader("Access-Control-Allow-Origin", "*");
		/* 星号表示所有的域都可以接受， */
		response.setHeader("Access-Control-Allow-Methods", "GET,POST");
		request.setCharacterEncoding("utf-8");
		//如果以上四行代码不写，可能会出现fetch的跨域问题
		String tempid = request.getParameter("id");
		int id = Integer.parseInt(tempid);
		String temprate = request.getParameter("rate");
		double rate = Double.parseDouble(temprate);
		String title = request.getParameter("title");
		String url = request.getParameter("url");
		String watched = request.getParameter("watched");
		String descr = request.getParameter("descr");
		String type1 = request.getParameter("type1");

第二步后台获取数据并处理

在上面我们已经获取数据，然后调用jdbc的方法，就可以把获得的数据添加到数据可

jdbc jd = new jdbc();
	    String sql = "insert into movie (rate, title, id, url, watched, descr, type1) values(?,?,?,?,?,?,?)"; 
	    try {
			jd.update(sql, rate, title, id, url, watched, descr, type1);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

此时大功告成
在这里插入图片描述
添加成功！

遇到的问题

关于前台到后台传数据的问题

这次我是使用的fetch来携带数据到后台，刚开始body的格式一直写不对，最后才知道格式之一就是上面写的那样，还有一种是以json的方式发送数据，但是在这次并没有使用，
此处引用
https://blog.csdn.net/menglixiazhiweizhi/article/details/79653967?utm_source=app
的文章：
在这里插入图片描述
还有后台要设置

这样就可以进行数据的传送了
最后
前台到后台json传输相关：
用request.getInputStream()方法来获取body中的内容，获取的是一个json串，再使用JSONObject.fromObject(json串);即可解析到里面各个参数的值。

关于fastjson

引入jar包
在这里插入图片描述
新建一个JSONArray
JSONArray jsonarray = new JSONArray();
然后新建一个JSONObject
然后put数据，是key,vlaue形式
实例代码是把数据库查询的结果put进JSONObject

然后

最后返回JSONArray即可，这时候前台就可以获取后台传来的数据了
在这里插入图片描述

nuurgg

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
10
评论
基于vue-ElementUI-javaweb_servlet-mysql简单小例子实现增删改查

ElementUI-javaweb_servlet-mysql简单小例子实现增删改查前言一、mysql部分1.新建表二、javaweb_servlet部分1.查询部分2.添加数据3.修改数据4.删除数据ElementUI部分App.vue部分main.js部分总结第一步：前台填写数据并发送第二步后台获取数据并处理前言最后做出来的页面如下：以下是本篇文章正文内容一、mysql部分mysql的主要工作是写一个数据表来提供数据，当servlet被访问的时候对数据库进行增删改查操作1.新建表此.
复制链接

扫一扫