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"