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

---

前言

最后做出来的页面如下：

---

以下是本篇文章正文内容

一、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"