devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

java springBoot连接数据库进行增删改查、模糊查询、表连接、全选操作、分页操作、数据回显_java增删改查怎么看前端的回显

作者：不正经 | 2024-03-14 09:08:37

赞

踩

java增删改查怎么看前端的回显
  1. 写这篇博客，一是为了帮大家一块入门，共同进步，二也是为了让自己有所进步，下面代码有冗余现象正常，有不规范的地方也是正常，入门阶段，代码能跑，心满意足。
  2. 代码摆在这了，在我这里是可以运行的，不然我也不会发出来，看的时候仔细看，需要注意的地方我都标出来了，只要注意，完全没问题的，报错，是你自己写错代码了，不要埋怨自己的机子不行、环境不行什么的。从自身出发，寻找自己的问题，同时也欢迎大佬斧正。
  3. 进入正题。首先看下目录结构，我把需要注意的用红色码标注了，没必要看的就用黄色的挡住了。这次主要操作的是work这个数据表
  4. 每一个文件都要注意下有没有注解。就是以@开头的东西。
  5. 这里需要注意的是，所有的目录，都是在启动项目录的下层的。这个是必须在它下层的（同级可能也可以，没试过）。
  6. 在这里插入图片描述

连接数据库前的配置

首先实在跟application.properties文件相同的位置新键一个application.yml文件（直接新键文件，然后改后缀就行，这个没必要讲，常识）。
8080是端口号，我是默认的，没有修改，改了的话就用自己的。
下面url地方有需要改的。
url里面有个yhy?,yhy是我的数据库名，这个改成自己的，问号要保留。
其他地方都不需要改，包括dirver-class-name。

server:
  port: 8080 
  servlet:
    context-path:      
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/yhy?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

实体类代码

这里的代码没什么好说的，就是根据数据表里面的字段名，封装起来，然后写getter、setter方法。我把需要导的包页写上了，不合适的可以对照一下，写这个报错的话，一定别把包导错了。
必须要说的一点是，必须要写注解！！！实体里面我写了三个注解

package com.example.stu;

  • 1

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
//work是我的表名，到时候替换成自己的就可以了
@Entity(name = “work”)
@Table(name = “work”)//这个貌似可以不写，到时候试试，不行就删了，
public class Work {
@Id @GeneratedValue(strategy = GenerationType.IDENTITY)//规定默认的id
private String id;//id
private String name;//姓名
private String cla;//班级
//这里我还省略了很多的字段名，下面代码碰到字段名我会指出
//写getter/setter方法

关键部分①DAO部分代码

因为大部分的方法都来自继承的对象，所以基本用不到sql语句了，用sql语句纯粹是无奈之举，实在不会了才用sql语句。而且在这里使用sql语句，就失去了springBoot的意义了。（个人理解，大佬指点批评，虚心接受）

package com.example.dao;

  • 1

import org.springframework.data.domain.Pageable;
import java.util.List;
import java.util.Map;

import org.springframework.data.domain.Page;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;

import com.example.stu.Work;

public interface WorkDAO extends PagingAndSortingRepository<Work, String>,JpaSpecificationExecutor<Work>{

<span class="token comment">//查询所有数据的方法</span>
<span class="token annotation punctuation">@Query</span><span class="token punctuation">(</span><span class="token string">"from work w order by w.id asc"</span><span class="token punctuation">)</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>Work<span class="token punctuation">&gt;</span></span> <span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//findAll方法有内置的，这里写sql语句是刚开始学的时候用的。而且这里用的sql语句已经不是原生的sql语句了，原生的sql语句写法见表连接方法</span>
<span class="token comment">//模糊查询  findBy**Like*(参数)是内置的方法，**代表字段名，详细的介绍我有一篇单独的博客，可以参考一下</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>Work<span class="token punctuation">&gt;</span></span> <span class="token function">findByidLike</span><span class="token punctuation">(</span>String id<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//通过tell字段名进行精确查询,效果跟下面的sql相同</span>
<span class="token comment">//原生sql：select * from work where tell = ?</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>Work<span class="token punctuation">&gt;</span></span> <span class="token function">findBytell</span><span class="token punctuation">(</span>String tell<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//修改，因为要数据回显，所以要有一个单独的方法查询，返回值是Work，根据id查询</span>
Work <span class="token function">findByid</span><span class="token punctuation">(</span>String id<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//表连接，实属无奈，不会，只能用sql语句了，还是用原生的。在最后加上那个，就是代表的原生sql cla是我的另一个表</span>
<span class="token annotation punctuation">@Query</span><span class="token punctuation">(</span>value<span class="token operator">=</span><span class="token string">"select * from work w join cla c on w.cla = c.cid"</span><span class="token punctuation">,</span>nativeQuery <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>Map<span class="token punctuation">&gt;</span></span> <span class="token function">findAllData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//表连接返回值是list&lt;map&gt;!!!</span>
<span class="token comment">//分页，这里的findAll参数跟上面的findAll参数不同，所以问题不大。返回值是page的findAll方法也是有内置的，但是没用过，当时时间不充足，没时间试，就写了sql语句</span>
<span class="token comment">//@Query("from work w order by w.id asc")</span>
Page<span class="token generics function"><span class="token punctuation">&lt;</span>Work<span class="token punctuation">&gt;</span></span> <span class="token function">findAll</span><span class="token punctuation">(</span>Pageable page<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//分页表连接</span>
<span class="token annotation punctuation">@Query</span><span class="token punctuation">(</span>value<span class="token operator">=</span><span class="token string">"select * from work w join cla c on w.cla = c.cid"</span><span class="token punctuation">,</span>nativeQuery <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
Page<span class="token operator">&lt;</span>List<span class="token generics function"><span class="token punctuation">&lt;</span>Map<span class="token punctuation">&gt;</span></span><span class="token operator">&gt;</span> <span class="token function">findAllMap</span><span class="token punctuation">(</span>Pageable page<span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

}

继承DAO service部分代码

这里有两个注解，记得写上。
其他没什么要注意的了

package com.example.service;

  • 1

import java.util.List;

import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;

import com.example.dao.WorkDAO;
import com.example.stu.Work;

@Service
public class WorkService {
@Autowired
//查询全部
private WorkDAO workDAO;
public List<Work> findAll(){
return workDAO.findAll();
}
public List<Map> findAllData(){
return workDAO.findAllData();
}
//根据id查询
public Work findId(String id){
return workDAO.findByid(id);
}
//模糊查询
public List<Work> findByIdLike(String id){
return workDAO.findByidLike(id);
}
//添加
public void save(Work work) {
workDAO.save(work);
}
//验证手机号唯一
public List<Work> findBytell(String tell){
return workDAO.findBytell(tell);
}
//删除
public void del(Work work) {
workDAO.delete(work);
}
//分页
public Page<Work> findpage(Pageable page){
return workDAO.findAll(page);
}
//分页表连接
public Page<List<Map>> findAllMap(Pageable page){
return workDAO.findAllMap(page);
}
}

重点 controller代码

这里我把导入的包先单独放一块了，分页要导入的包自己注意下，别导错了

package com.example.controller;

  • 1

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;//分页
import org.springframework.data.domain.PageRequest;//分页
import org.springframework.data.domain.Pageable;//分页
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.service.ClaService;
import com.example.service.WorkService;
import com.example.stu.Cla;
import com.example.stu.Work;

主体代码

@Controller
@RequestMapping("work")//应该可以解释为给以下内容起个名字
public class WorkController {
	@Autowired
	private WorkService workService;
	@Autowired
	private ClaService claService;
	/**
	 * @param 首页模块
	 * @return 首页
	 */
	@RequestMapping(value = "index")//给当前的方法起名字，调用的时候是work/index
	//这里是向html首页映射值的部分，还是映射了两个值，映射一个的话就省略一块就行
	public String index(Model model) {//model就是向模板映射的方法
		//传work
		List<Work> data = workService.findAll();
		model.addAttribute("data", data);//向模板映射值
		//传cla，这里是传的另一个表的数据，需要在同目录下新建entiy、dao、service什么的，我就不列出来了，下面的方法我没有写出来
		List<Cla> list = claService.findAll();
		model.addAttribute("list", list);
		return "/workIndex";//返回值是返回到首页，workindex是首页文件名，没有后缀是我提前在其他地方改好了，你没有改的话就写workindex.html。在stringBoot中，貌似不能直接打开html/jsp文件，只能通过controller中的方法来调用html/jsp文件。所以说在这要打开html文件的话用localhost:8080/work/index就可以了。index是注解中的index
	}
	/**
	 * @param 表连接向模板映射值
	 */
	 //这个跟上一个功能相同，都是向首页映射值，不过下面的是用表连接写,只能用其中一个，首页中我是接收的这个映射的值。（boss规定要用表连接，而且表连接方便后期修改）
	@RequestMapping(value = "indexAll")
	public String indexAll(Model model) {
		List<Map> list = workService.findAllData();
		model.addAttribute("data", list);
		return "/workIndex";
	}
	/**
	 * @prarm 添加模块
	 * @return 重定向返回首页模块
	 */
	//添加主体
	@RequestMapping("add")
	public String add(Model model) {
	//这里的这部分是向添加页面映射可选的班级有哪些，没有添加功能
		List<Cla> list = new ArrayList<Cla>();
		list = claService.findAll();
		model.addAttribute("data", list);
		return "/workAdd";
	}
	//添加功能在以下代码块实现
	@RequestMapping("save")
	public String save(HttpServletRequest req,Model model) {
		//获取值
		String id = req.getParameter("id");
		String ho[] = req.getParameterValues("hobby");//接收过来是数组的形式，然后用下面注释的那句转字符串格式，如果接收的是字符串，就没必要转，算是个例子
		//String province = StringUtils.join(pro,"|");
		String hobby = StringUtils.join(ho,"、");
		String intro = req.getParameter("intro");
		//赋值，这里字段名太多了，我删了几个，跟上面的对不起来页正常
		Work work = new Work();
		work.setId(id);
		work.setTell(tell);	
		//调用添加方法
		workService.save(work);//上面的基本都是废话，接收值和设置值的，只有这一步才是真正的实现添加功能
		//返回首页模块
		return "redirect:/work/indexAll";//redirect是重定向，不需要也不能导包，导了就报错。
	}
	/**
	 * @param 验证手机号唯一
	 * @return boolean
	 */
	 //规定的功能，没需求的话完全可以不写，就当是一个精确查询的模块
	@RequestMapping("tell")
	@ResponseBody
	public boolean tell(HttpServletRequest req) {
		String tell = req.getParameter("tell");
		List<Work> list = new ArrayList<Work>();
		list = workService.findBytell(tell);
		if(list.size()>0) {
			//>0查询到数据，不可以注册
			return false;
		}else {
			return true;
		}
	}

<span class="token comment">/**
 * @param 删除模块
 * @return 重定向返回主页模块
 */</span>
 <span class="token comment">//最喜欢删除模块了，简单直接，只需要传一个id就可以根据id进行删除，根据其他删除也类似</span>
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"del"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> String <span class="token function">del</span><span class="token punctuation">(</span>HttpServletRequest req<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	String id<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> req<span class="token punctuation">.</span><span class="token function">getParameterValues</span><span class="token punctuation">(</span><span class="token string">"id"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">int</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>id<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		Work work <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Work</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		work<span class="token punctuation">.</span><span class="token function">setId</span><span class="token punctuation">(</span>id<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		workService<span class="token punctuation">.</span><span class="token function">del</span><span class="token punctuation">(</span>work<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">return</span> <span class="token string">"redirect:/work/indexAll"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/**
 * @param 修改模块
 * @return 重定向返回主页模块
 */</span>
<span class="token comment">//获取需要修改的那条的信息，映射的到修改页面，然后调用添加方法。添加方法规定id将新内容替换原来的内容，不规定id，就是普通的添加，规定新的id，也是添加</span>
<span class="token comment">//向模板映射值后，点击添加，调用save方法，进行添加。修改的方法跟添加共用一个save方法。一定要注意修改时id的接收情况，不然有可能会成添加</span>
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"findId"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> String <span class="token function">findId</span><span class="token punctuation">(</span>HttpServletRequest req<span class="token punctuation">,</span>Model model<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	String id <span class="token operator">=</span>req<span class="token punctuation">.</span><span class="token function">getParameter</span><span class="token punctuation">(</span><span class="token string">"id"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	Work work <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Work</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	work <span class="token operator">=</span> workService<span class="token punctuation">.</span><span class="token function">findId</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
	model<span class="token punctuation">.</span><span class="token function">addAttribute</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span>work<span class="token punctuation">)</span><span class="token punctuation">;</span>

	List<span class="token generics function"><span class="token punctuation">&lt;</span>Cla<span class="token punctuation">&gt;</span></span> list <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token generics function"><span class="token punctuation">&lt;</span>Cla<span class="token punctuation">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	list <span class="token operator">=</span> claService<span class="token punctuation">.</span><span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	model<span class="token punctuation">.</span><span class="token function">addAttribute</span><span class="token punctuation">(</span><span class="token string">"list"</span><span class="token punctuation">,</span> list<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> <span class="token string">"/workExis"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

//分页
//分页是vue里面的，我给了他一个单独的index页面，因为这个不懂，所以就不写太多注释了
//调用首页
@RequestMapping(“VueIndex”)
public String VueIndex() {
return “/VueWorkIndex”;//这个是分页的首页文件名
}

@RequestMapping(“VuePage”)
@ResponseBody
public Page<List<Map>> VuePage(HttpServletRequest req){//这里一定要注意导的包是哪个；返回值是page类型的，里面的list<map>是为了满足表连接的需求才写的，不需要的可以直接写page<实体名>
//NowPage=0;
Integer NowPage = Integer.parseInt(req.getParameter(“page”));//获取当前页
Sort sort = null;
sort = new Sort(Sort.Direction.DESC,“id”);//根据id进行排序
Pageable Page = PageRequest.of(NowPage-1, 4, sort);//每四条数据为一页，这里为什么-1我也不知道，是自己试出来的，不-1出问题
Page<List<Map>> data = workService.findAllMap(Page);
return data;
}
}

写到这里，后端的代码基本完成了，光整理到这，就块一个多小时了。

前端代码，首页信息接收（无分页，分页在最下面）

这里的前端代码包含了全选效果，没必要的字段名都删了，表格对齐情况可能有点问题，自己使用的时候小细节修改一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

  • 1
  • 2
  • 3
  • 4
  • 5

<script src=“https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js”>
</script>
<script type=“text/javascript”>
KaTeX parse error: Expected '}', got 'EOF' at end of input: …oken function">("#all").on(“click”,function(){
if(i==false){
KaTeX parse error: Expected 'EOF', got '}' at position 618: …n punctuation">}̲</span><span cl…(“input[name=‘id’]”).prop(“checked”,false);
i=false;
}
});

<span class="token comment">//反选操作</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#Rev"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"[type=checkbox]:checkbox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>checked<span class="token punctuation">;</span>
        i<span class="token operator">=</span><span class="token operator">!</span>i<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//全不选操作</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#allNot"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input[name='id']"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"checked"</span><span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		i<span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

});

//批量删除判断数据量
function del() {

<span class="token keyword">var</span> j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"[type=checkbox]:checkbox"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	
  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>checked <span class="token operator">==</span><span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
  	j<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

});
if(j>=1){
return true;
}else{
alert(“至少选择一项内容”);
return false;

  <span class="token punctuation">}</span>

  • 1

}
</script>

</head>
<body>
<br />

<form action=“del”>
<table border=“1” width=“990px” cellspacing=“0” cellpadding=“5px” align=“center” style=“transparent;background-color:rgba(199,237,204,0.45)”>
<!-- 全选操作行 -->
<tr>
<td colspan=“9”>信息添加：&nbsp;&nbsp;<a href="/work/add"><input type=“button” value=“添加”/></a>
</td>
</tr>
<tr>
<td colspan=“9”>批量操作：&nbsp;&nbsp;
<input type=“submit” onclick=“return del()” value=“批量删除”>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type=“button” value=“全选” id = “all”/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type=“button” value=“反选” id = “Rev”/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type=“button” value=“全不选” id = “allNot”/>
</td>
</tr>

<!-- 表头行 -->
<tr>
<th width=“60px”>编号</th>
<th width=“120px”>账号</th>
<!-- 删了5个 -->
<th width=“350px”>简介</th>
<th width=“120px”>操作</th>
</tr>
<!-- 获取数据，循环输出 -->
<tr th:each=“work,loopStatus:KaTeX parse error: Expected 'EOF', got '&' at position 86: …n punctuation">&̲gt;</span></spa…{loopStatus.count}” ></span>
<span></span><input type=“checkbox” name=“id” th:value="KaTeX parse error: Expected 'EOF', got '&' at position 89: …n punctuation">&̲gt;</span></spa…{work.province+’,’+work.city+’,’+work.area}"></td>
<td align=“center” th:text="KaTeX parse error: Expected 'EOF', got '&' at position 92: …n punctuation">&̲gt;</span></spa…{work.intro}"></td>
<td align=“center”>
<a th:href="@{findId(id=KaTeX parse error: Expected 'EOF', got '}' at position 11: {work.id})}̲<span class="to…{work.id})}">
<input type=“button” value=“删除” /></a>
</td>
</tr>
</table>
</form>
</body>
</html>

添加页

有判断唯一性的（ajax）、省市级三级联动效果（自己百度的代码，直接复制上了）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

  • 1
  • 2
  • 3
  • 4
  • 5

<script src=“https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js”>
</script>
<script type=“text/javascript”>
$(function () {

<span class="token comment">//AJAX判断手机号唯一性</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#tell"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keyup</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">//获取输入的tell值</span>
	<span class="token comment">//alert(2);</span>
	<span class="token keyword">var</span> tell <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#tell"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token comment">//alert(tell);</span>
	$<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/work/tell"</span><span class="token punctuation">,</span><span class="token punctuation">{</span>tell<span class="token punctuation">:</span>tell<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token comment">//alert(data);</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>tell <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token comment">//接收到的data为Boolean型</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">"&lt;font color='green' size='1px'&gt; &amp;nbsp;可以注册&lt;/font&gt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#submit"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'disabled'</span><span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
				<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#text"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">"&lt;font color='red' size='1px'&gt; &amp;nbsp;重复，禁止注册&lt;/font&gt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#submit"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'disabled'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

});
</script>
<script src=“https://cdn.bootcss.com/jquery/3.2.1/jquery.js”></script>
<script src=“https://cdn.bootcss.com/distpicker/2.0.1/distpicker.js”></script>
</head>
<body>
<br /><br />
<table border=“1” cellspacing=“0” cellpadding=“5px” width=“700px” align=“center” >
<tr>
<td>
<form action="/work/save">
<!-- 添加唯一性判断，调用上面的AJAX -->
手机号：<input type=“text” id=“tell” name=“tell”><span id=“text”></span><br /><br />

姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type=“text” name=“name”><br /><br /><!-- 最普通常用的input text标签，放出来给大家看下 -->
班&nbsp;&nbsp;&nbsp;&nbsp;级：<!-- 这里需要获取映射的值，是下拉框 -->
<select name=“cla” >
<option th:each=“cla: d a t a < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > " < / s p a n > < / s p a n > < s p a n c l a s s = " t o k e n a t t r − n a m e " > < s p a n c l a s s = " t o k e n n a m e s p a c e " > t h : < / s p a n > v a l u e < / s p a n > < s p a n c l a s s = " t o k e n a t t r − v a l u e " > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > = < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > " < / s p a n > {data}<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">th:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> data<spanclass="tokenpunctuation">"</span></span><spanclass="tokenattr−name"><spanclass="tokennamespace">th:</span>value</span><spanclass="tokenattr−value"><spanclass="tokenpunctuation">=</span><spanclass="tokenpunctuation">"</span>{cla.cid}” th:text="${cla.cname}"></option>
</select><br /><br />
<!-- 单选框，二选一 -->
性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type=“radio” name=“sex” value=“男”>男&nbsp;&nbsp;<input type=“radio” name=“sex” value=“女”>女<br /><br />
<!-- 省市级三级联动，直接复制上就行，我是把省市级三个分别存到三个数据栏里面了，由于实力原因（也可能是js中写死了，可以换个三级联动的例子试试），没能实现修改页面数据回显 -->
<div data-toggle=“distpicker” data-autoselect=“3”>
地&nbsp;&nbsp;&nbsp;&nbsp;址：
<select name=“province”></select>
<select name=“city”></select>
<select name=“area”></select>
</div><br /><br />
<!-- 多选框，由于数据库保存方式的原因，没能实现在修改页面的数据回显 -->
爱&nbsp;&nbsp;&nbsp;&nbsp;好：<input type=“checkbox” value=“代码” name=“hobby”>代码&nbsp;&nbsp;
<input type=“checkbox” value=“游戏” name=“hobby”>游戏&nbsp;&nbsp;
<input type=“checkbox” value=“音乐” name=“hobby”>音乐&nbsp;&nbsp;<br /><br />
<!-- 文本域 -->
简&nbsp;&nbsp;&nbsp;&nbsp;介：<textarea rows=“5” cols=“35” name=“intro” style=resize:none;></textarea><br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type=“submit” value=“提交”><br />
</form>
</td>
</tr>
</table>
</body>
</html>

删除页

没有代码，直接在首页点删除，就直接删除了，没有什么多余的花里胡哨的代码

修改页

最烦的就是修改页了，代码多，花里胡哨的
实现效果：验证手机号是否唯一，文本域数据回显、单选框数据回显
bug：多选框、省市级三级联动（有自带的默认显示）没能实现数据回显；手机号部分，输入数据后，清空数据会提示可以注册/不能注册

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function () {
	//AJAX判断手机号唯一性
	$("#tell").keyup(function() {
		//获取输入的tell值
		//alert(2);
		var tell = $("#tell").val();//获取输入的tell
		//alert(tell);
		//将获取的tell传给controller，看返回值
		$.post("/work/tell",{tell:tell},function(data){
			//alert(data);
			if(tell != null){
				if(data){//接收到的data为Boolean型
					$("#text").html("<font color='green' size='1px'> &nbsp;可以注册</font>");
					$("#submit").attr('disabled',false);
				}else{
					$("#text").html("<font color='red' size='1px'> &nbsp;重复，禁止注册</font>");
					$("#submit").attr('disabled',true);
				}

		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

});
</script>
<!-- 地址jq -->
<script src=“https://cdn.bootcss.com/jquery/3.2.1/jquery.js”></script>
<script src=“https://cdn.bootcss.com/distpicker/2.0.1/distpicker.js”></script>

</head>
<body>
<!-- 主体修改表格 -->
<br /><br />
<table border=“1” cellspacing=“0” cellpadding=“5px” width=“700px” align=“center”>
<tr>
<td>
<form action="/work/save" method=“post” th:object="KaTeX parse error: Expected 'EOF', got '&' at position 86: …n punctuation">&̲gt;</span></spa…{list}" th:attr=“selected= d a t a . c l a = = c l a . c i d ? t r u e : s e l e c t e d < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > " < / s p a n > < / s p a n > < s p a n c l a s s = " t o k e n a t t r − n a m e " > < s p a n c l a s s = " t o k e n n a m e s p a c e " > t h : < / s p a n > v a l u e < / s p a n > < s p a n c l a s s = " t o k e n a t t r − v a l u e " > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > = < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > " < / s p a n > {data.cla==cla.cid?true:selected}<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">th:</span>value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> data.cla==cla.cid?true:selected<spanclass="tokenpunctuation">"</span></span><spanclass="tokenattr−name"><spanclass="tokennamespace">th:</span>value</span><spanclass="tokenattr−value"><spanclass="tokenpunctuation">=</span><spanclass="tokenpunctuation">"</span>{cla.cid}” th:text="KaTeX parse error: Expected 'EOF', got '&' at position 92: …n punctuation">&̲gt;</span></spa…{data.getSex()==‘男’?true:false}">男
&nbsp;&nbsp;
<input type=“radio” name=“sex” value=“女” th:attr=“checked=KaTeX parse error: Expected 'EOF', got '&' at position 189: …n punctuation">&̲gt;</span></spa…{province}”></select>
<select name=“city” th:text="{city}"></select>
<select name=“area” th:text="{area}"></select>
</div><br /><br />

爱&nbsp;&nbsp;&nbsp;&nbsp;好：
代码<input type=“checkbox” value=“代码” name=“hobby”>&nbsp;&nbsp;
游戏<input type=“checkbox” value=“游戏” name=“hobby”>&nbsp;&nbsp;
音乐<input type=“checkbox” value=“音乐” name=“hobby”>&nbsp;&nbsp;<br /><br />
<!-- 由于文本域没有value，所以要用text来实现数据回显 -->
简&nbsp;&nbsp;&nbsp;&nbsp;介：<textarea rows=“5” cols=“35” th:text="${data.intro}" name=“intro” style=resize:none; ></textarea><br /><br />
<input type=“submit” value=“提交”>
</form>
</td>
</tr>
</table>
</body>
</html>

分页index

代码是自己百度的，然后复制下来的，不太懂
分页这里只有index页不同，其他基本都一样的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 因为代码太长，我把全选部分删去了 -->

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

<style type=“text/css”>
.page-bar{margin:40px auto;margin-top: 150px;}
ul,li{margin: 0px;padding: 0px;}
li{list-style: none}
.page-bar li:first-child>a {margin-left: 0px}
.page-bar a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #5D6062;cursor: pointer;margin-right: 20px;}
.page-bar a:hover{background-color: #eee;}
.page-bar a.banclick{cursor:not-allowed;}
.page-bar .active a{color: #fff;cursor: default;background-color: #E96463;border-color: #E96463;}
.page-bar i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
</style>
</head>
<body>
<br />
<table border=“1” width=“990px” cellspacing=“0” cellpadding=“5px”
align=“center” style=“background-color: rgba(199, 237, 204, 0.45)”
id=“app”>
<tr>
<td colspan=“10”>
<!–分页–>
<div class=“page-bar”>
<ul>
<li v-if=“cur>1”><a v-on:click=“cur–,pageClick()”>上一页</a></li>
<li v-if=“cur==1”><a class=“banclick”>上一页</a></li>
<li v-for=“index in indexs” v-bind:class="{ ‘active’: cur == index}">
<a v-on:click=“btnClick(index)”>{{ index }}</a>
</li>
<li v-if=“cur!=all”><a v-on:click=“cur++,pageClick()”>下一页</a></li>
<li v-if=“cur == all”><a class=“banclick”>下一页</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th width=“60px”>编号</th>
<th width=“120px”>账号</th>
<th width=“90px”>姓名</th>

		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>240px<span class="token punctuation">"</span></span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>操作<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(site,key) in sites<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{key+1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{site.tell}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{site.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{site.cname}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>ype="button"
				value="删除"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>edit(site.id)<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
				<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>修改<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
	data<span class="token punctuation">:</span><span class="token punctuation">{</span>
		sites<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
		all<span class="token punctuation">:</span><span class="token number">6</span><span class="token punctuation">,</span>
		cur<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span>
		totalPage<span class="token punctuation">:</span><span class="token number">0</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dataListFn</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	methods<span class="token punctuation">:</span><span class="token punctuation">{</span>
		dataListFn<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token keyword">var</span> page <span class="token operator">=</span> index<span class="token punctuation">;</span>
			<span class="token comment">//alert(page);</span>
			$<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/work/VuePage"</span><span class="token punctuation">,</span><span class="token punctuation">{</span>page<span class="token punctuation">:</span>page<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token comment">//alert(12);</span>
				vm<span class="token punctuation">.</span>sites<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
				<span class="token comment">//var datalist=data.contene;</span>
				<span class="token comment">//alert(JSON.stringify(data.content));//接收数据成功</span>
				<span class="token keyword">var</span> len <span class="token operator">=</span> data<span class="token punctuation">.</span>content<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
				<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>len<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					vm<span class="token punctuation">.</span>sites<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>content<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				vm<span class="token punctuation">.</span>all <span class="token operator">=</span> data<span class="token punctuation">.</span>totalPages<span class="token punctuation">;</span>
				vm<span class="token punctuation">.</span>cur <span class="token operator">=</span> data<span class="token punctuation">.</span>number<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">;</span>
				vm<span class="token punctuation">.</span>totalPage <span class="token operator">=</span> data<span class="token punctuation">.</span>numberOfElements<span class="token punctuation">;</span>	
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>	
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//要注意其他方法写的位置，位置不合适会报错not find，我也是试了很多地方才找到这里的</span>
		del<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span>key<span class="token punctuation">)</span><span class="token punctuation">{</span>
			$<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/work/VueDel"</span><span class="token punctuation">,</span><span class="token punctuation">{</span>id<span class="token punctuation">,</span>id<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token operator">==</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					vm<span class="token punctuation">.</span>sites<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		edit<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span>key<span class="token punctuation">)</span><span class="token punctuation">{</span>
			window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token operator">=</span><span class="token string">"/work/VueEdit?id="</span><span class="token operator">+</span>id<span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		add<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token operator">=</span><span class="token string">"/work/add"</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//分页</span>
		btnClick<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment">//页码点击事件</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span>data <span class="token operator">!=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cur<span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>cur <span class="token operator">=</span> data
			<span class="token punctuation">}</span>
			<span class="token comment">//根据点击页数请求数据</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dataListFn</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cur<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		pageClick<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token comment">//根据点击页数请求数据</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dataListFn</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cur<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
	<span class="token comment">//分页</span>
		indexs<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token keyword">var</span> left <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
			<span class="token keyword">var</span> right <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>all<span class="token punctuation">;</span>
			<span class="token keyword">var</span> ar <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>all<span class="token operator">&gt;=</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cur <span class="token operator">&gt;</span> <span class="token number">3</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cur <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>all<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					left <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cur <span class="token operator">-</span> <span class="token number">2</span>
					right <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cur <span class="token operator">+</span> <span class="token number">2</span>
				<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
					<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cur<span class="token operator">&lt;=</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						left <span class="token operator">=</span> <span class="token number">1</span>
							right <span class="token operator">=</span> <span class="token number">5</span>
					<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
						right <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>all
						left <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>all <span class="token operator">-</span><span class="token number">4</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
			<span class="token keyword">while</span> <span class="token punctuation">(</span>left <span class="token operator">&lt;=</span> right<span class="token punctuation">)</span><span class="token punctuation">{</span>
			ar<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>left<span class="token punctuation">)</span>
			left <span class="token operator">++</span>
		<span class="token punctuation">}</span>
			<span class="token keyword">return</span> ar
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	
	
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100

</script>
</body>
</html>

下面是自己简单做的一张图，解释下调用的过程

在这里插入图片描述
觉得有用的话帮忙点个赞吧，整理这个弄了一下午，挺不容易的。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/232857
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号