Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目

素颜马尾好姑娘i 2023-02-21 12:58 14阅读 0赞

### Element UI ###

*  项目简介与演示
 *  刷新页面时让组件默认为当前路由路径
 *  删除时确认
 *  分页功能的实现
 *  el-date-picke 日期少一天

> 前端部分源码：[https://github.com/szluyu99/elementui-users\_1][https_github.com_szluyu99_elementui-users_1]  
> 后端部分源码：

# 项目简介与演示 #

Element-UI + Vue.js + SpringBoot 实现的前后端分离入门项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

# 刷新页面时让组件默认为当前路由路径 #

`activeIndex` 表示当前激活的页面，如果写死了刷新后会有 bug，因此动态获取当前路由路径。

data() { 
      return { 
        activeIndex: this.$route.path,
      };
    },

# 删除时确认 #

注意 `@onConfirm` 这个事件是加载 `el-popconfirm` 标签上的。

<el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.$index, scope.row)">
    	<el-button slot="reference" size="mini" type="danger">删除</el-button>
    </el-popconfirm>

# 分页功能的实现 #

mysql 分页查询：

<select id="findByPage" resultType="User">
        SELECT id, name, bir, sex, address
        FROM t_user
        LIMIT #{start}, #{rows}
    </select>

后端控制器：

@RestController
    @RequestMapping("/user")
    @CrossOrigin
    public class UserController { 
    
        @Autowired
        private UserService userService;
    	
    	// 分页查询 
    	@GetMapping("/findByPage")
    	public Map<String, Object> findByPage(Integer pageNow, Integer pageSize) { 
    	    Map<String, Object> result = new HashMap<>();
    	    pageNow = pageNow == null ? 1 : pageNow; // 不传当前页数默认为1
    	    pageSize = pageSize == null ? 4 : pageSize; // 不传当前页面显示条数默认显示4条
    	    List<User> users = userService.findByPage(pageNow, pageSize); // 分页查询
    	    Long totals = userService.findTotals();
    	    result.put("users", users);
    	    result.put("total", totals);
    	    return result;
    	}
    
    }

前端页面：使用 [分页组件][Link 1]；  
![在这里插入图片描述][20200702001446809.png]

<el-row>
      <el-col :span="12" :offset="8">
        <div>
          
          <el-pagination style="margin: 15px 0px;" prev-text="上一页" next-text="下一页" background layout="prev, pager, next, sizes, jumper, total" :page-sizes="[2,4,6,8,10]" :page-size="pageSize" :total="total" :current-page="pageNow" @current-change="findPage" @size-change="findSize">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

# el-date-picke 日期少一天 #

Element-UI 中时间控件的默认时间为 **国际标准时间**，因此与北京时间差 8 个小时。

解决方案：在标签中增加属性 `value-format="yyyy-MM-dd"`，然后 刷新页面；

<el-date-picker type="date" placeholder="选择日期" v-model="form.bir" value-format="yyyy-MM-dd">
    </el-date-picker>

[https_github.com_szluyu99_elementui-users_1]: https://github.com/szluyu99/elementui-users_1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702005406511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702005456271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://element.eleme.cn/#/zh-CN/component/pagination
[20200702001446809.png]: https://img-blog.csdnimg.cn/20200702001446809.png