- 写这篇博客，一是为了帮大家一块入门，共同进步，二也是为了让自己有所进步，下面代码有冗余现象正常，有不规范的地方也是正常，入门阶段，代码能跑，心满意足。
- 代码摆在这了，在我这里是可以运行的，不然我也不会发出来，看的时候仔细看，需要注意的地方我都标出来了，只要注意，完全没问题的，报错，是你自己写错代码了，不要埋怨自己的机子不行、环境不行什么的。从自身出发，寻找自己的问题，同时也欢迎大佬斧正。
- 进入正题。首先看下目录结构，我把需要注意的用红色码标注了，没必要看的就用黄色的挡住了。这次主要操作的是work这个数据表
- 每一个文件都要注意下有没有注解。就是以@开头的东西。
- 这里需要注意的是，所有的目录，都是在启动项目录的下层的。这个是必须在它下层的（同级可能也可以，没试过）。
连接数据库前的配置
首先实在跟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
实体类代码
这里的代码没什么好说的，就是根据数据表里面的字段名，封装起来，然后写getter、setter方法。我把需要导的包页写上了，不合适的可以对照一下，写这个报错的话，一定别把包导错了。
必须要说的一点是，必须要写注解！！！实体里面我写了三个注解
package com.example.stu;
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;
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"><</span>Work<span class="token punctuation">></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"><</span>Work<span class="token punctuation">></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"><</span>Work<span class="token punctuation">></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"><</span>Map<span class="token punctuation">></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<map>!!!</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"><</span>Work<span class="token punctuation">></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"><</span>List<span class="token generics function"><span class="token punctuation"><</span>Map<span class="token punctuation">></span></span><span class="token operator">></span> <span class="token function">findAllMap</span><span class="token punctuation">(</span>Pageable page<span class="token punctuation">)</span><span class="token punctuation">;</span>
}
继承DAO service部分代码
这里有两个注解，记得写上。
其他没什么要注意的了
package com.example.service;
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;
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"><</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"><</span>Cla<span class="token punctuation">></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"><</span>Cla<span class="token punctuation">></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>
//分页
//分页是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>
<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>
});
//批量删除判断数据量
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>
});
if(j>=1){
return true;
}else{
alert(“至少选择一项内容”);
return false;
<span class="token punctuation">}</span>
}
</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”>信息添加： <a href="/work/add"><input type=“button” value=“添加”/></a>
</td>
</tr>
<tr>
<td colspan=“9”>批量操作：
<input type=“submit” onclick=“return del()” value=“批量删除”>
<input type=“button” value=“全选” id = “all”/>
<input type=“button” value=“反选” id = “Rev”/>
<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>
<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">"<font color='green' size='1px'> &nbsp;可以注册</font>"</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">"<font color='red' size='1px'> &nbsp;重复，禁止注册</font>"</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>
});
</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 />
姓 名：<input type=“text” name=“name”><br /><br /><!-- 最普通常用的input text标签，放出来给大家看下 -->
班 级：<!-- 这里需要获取映射的值，是下拉框 -->
<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 />
<!-- 单选框，二选一 -->
性 别：<input type=“radio” name=“sex” value=“男”>男 <input type=“radio” name=“sex” value=“女”>女<br /><br />
<!-- 省市级三级联动，直接复制上就行，我是把省市级三个分别存到三个数据栏里面了，由于实力原因（也可能是js中写死了，可以换个三级联动的例子试试），没能实现修改页面数据回显 -->
<div data-toggle=“distpicker” data-autoselect=“3”>
地 址：
<select name=“province”></select>
<select name=“city”></select>
<select name=“area”></select>
</div><br /><br />
<!-- 多选框，由于数据库保存方式的原因，没能实现在修改页面的数据回显 -->
爱 好：<input type=“checkbox” value=“代码” name=“hobby”>代码
<input type=“checkbox” value=“游戏” name=“hobby”>游戏
<input type=“checkbox” value=“音乐” name=“hobby”>音乐 <br /><br />
<!-- 文本域 -->
简 介：<textarea rows=“5” cols=“35” name=“intro” style=resize:none;></textarea><br /><br />
<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'> 可以注册</font>"); $("#submit").attr('disabled',false); }else{ $("#text").html("<font color='red' size='1px'> 重复，禁止注册</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>
});
</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}">男
<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 />
爱 好：
代码<input type=“checkbox” value=“代码” name=“hobby”>
游戏<input type=“checkbox” value=“游戏” name=“hobby”>
音乐<input type=“checkbox” value=“音乐” name=“hobby”> <br /><br />
<!-- 由于文本域没有value，所以要用text来实现数据回显 -->
简 介：<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>
<!-- 因为代码太长，我把全选部分删去了 -->
<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"><</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">></span></span>操作<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>{{key+1}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>{{site.tell}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>{{site.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>{{site.cname}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>ype="button"
value="删除"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></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"><</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">>=</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">></span> <span class="token number">3</span> <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 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"><=</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"><=</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>
</script>
</body>
</html>
下面是自己简单做的一张图，解释下调用的过程
觉得有用的话帮忙点个赞吧，整理这个弄了一下午，挺不容易的。
9257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
