前端技术:Vue+elementUI 饿了吗UI+CRUD,创建图书管理系统
1.Vue框架
JavaScript升级版,JS它脚本语言,Vue框架
语言它my生命,api工具类
文章中心思想,有生命力
Vue框架思想,MVVM框架思想,数据驱动思想,组件化思想
2.j2ee框架分层思想淋漓尽致体现,MVC(model view controller)
MVVM(model view viewmodel)
model:代表数据
view:代表页面展现
viewmodel:代表如何在页面中展示数据
数据和页面代码分离
JSP,页面html代码和数据的代码交织
大型项目:
<%=msg%>如果上百行div你还能分清楚哪个是哪个吗?
分层体系对小系统而言,复杂,但是对大系统而言结构清晰,各司其职。
分层体系可以针对每个层进行优化
3.渐进式框架
一般的框架的特点,全盘接收,要么全部使用,要么你就别用!
Vue天生可以按需配置,你需要什么部分的功能,我就提供什么部分的功能,你需要全部功能,那我就给你全部功能。
a.核心core Vue.js
可以只使用vue.js
可以只使用vue.js + components组件
可以只使用vue.js + components组件 + router路由
可以只使用vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目:npm(包依赖) + webpack(打包、压缩、合并等)
4.为什么Vue要提供额外命令v-* ?
html、css
html表现力太弱,html弱语言,脚本语言
html它能if语句?for语句?
动态网站,根据当前用户可能展现内容不同?
实现登录用户名展现:欢迎…
jsp+jstl(html,java判断最终生成html,动态网站)
性能慢(服务器),代码交织(JAVA、html代码、css代码)
Vue在页面上进行动态判断!if,利用v-if实现
性能高(浏览器)ajax请求,返回只要数据json,然后进行vue渲染
网络资源少,ajax从页面出发,性能高,不占资源
这就是为什么我们vue框架能流行,这么多好处
大前端是必有之路!
新技术远超企业多年工作经验人员,企业招聘不是让你精通,而是对你一个初学者要求,主流技术了解,有培养价值!
JS升级到Vue
css升级bootstrap升级element-ui
学习知识:
1.组件化,componts 自定义组件
2.如果引入第三方组件 element-ui
3.按钮、表格、弹出框
Vue+element-ui如何编程
Vue-cli脚手架,生成jt项目(级别)
要求:固定事情固定地方存储或者编写,
启动web服务:nodejs/后端会用tomcat
npm run dev
不要使用运行启动!
接下来让我们分析jt文件内容
main.js 全局组件和css样式导入,所有子组件都受用
App.vue 根组件,所有定义都是子组件,它来调用子组件进行展示
*.vue 文件内容3部分
template html代码+vue代码(编译)
script,js/vue代码,
export default唯一导出组件,vue就可以调用这个组件
name: ‘App’ 给组件起一个名称:App
import App from ‘./App’
import App from ‘./App.vue’
style 组件自身的私有样式修饰
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
加上scoped属性,就限制css只对当前组件生效操作系统规范:你创建一个目录,已经有两个隐藏目录. 代表当前路径.. 代表上级路径style
基础知识
安装依赖包:
链接:https://pan.baidu.com/s/1BoG2oWv6vuILlOKfCkh0Mg
提取码:hl47
启动服务,连续按2次Ctrl+C退出,输入命令npm i element-ui -D 执行下载
安装依赖包
npm i element-ui -D
在-D开发环境中安装组件 element-ui
下载完成后打开HB,找到jt(自己定义的名字)目录,找到src,把element-ui包导入
导入element-ui
全局main.js(导包,css)
调用elementui,修改main.js
//导入element-ui包,nmp安装包
//npm i element-ui -D
import ElementUI from 'element-ui';
//导入element的css支持
import 'element-ui/lib/theme-chalk/index.css'
//引用这个element-ui
Vue.use(ElementUI)
1.找到src下components文件夹,自定义组件 Book.vue
必须放在src/components目录下
自己加一个按钮
怎么使用自定义组件?(注册)
a. 给组件起一个名字
<script>
export default {name: "Book"
}
</script>
b. 在App.vue根组件中声明调用这个组件
在template中引用这个组件<Book></Book>
<template><div><el-button type="primary">点我有惊喜2</el-button></div>
</template><script>export default{name:"Book"}
</script><style></style>
修改一下 HelloWorld.vue的内容
<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><button>点我有惊喜</button></div></template>
<script>export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>
进入App.vue,配置Book页面
<template><div id="app"><img src="./assets/logo.png"><router-view/><Book> </Book></div>
</template><script>/*
export default {name: 'App'
}*/
/*
import 导入子组件
components 代表我的声明子组件的集合
'./components/Book.vue' 必须写,不写报错
*/
import Book from './components/Book.vue' /*导入子组件*/
export default{components:{Book}
}
</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>
导入成功的页面效果:
安装element-ui组件,出错
1)重新安装一遍,可能网络异常,启动时,报错
2)npm i element-ui -D #i代表安装,D代表开发环境
npm install element-ui -S #生产环境
3)cnpm,安装这个命令,来执行上面语句
相关字体、js、css文件总目录element-ui必须放在src目录下
布局容器 container
用于布局的容器组件,方便快速搭建页面的基本结构:
:外层容器,当子元素
:顶栏容器
:侧边栏容器
:主要区域容器
:底栏容器
图标 icon
https://element.eleme.cn/#/zh-CN/component/icon
按钮 button
https://element.eleme.cn/#/zh-CN/component/button
表格 Table
https://element.eleme.cn/#/zh-CN/component/table
我们先大概了解一下
表格:
样式
<template><el-table:data="tableData" //v-bindstyle="width: 100%"><el-table-column //表格列:单元格prop="date" //去获取数据keylabel="日期" //列名width="180"> //列的宽度</el-table-column>
数据
<el-tableexport default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
我们用book.vue进行测试:
<template><div><el-row><el-button type="primary">点我有惊喜</el-button></el-row><el-row><el-table><el-table-column label="书名"></el-table-column><el-table-column label="作者"></el-table-column><el-table-column label="价格"></el-table-column><el-table-column label="介绍"></el-table-column></el-table></el-row></div>
</template><script>export default{name:"Book"}
</script>
<style>
</style>
网页效果:
当前行 scope
<template slot-scope="scope">
vue提供的slot-scope槽,scope变量名
scope.row
代表当前行数据
scope.$index
代表当前行的索引值
@click="del(index)"
传递当前行索引值
@click="toupdate(scope.$index,scope.row)"
传递当前行的数据
对话框 dialog
https://element.eleme.cn/#/zh-CN/component/dialog
输入框 input
https://element.eleme.cn/#/zh-CN/component/input
表单 form
https://element.eleme.cn/#/zh-CN/component/form
全局变量支撑
data(){return {m : { //pojo对象,临时存储数据id: '',name: '',address: ''},isupdate: false, //新增和修改标识index: null, //当前行索引值dialogVisible: false, //是否展示对话框标识students //页面数据对象}},
拓展:图书管理系统
修改调用的组件的网页名称
第一步:在main.js里面添加一个全局指令
Vue.directive('title', {inserted: function (el, binding) {document.title = el.dataset.title}
})
第二步:在要调用的组件里面,随便找一个div加入如下代码
<template><div v-title data-title="xxx">
增加小图标功能:
这些图标都是element-ui定义好的,
这些名称到官网查询
增加删除功能:
1)增加删除按钮
2)增加删除事件
slot-scope vue带的,它实现动态编程
它会提供当前行的索引值 scope.$index
3)从list中删除数据 api,splice函数
删除某行,是有一个索引值?
vue给slot-scope
对象,封装数据scope对象
scope.$index
this.list.splice(index, 1)
从list数据中删除对应行,删除一行数据
splice( 1 , 1 )
第一个参数,索引位置
第二个参数,如果是1 是删除
splice(1 , 0 , “chen” )
第一个参数,索引位置
第二个参数,0 删除的个数,没删除
第三个参数,后面可以多个值,查询到索引位置
(修改)
Is.splice( 1 , 1 , “chen” )
第—个参数,索引位置
第二个参数,1 删除—个
第三个参数,后面写的值插入
新增、修改、弹出对话框(复用这个对话框)
设置一个全局变量:centerDialogVisible
true展示,false不展示
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center> //居中<span>需要注意的是内容是默认不居中的</span> <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取 消</el-button> //centerDialogVisible 变量=false,关闭<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button></span>
</el-dialog>
添加表单 Form
表单
全局数据:模型:model,
<el-form :model=“m” 双向绑定数据来源
<el-input v-model=“m.name” 双向绑定
在data中声明,临时存储数据
m: {name:null,author:null,price:null,intro:null}
一条数据textarea html标签文本域
<el-form :model="m" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="m.name"></el-input>
</el-form-item><el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"> </el-input>
</el-form-item>
把m模型中的数据添加到页面
list数据,splice
修改:
1)弹出对话框
2)对话框中要修改的那条对应信息
vue组件它会直接把这个数据封装row中
3)保存(复用)修改这条值
this.list.splice(this.index, 1, this.m) //修改
(修改)s.splice(1,1,"chen")
如何实现新增或者修改的判断呢?
定义一个全局变量 isUpdate
新增对话框:isUpdate=false
修改对话框:isUpdate=true
index代表当前行的索引值
当修改数据时,因为双向绑定,数据变化
页面数据也随之变化,这是不对!!!
this.m = row
row代表是页面,m数据
是同一个引用,修改其中一个,都改了
把它们关系断开,创建新对象
数据copy,拷贝row数据,新对象
把新对象赋值this.m
整体代码:
App.vue
<template><div id="app"><router-view/><Book></Book></div>
</template><script>/*
export default {name: 'App'
}*/
/*
import 导入子组件
components 代表我的声明子组件的集合
'./components/Book.vue' 必须写,不写报错
*/
import Book from './components/Book.vue' /*导入子组件*/
export default{components:{Book}
}
</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>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//导入element-ui包,nmp安装包
//npm i element-ui -D
import ElementUI from 'element-ui'
//导入element的css支持
import 'element-ui/lib/theme-chalk/index.css'//引用这个element-ui
Vue.use(ElementUI)Vue.config.productionTip = false//添加一个全局指令,修改网页名称
Vue.directive('title', {inserted: function (el, binding) {document.title = el.dataset.title}
})/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})
Book.vue
<template><!--自定义网页名称--><div v-title data-title="清风图书管理系统" ><!--自定义标题--><h1><i class="el-icon-collection"></i> {{sysname}}</h1><!--创建一个新增按钮--><el-row><el-button type="primary" @click="toadd()" icon="el-icon-document-add">新增</el-button></el-row><!--创建Table 表格--><el-row><el-table :data="list"><el-table-column prop="name" label="书名" width="200" ></el-table-column><el-table-column prop="author" label="作者" width="150"></el-table-column><el-table-column prop="price" label="价格" width="100"></el-table-column><el-table-column prop="intro" label="介绍" width="1020"></el-table-column><el-table-column label="功能" width="240"><!--增加修改、删除按钮--><template slot-scope="s"><el-button type="warning" @click="toupdate(s.$index,s.row)" round icon="el-icon-edit">修改</el-button><el-button type="danger" icon="el-icon-delete" @click="del(s.$index)" round>删除</el-button></template></el-table-column></el-table><!--增加弹出对话框--><el-dialog title="提示信息" :visible.sync="dialogVisible" width="30%" center ><!--对话框内容--><div><el-form :model="m" label-width="40px"> <!--model表单控件双向绑定--><el-form-item label="书名"><el-input v-model="m.name" placeholder="请输入书名..."></el-input></el-form-item><el-form-item label="作者"><el-input v-model="m.author" placeholder="请输入作者..."></el-input></el-form-item><el-form-item label="价格"><el-input v-model="m.price" placeholder="请输入价格..."></el-input></el-form-item><el-form-item label="介绍"><el-input v-model="m.intro" placeholder="请输入介绍..." type="textarea"></el-input></el-form-item></el-form></div><!--对话框按钮--><div slot="footer" class="dialog-footer"><el-button type="warning" plain @click="dialogVisible = false">取 消</el-button><el-button type="success" plain @click="save">确 定</el-button></div></el-dialog></el-row></div>
</template><script>export default {name: "Book",data() {return {sysname: "清风图书管理系统",/*自定义的标签*//*弹出窗口按钮变量*/dialogVisible: false,isUpdate:false,index:null,/*弹出窗口的绑定*/m: {name: null,author: null,price: null,intro: null},/*给表单添加内容*/list: [{name: "java核心技术卷",author: "凯·S.霍斯特曼",price: "¥109.30",intro: "伴随着Java的成长,《Java核心技术》从第1版到第10版一路走来,得到了广大Java程序设计人员的青睐,成为一本畅销不衰的Java经典图书。",},/*第二条记录*/{name: "Java编程思想(第4版)",author: "[美] Bruce Eckel",price: "¥79.20",intro: "设计模式贯穿于众多示例中:适配器、桥接器、职责链、命令、装饰器、外观、工厂方法、享元、点名、数据传输对象、空对象、代理、单例、状态、策略、模板方法以及访问者。"},/*第三条记录*/{name: "Java从入门到精通(第5版)",author: "明日科技",price: "¥52.70",intro: "丛书说明:“软件开发视频大讲堂”丛书(第1版)于2008年8月出版,因其编写细腻,易学实用,配备海量学习资源和全程视频等,在软件开发类图书市场上产生了很大反响,绝大部分品种在全国软件开发零售图书排行榜中名列前茅,2009年多个品种被评为“全国优秀畅销书”。 "},/*第四条记录*/{name: "零基础学Java(全彩版)",author: "明日科技",price: "¥60.70",intro: "《零基础学Java》从零基础学习者的角度出发,通过通俗易懂的语言、流行有趣的实例,详细地介绍了使用Java语言进行程序开发需要掌握的知识和技术。"},/*第五条记录*/{name: "O'Reilly:Head First Java ",author: "塞若(Sierra K.),[美] 贝茨(Bates B.)",price: "¥54.30",intro: "阅读《Head First Java》这本书,你将从中体会到学习的乐趣。对于希望学习一门新的编程语言,又不是计算机科学系或者没有编程经验的人来说,本书简直就是极好的。"},/*第六条记录*/{name: "Python编程 从入门到实践 第2版(图灵出品)",author: "[美] 埃里克·马瑟斯(Eric Matthes)",price: "¥59.60",intro: "本书内容分为“基础知识”和“项目”两部分。读完本书,读者不仅能快速掌握编程基础知识,还能编写出解决实际问题的代码并开发复杂的项目。第2版沿袭第1版讲解清晰透彻、循序渐进的特点,并全面升级。"},/*第七条记录*/{name: "超简单:用Python让Excel飞起来 ",author: "王秀文,郭明鑫,王宇韬",price: "¥34.90",intro: "《超简单:用Python让Excel飞起来》是一本讲解如何用Python和Excel“强强联手”打造办公利器的案例型教程。"},]}},methods: {toadd: function(){this.isUpdate = falsethis.dialogVisible = true},toupdate:function(index,row){this.isUpdate = truethis.dialogVisible = true//this.m = row 旧对象this.m = this.copy(row)//this.index代表,data中数据,index代表函数的参数this.index = index},save:function(){if(this.isUpdate){console.log("全局:index:"+this.index)this.list.splice(this.index,1,this.m) //修改}else{//参数1:0 新增的元素放在第一行,参数2:0代表不删除//在最后面加this.list.splice(this.list.length,0,this.m)this.list.splice(0,0,this.m)}this.dialogVisible = false //对话框关闭this.m = {} //把模型m的属性值置空},del: function(index) {//删除这个当前行元素,参数1:删除位置,参数2:删除个数this.list.splice(index, 1)},copy:function(oldObj){//复制这个对象var newObj ={}for(var o in oldObj){ //for循环遍历,o 代表每次属性值newObj[o] = oldObj[o]}return newObj;}}}
</script><style>textarea{font-family: 微软雅黑;}
</style>
小结:
1、自定义组件
1)src/componets/Book.vue
2)注册,它都是根组件的孩子,子组件 App.vue
import Book from './components/Book.vue'
export default {components:{Book}
}
3)App.vue模板地方
2、引入第三方element-ui,业界no1
main.js全局引入
1)安装element-ui组件
npm i element-ui -D
npm install element-ui -S
3)修改main.js,写下面的3句话
import ElementUI from ‘element-ui’
拷贝css等文件到src下
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
注册后子组件就可以使用
3、展现数据
:data="list"在data数据区域定义数组对象
表格列prop=“name”,每条数据中key
4、弹出对话框 dialog
dialogVisible 变量,是否展现
5、新增
this.list.splice(0, 0, this.m)
this.m = {} //把模型m的属性值置空 否则下一次进入,内容就不为空
6、副作用,修改页面m和row同引用,一改全都改
断掉它们关系,引用。
this.m = this.copy(row)
copy: function(oldObj){ //复制对象
var newObj = {}
for(var o in oldObj){ //for循环遍历,o代表下标
newObj[o] = oldObj[o]
}
return newObj;
}
两个对象内容一致,是两个对象
demo 前端vue,
ajax,java(访问数据库,SSM大框架),json,解析json,存储到list
前端技术:Vue+elementUI 饿了吗UI+CRUD,创建图书管理系统相关推荐
- (vue+【饿了么UI】tag组件封装)
(vue+[饿了么UI]tag组件封装) 根据项目所衍生的一种tag组件,废话不多说直接上代码 <template> <div><!-- 素材标签 --><d ...
- 完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档
完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档 完整代码下载地址:完整企业官网源码 某工程管理有限公司企业官网 前端 新版 ...
- 前端技术栈:后台管理端UI框架
链接汇总 X-Admin(http://x.xuebingsi.com/) 若依管理系统(http://www.ruoyi.vip/) 人人开源(https://www.renren.io/guide ...
- vue2+elementui 饿了么ui的一些食用方法
1.表格行高设置 :row-style="{height:'20px'}" :cell-style="{padding: '0'}" 2.CSS样式穿透 1./ ...
- elementUI饿了么UI时间日期选择器限制只能选择当前时间后的日期
//html <el-date-pickerv-model="forYouTime" //数据绑定:picker-options="pickerOption&quo ...
- vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用,实现了发送消息+表情(动图gif).图片/视频预览.右键长按菜单.红包/朋 ...
- nodejs+vue+elementui课外知识学习网站
语言 node.js 框架:Express 前端:Vue.js 数据库:mysql 数据库工具:Navicat 开发软件:VScode 前端nodejs+vue+elementui, 小学生课外知 ...
- Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
源码获取:博客首页 "资源" 里下载! Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目,实现的是所有系统最基础的后台管理功能 ...
- 【VUE+elementUI+JAVA】elementUI的<el-table>组件VUE自定义排序+后台排序含分页完整版
前言 最近要实现对table按列要进行排序的需求, 故此整理一下从前端到后端整个的完整逻辑,供大家参考. 开发环境 项目为前后端分离项目,使用的是Ruoyi-VUE版前后端分离框架 前端:VUE + ...
最新文章
- rsync 端口更换(默认873)
- 释疑の采购订单的批量修改
- FCKeditor2.3 For PHP 详细整理的使用参考
- 任意进制转化 函数 模板(一)
- JS-取出字符串中重复次数最多的字符并输出
- ActiveMq使用笔记
- 2018.9.10.Matlab实验二:Matlab基本运算
- Java 核心内容相关面试题【2】
- 【2021团体程序设计天梯赛】L1部分(PTA,L1-073到L1-080)题解代码
- Doldrums:功能强大的逆向工程分析工具
- 开源字体_开源字体的前5大资源
- 爬虫学习5-JSON 数据的分析与解析
- 大龄程序员的出路究竟在何处?从369个过来人问答贴里,我们得到了答案
- 这个Python脚本牛逼了,秒抢红包就算了,还能无视撤回消息
- (极光推送)短信验证码
- 詹姆斯高斯林_Google / Oracle上的高斯林
- 计算机配件声卡,DIY组装电脑到底需要哪些配件 攒机网卡声卡之类的要买吗
- 基于WebGL架构的3D可视化平台—城市地下管线3D可视化
- 产品经理(PM)一秒理解MRD、PRD、BRD
- 从0到1爬虫学习笔记:04Scrapy框架
热门文章
- python绘制花朵图案_Python编写万花尺图案实例
- [C/C++后端开发学习] 7 tcp服务器的epoll实现以及Reactor模型
- 财经数据----同花顺技术选股,附代码
- 斐波那契数列求和——C语言(小白版)
- hive URI ${systemjava.io.tmpdir%7D$%7Bsystemuser.name%7D
- 2022-06-18 jQuery遍历方法:$.each()方法遍历对象或数组的示例
- Win10 下安装PhotoShop CS6
- 【xlrd读取Excel日期】使用xlrd读取Excel日期格式单元格的方法
- 数学建模(1)-matlab之fprintf函数用法
- 51单片机模拟数字键盘输入以及图像显示+Proteus仿真