使用Layui实现评分功能

散一世繁华，颠半世琉璃

已于 2022-09-15 19:18:41 修改

阅读量8.4k

点赞数 2

文章标签： layui intellij-idea maven

于 2022-03-14 22:33:33 首次发布

本文链接：https://blog.csdn.net/qq_51447436/article/details/123489328

版权

相信做过Java项目的小伙伴就会发现，做一个网站，一个Java后端程序员最耗费时间的地方往往是在写前端界面的时候，各种花里胡哨的页面，各种点赞，打分，评论等等功能，相信许多小伙伴一定深有体会。
我今天在实现评分功能的时候，就发现了一款便捷好用的前端开发工具，即Layui，它里面提供了大量的组件，比如轮播图，文件上传和下载，分页，数据层，数据表格等等应有尽有。
下面我将带领大家走进Layui的大门。
Layui官网
在这里插入图片描述
下面我来介绍如何使用Layui实现评分，要使用其他的组件，大家可以自行在官网查看。

1.下载Layui源码

将下载后的压缩文件解压到项目路径中。
在这里插入图片描述

2.创建空Maven项目

打开IDEA创建空Maven项目，并添加web框架支持，然后将解压后的Layui源码引入项目，并配置tomcat服务器，具体如图所示。
在这里插入图片描述

3.将代码导入index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
  </head>
  <body>
  <div id="test14"></div>
  <script src="layui/layui.js" charset="utf-8"></script>
  <script>
    layui.use(['rate'], function(){
      var rate = layui.rate;
      rate.render({
        elem: '#test14'
        ,value: 2.5
        ,half: true
        ,theme: '#FE0000'
      })
    });
  </script>
  </body>
</html>