目录
6.2.2 登录成功进入界面(elementui.html)
相对于之前的整合增加了登录界面及非登录者拦截，以及分页的使用、模糊查询的使用。
1.整体结构及呈现样式
2.添加依赖
<dependencies>
<!--添加测试依赖-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13.2</version>
</dependency>
<!--添加spring依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
<!--添加日志-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<!--添加更细致的日志，每次请求都会打印出来-->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.7.29</version>
</dependency>
<!--添加lombok节省get,set代码-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.24</version>
</dependency>
<!--添加mysql驱动依赖-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.28</version>
</dependency>
<!--添加MYBATIS依赖-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.9</version>
</dependency>
<!--添加服务依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
</dependency>
<!--添加数据源依赖-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.8</version>
</dependency>
<!--添加json依赖-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
<!--添加mybatis-spring依赖-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.7</version>
</dependency>
<!--添加spring-jdbc依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
<!--添加generator自动生成代码依赖-->
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.4.0</version>
</dependency>
<!--添加依赖-->
<dependency>
<groupId>com.fasterxml.jackson.datatype</groupId>
<artifactId>jackson-datatype-jsr310</artifactId>
<version>2.13.2</version>
</dependency>
<!--添加分页依赖-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.3.0</version>
</dependency>
</dependencies>3.自动生成代码配置（generator）
只能自动生成student的相关代码。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
<!--mysql驱动jar包位置-->
<classPathEntry location="D:\soft\repMaven\mysql\mysql-connector-java\8.0.28\mysql-connector-java-8.0.28.jar" />
<!--数据源的配置信息-->
<context id="DB2Tables" targetRuntime="MyBatis3" defaultModelType="flat">
<!--是否生成注释 suppressAllComments：去除掉注释后的影响-->
<commentGenerator>
<property name="suppressAllComments" value="true"/>
</commentGenerator>
<jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3306/mydb?serverTimezone=Asia/Shanghai"
userId="root"
password="123456">
</jdbcConnection>
<javaTypeResolver >
<property name="forceBigDecimals" value="false" />
</javaTypeResolver>
<!--java实体类的配置 enableSubPackages:小驼峰 trimStrings:去除空格-->
<javaModelGenerator targetPackage="com.qy151wd.entity" targetProject=".\src\main\java">
<property name="enableSubPackages" value="true" />
<property name="trimStrings" value="true" />
</javaModelGenerator>
<!--映射文件的配置-->
<sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\resources">
<property name="enableSubPackages" value="true" />
</sqlMapGenerator>
<!--dao数据访问层的配置-->
<javaClientGenerator type="XMLMAPPER" targetPackage="com.qy151wd.dao" targetProject=".\src\main\java">
<property name="enableSubPackages" value="true" />
</javaClientGenerator>
<!--数据库名和实体的映射关系
schema:数据库名称
tableName: 表名
domainObjectName:实体类名
-->
<table schema="mydb" tableName="student2" domainObjectName="Student" enableCountByExample="false"
enableSelectByExample="false" enableUpdateByExample="false" enableDeleteByExample="false">
</table>
</context>
</generatorConfiguration>4.java部分代码展示
4.1 controller层下对应代码
4.1.1 StudentController
@RestController
@Slf4j
public class StudentController {
@Autowired
private StudentService service;
@RequestMapping(value = "/student",method = RequestMethod.POST,params = {"id"})
public CommonResult getById(int id){
return service.selectByPrimaryKey(id);
}
@RequestMapping(value = "/findStudent",method = RequestMethod.POST)
public PageInfo<Student> findTestAll(Integer currentPage, Integer pageSize,@RequestBody Student student){
log.info(currentPage+"================="+pageSize);
return service.findAll(currentPage,pageSize,student);
}
@RequestMapping(value = "/deleteStudent",method = RequestMethod.POST)
public CommonResult deleteTestAll(int id){
return service.deleteByPrimaryKey(id);
}
//@RequestBody将json转换为java数据映射到student实体类中
@RequestMapping(value = "/insertStudent",method = RequestMethod.POST)
public CommonResult insertTestAll(@RequestBody Student student){
return service.insert(student);
}
@RequestMapping(value = "/updateStudent",method = RequestMethod.POST)
public CommonResult updateTestAll(@RequestBody Student student){
System.out.println(student);
return service.updateByPrimaryKeySelective(student);
}
}4.1.2 UserController
@RestController
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/login")
public CommonResult testLogin(String username, String password, HttpSession httpSession){
return userService.getName(username, password,httpSession);
}
}
4.2 dao包
4.2.1 StudentMapper
public interface StudentMapper {
int deleteByPrimaryKey(Integer id);
int insert(@Param("record") Student record, @Param("year") int year);
int insertSelective(Student record);
Student selectByPrimaryKey(Integer id);
int updateByPrimaryKeySelective(@Param("record") Student record, @Param("birth") int year);
int updateByPrimaryKey(Student record);
List<Student> findAll(Student student);
}4.2.2 UserMapper
public interface UserMapper {
public User getName(@Param("name") String username, @Param("pass") String password, HttpSession httpSession);
}4.3 entity包
4.3.1 Student
@AllArgsConstructor
@NoArgsConstructor
public class Student {
private Integer id;
private String name;
private String sex;
@JsonSerialize(using = LocalDateSerializer.class)
@JsonDeserialize(using = LocalDateDeserializer.class)
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate birth;
private String department;
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 getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex == null ? null : sex.trim();
}
public LocalDate getBirth() {
return birth;
}
public void setBirth(LocalDate birth) {
this.birth = birth;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department == null ? null : department.trim();
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address == null ? null : address.trim();
}
@Override
public String toString() {
return "Student{" +
"id=" + id +
", name='" + name + '\'' +
", sex='" + sex + '\'' +
", birth='" + birth + '\'' +
", department='" + department + '\'' +
", address='" + address + '\'' +
'}';
}
}4.3.2 User
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private int id;
private String uername;
private String password;
public User(String uername, String password) {
this.uername = uername;
this.password = password;
}
}
4.4 interceptor
4.4.1 LoginInterceptor
public class LoginInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
Object user = session.getAttribute("user");
if (user != null) {
return true;
}
response.sendRedirect("login.jsp");
// PrintWriter writer = response.getWriter();
// response.setCharacterEncoding("utf-8");
// response.setContentType("application/json;charset=utf-8");
// writer.write(new ObjectMapper().writeValueAsString(CommonResult.error("未知异常")));
// writer.flush();
// writer.close();
return false;
}
}4.5 service
4.5.1 UserService
public interface UserService {
CommonResult getName(@Param("name") String username, @Param("pass") String password, HttpSession httpSession);
}4.5.2 StudentService
public interface StudentService {
CommonResult selectByPrimaryKey(Integer id);
PageInfo<Student> findAll(Integer currentPage, Integer pageSize,Student student);
CommonResult deleteByPrimaryKey(Integer id);
CommonResult insert(Student record);
CommonResult updateByPrimaryKeySelective(Student record);
}
4.5.3(1) UserServiceImpl
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
public CommonResult getName(String username, String password, HttpSession httpSession) {
User passName = userMapper.getName(username, password, httpSession);
if(passName!=null){
httpSession.setAttribute("user",passName);
return CommonResult.success(passName);
}else {
return CommonResult.notFont();
}
}
}4.5.3(2) StudentServiceImpl
@Service
public class StudentServiceImpl implements StudentService {
//byType
@Autowired
private StudentMapper studentMapper;
public CommonResult selectByPrimaryKey(Integer id) {
Student student = studentMapper.selectByPrimaryKey(id);
return CommonResult.success(student);
}
public PageInfo<Student> findAll(Integer currentPage, Integer pageSize,Student student){
PageHelper.startPage(currentPage,pageSize);
List<Student> all = studentMapper.findAll(student);
PageInfo<Student> studentPageInfo = new PageInfo<>(all);
return studentPageInfo;
}
public CommonResult deleteByPrimaryKey(Integer id) {
int i = studentMapper.deleteByPrimaryKey(id);
return CommonResult.success(i);
}
public CommonResult insert(Student record) {
int insert = studentMapper.insert(record,record.getBirth().getYear());
return CommonResult.success(insert);
}
public CommonResult updateByPrimaryKeySelective(Student record) {
int i = studentMapper.updateByPrimaryKeySelective(record,record.getBirth().getYear());
return CommonResult.success(i);
}
}
4.6 utils公共类
4.6.1 CommonResult
@Data
@AllArgsConstructor
@NoArgsConstructor
public class CommonResult {
private final static int success=200;
private final static int error=500;
private final static int not_fount=404;
private int code;
private String msg;
private Object data;
public static CommonResult success(Object data){
return new CommonResult(CommonResult.success,"查询成功",data);
}
public static CommonResult error(Object data){
return new CommonResult(CommonResult.error,"登录异常，请联系管理员",data);
}
public static CommonResult notFont(){
return new CommonResult(CommonResult.not_fount,"未找到",null);
}
}4.7 test（为自动生成）
public class UserTest {
public static void main(String[] args) throws Exception {
List<String> warnings = new ArrayList<String>();
boolean overwrite = true;
//注意此处的generator.xml，要跟自己的generator的全局配置文件命名一致generator在根目录下
File configFile = new File("generator.xml");
ConfigurationParser cp = new ConfigurationParser(warnings);
Configuration config = cp.parseConfiguration(configFile);
DefaultShellCallback callback = new DefaultShellCallback(overwrite);
MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
myBatisGenerator.generate(null);
}
}5.resources部分
5.1 spring.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"
xmlns:mvc="http://www.springframework.org/schema/mvc"
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 http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="com.qy151wd"/>
<mvc:annotation-driven/>
<mvc:default-servlet-handler/>
<!--数据源配置-->
<bean id="ds" class="com.alibaba.druid.pool.DruidDataSource">
<!--驱动名称-->
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/mydb?serverTimezone=Asia/Shanghai"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
<!--初始化连接池的个数-->
<property name="initialSize" value="5"/>
<!--最少的个数-->
<property name="minIdle" value="5"/>
<!--最多的个数-->
<property name="maxActive" value="10"/>
<!--最长等待时间单位毫秒-->
<property name="maxWait" value="3000"/>
</bean>
<!--sessionFactory 整合mybatis-->
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--dataSource：不可随意改名字 ref：注意跟上边的id内容一致-->
<property name="dataSource" ref="ds"/>
<!--设置mybatis映射文件的路径-->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
<!--设置分页-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
</bean>
</array>
</property>
</bean>
<!--为dao接口生成代理实现类-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--为com.qy151wd.dao包下的接口生成代理实现类-->
<property name="basePackage" value="com.qy151wd.dao"/>
</bean>
<!--配置拦截器-->
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<mvc:exclude-mapping path="/css/**"/>
<mvc:exclude-mapping path="/js/**"/>
<mvc:exclude-mapping path="/login"/>
<mvc:exclude-mapping path="/login.jsp"/>
<bean class="com.qy151wd.interceptor.LoginInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>
</beans>5.2 mapper包下
5.2.1 UserMapper.xml
<mapper namespace="com.qy151wd.dao.UserMapper">
<select id="getName" parameterType="String" resultType="com.qy151wd.entity.User">
select * from tb_user where uername=#{name} and password=#{pass}
</select>
</mapper>5.2.2 StudentMapper.xml
此处为自动生成的代码
<mapper namespace="com.qy151wd.dao.StudentMapper">
<resultMap id="BaseResultMap" type="com.qy151wd.entity.Student">
<id column="id" jdbcType="INTEGER" property="id" />
<result column="name" jdbcType="VARCHAR" property="name" />
<result column="sex" jdbcType="VARCHAR" property="sex" />
<result column="birth" jdbcType="DATE" property="birth" />
<result column="department" jdbcType="VARCHAR" property="department" />
<result column="address" jdbcType="VARCHAR" property="address" />
</resultMap>
<sql id="Base_Column_List">
id, name, sex, birth, department, address
</sql>
<select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from student2
where id = #{id,jdbcType=INTEGER}
</select>
<select id="findAll" resultType="com.qy151wd.entity.Student">
select
<include refid="Base_Column_List" />
from student2
<where>
<if test="name!=null and name!=''">
and name like concat('%',#{name},'%')
</if>
<if test="sex!=null">
and sex=#{sex}
</if>
</where>
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
delete from student2
where id = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.qy151wd.entity.Student">
insert into student2 (id, name, sex,
birth, department, address
)
values (null, #{record.name,jdbcType=VARCHAR}, #{record.sex,jdbcType=VARCHAR},
#{year,jdbcType=DATE}, #{record.department,jdbcType=VARCHAR}, #{record.address,jdbcType=VARCHAR}
)
</insert>
<insert id="insertSelective" parameterType="com.qy151wd.entity.Student">
insert into student2
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">
id,
</if>
<if test="name != null">
name,
</if>
<if test="sex != null">
sex,
</if>
<if test="birth != null">
birth,
</if>
<if test="department != null">
department,
</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="sex != null">
#{sex,jdbcType=VARCHAR},
</if>
<if test="birth != null">
#{birth,jdbcType=DATE},
</if>
<if test="department != null">
#{department,jdbcType=VARCHAR},
</if>
<if test="address != null">
#{address,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<!--注意此处部分更新要考虑到字符串为null的情况-->
<update id="updateByPrimaryKeySelective" parameterType="com.qy151wd.entity.Student">
update student2
<set>
<if test="record.name != null and record.name != 'null'">
name = #{record.name,jdbcType=VARCHAR},
</if>
<if test="record.sex != null and record.sex != 'null'">
sex = #{record.sex,jdbcType=VARCHAR},
</if>
<if test="birth != null">
birth = #{birth,jdbcType=DATE},
</if>
<if test="record.department != null and record.department != 'null'">
department = #{record.department,jdbcType=VARCHAR},
</if>
<if test="record.address != null and record.address != 'null'">
address = #{record.address,jdbcType=VARCHAR,},
</if>
</set>
where id = #{record.id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.qy151wd.entity.Student">
update student2
set name = #{name,jdbcType=VARCHAR},
sex = #{sex,jdbcType=VARCHAR},
birth = #{birth,jdbcType=DATE},
department = #{department,jdbcType=VARCHAR},
address = #{address,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</mapper>6.webapp部分
6.1 WEB-INF
6.1.1 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">
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</init-param>
<!--当tomcat启动时创建DipatcherServlet 默认当访问controller路径时创建-->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<!--
/ 不拦截 有后缀的 例如 .jsp 会拦截静态资源
/* 都拦截
-->
<url-pattern>/</url-pattern>
</servlet-mapping>
<filter>
<filter-name>encoder</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encoder</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>6.2 前端界面代码
6.2.1 登录界面(login.jsp)
<html>
<head>
<title>登录页面</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
}
#con{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 340px;
height: 300px;
border: 1px solid;
padding-right: 15px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50px;
text-align:center;
}
</style>
</head>
<body>
<div id="con">
<el-row :gutter="1" style="margin-top: 40px">
<el-col :span="22">
<el-form label-width="80px" :model="form" style="margin-top: 50px" :rules="rules">
<el-form-item label="账号" prop="username">
<el-input v-model="form.username" placeholder="请输入账号名"></el-input>
</el-form-item>
<el-form-item label="密码" style="color: #000000" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</body>
<script>
var con=new Vue({
el:"#con",
data: {
form: {
username: "",
password: ""
}
},
methods:{
submitForm(){
var that=this;
var qs=Qs;
axios.post("login", qs.stringify(this.form)).then(function (result) {
if(result.data.code==200){
that.$message.success("登录成功");
setTimeout(function () {
window.location.href="elementui.html";
},1000)
}else{
that.$message.error(result.data.msg);
}
})
}
}
})
</script>
</html>6.2.2 登录成功进入界面(elementui.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>elementui</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="con">
<div align="center">
<el-button type="primary" @click="insert">添加</el-button>
<el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchForm">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchForm.sex" placeholder="请输入性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="编号"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="birth"
label="生日">
</el-table-column>
<el-table-column
prop="department"
label="部门">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="success" size="small" class="el-icon-edit" @click="updateRow(scope.row)">编辑</el-button>
<el-button type="warning" size="small" class="el-icon-delete" @click="deleteRow(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog title="学生信息修改" :visible.sync="dialogFormVisible" >
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="编号" :label-width="formLabelWidth" prop="id">
<el-input v-model="form.id" placeholder="编号" readonly></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" placeholder="姓名" ></el-input>
</el-form-item>
<el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth">
<el-input v-model="form.birth" placeholder="出生日期" ></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth" prop="address">
<el-input v-model="form.address" placeholder="地址"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-input v-model="form.sex" placeholder="性别"></el-input>
</el-form-item>
<el-form-item label="部门" :label-width="formLabelWidth" prop="department">
<el-input v-model="form.department" placeholder="部门"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button type="primary" @click="onSubmit('form')">确 定</el-button>
<el-button type="primary" @click="onRemove">取消</el-button>
</div>
</el-dialog>
<el-dialog title="学生信息添加" :visible.sync="adddialogFormVisible" >
<el-form :model="addform" ref="addform" :rules="rules">
<el-form-item label="编号" :label-width="formLabelWidth" prop="id">
<el-input v-model="addform.id" placeholder="编号" readonly></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="addform.name" placeholder="姓名" ></el-input>
</el-form-item>
<el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth">
<el-input v-model="addform.birth" placeholder="出生日期" ></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth" prop="address">
<el-input v-model="addform.address" placeholder="地址"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-input v-model="addform.sex" placeholder="性别"></el-input>
</el-form-item>
<el-form-item label="部门" :label-width="formLabelWidth" prop="department">
<el-input v-model="addform.department" placeholder="部门"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button type="primary" @click="addinsert('addform')">确 定</el-button>
<el-button type="primary" @click="onRemo">取消</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
var con=new Vue({
el:"#con",
data:{
searchForm:{
},
//当前显示的页面变量
currentPage:1,
//
pageSizes:[5,10,15,20],
pageSize:5,
//总条数
total:0,
tableData:[],
dialogFormVisible:false,
adddialogFormVisible:false,
formLabelWidth:"80px",
form:{
id:0,
name:'',
birth:'',
address:'',
sex:'',
department:''
},
addform:{
id:0,
name:'',
birth:'',
address:'',
sex:'',
department:''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ pattern:/^[1-9][0-9]{0,1}$/, message: '请输入1~99之间的数字', trigger: 'blur'}
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' }
],
sex: [
{ required: true, message: '请输入性别', trigger: 'blur' },
{ min:1,max:1, message: '请输入男或女', trigger: 'blur'}
]
}
},
created(){
this.init();
},
methods: {
//搜索按钮事件
onSearch(){
this.init();
this.searchForm={};
},
handleSizeChange(val) {
this.pageSize=val;
this.init();
},
handleCurrentChange(val) {
//console.log("当前页"+val+"条");
this.currentPage=val;
this.init();
},
init() {
var that = this;
axios.post("findStudent?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(function (result) {
that.tableData = result.data.list;
that.total=result.data.total;
})
},
deleteRow(id) {
var that = this;
axios.post("deleteStudent?id="+id).then(function (result) {
if (result.data.code === 200) {
that.$message.success("删除成功");
that.init();
}
})
},
updateRow(row) {
this.dialogFormVisible = true;
this.form = Object.assign({}, row);
},
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
axios.post("updateStudent",con.form).then(function (result) {
con.$message.success("修改成功");
con.init();
con.dialogFormVisible = false;
})
} else {
console.log('error submit');
return false;
}
})
},
onRemove() {
this.dialogFormVisible = false;
},
insert() {
this.adddialogFormVisible = true;
},
onRemo() {
this.$refs["addform"].resetFields();
this.adddialogFormVisible = false;
},
addinsert(addform1) {
console.dir(this.addform)
this.$refs[addform1].validate((valid) => {
if (valid) {
axios.post("insertStudent", con.addform).then(function (result) {
con.$message.success("添加成功");
con.init();
con.adddialogFormVisible = false;
for(var key in con.addform){
if(typeof con.addform[key]==='string'){
con.addform[key]='';
}else{
con.addform[key]=0;
}
}
})
} else {
console.log('error submit');
return false;
}
})
}
}
})
</script>
</html>