ssm+elementui+vue+axios完成单表的crud和登录

最新推荐文章于 2022-09-29 20:27:50 发布

fitifi

最新推荐文章于 2022-09-29 20:27:50 发布

阅读量215

点赞数

分类专栏： ssm 文章标签： python 开发语言

本文链接：https://blog.csdn.net/fitifi/article/details/125296217

版权

ssm 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入组件库 -->
    <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() {

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入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>