综合案例ElementUI

最新推荐文章于 2024-06-12 08:00:00 发布
最新推荐文章于 2024-06-12 08:00:00 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： JavaWeb 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57907966/article/details/125924854
版权

综合案例：

环境准备好

image-20220714154056969

pox.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>brand-case</groupId>
    <artifactId>brand-case</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <dependencies>
        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.6</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <!--servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--jsp-->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13</version>
            <scope>test</scope>
        </dependency>

        <!--添加slf4j日志api-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.20</version>
        </dependency>
        <!--添加logback-classic依赖-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!--添加logback-core依赖-->

        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-core</artifactId>
            <version>1.2.3</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <!--tomcat 插件-->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
    </properties>

</project>

Mabits核心配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--起别名-->
    <typeAliases>
        <package name="com.aiit.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///db_1?useSSL=false"/>
                <property name="username" value="root"/>
                <property name="password" value="20020630"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.aiit.mapper"/>
    </mappers>
</configuration>

brand.html在上一张有

SqlSessionFactoryUtils工具类

public class SqlSessionFactoryUtils {

        private static SqlSessionFactory sqlSessionFactory;

        static {
            //静态代码块会随着类的加载而自动执行，且只执行一次

            try {
                String resource = "mybatis-config.xml";
                InputStream inputStream = Resources.getResourceAsStream(resource);
                sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }


        public static SqlSessionFactory getSqlSessionFactory(){
            return sqlSessionFactory;
        }

    }

brand实体类

package com.aiit.pojo;

public class Brand {


    /**
     * 品牌实体类
     */


    // id 主键
    private Integer id;
    // 品牌名称
    private String brandName;
    // 企业名称
    private String companyName;
    // 排序字段
    private Integer ordered;
    // 描述信息
    private String description;
    // 状态：0：禁用  1：启用
    private Integer status;


    public Brand() {
    }

    public Brand(Integer id, String brandName, String companyName, String description) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.description = description;
    }

    public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.ordered = ordered;
        this.description = description;
        this.status = status;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getBrandName() {
        return brandName;
    }

    public void setBrandName(String brandName) {
        this.brandName = brandName;
    }

    public String getCompanyName() {
        return companyName;
    }

    public void setCompanyName(String companyName) {
        this.companyName = companyName;
    }

    public Integer getOrdered() {
        return ordered;
    }

    public void setOrdered(Integer ordered) {
        this.ordered = ordered;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    @Override
    public String toString() {
        return "Brand{" +
                "id=" + id +
                ", brandName='" + brandName + '\'' +
                ", companyName='" + companyName + '\'' +
                ", ordered=" + ordered +
                ", description='" + description + '\'' +
                ", status=" + status +
                '}';
    }


}

1.查询所有

1.在mapper包下建一个BrandMapper接口

创建一个查询所有的方法

public interface BrandMapper {
    //查询所有
    @Select("select * from tb_brand")
    @ResultMap("brandResultMap")
    List<Brand> selectAll();
}

完成ResultMapperd的映射文件

BrandMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namespace:名称空间-->
<mapper namespace="com.aiit.mapper.BrandMapper">

    <resultMap id="brandResultMap" type="com.aiit.pojo.Brand">
        <result column="brand_name" property="brandName"></result>
        <result column="company_name" property="companyName"></result>
    </resultMap>
</mapper>

2、在service包下

创建一个接口BrandService

public interface BrandService {
    //查询所有
    List<Brand> selectAll();
}

创建一个实现类实现该接口

完成dao层数据的查询

public class BrandServiceImpl implements BrandService {

    //创建工厂
    SqlSessionFactory factory= SqlSessionFactoryUtils.getSqlSessionFactory();

    @Override
    public List<Brand> selectAll() {
        //获取SqlSession
        SqlSession sqlSession = factory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //调用方法
        List<Brand> brands = mapper.selectAll();

        //释放资源
        sqlSession.close();
        return brands;
    }
}

3、创建一个selectAllServlet

发送刚才查询的数据

@WebServlet("/selectAllServlet")
public class selectAllServlet extends HttpServlet {

    private BrandService brandService=new BrandServiceImpl();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //调用service查询
        List<Brand> brands = brandService.selectAll();

        //转为JSON
        String s = JSON.toJSONString(brands);
        response.setContentType("text/json; charset=UTF-8");
        //写数据
        response.getWriter().write(s);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

4.在brand.html中

导入AJAX

<script src="js/axios-0.18.0.js"></script>

获取respon发来的数据

image-20220714155111090

效果：

image-20220714155051100

2、新增品牌

1.完成dao层代码的编写

在BrandMapper中写入插入的sql语句

//添加数据
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);

更新BrandService中的代码

public interface BrandService {
    //查询所有
    List<Brand> selectAll();
    //
    void add(Brand brand);
}

重写方法

@Override
public void add(Brand brand) {
    SqlSession sqlSession = factory.openSession();
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

    mapper.add(brand);
    sqlSession.commit();//提交事务




    sqlSession.close();

}

写servlet层的代码

新建一个addServlet

public class addServlet extends HttpServlet {
    private BrandService brandService=new BrandServiceImpl();
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //接受数据
        BufferedReader reader = request.getReader();
        String params = reader.readLine();//json字符串
        //转换为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //调用servie添加
        brandService.add(brand);
        //响应成功表示
        response.getWriter().write("success");

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

完成前端部分代码

当我们点击提交时发送AJAX异步请求发送数据

image-20220714161840456

其中的selectAll（）方法

image-20220714161945309

3、Servlet代码优化

​

//替换HttpServlet，根据请求的最后一段路径来进行方法分发
public class BaseServlet  extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取请求路径
        String requestURI = req.getRequestURI();


        //2.获取最后一段路径,方法名
        int index=requestURI.lastIndexOf("/");
        String methodName = requestURI.substring(index+1);

        //执行方法
        //1.获取字节码对象
        //this 谁调用我(this所在方法)，我(this)就代表谁
        Class<? extends BaseServlet> cls = this.getClass();


        //获取方法Mentod对象
        try {
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            //执行方法
          method.invoke(this,req,resp);



        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }




    }
}

@WebServlet("/brand/*")
public class BrandServlet extends  BaseServlet {
    private BrandService brandService=new BrandServiceImpl();
    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //调用service查询
        List<Brand> brands = brandService.selectAll();

        //转为JSON
        String s = JSON.toJSONString(brands);
        response.setContentType("text/json; charset=UTF-8");
        //写数据
        response.getWriter().write(s);


    }
    public void add(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        //接受数据
        BufferedReader reader = request.getReader();
        String params = reader.readLine();//json字符串
        //转换为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //调用servie添加
        brandService.add(brand);
        //响应成功表示
        response.getWriter().write("success");

    }
}

4、批量删除

1.完成dao层代码的编写

//批量删除
  void deleteByIds(@Param("ids") int[]ids);

因为该查询语句相较复杂在BrandMapper.xml中写sql

 <delete id="deleteByIds">
   delete  from tb_brand where id in
    <foreach collection="ids" item="id" separator=","  open="(" close=")" >#{id}</foreach>
</delete>

2.在BrandService接口中定义

//批量删除

void deleteByIds(int[]ids);

重写该方法

@Override
public void deleteByIds(int[] ids) {
    SqlSession sqlSession = factory.openSession();
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    mapper.deleteByIds(ids);

    sqlSession.commit();

    sqlSession.close();
}

3.在BrandServlet写对应的Servlet

//批量删除
public void deleteByIds(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

    //接受数据
    BufferedReader reader = request.getReader();
    String params = reader.readLine();//json字符串

    int[] ids = JSON.parseObject(params, int[].class);
    brandService.deleteByIds(ids);

    //响应成功标识
    response.getWriter().write("success");

}

4.前端代码编写

复选框选中之后就会将对应选中的数据存储到multipleSelection集合中

image-20220715142525803

image-20220715142731540

在data（）中创建 一个存放被选中后的id的数组

//被选中的id数组
selectedIds:[]

遍历multipleSelection获取id存储到selectIds中

通过ajax异步发送该数据

//批量删除
deleteByIds(){

    //弹出确认提示框
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'


    }).then(() => {

            //确认删除
            for (let i = 0; i <this.multipleSelection.length ; i++) {
            let selectionElement= this.multipleSelection[i];
            this.selectedIds[i]=selectionElement.id;
        }
        var _this=this;

        axios({
            method: "post",
            url:"http://localhost:8080/brand-case/brand/deleteByIds",
            data:_this.selectedIds
        }).then(function (resp) {
            if (resp.data=="success") {
                //添加成功

                //重新查询数据
                _this.selectAll();

                //添加成功提示框
                _this.$message({
                    message: '删除成功',
                    type: 'success'
                });

            }




        });
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });


}

分页查询

– 分页查询LIMIT 参数1：开始索引，参数2：查询的条目数

select * from tb_brand LIMIT 0,5

– 页面传递的参数
– 当前页码
– 查询的条目数

– 开始索引=（当前页码-1）*每页显示的条数
– 查询的条目数=每页显示条数

后台给前端返回：1.当前页的数据

​ 2.总记录数

1、创建一个pojo类

//分页查询的JavaBean
public class PageBean<T> {

    //总记录数
    private int totalCount;
    //当前页的数据
    private List<T> rows;


    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }
}

2、dao层的代码

BrandMapper中：

      //分页查询
      @Select("select * from tb_brand limit #{begin},#{size}")
      @ResultMap("brandResultMap")
      List<Brand> selectByPage(@Param("begin") int begin,@Param("size") int size);



//总记录数
    @Select("select count(*) from tb_brand ")
      int selectTotalCount();

3、BrandService中：

PageBean<Brand> selectByPage(int current,int pageSize);

在BrandServiceImp中写对应的sercvice

@Override
public PageBean<Brand> selectByPage(int current, int pageSize) {
    //获取SqlSession
    SqlSession sqlSession = factory.openSession();
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

    //计算开始索引
    int begin=(current-1)*pageSize;
    //
    int size=pageSize;

    List<Brand> rows = mapper.selectByPage(begin, size);
    //查询总记录数
    int totalCount= mapper.selectTotalCount();

    //封装为PageBean

    PageBean<Brand> pageBean=new PageBean<>();
    pageBean.setRows(rows);
    pageBean.setTotalCount(totalCount);




    sqlSession.close();

    return pageBean;


}

4、在BrandServlet中写对应的Servlet

//分页查询
public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1、接受参数 url?currentPage=1&pageSize=5

    String _currentPage = request.getParameter("currentPage");
    String _pageSize = request.getParameter("pageSize");

    int currentPage=Integer.parseInt(_currentPage);
    int pageSize=Integer.parseInt(_pageSize);


    PageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);
    //转为JSON
    String s = JSON.toJSONString(pageBean);
    response.setContentType("text/json; charset=UTF-8");
    //写数据
    response.getWriter().write(s);


}

5、前端代码

通过URL向后端发送当前页数和当前页展示的数据的总数

url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize

添加两个数据

image-20220715153847835

image-20220715153634106

重新设置，当页面尺寸改变和当前页码改变

image-20220715154030893

条件查询

1.完成dao层代码的编写

BrandMapper中：

//分页加上条件查询

List<Brand> selectByPageAndConditon(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);



//总记录数
int selectTotalCountByCondition(Brand brand);

sql语句

按照三个条件模糊查询，并且进行分页

<!--where brand_name=#{brand.brandName}-->
<select id="selectByPageAndConditon" resultMap="brandResultMap">
    select * from tb_brand

    <where>
        <if test="brand.brandName!=null and brand.brandName!='' ">
            and brand_name like #{brand.brandName}

        </if>
        <if test="brand.companyName!=null and brand.companyName!='' ">
            and company_name like #{brand.companyName}

        </if>
        <if test="brand.status!=null">
            and status=#{brand.status}

        </if>
    </where>
    limit #{begin},#{size}

</select>
<select id="selectTotalCountByCondition" resultType="java.lang.Integer">

    select count(*) from tb_brand

    <where>
        <if test="brandName!=null and brandName!='' ">
            and brand_name like #{brandName}

        </if>
        <if test="companyName!=null and companyName!='' ">
            and company_name like #{companyName}

        </if>
        <if test="status!=null">
            and status=#{status}

        </if>
    </where>

</select>

2.Service层代码的编写

在BrandService

//分页条件查询
PageBean<Brand> selectByPageAndCondition(int current,int pageSize,Brand brand);

在BrandServiceImp中

@Override
public PageBean<Brand> selectByPageAndCondition(int current, int pageSize, Brand brand) {
    //获取SqlSession
    SqlSession sqlSession = factory.openSession();
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

    //计算开始索引
    int begin=(current-1)*pageSize;
    //
    int size=pageSize;

    //处理brand条件 ，模糊表达式
   if ( brand.getBrandName()!=null&&brand.getBrandName().length()>0){
       brand.setBrandName("%"+brand.getBrandName()+"%");
   }

    if ( brand.getCompanyName()!=null&&brand.getCompanyName().length()>0){
        brand.setCompanyName("%"+brand.getCompanyName()+"%");
    }
    List<Brand> rows = mapper.selectByPageAndConditon(begin, size,brand);
    //查询总记录数
    int totalCount= mapper.selectTotalCountByCondition(brand);

    //封装为PageBean

    PageBean<Brand> pageBean=new PageBean<>();
    pageBean.setRows(rows);
    pageBean.setTotalCount(totalCount);



    sqlSession.close();

    return pageBean;
}

3.Servlet层代码的编写

//分页查询和条件查询
public void selectByPageAndConditon(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1、接受参数 url?currentPage=1&pageSize=5

    String _currentPage = request.getParameter("currentPage");
    String _pageSize = request.getParameter("pageSize");

    int currentPage=Integer.parseInt(_currentPage);
    int pageSize=Integer.parseInt(_pageSize);
    //接受数据
    BufferedReader reader = request.getReader();
    String params = reader.readLine();//json字符串
    //转为Brand对象
    Brand brand = JSON.parseObject(params, Brand.class);


    PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage, pageSize,brand);
    //转为JSON
    String s = JSON.toJSONString(pageBean);
    response.setContentType("text/json; charset=UTF-8");
    //写数据
    response.getWriter().write(s);


}

4.前端代码的编写

绑定模型

image-20220715165844323

传递数据并修改url路径

image-20220715165822976

点击查询触发事件

image-20220715165958519

前端代码优化

使用箭头函数

axios({
            method:"post",
            url:"http://localhost:8080/brand-case/brand/selectByPageAndConditon?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
            data:this.brand
        }).then(resp=>{
           this.tableData=resp.data.rows;//{rows:[],totalCount:100}
           this.totalCount=resp.data.totalCount;
})
白小筠
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
ElementUI案例演示:导航、布局、加载动画
热门推荐
12-08 14万+
知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组件、布局组件、加载动画 http://element.eleme.io/#/zh-CN/component/menu http://element.eleme.io/#/zh-CN/componen
详细讲解Element UI 中丰富的表单控件（图文解析）
最新发布
码农研究僧的博客
06-12 2906
Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件
ElementUI综合案例（添加、修改、删除）
06-22
ElementUI组件库实现添加、修改、删除功能。后台使用Springboot。
element UI 常用示例 100+ 【目录】
大剑师兰特的GIS世界
06-10 912
本目录主要列出element UI 的常用的经典示例，同时给出常用的API的URL参考。时常我们会因为一时忘记某个知识点怎么应用了，这里的示例变相的给予了脑子的充电过程，主要把它作为element UI的官方示例的应用扩展，希望能给广大前端开发工作者提供到帮助。
ElementUI例程
qixiang_chen的博客
08-15 325
1、使用Vue Cli创建VUE项目 vue create myvue 2、添加vue-router,element-ui,axios类库 npm install vue-router npm install element-ui npm install axios 3、新建列表文件组件List.vue <template> <div class="cantainer"&gt...
ElementUI综合案例（分页）
06-22
ElementUI分页组件、表单组件、对话组件具体应用。后台使用Springboot。
ElementUI综合案例（环境搭建）
06-22
ElementUI环境、配置、组件开发和配置、路由开发和配置、UI组件、表格组件。
基于Springboot+Vue+ElementUI房屋租赁平台网站设计源码.zip
04-19
总的来说，这个项目是一个综合性的Web应用案例，涵盖了从后端开发到前端用户体验的全方位技术。对于学习者而言，深入研究这个项目将有助于理解现代Web应用的完整生命周期，包括开发、测试、部署和维护。
Vue--整合ElementUI--方法/实例
IT利刃出鞘的博客
07-15 745
本文介绍Vue整合ElementUi的方法。
vue + elementUI 项目搭建Demo
12-05
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI项目搭建示例.zip
12-19
ElementUI项目搭建示例
搭建element-ui的Vue前端工程操作实例
11-27
一、安装npm镜像 （1）下载node.js， 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path” 检查Node.js版本 在命令窗口输入：npm install -g cnpm –registry=https://registry.npm.taobao.org 二、安装全局vue-cli （1）npm install -g vue-cli 回车，验证是否安装成功，在命令行中输入vue，出来vue的信息说明安装成功 三、全局安装 vue-cli （1）npm install –global vue-c
Vue——Elementui案例实现
测试
05-04 1815
elementui
vue2.0+Element-ui实战案例
weixin_30823001的博客
11-03 492
前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查， 利用以上技术我们会搭建一个vue案例，效果展示图： 以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json...
Vue-Elementui小案例
sjgllllll的博客
01-17 582
第一步创建一个项目 创建项目步骤：地址 第二步构建目录 第三步创建视图（Vue组件） Login.vue: <template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-for
elementui 案例
06-15
ElementUI是一个非常流行的前端UI库，能够快速构建美观的Web应用程序。它包含了许多高质量的、易于使用的UI组件和工具，并且广泛应用于实际开发中。下面是一些ElementUI的应用案例： 1. 后台管理系统 ElementUI可以用于快速搭建后台管理系统。例如，您可以使用ElementUI的表格、表单、抽屉、布局等组件来实现一个易于使用、美观的管理系统界面，可让业务人员轻松完成各项任务。 2. 电子商务平台 ElementUI在电子商务平台上的应用也非常广泛。例如，您可以使用ElementUI的轮播、菜单、导航、输入框等组件来实现一个易于浏览、购物车易于操作的电子商务平台。 3. 公共服务平台 ElementUI也广泛应用于各种类型的公共服务平台。例如，您可以使用ElementUI的日期选择器、时间选择器、页面步骤指南等组件，来打造一个规范的、易于使用的公共服务平台。 4. 教育平台 ElementUI的应用还延伸至教育领域。例如，您可以使用ElementUI的弹窗、消息框、评分、树形菜单等组件，来打造一个功能齐全、学生易于操作的教育平台。 总而言之，ElementUI是一个适用范围广泛、易于使用、美观大方的UI库，在实际项目中有着广泛的应用价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值