使用Vue+elementUI实现CRUD

这篇具有很好参考价值的文章主要介绍了使用Vue+elementUI实现CRUD。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

最近了解了一下前端框架VUE,来记录一下


一、简介

Vue官网https://cn.vuejs.org/

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

来自官网的简介…不说了直接上手吧

二、使用Vue-Cli搭建Vue项目

1. vue-cli 介绍

官网地址:https://cli.vuejs.org/zh/

cli: Command Line 命令行工具,vue-cli就是vue的命令行工具,也称之为脚手架,使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架,比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令,需要先安装node.js。

node.js提供了前端程序的运行环境,可以把node.js理解成是运行前端程序的服务器。
下载地址:http://nodejs.cn/download/

2.axios.js 介绍

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF(跨站请求伪造)

由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue.js 并不包含 AJAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

官网地址:http://www.axios-js.com/

3.Element-Ul 介绍

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI

官网地址:https://element.eleme.cn/#/zh-CN/component/installation

4.moment.js 介绍

moment.js是一个JavaScript的日期和时间处理工具类,提供了非常全面且强悍的日期处理功能

官网地址:http://momentjs.cn/

5.搭建项目

在 Terminal 下使用npm构建项目
1.首先安装Node.js(傻瓜式安装,安装之后可能需要重启)

2.npm install -g @vue/cli #安装vue-cli,该步骤需要等一段时间,若无法安装可使用:npm install -g @vue/cli --force

3.vue -V #查看vue-cli的版本

4.vue create my-app #创建名为my-app的项目(选择vue-cli2.0)

5.my-app>npm install axios vue-axios element-ui --save #安装axios,vue-axios和element-ui

6.my-app>npm install moment --save #安装格式化时间日期的moment.js

7.my-app>npm run serve #启动项目 如果无法启动可以使用:npm run dev

然后访问http://localhost:8080/ 会显示 HelloWorld.vue 该组件的页面
使用Vue+elementUI实现CRUD,前端随笔,vue.js,前端,javascript,elementui

vue-cli 项目启动时,默认端口为8080,可以在 node_modules@vue\cli-service\lib\commands 目录下,修改serve.js 文件,具体如下:

const defaults = {
  host: '0.0.0.0',
  port: 8080,
  https: false
}

6.添加main.js配置

我们需要在main.js中添加如下配置

main.js是程序的入口,需要引入以下内容(注意不要放在最后一行

// 如下两个是网络的请求组件
import VueAxios from "vue-axios";
import axios from 'axios'

// ElmentUI的组件
import ElementUI from 'element-ui'
// ElementUI的样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueAxios, axios)
Vue.use(ElementUI)

// 设置默认访问后台url基础地址
axios.defaults.baseURL = 'http://localhost:8081'

7.修改App.vue

注意:el-table-column 标签中的 prop属性 对应的是实体类的属性名

<template>
  <el-container>
    <el-header>管理系统</el-header>
    <el-container>
      <el-aside>系统列表</el-aside>
      <el-main>
        <el-table
                :data="musics"
                border
                style="width: 100%">
          <el-table-column
                  align="center"
                  prop="musicId"
                  label="编号"
                  width="100">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicName"
                  label="歌曲名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicAlbumName"
                  label="专辑名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="musicArtistName"
                  label="歌手名称">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>

export default {
  name: 'App',
  components: {
    //HelloWorld
  },

  data(){
    return{
      musics:[]
    }
  },

  mounted() {

    // 第一种方式
    // let that = this;
    // this.axios.get('/music/findAll')
    //         .then(function (response) {
    //           that.musics = response.data;
    //         })
    //         .catch(function (error) {
    //           console.log(error);
    //         });

    // 第二种方式
    // this.axios.get('/music/findAll')
    //         .then(resp => {
    //           // resp.data才是实际的数据本身
    //           this.musics = resp.data;
    //           alert(this.musics)
    //         })

    // 第三种方式
    this.$http.get('/music/findAll').then((response) => {
      this.musics = response.data;
    })
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<!-- 设置容器样式 -->
<style>
  .el-header {
    background-color: #409EFF;
    color: #ffffff;
    line-height: 60px;
    font-size: 28px;
  }

  .el-aside {
    background-color: #e3e3e3;
    width: 180px !important;
  }

  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }

  .el-table {
    margin-top: 10px;
  }
</style>

其中,

  • templet标签是我们的也买你元素的位置,这里就是页面上直接展示的效果,可以去elementUI的官方网站,找到表格的组件,copy过来,修改成自己的东西,
  • script标签则是我们写页面操作动态逻辑的地方,包括数据获取,页面操作这些,其中data是数据存放的地方,可以直接由后端接口获取然后赋值。
  • style是整个页面的样式。
  • mount则是挂载我们的方法,发送ajax请求的地方,所有的接口请求都需要写在这里
    还有另外一种写法,可以将请求接口的方法,放在一个单独的js文件中,然后将其方法引入当前vue文件例如:
    使用Vue+elementUI实现CRUD,前端随笔,vue.js,前端,javascript,elementui
    然后在js文件中编写对应的方法,这种方式,调用方法需要在methods中引用
    使用Vue+elementUI实现CRUD,前端随笔,vue.js,前端,javascript,elementui
    注意:上述截图和本次演示代码无关

8. 将moment.js 格式 Date 类型引入

在 main.js 引入 moment.js

import moment from 'moment'
Vue.use(moment)

在当前组件中

let moment = require("moment");

在日期列添加属性

<el-table-column
    align="center"
    prop="createTime"
    label="时间"
    :formatter="formatDate"
    width="180">
</el-table-column>

在methods中添加对应的的方法

methods:{
    formatDate(row, column, currValue) {
      moment.locale("zh-cn"); 
      return moment(currValue).format('YYYY-MM-DD');
    }
}

9. 加入分页

修改 data

data(){
    return{
      musics:[],
      total:0,
      pageSize:0
    }
  },

添加分页标签

<el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @current-change="toPage">
</el-pagination>

修改 methods

methods:{
    formatDate(row,column,currVal){
      return moment(currVal).format("YYYY-MM-DD")
    },
    toPage(currPage){
      this.axios.get('/music/findByPage?pageNum='+currPage)
              .then(resp => {
                // resp.data才是实际的数据本身
                this.musics = resp.data.list;
                //alert(this.musics)
                this.total = resp.data.total
                this.pageSize = resp.data.pageSize
              })
    }
  },

修改 mounted

mounted() {

    this.axios.get('/music/findByPage')
            .then(resp => {
              // resp.data才是实际的数据本身
              this.musics = resp.data.list;
              //alert(this.musics)
              this.total = resp.data.total
              this.pageSize = resp.data.pageSize
            })
  },

10. 实现删除

添加标签

<el-table-column label="操作">
  <template slot-scope="scope">
   <el-button
    size="mini" type="primary" icon="el-icon-edit"
    @click="updateById(scope.row.musicId)">编辑</el-button>
   <el-button
    size="mini" type="danger" icon="el-icon-delete"
    @click="deleteById(scope.row.musicId)">删除</el-button>
 </template>
</el-table-column>

修改 data 以及 methods

 data(){
    return{
      musics:[],
      total:0,
      pageSize:0,
      currentPage:1
    }
  },

  methods:{
    formatDate(row,column,currVal){
      return moment(currVal).format("YYYY-MM-DD")
    },
    toPage(currPage){
      this.axios.get('/music/findByPage?pageNum='+currPage)
              .then(resp => {
                // resp.data才是实际的数据本身
                this.musics = resp.data.list;
                //alert(this.musics)
                this.total = resp.data.total
                this.pageSize = resp.data.pageSize
                this.currentPage = resp.data.pageNum
              })
    },
    deleteById(musicId){

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.axios.get('/music/deleteById?musicId='+musicId)
                .then(resp => {
                  if(resp.data == 'success'){
                    this.toPage(this.currentPage);
                  }
                })

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

如果删除成功,页面没有跳转,需要去后端配置 pagehelper

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true

11. 实现添加

在 el-main 标签中增加添加按钮

<!-- 添加歌曲按钮 -->
<el-button type="success" @click="dialogVisible = true" >添加歌曲</el-button>

添加 add 的对话框

<el-dialog
                title="添加歌曲"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">

          <el-form :model="musicModel" :rules="musicRules" ref="musicForm">
            <el-form-item label="歌曲名称" prop="musicName">
              <el-input v-model="musicModel.musicName"></el-input>
            </el-form-item>
            <el-form-item label="专辑" prop="musicAlbumName">
              <el-input v-model="musicModel.musicAlbumName"></el-input>
            </el-form-item>
            <el-form-item label="歌手" prop="musicArtistName">
              <el-input v-model="musicModel.musicArtistName"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="createTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="musicModel.createTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('musicForm')">立即创建</el-button>
              <el-button @click="resetForm('musicForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>

修改 data

data(){
    return{
      musics:null,
      total:null,
      currentPage:null,

      //设置添加歌曲的对话框默认不显示
      dialogVisible: false,

      //添加歌曲的模型
      musicModel: {
        musicName: '',
        musicAlbumName: '',
        musicArtistName: '',
        createTime: ""
      },
      //添加歌曲的规则
      musicRules: {
        musicName: [
          {required: true, message: '请输入歌曲名称', trigger: 'blur'}
        ]
      }

    }
 }

在 method 中添加方法

//校验添加表单
submitForm(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            //alert(this.musicModel);
            //添加歌曲,需要注意必须post方式提交,后台使用@RequestBody获取
            this.axios.post("/music/addMusic",this.musicModel).then((response) => {
                if(response.data == "success"){
                    //隐藏对话框(添加页面)
                    this.dialogVisible = false
                        //重置添加表单
                        this.$refs[formName].resetFields();
                    //添加完之后刷新页面
                    location.reload();
                }
            })

        } else {
            console.log('error submit!!');
            return false;
        }
    });
},
//重置添加表单
resetForm(formName) {
    this.$refs[formName].resetFields();
},

12. 实现修改

创建修改对话框

  <!-- 修改的对话框 -->
        <el-dialog
                title="修改歌曲"
                :visible.sync="updatedialogVisible"
                width="30%"
                :before-close="handleClose">

          <el-form :model="updatemusicModel" :rules="updatemusicRules" ref="updatemusicForm">
            <el-form-item label="歌曲ID" prop="musicId">
              <el-input v-model="updatemusicModel.musicId" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="歌曲名称" prop="musicName">
              <el-input v-model="updatemusicModel.musicName"></el-input>
            </el-form-item>
            <el-form-item label="专辑" prop="musicAlbumName">
              <el-input v-model="updatemusicModel.musicAlbumName"></el-input>
            </el-form-item>
            <el-form-item label="歌手" prop="musicArtistName">
              <el-input v-model="updatemusicModel.musicArtistName"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="createTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="updatemusicModel.createTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="updatesubmitForm('updatemusicForm')">修改</el-button>
              <el-button @click="resetForm('updatemusicForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>

在data中添加数据

//设置修改歌曲的对话框默认不显示
updatedialogVisible: false,

//修改歌曲的模型
updatemusicModel: {
    musicId:'',
    musicName: '',
    musicAlbumName: '',
    musicArtistName: '',
    createTime: ""
},

//修改歌曲的规则
updatemusicRules: {
    musicName: [
        {required: true, message: '请输入修改的歌曲名称', trigger: 'blur'},
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ]
}

修改methods中的方法

//修改之前先查询单个对象
handleEdit(musicId) {
    this.$http.get("/music/findByMusicId?musicId="+musicId).then((response) => {
        this.updatemusicModel = response.data;
        this.updatedialogVisible = true;
    })
},

//修改表单提交
//校验添加表单
updatesubmitForm(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            //alert(this.musicModel);
            //修改歌曲,需要注意必须post方式提交,后台使用@RequestBody获取
            this.axios.post("/music/updateMusic",this.updatemusicModel).then((response) => {
                if(response.data == "success"){
                    //隐藏对话框(添加页面)
                    this.updatedialogVisible = false
                        //重置添加表单
                        this.$refs[formName].resetFields();
                    //添加完之后刷新页面
                    location.reload();
                }
            })

        } else {
            console.log('error submit!!');
            return false;
        }
    });
},

updateresetForm(formName) {
    this.$refs[formName].resetFields();
}

总结

以上即是使用elementUI实现的增删改查,当然不包括后端的接口,算是作为后端开发者,对于前端开发的第一个demo吧文章来源地址https://www.toymoban.com/news/detail-600023.html

到了这里,关于使用Vue+elementUI实现CRUD的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(59)
  • 使用vue脚手架搭建前端工程(附:搭配ElementUI来快速开发)

    目录 一、搭建过程 1. 全局安装webpack(打包工具) 2. 全局安装vue脚手架 3. 初始化vue项目 4. vue项目目录的简单介绍 二、执行流程分析 三、自己造一个组件案例 四、ElementUI的使用 1. 环境的引入 2. 一个简单使用 3. 使用它来快速搭建后台管理系统 五、总结 npm install webpack -g np

    2024年02月10日
    浏览(70)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(56)
  • 前端小工具Vue+ElementUI+Clipboard :快捷复制

    我们在日常经常会遇到这种功能(特别多见于C端): 手机上操作不变,想要粘贴个信息比较麻烦,就会出现【点一点复制】 查看敏感信息一般就直接提示【已成功复制粘贴板】 对于网页上一长串显示的文字或者输入的文字,全部选中很长又很麻烦,这时候就提供\\\"快捷复制\\\"的

    2024年02月06日
    浏览(36)
  • vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

    由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。 若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。 如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。 要单独将页

    2024年01月22日
    浏览(90)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(85)
  • GuLi商城-前端基础Vue-整合ElementUI快速开发

    npm安装 启动项目:npm run dev http://localhost:8082/#/hello 

    2024年02月09日
    浏览(45)
  • vue+face-api.js实现前端人脸识别功能

    近期做了一个前端vue实现人脸识别的功能,主要功能逻辑包含:人脸识别,人脸验证,唤起摄像头视频流之后从三个事件(用户点头、摇头、眨眼睛)中随机选中两个事件,待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片,上传到阿里或者腾讯oss,通过oss返回

    2024年02月05日
    浏览(45)
  • 在前端开发中,何时应该使用 jQuery,何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员,那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库,旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作,可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包