个人档案系统

2018-12-18 21:46:00     
本篇博客的项目地址:https://github.com/Bounds97/singleSystem

简介

本项目是一个简易版的个人档案系统,实现前后端分离,页面静态化。主要用到的技术有:

Spring阿里巴巴的Druid连接池技术

SpringMVC通过@ResponseBody注解返回json格式的数据给前端,@RequestBody注解接受前端传过来的json字符串数据给对应的参数

Mybatis Mybatis分页

restful风格 get、post、put、delete传值

ajax ajax异步请求

json实现前后端分离前后端相互建立一个约束关系,前端通过json字符串格式向后端传值,后端通过json格式返回给前端

layui前端框架数据表格、模块化、方法渲染、自动化渲染的重载

效果图如下:注意观察地址栏,至始至终都没有发生变化

主要代码

先定义好与sql交互的xml配置文件,主要用到的语句包含CRUD

<mapper namespace="top.bounds.mapper.TeacherMapper">
	<!-- 查询所有 -->
	<select id="listTeacher" resultType="Teacher">
		select * from teacher 
		<if test="start!=null and limit!=null">
			limit #{start},#{limit}
		</if>
	</select>
	<!-- 查询总数 -->
	<select id="total" resultType="_int">
            select count(*) from teacher     
        </select>
	<!-- 根据id查找 -->
	<select id="selectById" resultType="Teacher" parameterType="_int">
		select * from teacher where id = #{id}
	</select>
	<!-- 根据id查询总数  -->
	<select id="selectCountById" resultType="_int" parameterType="_int">
		select count(*) from teacher where id = #{id}
	</select>
	<!-- 修改一条记录 -->
	<update id="updateTeacher" parameterType="Teacher">
		update teacher set name=#{name} where id=#{id}
	</update>
	<!-- 删除一条记录 -->
	<delete id="deleteTeacher" parameterType="_int">
		delete from teacher where id=#{id}
	</delete>
	<!-- 插入一条记录 -->
	<insert id="addTeacher" parameterType="Teacher">
		insert into teacher(name) values(#{name})
	</insert>
</mapper>

设置mapper接口,主要负责与数据库进行交互设计,用来处理数据的持久化工作。设置service接口(与mapper接口一样),与mapper层交互并把数据返回给controller层

package top.bounds.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import top.bounds.pojo.Teacher;

public interface TeacherMapper {

	/**
	 * 查询所有
	 * @return
	 */
	public List<Teacher> listTeacher(@Param("start")int start, @Param("limit")int limit);

	/**
	 * 根据Id(内码)查找
	 * @param id
	 * @return
	 */
	public List<Teacher> selectById(int id);
	
	/**
	 * 更新记录
	 * @param teacher
	 */
	public int updateTeacher(Teacher teacher);
	
	/**
	 * 删除记录
	 * @param id
	 * @return
	 */
	public int deleteTeacher(int id);
	
	/**
	 * 增加记录
	 * @param teacher
	 * @return
	 */
	public int addTeacher(Teacher teacher); 
	
	/**
	 * 获取数据总数
	 * @return
	 */
	public int total();
	
	/**
	 * 根据获取数据总数
	 * @return
	 */
	public int selectCountById(int id);
}

实现service接口

package top.bounds.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import top.bounds.mapper.TeacherMapper;
import top.bounds.pojo.Teacher;
import top.bounds.service.TeacherService;

@Service
public class TeacherImpl implements TeacherService {

	@Autowired
	private TeacherMapper teacherMapper;

	@Override
	public List<Teacher> selectById(int id) {

		return teacherMapper.selectById(id);
	}

	@Override
	public int updateTeacher(Teacher teacher) {

		return teacherMapper.updateTeacher(teacher);
	}

	@Override
	public int deleteTeacher(int id) {

		return teacherMapper.deleteTeacher(id);
	}

	@Override
	public int addTeacher(Teacher teacher) {
		return teacherMapper.addTeacher(teacher);
	}

	@Override
	public List<Teacher> listTeacher(int start, int limit) {

		return teacherMapper.listTeacher(start,limit);
	}

	@Override
	public int total() {

		return teacherMapper.total();
	}

	@Override
	public int selectCountById(int id) {

		return teacherMapper.selectCountById(id);
	}

}

controller层,实现前后端交互

  • restful风格,数据接口于/teacher的形式显示
  • @ResponseBody注解将返回给前台的数据转化成json格式
  • @RequestBody注解将接收前台传过来的json字符串格式数据
  • @RequestParam注解将GET和POST请求传的参数会自动转换赋值@RequestParam 所注解的变量上
  • @Pathvariable注解绑定它传过来的值到方法的参数上 就是将@RequestMapping(value="/teacher/{id}")中的{id}值绑定到该方法的id参数上
package top.bounds.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import top.bounds.pojo.Teacher;
import top.bounds.service.TeacherService;

@Controller
public class TeacherController {

	@Autowired
	TeacherService teacherService;

	/**
	 * 查询
	 * 
	 * @ResponseBody 该注解代表的是将返回的数据转换成json格式
	 * @RequestParam GET和POST请求传的参数会自动转换赋值到@RequestParam 所注解的变量上。
	 * 					required:是否必须有值。
	 *               	defaultValue:默认值。
	 * @param teacherPage
	 * 
	 * @return
	 * 		返回的map由@ResponseBody转换成了json格式,且含code、msg、count、data四个key值,data必须是数组形式。
	 * 		这是前端layui数据表格的接口约束,必须遵守
	 */
	@RequestMapping(value = "/teacher", method = RequestMethod.GET)
	public @ResponseBody Map<String, Object> listTeacher(
			@RequestParam(required = false, defaultValue = "0") int page,
			@RequestParam(required = false, defaultValue = "10") int limit) {
		int start = page * limit - limit;
		List<Teacher> list = teacherService.listTeacher(start, limit);
		int total = teacherService.total();
		Object[] teacherArray = (Object[]) list.toArray();
		Map<String, Object> map = new HashMap<>();
		map.put("code", 0);
		map.put("msg", "ok");
		map.put("count", total);
		map.put("data", teacherArray);
		return map;
	}

	/**
	 * 更新 地址重定向
	 * @ResponseBody 该注解代表的是将返回的数据转换成json格式
	 * @RequestBody 该注解接收的是一个Json对象的字符串
	 * @param teacher
	 * @return
	 */
	@RequestMapping(value = "/teacher", method = RequestMethod.PUT)
	public @ResponseBody Map<String, Object> updateTeacher(@RequestBody Teacher t) {
		int status = teacherService.updateTeacher(t);
		Map<String, Object> map = new HashMap<>();
		map.put("status", status);
		return map;
	}

	/**
	 * 删除 地址重定向
	 * 
	 * @Pathvariable 该注解绑定它传过来的值到方法的参数上 就是将@RequestMapping(value =
	 *               "/teacher/{id}")中的{id}值绑定到该方法的id参数上
	 * @param id
	 * @return
	 */
	@RequestMapping(value = "/teacher/{id}", method = RequestMethod.DELETE)
	public @ResponseBody Map<String, Object> deleteTeacher(@PathVariable int id) {
		int status = teacherService.deleteTeacher(id);
		Map<String, Object> map = new HashMap<>();
		map.put("status", status);
		return map;
	}

	/**
	 * 新增 地址重定向
	 * @ResponseBody 该注解代表的是将返回的数据转换成json格式
	 * @RequestBody 该注解接收的是一个Json对象的字符串
	 * @param teacher
	 * @return
	 */
	@RequestMapping(value = "/teacher", method = RequestMethod.POST)
	public @ResponseBody Map<String, Object> addTeacher(@RequestBody Teacher t) {
		int status = teacherService.addTeacher(t);
		Map<String, Object> map = new HashMap<>();
		map.put("status", status);
		return map;
	}

	/**
	 * 根据id查询
	 * @Pathvariable 该注解绑定它传过来的值到方法的参数上 就是将@RequestMapping(value =
	 *               "/teacher/{id}")中的{id}值绑定到该方法的id参数上
	 * @param id
	 * @return
	 * 		返回的map由@ResponseBody转换成了json格式,且含code、msg、count、data四个key值,data必须是数组形式。
	 * 		这是前端layui数据表格的接口约束,必须遵守
	 */
	@RequestMapping(value = "/teacher/{id}", method = RequestMethod.GET)
	public @ResponseBody Map<String, Object> selectById(@PathVariable int id) {
		List<Teacher> list = teacherService.selectById(id);
		int total = teacherService.selectCountById(id);
		Object[] teacherArray = (Object[]) list.toArray();
		Map<String, Object> map = new HashMap<>();
		map.put("code", 0);
		map.put("msg", "");
		map.put("count", total);
		map.put("data", teacherArray);
		return map;
	}
}

spring的配置文件

<?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:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
     http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
     http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

	<!-- 扫描包,通过注解,将Service的生命周期纳入Spring的管理 -->
	<context:component-scan base-package="top.bounds.impl" />
	<!-- 配置Druid连接池 -->
	<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"
		init-method="init" destroy-method="close">
		<!-- 基本属性 url、user、password -->
		<property name="url"
			value="jdbc:mysql://localhost:3306/transaction?characterEncoding=UTF-8" />
		<property name="username" value="root" />
		<property name="password" value="123456" />
		<property name="driverClassName" value="com.mysql.jdbc.Driver" />

		<!-- 配置初始化大小、最小、最大 -->
		<property name="initialSize" value="3" />
		<property name="minIdle" value="3" />
		<property name="maxActive" value="20" />

		<!-- 配置获取连接等待超时的时间 -->
		<property name="maxWait" value="60000" />

		<!-- 配置间隔多久才进行一次检测,检测需要关闭的空闲连接,单位是毫秒 -->
		<property name="timeBetweenEvictionRunsMillis" value="60000" />

		<!-- 配置一个连接在池中最小生存的时间,单位是毫秒 -->
		<property name="minEvictableIdleTimeMillis" value="300000" />

		<property name="validationQuery" value="SELECT 1" />
		<property name="testWhileIdle" value="true" />
		<property name="testOnBorrow" value="false" />
		<property name="testOnReturn" value="false" />

		<!-- 打开PSCache,并且指定每个连接上PSCache的大小 -->
		<property name="poolPreparedStatements" value="true" />
		<property name="maxPoolPreparedStatementPerConnectionSize"
			value="20" />
	</bean>
	<!-- 扫描存放SQL语句的XML配置文件 -->
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="typeAliasesPackage" value="top.bounds.pojo" />
		<!-- 注入数据库连接信息 -->
		<property name="dataSource" ref="dataSource" />
		<property name="mapperLocations" value="classpath:top/bounds/mapper/*.xml" />
	</bean>
	<!-- 扫描Mapper类 ,并将其生命周期纳入Spring的管理 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="top.bounds.mapper" />
	</bean>
</beans>

springmvc配置文件,允许js、css等静态资源的访问等

<?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:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
     http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
     http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

	<!-- 扫描Controller,并将其生命周期纳入Spring管理 -->
	<context:component-scan base-package="top.bounds.controller">
		<!-- 扫描top.bounds.controller包下@Controller注解 -->
		<context:include-filter type="annotation"
			expression="org.springframework.stereotype.Controller" />
	</context:component-scan>
	<!-- 扩充了注解驱动,可以将请求参数绑定到控制器参数 -->
	<mvc:annotation-driven>
		<mvc:message-converters register-defaults="true">
			<bean class="org.springframework.http.converter.StringHttpMessageConverter">
				<property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />
			</bean>
		</mvc:message-converters>
	</mvc:annotation-driven>
	<!-- 默认的静态资源 js、css等文件 -->
	<mvc:default-servlet-handler />
	<!-- 视图定位 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".html" />
	</bean>

</beans>

web.xml,因springMVC默认只能处理post和get的请求,所以需要在web.xml文件增加对put和delete请求的处理

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>ssmTest01</display-name>
	<!-- spring的配置文件 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:top/bounds/config/springConfig.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- 解决post提交中文乱码 -->
	<filter>
		<filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- SpringMVC 默认只能处理post和get,这里是增加对put和delete的处理 -->
	<filter>
		<filter-name>HiddenHttpMethodFilter</filter-name>
		<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>HiddenHttpMethodFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- spring mvc核心:分发servlet -->
	<servlet>
		<servlet-name>springmvcConfig</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<!-- spring mvc的配置文件 -->
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath*:top/bounds/config/springmvcConfig.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvcConfig</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

前端使用layui框架,只有一个页面test.html。所有操作都是用ajax和json与后台进行交互的,使用分页时,layui框架会自动帮我们实现分页,自动向后台传递page(当前页)、limit(每页显示的数量)两个参数。所以我们在前端不需要额外的写任何分页代码,只需要在后台去接收相应的参数并用sql与实现就好了

显示界面

<div style="text-align: center;">
	<div class="layui-inline">
		<div class="demoTable">
			搜索ID:
			<div class="layui-inline">
				<input class="layui-input" name="id" id="teacherId" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="reload">搜索</button>
		</div>
		<!-- 定义一个数据表格 id="test"-->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!-- 定义一个新增的form表单且是隐藏的,弹出时才显示  id="addTeacher"唯一标签-->
		<div class="layui-row" id="addTeacher" style="display: none;">
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">ID:</label>
					<div class="layui-input-inline">
						<input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">名称:</label>
					<div class="layui-input-inline">
						<input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<button type="button" class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 开启头部工具栏 -->
<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
  			</div>
		</script>
<!-- 定义数据表格内删除编辑按钮 -->
<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

往数据表格填充后台传过来的json格式数据,开始分页,layui自动向后台传递分页参数

/* 创建一个表格实例 */
table.render({
	/* 对应html中定义的那个数据表格 id="test" */
	elem: '#test',
	/* 请求后台的数据接口 ,该数据接口返回的是json数据,且一定要遵循layui的json格式约束 */
	url: 'teacher',
	/* 开启头部工具栏  */
	toolbar: '#toolbarDemo',
	limits: [5, 10, 15, 20],
	/* 数据表格标题 */
	title: '用户数据表',
	/* 表格显示的数据 */
	cols: [
		[{
			type: 'checkbox',
			fixed: 'left'
		}, {
			field: 'id',
			title: 'ID',
			width: 80,
			fixed: 'left',
			unresize: true,
			sort: true
		}, {
			field: 'name',
			title: '用户名',
			width: 120,
			edit: 'text'
		}, {
			title: '操作',
			toolbar: '#barDemo',
			width: 150
		}]
	],
	/* 是否开始分页  layui会自动帮你实现分页(向后台传递page和limit分页的值)你只需要在后台定义相关的分页实现即可 */
	page: true,
	/* 设置表格重载id */
	id: 'teacherReload',
	//固定大小 
	height: 400,
	width: 540
});

新增按钮操作,先在页面定义一个隐藏的form表单,弹出再显示。ajax与后台交互

//头工具栏事件
table.on('toolbar(test)', function(obj) {
	var checkStatus = table.checkStatus(obj.config.id);
	switch (obj.event) {
		case 'add':
			layer.open({
				//layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
				type: 1,
				title: "新增",
				//设置放大与缩小 
				maxmin: true,
				/* 定义该弹出页面层的大小 可以是px,也可以是% */
				area: ['auto', 'auto'],
				/* 打开html中需要弹出的form表单 id="addTeacher" */
				content: $("#addTeacher").html(),
			});
			break;
	};
});
/* 监听form表单提交事件 data表示form表单中的所有数据集合 */
form.on('submit(demo2)', function(data) {
	/* ajax提交数据 */
	$.ajax({
		/* 提交到后台的接口  */
		url: 'teacher',
		/* 提交方式 */
		method: 'post',
		//设置请求参数类型为json字符串
		contentType:"application/json",
		/* data.field表示提交form表单中的所有元素,转换成json对象的字符串传入后台*/
		data: JSON.stringify(data.field),
		/* 数据为json格式 */
		dataType: 'JSON',
		/* 后台返回的json数据 这里只返回了一个status状态码  */
		success: function(result) {
			if (result.status == 1) {
				/* 关闭该弹出框 */
				layer.closeAll();
				layer.msg("新增成功", {
					icon: 6
				});
			} else {
				layer.msg("新增失败", {
					icon: 5
				});
			}
		}
	});
});

搜索按钮操作,涉及到layui方法渲染重载

var $ = layui.$,
	active = {
		reload: function() {
			var teacherId = $('#teacherId');
			//执行重载
			table.reload('teacherReload', {
				/* 提交到后台的接口  */
				url: 'teacher/'+teacherId.val(),
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		}
	};
$('.demoTable .layui-btn').on('click', function() {
	var type = $(this).data('type');
	active[type] ? active[type].call(this) : '';
});

修改与删除操作,都是使用ajax和json字符串向后台传递数据

//监听行工具事件 obj表示数据表格的所有数据集合 
table.on('tool(test)', function(obj) {
	var data = obj.data;
	if (obj.event === 'del') {
		/* layui的提示框 */
		layer.confirm('真的删除行么', function(index) {
			/* ajax方式提交数据 */
			$.ajax({
				/* 提交到后台的接口  */
				url: "teacher/" + data.id,
				/* 提交方式为post */
				type: "DELETE",
				/* 数据为json格式 */
				dataType: "json",
				/* 后台返回的json数据 这里只返回了一个status状态码  */
				success: function(result) {
					if (result.status == 1) {
						// 同步删除表格和缓存对应的值
						obj.del();
						/* 关闭弹出框 */
						layer.close(index);
						layer.msg("删除成功", {
							icon: 6
						});
					} else {
						layer.msg("删除失败", {
							icon: 5
						});
					}
				}
			});
		});
	} else if (obj.event === 'edit') {
		layer.prompt({
			formType: 2,
			/* 获取原来的name值 */
			value: data.name
		}, function(value, index) {
			var teacherData = {"name": value, "id": data.id};
			$.ajax({
				/* 提交到后台的接口  */
				url: "teacher",
				type: "PUT",
				//设置请求参数类型为json字符串
				contentType:"application/json",
				/*将teacherData的json格式转换成json对象的字符串传入后台 */
				data: JSON.stringify(teacherData),
				dataType: "json",
				success: function(result) {
					if (result.status == 1) {
						layer.close(index);
						//同步更新表格和缓存对应的值
						obj.update({
							/* 将修改的name赋值到数据表格中 */
							name: value
						});
						layer.msg("修改成功", {
							icon: 6
						});
					} else {
						layer.msg("修改失败", {
							icon: 5
						});
					}
				}

			});
		});
	}
});

总结

  • layui是国内开源的前端框架,其功能怎样我并不好评价,因为我主要是后端开发,对于前端无从下手的人来说,layui算是不错的选择。我是直接上手的,没有去学习过layui,因此在运用的过程中处处碰壁,也是说明自己水平不够吧
  • 使用restful风格之后,URL就变得更统一。REST的核心在于,当你设计一个系统的时候,资源是第一位的考虑,你首先从资源的角度进行系统的拆分、设计,而不是像以往一样以操作为角度来进行设计。基于这些问题,我们的另一种方法是基于资源的角度来搞,但这个太难了我至今其实没想明白到底是怎么搞的
  • 前后端通过json实现了完全分离,只要前端和后端约定好数据接口就行。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互
XMind+win激活过程

XMind+win激活过程, 这里提供激活工具:下载地址:XMind激活工具,下载安装软件,软件官网下载地址:https://www.xmind.cn/xmind/downloads(这是官网最新下载地址,建议不要去别的乱下 网上很多被改过的盗版软件网站) 如果已经下好安装好 如何辨别需不需要重新下载安装(辨别是否正版:http://pigsou.com/content.html?id=1174 )

RESTful API 最佳实践

RESTful 的核心思想就是,客户端发出的数据操作指令都是"动词 + 宾语"的结构。比如,GET /articles这个命令,GET是动词,/articles是宾语。 动词通常就是五种 HTTP 方法,对应 CRUD 操作。 GET:读取(Read)POST:新建(Create)PUT:更新(Update)PATCH:更新(Update),通常是部分更新DELETE:删除(Delete) 根据 HTTP 规范,动词一律大写。有些客户端只能使用GET和POST这两种方法。服务器必须接受POST模拟其他三个方法(PUT、PATCH、DELETE)

 发表评论