mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增
作者:神秘网友
发布时间:2020-10-24 02:54:06
mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增
mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增删改查mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增删改查
1.1 mapper目录
1.1.1.1 StudentMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zelin.mapper.StudentMapper">
<!--1-查询所有学生-->
<select id="findAll" resultType="student">
select st.*,cname from student st,classes c where c.cid = st.cid
</select>
<!--2-自动插入学生-->
<insert id="insert" parameterType="student" useGeneratedKeys="true" keyProperty="sid">
insert into student values (null,#{sname},#{sex},#{age},#{addr},#{cid})
</insert>
<!--3-查询指定Id的学生-->
<select id="findById" resultType="student">
select st.*,cname from student st,classes c where c.cid = st.cid and sid=#{value}
</select>
<!--4-修改学生-->
<update id="update" parameterType="student">
update student set sname=#{sname},sex=#{sex},age=#{age},addr=#{addr},cid=#{cid} where sid=#{sid}
</update>
<!--5-根据Id删除指定的学生-->
<delete id="deleteById" parameterType="int">
delete from student where sid=#{value}
</delete>
<!--6-条件查询(方式一：使用#方式进行条件查询)-->
<select id="findByStu" parameterType="student" resultType="student">
select st.*,cname from student st,classes c where c.cid = st.cid and sname like #{sname} and addr like #{addr}
</select>
<!--7-条件查询(方式二：使用$方式进行条件查询)-->
<select id="findByStu2" parameterType="student" resultType="student">
select st.*,cname from student st,classes c where c.cid = st.cid and sname like "%${sname}%" and addr like "%${addr}%"
</select>
</mapper>
1.1.1.2 ClassesMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zelin.mapper.ClassesMapper">
<!--1-查询所有班级-->
<select id="findAll" resultType="classes">
select * from classes
</select>
</mapper>
1.2 spring目录
1.2.1 applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd">
<!--1-导入属性文件-->
<context:property-placeholder location="classpath*:properties/db.properties"/>
<!--2-配置扫描包-->
<context:component-scan base-package="com.zelin"/>
<!--3-配置数据源-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="${jdbc.driver}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.user}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--4-配置sqlSessionBean对象-->
<bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactoryBean">
<!--4.1)配置数据源-->
<property name="dataSource" ref="dataSource"/>
<!--4.2)配置别名包-->
<property name="typeAliasesPackage" value="com.zelin.pojo"/>
<!--4.3)引入mapper映射文件所在的位置-->
<property name="mapperLocations" value="classpath*:mapper/*.xml"/>
</bean>
<!--5.使用包扫描创建代理对象-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer" >
<property name="basePackage" value="com.zelin.mapper"/>
</bean>
</beans>
1.3 properties属性目录下
1.3.1 db.properties属性文件
jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql:///chrisfeng jdbc.user=root jdbc.password=123456
package com.zelin.test;
import com.zelin.pojo.Classes;
import com.zelin.pojo.Student;
import com.zelin.service.ClassesService;
import com.zelin.service.StudentService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 17:04
*/
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("classpath*:spring/applicationContext.xml")
public class TestSpringMybatis {
@Autowired
private StudentService studentService;
@Autowired
private ClassesService classesService;
//1.查询所有学生
@Test
public void test01(){
//1.1)查询学生列表
List<Student> students = studentService.findAll();
//1.2)遍历学生
for (Student student : students) {
System.out.println(student);
}
}
//2.增加学生
@Test
public void test02(){
Student student = new Student("梅兰芳","女",56,"香港",2);
studentService.insert(student);
//打印插入后的学生是否有sid这个属性
System.out.println(student);
}
//3.查询指定ID的学生
@Test
public void test03(){
Student student = studentService.findById(30);
System.out.println(student);
}
//4.修改指定Id的学生
@Test
public void test04(){
//4.1)先查询指定Id的学生
Student student = studentService.findById(31);
//4.2)修改学生属性
student.setSname("王力宏有点帅");
//4.3)修改学生
studentService.update(student);
}
//5.根据指定Id删除学生
@Test
public void test05(){
studentService.deleteById(22);
}
//6.查询所有班级
@Test
public void test06(){
List<Classes> classes = classesService.findAll();
for (Classes aClass : classes) {
System.out.println(classes);
}
}
//7.关键字条件查询(方式一：使用#+%进行查询 需要传入%)
@Test
public void test07(){
//7.1)定义学生对象
Student student = new Student();
//7.2)设置查询的参数
student.setSname("%"+"刘"+"%");
student.setAddr("%"+"海"+"%");
//7.3)条件查询学生
List<Student> students = studentService.findByStu(student);
//7.4)遍历学生
for (Student stud : students) {
System.out.println(stud);
}
}
//8.关键字条件查询(方式二：使用$进行查询 不需要传入% 直接在sql拼凑%)
@Test
public void test08(){
//8.1)定义学生对象
Student student = new Student();
//8.2)设置查询的参数
student.setSname("刘");
student.setAddr("海");
//8.3)条件查询学生
List<Student> students = studentService.findByStu2(student);
//8.4)遍历学生
for (Student stud : students) {
System.out.println(stud);
}
}
}
3.1 StudentServlet
package com.zelin.servlet;
import cn.hutool.core.util.StrUtil;
import com.alibaba.fastjson.JSON;
import com.zelin.pojo.PageResult;
import com.zelin.pojo.Result;
import com.zelin.pojo.Student;
import com.zelin.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.context.support.WebApplicationContextUtils;
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.util.List;
/**
* @author wf
* @date 2020-10-22 19:12
*/
@WebServlet("/student")
public class StudentServlet extends HttpServlet {
@Autowired
private StudentService studentService;
@Override
public void init() throws ServletException {
studentService = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext()).getBean(StudentService.class);
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码格式
req.setCharacterEncoding("UTF8");
resp.setContentType("text/html;charset=UTF8");
//2.获取参数
String cmd = req.getParameter("cmd");
//3.判断参数 选择不同的方法
if(StrUtil.isNotBlank(cmd)){
if("list".equals(cmd)){
list(req,resp); //列表学生
}else if("add".equals(cmd)){
addStu(req,resp); //添加学生
}else if("update".equals(cmd)) {
update(req, resp); //修改学生
}else if("deleteById".equals(cmd)){
deleteById(req,resp); //批量删除
}
}
}
//2.查询所有学生
private void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
//2.1)查询所有学生
List<Student> studentList = studentService.findAll();
//2.2)输出打印
resp.getWriter().println(JSON.toJSONString(studentList));
//2.3)刷新
resp.getWriter().flush();
} catch (Exception e) {
e.printStackTrace();
}
}
//3.添加学生
private void addStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
//3.0)定义结果对象
Result result = null;
try {
//3.1)获取前端传过来的参数
String stud = req.getParameter("stud");
//3.2)将json字符串转为学生对象
Student student = JSON.parseObject(stud, Student.class);
//3.3)将添加的学生数据添加到数据库中
studentService.insert(student);
//3.4)返回结果给前端
result = new Result(true,"添加学生成功！");
} catch (Exception e) {
e.printStackTrace();
result = new Result(false,"添加学生对象失败！");
}
//3.5)返回结果给前端页面
resp.getWriter().println(JSON.toJSONString(result));
//3.6)刷新页面
resp.getWriter().flush();
}
//4.修改学生
private void update(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
//4.1)定义结果对象
Result result = null;
try {
//4.2)获取前端传过来的参数
String stud = req.getParameter("stud");
//4.3)将json字符串转为学生对象
Student student = JSON.parseObject(stud, Student.class);
//4.4)将修改后的学生数据添加到数据库中
studentService.update(student);
//4.5)返回结果给前端
result = new Result(true,"修改学生成功！");
} catch (Exception e) {
e.printStackTrace();
result = new Result(false,"修改学生对象失败！");
}
//4.6)返回结果给前端页面
resp.getWriter().println(JSON.toJSONString(result));
//4.7)刷新页面
resp.getWriter().flush();
}
//5.按指定ID删除学生
private void deleteById(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//5.0)定义结果对象
Result result = null;
System.out.println("---------------------------");
try {
//5.1)获取前端传来的参数
String sid = req.getParameter("sid");
System.out.println(sid+"---------------");
//5.2)删除指定id对象
studentService.deleteById(new Integer(sid).intValue());
result = new Result(true,"删除学生成功");
}catch (Exception e){
e.printStackTrace();
result = new Result(false,"删除学生失败");
}finally {
resp.getWriter().println(JSON.toJSONString(result));
//4.7)刷新页面
resp.getWriter().flush();
}
}
}
3.2 ClassesServlet
package com.zelin.servlet;
import cn.hutool.core.util.StrUtil;
import com.alibaba.fastjson.JSON;
import com.zelin.pojo.Classes;
import com.zelin.service.ClassesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.context.support.WebApplicationContextUtils;
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.util.List;
/**
* @author wf
* @date 2020-10-22 19:13
*/
@WebServlet("/classes")
public class ClassesServlet extends HttpServlet {
@Autowired
private ClassesService classesService;
@Override
public void init() throws ServletException {
classesService = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext()).getBean(ClassesService.class);
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码格式
req.setCharacterEncoding("UTF8");
resp.setContentType("text/html;charset=UTF8");
//2.获取参数
String cmd = req.getParameter("cmd");
//3.判断参数 选择不同的方法
if(StrUtil.isNotBlank(cmd)){
if("list".equals(cmd)){
list(req,resp);
}
}
}
//2.查询所有班级
private void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//2.1)查询所有学生
List<Classes> classesList = classesService.findAll();
//2.2)输出打印
resp.getWriter().println(JSON.toJSONString(classesList));
//2.3)刷新
resp.getWriter().flush();
}
}
4.1 StudentService接口
package com.zelin.service;
import com.zelin.pojo.PageResult;
import com.zelin.pojo.Student;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 17:02
*/
public interface StudentService {
List<Student> findAll();
void insert(Student student);
Student findById(int id);
void update(Student student);
void deleteById(int id);
List<Student> findByStu(Student student);
List<Student> findByStu2(Student student);
}
4.2 ClassesService接口
package com.zelin.service;
import com.zelin.pojo.Classes;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 17:02
*/
public interface ClassesService {
List<Classes> findAll();
}
4.3 Impl目录下各种对接口的实现类
4.3.1 StudentServiceImpl
package com.zelin.service.impl;
import com.zelin.mapper.StudentMapper;
import com.zelin.pojo.PageResult;
import com.zelin.pojo.Student;
import com.zelin.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 17:02
*/
@Service
public class StudentServiceImpl implements StudentService {
@Autowired
private StudentMapper studentMapper;
@Override
public List<Student> findAll() {
return studentMapper.findAll();
}
@Override
public void insert(Student student) {
studentMapper.insert(student);
}
@Override
public Student findById(int id) {
return studentMapper.findById(id);
}
@Override
public void update(Student student) {
studentMapper.update(student);
}
@Override
public void deleteById(int id) {
studentMapper.deleteById(id);
}
@Override
public List<Student> findByStu(Student student) {
return studentMapper.findByStu(student);
}
@Override
public List<Student> findByStu2(Student student) {
return studentMapper.findByStu2(student);
}
}
4.3.2ClassestServiceImpl
package com.zelin.service.impl;
import com.zelin.mapper.ClassesMapper;
import com.zelin.pojo.Classes;
import com.zelin.service.ClassesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 17:02
*/
@Service
public class ClassesServiceImpl implements ClassesService {
@Autowired
private ClassesMapper classesMapper;
@Override
public List<Classes> findAll() {
return classesMapper.findAll();
}
}
5.1 StudentMapper
package com.zelin.mapper;
import com.zelin.pojo.Student;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 16:38
*/
public interface StudentMapper {
List<Student> findAll();
void insert(Student student);
Student findById(int id);
void update(Student student);
void deleteById(int id);
List<Student> findByStu(Student student);
List<Student> findByStu2(Student student);
}
5.2 ClassesMapper
package com.zelin.mapper;
import com.zelin.pojo.Classes;
import java.util.List;
/**
* @author wf
* @date 2020-10-22 16:38
*/
public interface ClassesMapper {
List<Classes> findAll();
}
6.1 Student
package com.zelin.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
private int sid;
private String sname;
private String sex;
private int age;
private String addr;
private int cid;
private String cname;
public Student(String sname,String sex,int age,String addr,int cid){
this.sname = sname;
this.sex = sex;
this.age = age;
this.addr = addr;
this.cid = cid;
}
public Student(int sid,String sname,String sex,int age,String addr,int cid){
this(sname,sex,age,addr,cid);
this.sid = sid;
}
}
6.2 Classes
package com.zelin.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Classes {
private int cid;
private String cname;
}
6.3 Result
package com.zelin.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @author wf
* @date 2020-10-08 21:24
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private boolean success;
private String message;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="plugins/vue.min.js"></script>
<script src="plugins/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.el-row {
margin-bottom: 20px;
&
:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.textAlign{
text-align: center;
}
.el-card__header{
background-color: #67C23A;
}
.el-card__body{
background-color: rgb(225,243,216)
}
</style>
</head>
<body>
<div id="myStu">
<el-row :gutter="20">
<el-col :span="4">
<div class="grid-content bg-purple" style="background-color: #fff;"></div>
</el-col>
<el-col :span="16">
<div class="grid-content">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix" >
<span>学生列表</span>
<el-button style="float: right; padding: 3px 0" type="text">执行按钮</el-button>
</div>
<div class="text item" >
<div class="grid-content bg-purple-light">
<!--表格-->
<el-table
:data="tableData"
border
:header-cell-style="headContent"
:cell-style = "contentData"
stripe
style="width: 100%">
<el-table-column
prop="sid"
label="学号"
width="150">
</el-table-column>
<el-table-column
prop="sname"
label="学生姓名"
width="120">
</el-table-column>
<el-table-column
prop="sex"
label="学生性别"
width="150">
</el-table-column>
<el-table-column
prop="age"
label="学生年龄"
width="150">
</el-table-column>
<el-table-column
prop="addr"
label="学生地址"
width="120">
</el-table-column>
<el-table-column
prop="cname"
label="所在班级">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="300">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="primary" size="mini">修改</el-button>
<el-button @click="deleteStu(scope.row)" type="danger" size="mini">删除</el-button>
<el-button @click="addStu()" type="success" size="mini">添加</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-row>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<!--{{sname}}-->
<el-input
placeholder="请输入查询学生的关键字"
v-model="sname"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<!--{{addr}}-->
<el-input
placeholder="请输入查询住址的关键字"
v-model="addr"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="1" offset="3"><div class="grid-content bg-purple-light t">
<el-button @click="search()" type="success" size="medium">查询列表</el-button>
</div></el-col>
<el-col :span="1" offset="2"><div class="grid-content bg-purple-light t">
<el-button @click="returnList()" type="success" size="medium">返回列表</el-button>
</div></el-col>
</el-row>
</div>
</el-card>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple" style="background-color: #fff;"></div>
</el-col>
</el-row>
<!-- Form 点击修改时 显示当前对应学生对象的值-->
<el-dialog title="学生信息" :visible.sync="dialogFormVisible">
<!--{{student}}-->
<el-form :model="student">
<el-form-item label="学生姓名" :label-width="formLabelWidth">
<el-input v-model="student.sname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="学生性别" :label-width="formLabelWidth">
<el-radio v-model="student.sex" label="男">男</el-radio>
<el-radio v-model="student.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="学生年龄" :label-width="formLabelWidth">
<el-input v-model="student.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="学生地址" :label-width="formLabelWidth">
<el-input v-model="student.addr" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="所在班级" :label-width="formLabelWidth">
<el-select v-model="student.cid" placeholder="请选择所在班级" style="width: 100%">
<el-option v-for="c in classes" :label="c.cname" :value="c.cid"></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="save()">确 定</el-button>
</div>
</el-dialog>
</div>
</body>
</html>
<script>
new Vue({
el:"#myStu",
data:{
tableData: [], //查询所有学生
dialogFormVisible: false, //默认弹出框不弹出
student: { //单个学生信息
sname: '',
sex: '',
age: '',
addr: '',
cid: '',
},
formLabelWidth: '120px',
classes:[], //查询所有班级信息
sname:'', //查询学生姓名关键字
addr:'', //查询学生住址关键字
},
methods:{
//1.定义查询所有学生的方法
findAllStudents(){
axios.get("student?cmd=list").then(response=>{ //找到servlet对应的方法 查询学生数据
//console.log(response);
this.tableData = response.data; //将后端传来的数据赋值给数组 属性必须一一对应
})
},
//2.设置表头居中以及表格内容居中
headContent(){
return "text-align:center;color:blue;background:aqua";
},
contentData(){
return "text-align:center";
},
//3.查询所有班级信息
findAllClasses(){
axios.get("classes?cmd=list").then(response=>{
this.classes = response.data;
})
},
//4.查看单个学生对象 点击表格修改
handleClick(row){ //row表示当前这一行
//console.log(row) //row表示当前这一行学生对象的值
this.dialogFormVisible = true; //显示弹出框
this.student = row; //将当前数据显示在弹出框页面当中
},
//5.添加学生
addStu(){
this.dialogFormVisible = true; //显示弹出框
this.student = {}; //清空学生对象
},
//6.修改学生或者添加学生(保存学生)
save(){
//6.1)关闭对话框
this.dialogFormVisible = false;
//6.2)定义url
let url = "student?cmd=add";
//6.3)判断此时对话框中学生对象是否存在sid
if(this.student.sid){
//6.4)执行修改
url = "student?cmd=update"
}
//6.5)执行后台操作
axios.post(url,"stud="+JSON.stringify(this.student)).then(response=>{
console.log(response);
//6.5.1)获取后台传送的信息
if(response.data.success){
this.findAllStudents(); //说明数据添加或者修改成功 刷新页面
}else{
alert(response.data.message) //说明添加数据或者修改数据失败
}
})
},
//7.删除学生
deleteStu(row){
//this.student = row; //设置当前需要删除的对象
console.log(this.student.sid);
//将需要删除的学生sid作为参数进行传入
axios.post("student?cmd=deleteById","sid="+JSON.stringify(this.student.sid)).then(response=>{
//console.log(response.data.message);
//7.1)获取后台传送的信息
if(response.data.success){
this.findAllStudents(); //说明数据删除成功 刷新页面
}else{
alert(response.data.message) //说明数据删除失败
}
})
},
//8.查询学生
search(){
//8.1)将需要查询的关键字传入后端
axios.get("student?cmd=search&sname="+this.sname+"&addr="+this.addr).then(response=>{
console.log(response.data);
this.tableData = response.data; //返回后端查询的数据
})
},
//9.返回列表
returnList(){
this.sname = "";
this.addr = "";
axios.get("student?cmd=list").then(response=>{ //找到servlet对应的方法 查询学生数据
this.tableData = response.data; //将后端传来的数据赋值给数组 属性必须一一对应
})
},
},
created(){ //创建vue实例后调用方法
this.findAllStudents();
this.findAllClasses();
}
})
</script>
7.2 web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--1-配置全局文件-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:spring/applicationContext.xml</param-value>
</context-param>
<!--2-配置spring容器监听器-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
7.3 需要导入的jar包
7.4 实现的效果图
mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增相关教程
-
DBeaver连接mysql数据库、新建mysql数据表以及拷贝
DBeaver连接mysql数据库、新建mysql数据表以及拷贝 DBeaver连接mysql数据库： 点击“数据库”，然后点击第一个“新建连接”； 选择一个数据库类型，点击就好。第一次连接数据库可能要下载驱动。傻瓜式操作，点击就好。 通过DBeaver工具链接数据库后，我们就可
-
解决IDEA的插件中心plugin连接不上网络
解决IDEA的插件中心plugin连接不上网络 解决IDEA的插件中心连接不上网络 IDEA的插件中心连不上网很烦人,下载不了自己想要的插件 打开:设置-插件 选择:设置按钮-HTTP代理设置 勾选自动设置 输入 https://plugins.jetbrains.com/ 或者 http://127.0.0.1:1080 重
-
用MobaXterm_Installer_v20.3连接并同时控制三台虚拟机
用MobaXterm_Installer_v20.3连接并同时控制三台虚拟机 MobaXterm下载https://moba.en.softonic.com/ 1.下载并安装完成后打开 2.首先连接需要同时控制的虚拟机 session——SSH——输入相关信息 注：虚拟机ip查看指令 ifconfig 点击OK，再输入自己设置的登录ro
-
无法连接Linux远程服务器的Mysql，解决办法
无法连接Linux远程服务器的Mysql，解决办法 先进入mysql： 打开Mysql远程连接的权限： grant all privileges on *.* to 'root' @'%' identified by 'itcast'; 首先，打开Navicat，建立连接 使用SSH通道 注意： 如果是阿里云服务器，还需要去阿里云控制中心放
-
本地连接Centos数据库，centos7 mysql重置密码，cenos7 开放端口
本地连接Centos数据库，centos7 mysql重置密码，cenos7 开放端口，关闭防火墙 本地SQLYog连接Centos数据库 文章目录 本地SQLYog连接Centos数据库 一、开放CentOs下的mysql所有数据库所有表的权限给任何ip 1、启动mysql 2、进入mysql 3、切换到user表 4、设置
-
VS2013连接mysql
VS2013连接mysql 环境：Win10 + VS2013 +MySQL5.7 添加数据源 1.1 控制面板 - 查看类型 - 大图标 - 管理工具 - ODBC Data Sources(32-bit) - 添加 - MySQL ODBC 3.51 Driver - 完成 1.2 如图填写Connectot/ODBC对话框，ODBC数据源管理程序中新增MySQL，数据源
-
IDEA连接MongoDB报com.mongodb.MongoSocketOpenException: Excep
IDEA连接MongoDB报com.mongodb.MongoSocketOpenException: Exception opening socket 报这样的错是因为MongoDB在3.6版本之后把bind_id的值默认为localhost,就是你的电脑的ip地址 当你的电脑ip给虚拟机ip不一样时就报这样的错 有下面2种解决方案 方案一 在conf
-
Linux中JDK配置和数据库安装与连接
Linux中JDK配置和数据库安装与连接 IP配置 检查IP地址： ip addr 如果没有显示ip地址则执行命令： service network restart 重启network网卡 service NetworkManager stop 关闭网卡 chkconfig NetworkManager off 永久关闭 Manager网卡 检查IP是否开启： 如果