ssm整合在上一篇文章
数据库表
Student
package com.zsb.entity;
public class Student {
private Integer id;
private String name;
private String address;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name == null ? null : name.trim();
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address == null ? null : address.trim();
}
}
StudentMapper
package com.zsb.dao;
import com.zsb.entity.Student;
import java.util.List;
public interface StudentMapper {
//删除
int deleteByPrimaryKey(Integer id);
//添加
int insert(Student record);
int insertSelective(Student record);
//根据id查询
Student selectByPrimaryKey(Integer id);
int updateByPrimaryKeySelective(Student record);
//修改
int updateByPrimaryKey(Student record);
//查询所有
List<Student> selectAll();
}
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.zsb.dao.StudentMapper">
<resultMap id="BaseResultMap" type="com.zsb.entity.Student">
<id column="id" jdbcType="INTEGER" property="id" />
<result column="name" jdbcType="VARCHAR" property="name" />
<result column="address" jdbcType="VARCHAR" property="address" />
</resultMap>
<sql id="Base_Column_List">
id, name, address
</sql>
<select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from tbl_student
where id = #{id,jdbcType=INTEGER}
</select>
<select id="selectAll" resultType="com.zsb.entity.Student">
select
<include refid="Base_Column_List"/>
from tbl_student
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
delete from tbl_student
where id = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.zsb.entity.Student">
insert into tbl_student (id, name, address
)
values (#{id,jdbcType=INTEGER}, #{name,jdbcType=VARCHAR}, #{address,jdbcType=VARCHAR}
)
</insert>
<insert id="insertSelective" parameterType="com.zsb.entity.Student">
insert into tbl_student
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">
id,
</if>
<if test="name != null">
name,
</if>
<if test="address != null">
address,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null">
#{id,jdbcType=INTEGER},
</if>
<if test="name != null">
#{name,jdbcType=VARCHAR},
</if>
<if test="address != null">
#{address,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.zsb.entity.Student">
update tbl_student
<set>
<if test="name != null">
name = #{name,jdbcType=VARCHAR},
</if>
<if test="address != null">
address = #{address,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.zsb.entity.Student">
update tbl_student
set name = #{name,jdbcType=VARCHAR},
address = #{address,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</mapper>
StudentService
package com.zsb.service;
import com.zsb.entity.Student;
import java.util.List;
public interface StudentService {
//根据id查询
public Student findId(Integer sid);
//查询所有
public List<Student> findAll();
//删除
public int del(Integer id);
//添加
public int ins(Student student);
//修改
public int updata(Student student);
}
StudentServiceImpl
package com.zsb.service.impl;
import com.zsb.dao.StudentMapper;
import com.zsb.entity.Student;
import com.zsb.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class StudentServiceImpl implements StudentService {
@Autowired
private StudentMapper studentMapper;
public Student findId(Integer sid) {
Student student = studentMapper.selectByPrimaryKey(sid);
return student;
}
@Override
public List<Student> findAll() {
List<Student> students = studentMapper.selectAll();
return students;
}
@Override
public int del(Integer id) {
int c = studentMapper.deleteByPrimaryKey(id);
return c;
}
@Override
public int ins(Student student) {
int i = studentMapper.insert(student);
return i;
}
@Override
public int updata(Student student) {
int u = studentMapper.updateByPrimaryKey(student);
return u;
}
}
StudentController
package com.zsb.controller;
import com.zsb.entity.Student;
import com.zsb.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/student")
public class StudentController {
@Autowired
private StudentService studentService;
@RequestMapping("/getById")
public Student getByid(Integer userid) {
Student user = studentService.findId(userid);
return user;
}
@RequestMapping("/getAll")
public List<Student> getAll() {
List<Student> all = studentService.findAll();
return all;
}
@RequestMapping("/delete")
public int getAll(Integer userid) {
int a = studentService.del(userid);
return a;
}
@RequestMapping("/insert")
public int ins(Student user) {
int b = studentService.ins(user);
return b;
}
@RequestMapping("/updata")
public int updata(Student user){
int p = studentService.updata(user);
return p;
}
}
前端界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/index.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="js/index.js"></script>
</head>
<body>
<div class="app">
<el-button type="primary" plain @click="addDialogVisible=true">添加按钮</el-button>
<el-dialog
title="添加员工"
:visible.sync="addDialogVisible"
width="50%"
>
<el-form :model="addform" :rules="rules" ref="addRuleForm">
<el-form-item label="名字" prop="name" label-width="55px">
<el-input v-model="addform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="40px">
<el-input v-model="addform.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addEmp">确 定</el-button>
</span>
</el-dialog>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="success" size="small" icon="el-icon-delete" @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row.id)" plain>删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="修改员工"
:visible.sync="editDialogVisible"
width="50%"
>
<el-form :model="editform" :rules="rules" ref="editRuleForm">
<el-form-item label="名字" prop="name" label-width="55px">
<el-input v-model="editform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="40px">
<el-input v-model="editform.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editEmp">确定修改</el-button>
</span>
</el-dialog>
</div>
</body>
<script src="./js/axios.min.js"></script>
<script src="./js/qs.min.js"></script>
<script>
var app = new Vue({
el: ".app",
data: {
addform: {},
editform: {},
tableData: [],
//添加对话框的显隐
addDialogVisible: false,
editDialogVisible: false,
rules: {
name: [
{required: true, message: '请输入姓名', trigger: 'blur'},
{min: 2, max: 5, message: '长度在2-5字符', trigger: 'blur'}
],
},
},
created() {
this.getPlay();
},
methods: {
getPlay() {
var that = this;
axios.get("student/getAll").then(function (result) {
that.tableData = result.data;
})
},
del(id) {
console.log("id为:")
console.log(id)
var that = this;
var qs = Qs;
axios.post("/student/delete?userid="+id).then(
function (result) {
that.$message({
type: 'success',
message: '删除成功!'
});
that.getPlay();
}
)
},
addEmp() {
this.$refs['addRuleForm'].validate((valid) => {
if (valid) { //表单校验通过
var qs = Qs;
var that = this;
axios.post("/student/insert", qs.stringify(this.addform)).then(
function (result) {
console.log(result)
that.getPlay();//重新加载表格
that.addDialogVisible = false;
})
}
});
},
edit(row) {
this.editDialogVisible = true;
this.editform = row;
},
editEmp() {
var that = this;
var qs = Qs;
this.$refs['editRuleForm'].validate((valid) => {
if (valid) { //表单校验通过
axios.post("/student/updata", qs.stringify(this.editform)).then(
function (result) {
console.log(this.editform)
that.getPlay();//重新加载表格
that.editDialogVisible = false;//隐藏修改窗
})
}
});
},
}
});
</script>
</html>
登录
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.78</version>
</dependency>
CommonResult
package com.zsb.utils;
public class CommonResult {
private int code;
private String msg;
private Object data;
public CommonResult() {
}
public CommonResult(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
LoginServlet
package com.zsb.controller;
import com.alibaba.fastjson.JSON;
import com.zsb.utils.CommonResult;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name="LoginServlet",urlPatterns = "/LoginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
String username = req.getParameter("username");
String password = req.getParameter("password");
if("admin".equals(username)&&"123456".equals(password)){
HttpSession session = req.getSession();
session.setAttribute("username",username);
CommonResult commonResult=new CommonResult(2000,"登录成功",null);
writer.print(JSON.toJSONString(commonResult));
}else{
CommonResult commonResult=new CommonResult(5000,"账号或密码错误",null);
writer.print(JSON.toJSONString(commonResult));
}
writer.flush();
writer.close();
}
}
LoginFilter
package com.zsb.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "LoginFilter",urlPatterns = "/*")
public class LoginFilter implements Filter{
public void init(FilterConfig filterConfig) throws ServletException {
}
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request= (HttpServletRequest) servletRequest;
HttpServletResponse response= (HttpServletResponse) servletResponse;
//1.接受请求路径
String path = request.getRequestURI();
//2.设置放行的路径
if(path.contains("login.html")
||path.contains("LoginServlet")
||path.endsWith(".js")
||path.endsWith(".css")
||path.endsWith(".jpg")
||path.endsWith(".gif")
||path.endsWith(".jpeg")
||path.endsWith(".png")){
filterChain.doFilter(request,response);
return;
}
//3.判断用户是否登录
Object username = request.getSession().getAttribute("username");
if(username!=null){
filterChain.doFilter(request,response);
return;
}
//4.跳转到登录页面
response.sendRedirect("login.html");
}
public void destroy() {
}
}
login.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
<style>
body,.box{
overflow: hidden;
height: 100%;
}
.box{
background: url("imgs/3.jpg");
}
#loginBox {
width: 450px;
height: 300px;
background: white;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loginBox>.avatar_box{
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
}
#loginBox>.avatar_box>img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
</style>
</head>
<body background="imgs/3.jpg">
<div class="box">
<div id="loginBox">
<!-- 头像 -->
<div class="avatar_box">
<img src="imgs/1.jpg" />
</div>
<el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
<el-form-item label="账号:" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
<script>
var app = new Vue({
el: ".box",
data: {
loginForm: {},
//校验规则
rules: {
username: [
{required: true, message: "请输入账号", trigger: "blur"},
{min: 5, max: 12, message: "账号的长度必须{5~12}", trigger: "blur"},
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 6, max: 12, message: "密码的长度必须{6~12}", trigger: "blur"},
]
}
},
methods: {
submitForm() {
var that = this;
var qs = Qs;
this.$refs['loginFormRef'].validate((valid) => {
if (valid) {
axios.post("LoginServlet", qs.stringify(this.loginForm)).then(function (result) {
if (result.data.code === 2000) {
that.$message.success(result.data.msg);
location.href = "index.jsp"
} else {
that.$message.error(result.data.msg);
}
});
}
})
}
}
})
</script>
</body>
</html>