elementUI脚手架

一、

①安装软件，一路默认

②打开cmd输入下面代码，下载插件

npm install -g @vue/cli

③下载完成后，输入“ vue ui ” 后会自动打开图形化界面

④

⑤按照上面步骤完成后，下载相关依赖和插件

⑥创建一个vue项目，进行操作

和后台连接

<template><div><el-container><el-header>用户信息</el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>用户管理</span></template><el-menu-item index="1-1">查询用户</el-menu-item><el-menu-item index="1-2">添加用户</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-button type="primary"  icon="el-icon-circle-plus" @click="insertUser"></el-button><el-table:data="tableData"stripestyle="width: 100%"><el-table-columnprop="id"label="编号"></el-table-column><el-table-columnprop="uname"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnlabel="操作"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row.id)"></el-button><el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button></template></el-table-column></el-table></el-main></el-container></el-container><!--        修改的对话框--><el-dialogtitle="提示":visible.sync="editDialogVisible"width="30%"><el-form  label-width="80px" :model="userForm"><el-form-item label="姓名"><el-input v-model="userForm.uname"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="userForm.age"></el-input></el-form-item><el-form-item label="性别"><el-input v-model="userForm.sex"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="confirmEditUser">确 定</el-button></span></el-dialog><!--        增加的对话框--><el-dialogtitle="提示":visible.sync="insertDialogVisible"width="30%"><el-form  label-width="80px" :model="insertForm"><el-form-item label="姓名"><el-input v-model="insertForm.uname"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="insertForm.age"></el-input></el-form-item><el-form-item label="性别"><el-input v-model="insertForm.sex"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="insertDialogVisible = false">取 消</el-button><el-button type="primary" @click="confirminsertUser">确 定</el-button></span></el-dialog></div>
</template><script>export default {name: "index",data(){return {tableData: [],//修改弹出框editDialogVisible:false,//增加弹出框insertDialogVisible:false,//用户表单对象userForm:{},//增加用户表单对象insertForm:{},}},created() {this.initTable();},methods:{initTable(){var that=this;this.$http.get("http://localhost:8001/list").then(function(result){that.tableData=result.data.data;})},//根据用户id查询用户信息-----id不要使用Long  ----使用String类型editUser(uid){this.editDialogVisible=true;var that=this;this.$http.get(`http://localhost:8001/byId/${uid}`).then(function(result){that.userForm=result.data.data;})},//修改保存到数据库confirmEditUser(){var that=this;//JSON对象this.$http.put(`http://localhost:8001/update`,this.userForm).then(function(result){if(result.data.code===200){that.editDialogVisible=false;that.initTable();}})},insertUser(){var that=this;that.insertDialogVisible=true;this.insertForm={}},confirminsertUser(){var that=this;//JSON对象this.$http.post(`http://localhost:8001/insert`,this.insertForm).then(function(result){if(result.data.code===200){that.insertDialogVisible=false;that.initTable();}})},deleteUser(id){var that=this;//JSON对象this.$http.delete(`http://localhost:8001/delete/${id}`).then(function(result){if(result.data.code===200){that.initTable();}})}}}
</script>
<style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;}
</style>

elementUI脚手架相关推荐

springBoot前后端不分离Vue+elementUI脚手架
新建SpringBoot2.4.4项目. 目录结构如下新建html页面 login.js文件接口完整项目在我的资源中SpringBoot前后端不分离vue+element脚手架_springbo ...
iviewui ajax,中后台UI库使用对比：Element/iview
Element UI 1.什么是ElementUI? Element 饿了么前端出品的一套基于 Vue 2.0 的桌面端组件库,可用来构建中大型后台管理项目 1.1.搭建elementUI脚手架(v ...
[杂记]培训杂记(一)
文章目录 springboot 前端 VUE ElementUI springcloud 技术培训两周了,先是3天的大数据基础培训.对数据工程.大数据有了基础.宏观的了解.之后开始了专业技术培训. 专 ...
CGB2107-Day06-SpringBoot整合Mybatis
文章目录 1. Mybatis补充知识 1.1 参数取值特殊说明 1.2 代理对象说明 1.2.1 常见动态代理 1.2.2 Mapper接口的说明 2. 三大框架整合 2.1 框架概述 2.1.1 ...
Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
源码获取:博客首页 "资源" 里下载! Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目,实现的是所有系统最基础的后台管理功能 ...
vue脚手架项目使用element-ui
1.通过脚手架创建一个项目 2.在vue脚手架项目中安装elementui npm i element-ui -S 使用elementui,在mian.js中全局引入element-ui 2.配置路由 ...
vue 脚手架 elementUi element-ui 兼容 ie 360 急速/兼容模式完美处理
直接上干货如果你用vue的脚手架弄的项目那么恭喜你要改的也并不多如果是自己搭建的框架那么请滤清框架结构后按我的方法操作即可 1 引入 babel-polyfill ...
day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
本节目录一 vue获取原生DOM的方式二 DIY脚手架三 vue-cli脚手架的使用四 webpack创建项目的玩法五 element-ui的使用六 xxx 七 xxx 八 xxx 一 v ...
day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录一 vue获取原生DOM的方式二 DIY脚手架三 vue-cli脚手架的使用四 webpac ...

elementUI脚手架

elementUI脚手架相关推荐

最新文章

热门文章