elementui-vue实现curd 及安装nodejs服务器 ， 安装vue脚手架--vue-cli

最新推荐文章于 2023-12-22 21:33:03 发布
最新推荐文章于 2023-12-22 21:33:03 发布
阅读量252 收藏 1
点赞数
文章标签： vue.js elementui 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73809543/article/details/130180632
版权

1.elementui-vue实现curd 

（1）引入js及css

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--引入elementui的js前必须引入vue的js-->
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">

（2）在body里定义一个div

<div id="app">

    <el-form :inline="true" :model="queryStudent" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="queryStudent.sid" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="queryStudent.sname" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
            <el-input v-model="queryStudent.cname" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
            <el-button type="danger" @click="batchDel">批量删除</el-button>
            <el-button type="success" @click="addStu(true)">添加学生</el-button>
        </el-form-item>

        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="aclass.cname"
                    label="班级名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--修改数据-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="editStudentFrom" :model="cname" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="editStudentFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="editStudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="editStudentFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in editAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editFrom(false)">取消</el-button>
    <el-button type="primary" @click="editFrom(true)">修改</el-button>
  </span>
        </el-dialog>

        <!--添加数据-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="addStuData"
                width="30%">
            <el-form :model="addStuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="addStuFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="addStuFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="addStuFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in addAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addForm(false)">取消</el-button>
    <el-button type="primary" @click="addForm(true)">添加</el-button>
  </span>
        </el-dialog>
</div>

（3）创建vue对象

element-ui + axios后台获取数据 

<div id="app">

    <el-form :inline="true" :model="queryStudent" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="queryStudent.sid" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="queryStudent.sname" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
            <el-input v-model="queryStudent.cname" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
            <el-button type="danger" @click="batchDel">批量删除</el-button>
            <el-button type="success" @click="addStu(true)">添加学生</el-button>
        </el-form-item>

        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="aclass.cname"
                    label="班级名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--修改数据-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="editStudentFrom" :model="cname" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="editStudentFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="editStudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="editStudentFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in editAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editFrom(false)">取消</el-button>
    <el-button type="primary" @click="editFrom(true)">修改</el-button>
  </span>
        </el-dialog>

        <!--添加数据-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="addStuData"
                width="30%">
            <el-form :model="addStuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="addStuFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="addStuFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="addStuFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in addAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addForm(false)">取消</el-button>
    <el-button type="primary" @click="addForm(true)">添加</el-button>
  </span>
        </el-dialog>
</div>

2.安装nodejs服务器

写好的vue工程 --- 把我们的工程部署到该服务器上。

== 注意：不要安装到中文目录下或者空格目录下==

 node服务器安装

3.安装vue脚手架--vue-cli

可以帮你创建vue工程  --- 标准的

 验证是否成功

 

3.使用vue脚手架创建vue工程

 

 

 

 

 

 

 

 创建好vue工程后进入如下界面

 3.2安装相关的插件以及依赖

 

 

 安装axios

 

3.3使用webstorm打开vue工程 

 3.4在webstorm中启动vue工程

 

路径一定要保证: vue工程路径

npm run serve

 

小王s
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue简单curd例子。
05-23
vue简单curd例子。
ELementUI之CURD及表单验证
ChatYU的博客
10-09 617
表单验证是一种用于检查用户输入数据的过程，以确保输入的数据符合预期的格式、要求和规则。表单验证通常用于 web 应用程序中的用户界面，以确保用户提交的数据有效、合法且安全
ruoyi vue 的功能介绍与后端单表的CURD功能
sdrccc的博客
10-27 90
介绍 | RuoYiRuoYi-Vue是一个 Java EE 企业级快速开发平台，是基于SpringBoot、Spring Security、Jwt、Vue的前后端分离的后台管理系统，内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
Vue入门之Web端CURD前端项目示例
GeekAaron的博客
10-18 2907
Vue入门之Web端CURD前端示例 随着vue.js越来越火，很多不太懂前端的小伙伴想要入坑。而入坑最好的办法就是上手实际操作，因此本文将重点放在实际操作上，对理论不做过多解释，不明白的地方小伙伴们可以去看官方文档或者相关书籍。 目录 一、安装npm 二、安装vue-cli 三、使用vue-cli创建项目 本文的示例项目操作环境如下： 平台/工具 说明 操作系统 Mac OS...
Vue使用avue-crud表格组件的用法及参数说明（超详细）
热门推荐
随便写写...
05-25 1万+
avue-crud表格组件的详细说明，补录中
SpringCould+vue3项目的后台用户管理的CURD【Taurus教育平台】
一键难忘的博客
04-27 997
需要获取到token，和一些主要的关键的字段。这块需要对sql进行俩次查询，第一次传入起始位置，和该页的条数进行分页查询，第二次对满足条件的sql总数进行查询。这里的查询包括，分页的全部查询，根据username查询，根据学生id查询，根据角色查询。修改和他几乎相同，我们可以在url后加一个id=X，然后根据id的值来获取到对应的用户信息，再修改完，提交即可。这里的查询包括，分页的全部查询，根据username查询，根据学生id查询，根据角色查询。根据username查询，根据学生id查询，根据角色查询。
SpringBoot+Vue实现CURD(增删改查)
qq_44410220的博客
09-04 2286
SpringBoot+Vue实现CURD(增删改查)
Ruoyi Vue实现单表CURD
weixin_72307613的博客
09-29 1259
新人第四次boki
nodejs+vue+ElementUi资源互助共享平台的设计
我的个人的博客
12-22 1689
前台：有导航栏，导航栏分布的有首页，萌宝信息，幼儿知识，保姆推荐，音频资源，二手商品，交流论坛，个人中心，后台管理，购物车。总的来说，就是让不同的角色实现不同的功能，而不同的功能其他的角色可以互相补充，可以浏览对方发布的信息，可以购买卖家发布的商品，可以查看幼儿知识信息。尽量让不同的角色数据库不同，这样可以保证数据的完整性。后台：管理员功能有个人中心，用户管理，卖家管理，咨询师管理，萌宝信息管理，幼儿知识管理，保姆推荐管理，音频资源管理，二手商品管理，商品分类管理，资源分类管理，交流论坛，系统管理。
前端技术：Vue+elementUI 饿了吗UI+CRUD，创建图书管理系统
淡若清风
01-12 2104
1.Vue框架 JavaScript升级版，JS它脚本语言，Vue框架 语言它my生命，api工具类 文章中心思想，有生命力 Vue框架思想，MVVM框架思想，数据驱动思想，组件化思想 2.j2ee框架分层思想淋漓尽致体现，MVC(model view controller) MVVM(model view viewmodel) model：代表数据 view：代表页面展现 viewmodel：代表如何在页面中展示数据 数据和页面代码分离 JSP，页面html代码和数据的代码交织 大型项目： <%=
VUE实现静态数据的CRUD功能
11-23
Vue实现的一个增删改查案例，打开即用，可使用spring boot+vue的形式，将静态数据变成动态数据，如要前后端分离案例资源，可关注博主，查看博主上传资源列表。
详解使用nodeJs安装Vue-cli
01-02
1、执行npm install –global vue-cli ，全局安装vue-cli —-因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。 产生通过config命令设置默认下载路径： npm config set registry ...
详解vue-cli 脚手架 安装
01-19
注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上； 二、 vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令：vue 回车，可以看到针对vue的命令行； **:...
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为...
Vue整合Node.js，直连Mysql数据库进行CURD操作
Hello World
06-17 1477
Vue整合Node.js，直连Mysql数据库进行CURD操作 方法一： 创建相关的库表结构： 引入需要的模块（mysql、http、vue-resource） // 找到项目所在位置（进行DOS命令）、项目中拥有可以不重复引用 cnpm install mysql --save cnpm install http --save cnpm install vue-resource --save 点击package.json，查看是否引入成功： 在项目根目录下创建server文件夹： 编写se
Ruoyi Vue实现单表CURD简单示例
weixin_64890968的博客
10-26 136
使用Postman工具来执行Ruoyi项目中的user表的CRUD操作
学做毕设 2022 第十讲 VUE CURD
mm_816的专栏
02-24 536
D:\itunes\Vue2022\sprintboot\vu20\npm i axios -s 前端 scr\utils\request.js import axios from 'axios' const request = axios.create({ baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api...
安装vue-cli时出现 idealTree:nodejs: sill idealTree buildDeps怎么解决
最新发布
03-03
在安装vue-cli时，出现idealTree:nodejs: sill idealTree buildDeps的错误通常是由于依赖项安装失败或者版本不兼容引起的。为了解决这个问题，你可以尝试以下几个步骤： 1. 清除npm缓存：运行以下命令清除npm缓存。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值