sevlet+jdbc实现的车票管理系统
0.项目的源代码
GitHub仓库地址:https://github.com/xiaoxin179/TicketMangement
成果演示：
1.开发使用到的技术
后端使用sevlet+jdbc来实现
前端使用vue+elementUI来实现
2.开发用到的工具
idea2020，tomcat9，vue2，node8，elementUI
3.后端代码的实现
3.1整体的架构
使用mvc架构来实现，dao层（数据库访问层），service层（业务逻辑层），controller层（接口层）
3.2登录功能
dao层
jdbc的思路
工具类Jdbcutil
package util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import com.alibaba.druid.util.JdbcUtils;
import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
public class JdbcUtile {
private static DataSource dataSource;
static {
try {
Properties properties = new Properties();
//JdbcUtils类名就是所在类的类名。
InputStream inputStream =
JdbcUtils.class.getClassLoader().getResourceAsStream("db.properties");
properties.load(inputStream);
dataSource = DruidDataSourceFactory.createDataSource(properties);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getConnection() {
Connection con = null;
try {
con = dataSource.getConnection();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return con;
}
public static void closeConnect(Connection con) {
try {
con.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
常见的使用jdbc的思路：
获取连接–>写sql–>预编译sql——>设置sql中需要的参数——>执行查询获取结果集
问题：结果集中的.next方法的作用？
在reasultSet对象中的，他的结果就是直接查询出的数据。rs.next其实是逐行读取数据
public static String login(String name,String phone,String password) throws SQLException {
String res;
Connection con = JdbcUtile.getConnection();
String sql = "SELECT name, password, phone FROM user WHERE name = ? OR phone = ?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, name);
ps.setString(2, phone);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
String dbPassword = rs.getString("password");
String dbPhone = rs.getString("phone");
System.out.println(dbPassword);
System.out.println(dbPhone);
if (Objects.equals(dbPassword, password)) {
if (Objects.equals(dbPhone, phone)) {
res = "loginSuccess"; // 登录成功
} else {
res = "手机号错误"; // 手机号错误
}
} else {
res = "密码错误"; // 密码错误
}
} else {
res = "用户不存在"; // 用户不存在
}
JdbcUtile.closeConnect(con);
return res;
}
service层
直接调用dao层所获取的结果，返回，这里其实是因为我的dao写的不标准所导致的，正常情况下我的dao层只需要返回查询到的账号和密码，然后让在service层做业务逻辑的处理
public String user_login(String name,String phone,String password) throws SQLException{
String res = null;
try {
res = dao.login(name,phone,password);
}catch (Exception e){
e.printStackTrace();
}
return res;
}
controller层
package controller;
import service.TicketService;
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.sql.SQLException;
@WebServlet(value = "/login")
public class LoginController extends HttpServlet {
TicketService ticketservice = new TicketService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");//设置响应内容的字符编码方式
String name = request.getParameter("userName");//获取请求中的参数的值
String s = "";
String phone = request.getParameter("phone");
String password = request.getParameter("password");
try {
s = ticketservice.user_login(name, phone, password);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
PrintWriter out = response.getWriter();
// 设置跨域请求响应头
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
out.write(s);
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
<template>
<div
style="width: 100vw;height: 100vh; background-color: #B3C0D1"
>
<el-row
:gutter="10"
style="width: 100%;height: 100%;"
>
<el-col :span="24">
<div class="login-wrapper" style="width: 50%; margin: 100px auto">
<h1 style="text-align: center">登录</h1>
<el-form :model="loginForm" label-width="100px" ref="loginForm" style="width: 60%; margin: 20px auto">
<el-form-item label="用户名">
<el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="loginForm.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login()" style="width: 100%">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
import baseApiUrl from '../../config.default'
export default {
name: 'LoginPage',
data () {
return {
loginForm: {
userName: '',
password: '',
phone: ''
}
}
},
methods: {
login () {
if (this.loginForm) {
const url = `${baseApiUrl}/login`
// const json = { userName: this.loginForm.userName, password: this.loginForm.password, phone: this.loginForm.phone }
axios.post(url, 'userName=' + this.loginForm.userName + '&password=' + this.loginForm.password + '&phone=' + this.loginForm.phone).then(rs => {
if (rs.data === 'loginSuccess') {
this.$message.success('登陆成功')
// localStorage.setItem('token', rs.data.token)
this.$router.push('/home')
} if (rs.data === '手机号错误') {
this.$message.error('手机号错误')
} if (rs.data === '密码错误') {
this.$message.error('密码错误')
} if (rs.data === '用户不存在') {
this.$message.error('用户不存在')
}
}).catch(() => {
this.$message.error('登录失败')
})
}
}
}
}
</script>
<style>
body {
margin: 0;
}
</style>
3.3获取全部的用户
dao层
//根据用户名查找信息
public List<UserEnity> searchPageUser(String name) throws SQLException {
List<UserEnity> list = new ArrayList<>();
Connection con = JdbcUtile.getConnection();
String sql = "SELECT id,name,age,statue,gender,phone\n" +
"FROM `user`\n" +
"WHERE name = ?\n" ;
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1,name);
ResultSet set = ps.executeQuery();
while (set.next()){
int id = set.getInt(1);
String user_name = set.getString(2);
int user_age = set.getInt(3);
String user_statue = set.getString(4);
String user_gender = set.getString(5);
String user_phone = set.getString(6);
list.add(new UserEnity(id,user_name,user_age,user_statue,user_gender,user_phone));
}
JdbcUtile.closeConnect(con);
return list;
}
service层
public String selectAllUser(){
String str = "";
try {
List<UserEnity> list = dao.selectAllUser();
Map<String,Object> map = new HashMap<>();
map.put("rows",list);
JSONObject json = JSONObject.fromObject(map);
str = json.toString();
}catch (Exception e){
e.printStackTrace();
}
return str;
}
controller层
package controller;
import dao.UserDao;
import service.UserService;
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;
/**
* @author:XIAOXIN
* @date:2023/07/10
**/
@WebServlet(value="/selectAllUser")
public class selectAllUser extends HttpServlet {
UserService service = new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String s = service.selectAllUser();
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
PrintWriter out =response.getWriter();
out.write(s);
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
3.4根据用户名查询用户
dao层
//根据用户名查找信息
public List<UserEnity> searchPageUser(String name) throws SQLException {
List<UserEnity> list = new ArrayList<>();
Connection con = JdbcUtile.getConnection();
String sql = "SELECT id,name,age,statue,gender,phone\n" +
"FROM `user`\n" +
"WHERE name = ?\n" ;
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1,name);
ResultSet set = ps.executeQuery();
while (set.next()){
int id = set.getInt(1);
String user_name = set.getString(2);
int user_age = set.getInt(3);
String user_statue = set.getString(4);
String user_gender = set.getString(5);
String user_phone = set.getString(6);
list.add(new UserEnity(id,user_name,user_age,user_statue,user_gender,user_phone));
}
JdbcUtile.closeConnect(con);
return list;
}
service层
public String searchPageUser(String name){
String str = "";
try {
List<UserEnity> list = dao.searchPageUser(name);
Map<String,Object> map = new HashMap<>();
map.put("rows",list);
JSONObject json = JSONObject.fromObject(map);
str = json.toString();
}catch (Exception e){
e.printStackTrace();
}
return str;
}
controller层
package controller;
import service.UserService;
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;
@WebServlet(value = "/searchUser")
public class searchUser extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
resp.setContentType("text/html;charset=UTF-8");
String name = req.getParameter("name");
String s = service.searchPageUser(name);
PrintWriter out = resp.getWriter();
out.write(s);
out.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
3.5添加用户
dao层
public int addUser(String name,int age,String statue,String gender,String phone,String password) throws SQLException {
int res = 0;
Connection con = JdbcUtile.getConnection();
String sql = "insert into user (name,age,statue,gender,phone,password) values (?,?,?,?,?,?)";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1,name);
ps.setInt(2,age);
ps.setString(3,statue);
ps.setString(4,gender);
ps.setString(5,phone);
ps.setString(6,password);
res = ps.executeUpdate();
return res;
}
service层
public boolean addUser(String name,int age,String statue,String gender,String phone,String password) {
int res = 0;
try {
res = dao.addUser(name,age,statue,gender,phone,password);
}catch (Exception e){
e.printStackTrace();
}
return res > 0;
}
controller层
package controller;
import service.UserService;
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;
@WebServlet(value = "/addUser")
public class addUser extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
String name = req.getParameter("name");
int age = Integer.parseInt(req.getParameter("age"));
String statue = req.getParameter("statue");
String gender = req.getParameter("gender");
String phone = req.getParameter("phone");
boolean res = service.addUser(name,age,statue,gender,phone,"12345");
PrintWriter out = resp.getWriter();
out.write("" + res);
out.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
3.6删除用户
dao层
public int deleteUser(int id) throws SQLException {
int res = 0;
Connection con = JdbcUtile.getConnection();
String sql = "DELETE FROM `user`\n" +
"WHERE id = ?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setInt(1,id);
boolean bool = ps.execute();
if (bool = true){
res = 1;
}
JdbcUtile.closeConnect(con);
return res;
}
service层
//删
public boolean deleteUser(int id){
int res = 0;
try {
res = dao.deleteUser(id);
}catch (Exception e){
e.printStackTrace();
}
return res > 0;
}
contrller层
package controller;
import service.UserService;
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;
@WebServlet(value = "/deleteUser")
public class deleteUser extends HttpServlet {
private UserService service= new UserService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
int id = Integer.parseInt(req.getParameter("id"));
boolean res = service.deleteUser(id);
PrintWriter out = resp.getWriter();
out.write("" + res);
out.close();
}
}
3.7修改用户信息
dao层
public int updateUser(int id,String name,int age,String statue,String gender,String phone) throws SQLException{
int res = 0;
Connection con = JdbcUtile.getConnection();
String sql = "update user set name=?,age=?,statue=?,gender=?,phone=? where id=?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1,name);
ps.setInt(2,age);
ps.setString(3,statue);
ps.setString(4,gender);
ps.setString(5,phone);
ps.setInt(6,id);
res = ps.executeUpdate();
JdbcUtile.closeConnect(con);
return res;
}
service层
//改
public boolean updateUser(int id,String name,int age,String statue,String gender,String phone){
int res = 0;
try {
res = dao.updateUser(id,name,age,statue,gender,phone);
}catch (Exception e){
e.printStackTrace();
}
return res > 0;
}
controller层
package controller;
import service.UserService;
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;
@WebServlet(value = "/updateUser")
public class updateUser extends HttpServlet {
private UserService service = new UserService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
int id = Integer.parseInt(req.getParameter("id"));
String name = req.getParameter("name");
int age = Integer.parseInt(req.getParameter("age"));
String statue = req.getParameter("statue");
String gender = req.getParameter("gender");
String phone = req.getParameter("phone");
boolean res = service.updateUser(id,name,age,statue,gender,phone);
PrintWriter out = resp.getWriter();
out.write("" + res);
out.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
4.前端代码的实现
使用vue cli来构建的项目
login.vue
<template>
<div
style="width: 100vw;height: 100vh; background-color: #B3C0D1"
>
<el-row
:gutter="10"
style="width: 100%;height: 100%;"
>
<el-col :span="24">
<div class="login-wrapper" style="width: 50%; margin: 100px auto">
<h1 style="text-align: center">登录</h1>
<el-form :model="loginForm" label-width="100px" ref="loginForm" style="width: 60%; margin: 20px auto">
<el-form-item label="用户名">
<el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="loginForm.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login()" style="width: 100%">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
import baseApiUrl from '../../config.default'
export default {
name: 'LoginPage',
data () {
// let vm = this;
return {
loginForm: {
userName: '',
password: '',
phone: ''
}
}
},
methods: {
login () {
if (this.loginForm) {
const url = `${baseApiUrl}/login`
// const json = { userName: this.loginForm.userName, password: this.loginForm.password, phone: this.loginForm.phone }
axios.post(url, 'userName=' + this.loginForm.userName + '&password=' + this.loginForm.password + '&phone=' + this.loginForm.phone).then(rs => {
if (rs.data === 'loginSuccess') {
this.$message.success('登陆成功')
// localStorage.setItem('token', rs.data.token)
this.$router.push('/home')
} if (rs.data === '手机号错误') {
this.$message.error('手机号错误')
} if (rs.data === '密码错误') {
this.$message.error('密码错误')
} if (rs.data === '用户不存在') {
this.$message.error('用户不存在')
}
}).catch(() => {
this.$message.error('登录失败')
})
}
}
}
}
</script>
<style>
body {
margin: 0;
}
</style>
home.vue
<template>
<el-container style="height: 100%">
<!-- 头部 -->
<el-header style="background-color: #cad1da">
<div id="head_top">
<div id="img">
<img alt="" src="../assets/train.svg" height="54">
</div>
<div id="wenzi">
<span>火车票管理系统</span>
</div>
<div id="logout">
<el-button id="logout_button" type="primary" @click="logOut();" style="border-radius: 10px;" >退出登录</el-button>
</div>
</div>
</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px" style="background-color: #D3DCE6">
<el-menu class="el-menu-demo" style="background-color: #D3DCE6" :default-active="this.$route.path" router>
<!-- <el-menu-item index="/home/show"><i class="el-icon-s-home" style="margin-right: 10px"></i>首页</el-menu-item> -->
<el-menu-item index="/home/dormManagement"><i class="el-icon-monitor" style="margin-right: 10px"></i>用户信息管理</el-menu-item>
<el-menu-item index="/home/TicketMangement"><i class="el-icon-message" style="margin-right: 10px"></i>车票信息信息</el-menu-item>
<!-- <el-menu-item index="/home/systemConfig"><i class="el-icon-setting" style="margin-right: 10px"></i>设置</el-menu-item> -->
</el-menu>
</el-aside>
<!-- 主题区域 -->
<el-main style="background-color: #eee">
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'Home',
methods: {
logOut () {
this.$confirm('该操作将退出登录，是否确定？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
localStorage.removeItem('token')
this.$router.push('/')
})
}
}
}
</script>
<style>
#head_top{
display:flex;
justify-content: space-between;
}
#img{
margin-left: 50px;
}
#wenzi{
margin-top:15px;
font-family: 宋体;
font-weight:bolder;
font-size:30px;
}
#logout{
margin-top: 10px;
}
</style>
Dormmangement.vue
<template>
<div>
<el-button type="primary" @click="addDialogFormVisible = !addDialogFormVisible"
style="margin-bottom: 10px; margin-left: 170px; background-color: #636e83;border-radius: 10px;">添加乘客
</el-button>
<el-dropdown @command="handleCommand">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="name">姓名</el-dropdown-item>
<el-dropdown-item command="age">年龄</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-input v-model="name" placeholder="输入姓名" style="width: 20%;margin-left:600px;">
</el-input>
<el-button type="primary" slot="append" icon="el-icon-search" @click="queryInfo" style="border-radius: 10px;">查询</el-button>
<!-- 添加乘客信息弹窗 -->
<el-dialog title="添加乘客" :visible.sync="addDialogFormVisible">
<el-form :model="newStuForm" label-width="50px" >
<el-form-item label="姓名" prop="name" style="margin-right: 30px;">
<el-input v-model="newStuForm.name" autocomplete="off" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age" style="margin-right: 30px;">
<el-input v-model="newStuForm.age" autocomplete="off" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender" style="margin-right: 30px;">
<el-input v-model="newStuForm.gender" autocomplete="off" placeholder="请输入性别"></el-input>
</el-form-item>
<el-form-item label="身份" prop="statue" style="margin-right: 30px;">
<el-input v-model="newStuForm.statue" autocomplete="off" placeholder="请输入身份"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone" style="margin-right: 30px;">
<el-input v-model="newStuForm.phone" autocomplete="off" placeholder="请输入电话"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addNewUser">添 加</el-button>
</div>
</el-dialog>
<!-- 修改乘客信息弹窗 -->
<el-dialog title="修改乘客信息" :visible.sync="updateDialogFormVisible">
<el-form :model="editForm" label-width="80px">
<!--autocomplete:禁止表单元素自动填充 -->
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="editForm.age" autocomplete="off" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input v-model="editForm.gender" autocomplete="off" placeholder="请输入性别"></el-input>
</el-form-item>
<el-form-item label="身份" prop="statue">
<el-input v-model="editForm.statue" autocomplete="off" placeholder="请输入身份"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="editForm.phone" autocomplete="off" placeholder="请输入电话"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="updateStu">保 存</el-button>
</div>
</el-dialog>
<!-- 乘客信息表格 -->
<el-table
:data="tableData"
border
style="width:fit-content; margin-left:170px;margin-right:100px;border-radius:20px">
<el-table-column
prop="id"
label="编号"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="100">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="100">
</el-table-column>
<el-table-column
prop="statue"
label="属性"
width="200">
</el-table-column>
<el-table-column
prop="gender"
label="性别"
width="200">
</el-table-column>
<el-table-column
prop="phone"
label="电话"
width="200">
</el-table-column>
<el-table-column
label="操作"
width="200">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="info" size="small">修改</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
import baseApiUrl from '../../config.default'
export default {
name: 'DormManagement',
data: function () {
// const validateage = (rule, value, cb) => {
// console.log('进入验证年龄')
// const regularVal = /^(\d{1,2}-\d{3})$/
// if (value === '') {
// cb(new Error('请输入年龄'))
// } else if (!regularVal.test(value)) {
// cb(new Error('年龄必须是xxx-xxx的形式'))
// } else {
// cb()
// }
// }
return {
addDialogFormVisible: false,
updateDialogFormVisible: false,
tableData: [],
name: '',
newStuForm: {
id: '',
gender: '',
name: '',
age: '',
statue: '',
phone: ''
},
editForm: {
id: '',
name: '',
gender: '',
age: '',
phone: '',
statue: ''
},
queryMethod: 'id',
queryCol: 'id',
rules: {
name: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
],
age: [
{
// validator: validateage,
required: true,
trigger: 'blur',
message: '请输入年龄'
}
]
}
}
},
mounted () {
// this.selectAllStudent()
},
created () {
this.selectAllStudent()
},
methods: {
handleCommand (command) {
this.queryCol = command
switch (command) {
case 'id':
this.queryMethod = 'id'
break
case 'name':
this.queryMethod = '姓名'
break
case 'age':
this.queryMethod = '年龄'
break
case 'phone':
this.queryMethod = '电话'
break
}
},
// 查询 表格数据 1
selectAllStudent () {
this.tableData = []
const url = `${baseApiUrl}/selectAllUser`
// 获取数据库全部乘客列表信息
axios.get(url).then(rs => {
if (rs.status === 200) {
console.log(rs)
rs.data.rows.forEach(item => { this.tableData.push(item) })
}
}).catch(error => {
if (error.response.status === 401) {
this.$message.error(error.response.data.message)
this.$router.push('/')
}
})
},
// 添加乘客 1
addNewUser: function () {
let formData = 'name=' + this.newStuForm.name
formData = formData.concat('&age=' + this.newStuForm.age)
formData = formData.concat('&gender=' + this.newStuForm.gender)
formData = formData.concat('&statue=' + this.newStuForm.statue)
formData = formData.concat('&phone=' + this.newStuForm.phone)
const url = `${baseApiUrl}/addUser`
axios.post(url, formData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=GBK'
}
}).then(rs => {
this.$message.success('添加成功')
this.selectAllStudent()
}).catch(() => {
this.$message.error('添加失败')
})
this.addDialogFormVisible = false
this.newStuForm = {}
},
// 更新表格数据 1
updateStu: function () {
if (this.editForm.name && this.editForm.age) {
this.$confirm('该操作将修改一个乘客信息，是否确定？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let formData = 'name=' + this.editForm.name
formData = formData.concat('&age=' + this.editForm.age)
formData = formData.concat('&gender=' + this.editForm.gender)
formData = formData.concat('&statue=' + this.editForm.statue)
formData = formData.concat('&phone=' + this.editForm.phone)
formData = formData.concat('&id=' + this.editForm.id)
const url = `${baseApiUrl}/updateUser?` + formData
axios.post(url, formData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=GBK'
}
}).then(rs => {
this.$message.success('修改成功')
this.selectAllStudent()
}).catch(() => {
this.$message.error('修改失败')
})
this.updateDialogFormVisible = false
})
} else {
this.$message.warning('信息不全，请完善后再添加')
}
},
// 条件搜索表格数据 1
queryInfo () {
const url = `${baseApiUrl}/searchUser`
axios.get(url, {
params: {
name: this.name
}
}).then((rs) => {
this.tableData = []
console.log(rs.data)
rs.data.rows.forEach(item => { this.tableData.push(item) })
})
},
handleUpdate (row) {
this.updateDialogFormVisible = true
this.editForm.id = row.id
this.editForm.name = row.name
this.editForm.age = row.age
this.editForm.gender = row.gender
this.editForm.statue = row.statue
this.editForm.phone = row.phone
},
handleDelete: function (id, i) {
console.log(1)
this.$confirm('该操作将删除一个乘客信息，是否确定？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const url = `${baseApiUrl}/deleteUser`
// const url = 'http://127.0.0.1:3030/api/deleteTicket'
axios.get(url, {
params: {
id: id
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(rs => {
console.log('删除结果:', rs)
this.tableData.splice(i, 1)
this.$message.success('删除成功')
}).catch(() => {
this.$message.error('删除失败')
})
})
}
}
}
</script>
<style>
</style>
ticketMangement.vue
<template>
<div>
<el-button type="primary" @click="addDialogFormVisible = !addDialogFormVisible"
style="margin-bottom: 10px; margin-left: 170px; background-color: #636e83;border-radius: 10px;">添加车票
</el-button>
<el-dropdown @command="handleCommand">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="start_station">始发站</el-dropdown-item>
<el-dropdown-item command="end_station">终点站</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-input v-model="StartAdd" placeholder="输入始发站" style="width: 20%;margin-left:340px">
</el-input>
<el-input v-model="EndAdd" placeholder="输入终点站" style="width: 20%">
</el-input>
<el-button type="primary" slot="append" icon="el-icon-search" @click="queryInfo" style="border-radius: 10px;">查询</el-button>
<!-- 添加学生信息弹窗 -->
<el-dialog title="添加车票" :visible.sync="addDialogFormVisible">
<el-form :model="newStuForm" label-width="50px" :rules="rules">
<el-form-item label="始发站" prop="start_station" style="margin-right: 30px;">
<el-input v-model="newStuForm.start_station" autocomplete="off" placeholder="请输入始发站"></el-input>
</el-form-item>
<el-form-item label="终点站" prop="end_station">
<el-input v-model="newStuForm.end_station" autocomplete="off" placeholder="请输入终点站"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addNewStudent">添 加</el-button>
</div>
</el-dialog>
<!-- 修改学生信息弹窗 -->
<el-dialog title="修改车票信息" :visible.sync="updateDialogFormVisible">
<el-form :model="editForm" label-width="80px">
<!--autocomplete:禁止表单元素自动填充 -->
<el-form-item label="始发站" prop="start_station">
<el-input v-model="editForm.start_station" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="终点站" prop="end_station">
<el-input v-model="editForm.end_station" autocomplete="off" placeholder="请输入终点站"></el-input>
</el-form-item>
<el-form-item label="票价" prop="price">
<el-input v-model="editForm.price" autocomplete="off" placeholder="请输入票价"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="updateStu">保 存</el-button>
</div>
</el-dialog>
<!-- 车票信息表格 -->
<el-table
:data="tableData"
border
style="width:fit-content; margin-left:170px;margin-right:100px;border-radius:20px">
<el-table-column
prop="tid"
label="编号"
width="100">
</el-table-column>
<el-table-column
prop="start_station"
label="火车始发站"
width="100">
</el-table-column>
<el-table-column
prop="end_station"
label="火车终点站"
width="100">
</el-table-column>
<el-table-column
prop="residual_ticket"
label="剩余票数"
width="200">
</el-table-column>
<!-- <el-table-column
prop="total_ticket"
label="总票数"
width="200">
</el-table-column> -->
<el-table-column
prop="price"
label="票价(元)"
width="150">
</el-table-column>
<el-table-column
prop="start_time"
label="发车时间"
width="150">
</el-table-column>
<el-table-column
prop="end_time"
label="到达时间"
width="150">
</el-table-column>
<el-table-column
label="操作"
width="200">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="info" size="small">修改</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.row.tid, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
import baseApiUrl from '../../config.default'
export default {
name: 'DormManagement',
data: function () {
// const validateage = (rule, value, cb) => {
// console.log('进入验证终点站')
// const regularVal = /^(\d{1,2}-\d{3})$/
// if (value === '') {
// cb(new Error('请输入终点站'))
// } else if (!regularVal.test(value)) {
// cb(new Error('终点站必须是xxx-xxx的形式'))
// } else {
// cb()
// }
// }
return {
addDialogFormVisible: false,
updateDialogFormVisible: false,
tableData: [],
StartAdd: '',
EndAdd: '',
newStuForm: {
TicketNum: '',
start_station: '',
end_station: ''
},
editForm: {
tid: '',
start_station: '',
end_station: '',
price: ''
},
queryMethod: 'id',
queryCol: 'TicketNum',
rules: {
start_station: [
{
required: true,
message: '请输入始发站',
trigger: 'blur'
}
],
end_station: [
{
// validator: validateage,
required: true,
trigger: 'blur',
message: '请输入终点站'
}
]
}
}
},
mounted () {
// this.selectAllStudent()
},
created () {
this.selectAllStudent()
},
methods: {
handleCommand (command) {
this.queryCol = command
switch (command) {
case 'TicketNum':
this.queryMethod = 'id'
break
case 'start_station':
this.queryMethod = '始发站'
break
case 'end_station':
this.queryMethod = '终点站'
break
case 'phone':
this.queryMethod = '电话'
break
}
},
// 查询 表格数据 1
selectAllStudent () {
this.tableData = []
const url = `${baseApiUrl}/selectTicket`
// 获取数据库全部车票列表信息
axios.get(url).then(rs => {
if (rs.status === 200) {
console.log(rs)
rs.data.rows.forEach(item => { this.tableData.push(item) })
}
}).catch(error => {
if (error.response.status === 401) {
this.$message.error(error.response.data.message)
this.$router.push('/')
}
})
},
// 添加车票 1
addNewStudent: function () {
let formData = 'start_station=' + this.newStuForm.start_station
formData = formData.concat('&end_station=' + this.newStuForm.end_station)
const url = `${baseApiUrl}/addTicketController`
axios.post(url, formData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=GBK'
}
}
).then(rs => {
this.$message.success('添加成功')
this.selectAllStudent()
}).catch(() => {
this.$message.error('添加失败')
})
this.addDialogFormVisible = false
this.newStuForm = {}
},
// 更新表格数据
updateStu: function () {
if (this.editForm.start_station && this.editForm.end_station) {
this.$confirm('该操作将修改一个车票信息，是否确定？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let formData = 'start_station=' + this.editForm.start_station
formData = formData.concat('&end_station=' + this.editForm.end_station)
formData = formData.concat('&price=' + this.editForm.price)
formData = formData.concat('&tid=' + this.editForm.tid)
const url = `${baseApiUrl}/updateTicket?` + formData
axios.post(url, formData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=GBK'
}
}).then(rs => {
console.log('添加车票结果:', rs)
this.$message.success('修改成功')
this.selectAllStudent()
}).catch(() => {
this.$message.error('修改失败')
})
this.updateDialogFormVisible = false
})
} else {
this.$message.warning('信息不全，请完善后再添加')
}
},
// 搜索表格数据 1
queryInfo () {
const url = `${baseApiUrl}/ticketsearch`
axios.get(url, {
params: {
start_station_name: this.StartAdd,
end_station_name: this.EndAdd
}
}).then((rs) => {
this.tableData = []
console.log(rs.data)
rs.data.rows.forEach(item => { this.tableData.push(item) })
})
},
handleUpdate (row) {
console.log('修改：' + row.tid)
this.editForm.tid = row.tid
this.updateDialogFormVisible = true
this.editForm.start_station = row.start_station
this.editForm.end_station = row.end_station
this.editForm.price = row.price
},
// 删除 1
handleDelete: function (row, i) {
console.log(1)
this.$confirm('该操作将删除一个车票信息，是否确定？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const url = `${baseApiUrl}/deleteTicket`
// const url = 'http://127.0.0.1:3030/api/deleteTicket'
axios.get(url, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
Authentication: localStorage.getItem('token')
},
params: {
tid: row
}
}).then(rs => {
console.log('删除结果:', rs)
this.tableData.splice(i, 1)
this.$message.success('删除成功')
}).catch(() => {
this.$message.error('删除失败')
})
})
}
}
}
</script>
<style>
</style>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
