vue day02 笔记(回顾+json-server用法)
文章目录
- 1 回顾(day01)
-
- 背景
- 关于vue基础
-
-
- 明确下列:
- vue的基本指令
-
- (1) 基本框架
- (2) 渲染指令
- (3) v-vloak 指令
- (4) v-bind 指令和class style绑定
- (5) v-on指令以及几个常见
- (6) 数据绑定(单,双)
- (7) v-for 指令
- (8) v-if v-show 指令
-
- 2 案例分析和讲解
- 3 新内容 json-server
-
- 引入
-
-
-
- 为什么要使用json-server?
- 优点?
-
-
- 讲解
-
-
-
- 1 怎么使用
-
- 首先创建一个list.json文件
- CRUD
- 结合axios进行数据访问
- 案例:axios+json-server+bootstrap+vue实现对数据的增删改查
-
- 1 引入库 vue.js, bootstrap.min.js,axios.js
- 2 编写测试数据hero.json
- 3 通过json-server生成接口
- 4 页面的编写
- 5 hero.js文件编写
-
-
1 回顾(day01)
背景
- vue.js是目前最火的前端框架 免费
- react.js是最流行的一个前端框架 免费
- angular.js 是最早的一个前端框架 收费
关于vue基础
明确下列:
- 是一套构建用户界面的框架(只关注视图层)
- 关于MVC和MVVM的区别?(见最后)
- 学vue的原因?
1 提高开发效率
2 减少不必要的DOM操作(只需要对改变的数据进行处理)
3 双向数据绑定(程序员只需关注数据业务逻辑) - 库和框架的理解
1 框架是一套完整的解决方案,对项目的入侵性较大,项目如果需要更换框架,则需要重新架构整个项目
2 提供某一个小功能,对项目的入侵性较小,如果某个库无法完成某些需求,可以很容易切换到其他库.
总结来说:库小而巧,框架大而全
vue的基本指令
- (1) 基本使用
- (2) 渲染指令
- (3) v-vloak 指令
- (4) v-bind 指令和class style绑定
- (5) v-on指令以及几个常见
- (6) 数据绑定(单,双)
- (7) v-for 指令
- (8) v-if v-show 指令
(1) 基本框架
步骤
- 1 引入库
- 2 实例化vue
- 3 渲染数据
<div id="app">
{
{
msg}}
</div>
<script>
// 模板:挂载点控制区域的标签
//model的数据必须放在模板中
// template: 显示后,将会隐藏{
{msg}}信息
//
new Vue({
el:"#app",//挂载点-->控制页面的区域
data:{
msg:"hello vue!"
},
template:'hello'
})
</script>
明确:
1 什么是template?
模板,控制区域内的所有标签;显示后,将会隐藏{
{msg}}信息
2 什么是挂载点?
控制页面区域,在实例化vue中el上绑定
3 数据位置有什么要求?
model的数据必须放到模板中,否则不会显示
4 MVVM在本案例中的体现?
view:挂载点控制的区域
view model:实例化后的vue
model:data的内容(vue时刻监听data变化)
(2) 渲染指令
- { {}} 小胡子语法 插值表达式
- v-text
- v-html
<div id="app">
<!-- 小胡子语法-->
{
{
msg}}
<!-- v-text -->
<h1 v-text="msg"></h1>
<h1 v-text="info"></h1>
<!-- v-html-->
<h1 v-html="msg"></h1>
<h1 v-html="info"></h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"我是普通文本内容",
info:"我是标签文本内容"
}
})
</script>
明确:
1 插值表达值有什么问题?
容易产生页面闪烁问题(下面详细)
2 三者渲染方式区别?
(1)都是用来渲染页面
(2)插值表达式常用 不会覆盖标签内容
(3)v-text 渲染字符串 会覆盖标签内容
(4)v-html将字符串解析成html再渲染 会覆盖标签内容
(3) v-vloak 指令
- 解决页面闪烁问题
<style>
[v-cloak]{
display: none;
}
</style>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-cloak> {
{
msg}}</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello"
}
})
</script>
</body>
明确:
1 v-cloak用途?
解决页面闪烁问题
页面闪烁:由于网速或其他问题,页面的插值表达式的显示和隐藏
2 v-cloak原理?
当vue库进入完毕后会自动的把v-cloak删除,刚好数据也解析完毕了
3 v-cloak使用?
(1)在出现插值表达式的标签上添加 v-cloak 指令
(2)在vue库引入之前添加
(4) v-bind 指令和class style绑定
- v-bind 属性绑定
- class绑定的五种方式
原生 class=“bg ,color”
数组 :class=’[“bg” ,“color”]’
数组三元 :class=’[“bg” ,flag?“color”:""]’
数组对象(推荐) :class=’[“bg” ,{color:true}]’
对象 :class="{color:true,bg:false} - style绑定的四种
原生 style=“background: pink;color: green”
对象 :style="{backgroundColor:‘pink’,color:‘green’}
数组 :style=“style” 一个
:style="[style,style1]" 多个
<div id="app">
<!-- v-bind:属性="属性值"-->
<a href="" v-bind:title="title">我是test</a>
<!-- 简写-->
<a href="" :title="title">我是test</a>
</div>
<!-- 原生-->
<h1 class="bg color"> {
{
msg}}</h1>
<!-- 数组-->
<h1 :class='["bg" ,"color"]'>{
{
msg}}</h1>
<!-- 数组三元-->
<h1 :class='["bg" ,flag?"color":""]'>{
{
msg}}</h1>
<!-- 数组对象 推荐-->
<h1 :class='["bg" ,{color:true}]'>{
{
msg}}</h1>
<!-- 对象-->
<h1 :class="{color:true,bg:false}">{
{
msg}}</h1>
</div>
<div id="app">
<h1 style="background: pink;color: green">{
{
msg}}</h1>
<h1 :style="{backgroundColor:'pink',color:'green'}">{
{
msg}}</h1>
<h1 :style="style">{
{
msg}}</h1>
<h1 :style="[style,style1]">{
{
msg}}</h1>
</div>
(5) v-on指令以及几个常见
- 绑定函数有参但没有传参,默认event
- 绑定函数无参
- 绑定函数有参传参,为参数
- 阻止冒泡
- 阻止默认(链接或者表单提交)
<div id="app">
<button v-on:click="show">点击有参</button>
<button v-on:click="show('我是有参数的')">点击有参传参</button>
<button v-on:click="show2">点我无参</button>
</div>
<div id="app">
<div class="out" v-on:click="out">
<!-- <div class="in" v-on:click="inner"> 输出in out -->
<div class="in" v-on:click.stop="inner"> <!-- 输出 in 阻止冒泡 -->
</div>
</div>
<a href="https://www.baidu.com/" v-on:click.prevent="go">去百度</a><!-- 输出 go 不能跳转 阻止默认行为-->
<a href="https://www.baidu.com/" v-on:click="go">去百度</a><!-- 输出 go 能跳转 -->
</div>
<script>
明确:
1 相当于原生中的什么?
(1).stop 相当于 js中 evt.stopPropagation();
(2).prevent 想当于 js中 evt.preventDefault()
(6) 数据绑定(单,双)
+单向数据绑定 :value=“值”
+双向数据绑定: v-model=“值”
<div id="app">
<input type="text" :value="lay">
<input type="text" v-model="lay">
</div>
明确:
1 两者区别?
(1) 单向数据绑定 model改变 view也跟着改变 反之不成立
(2) 双向数据绑定 model改变 view也跟着改变 反之成立
(7) v-for 指令
- 遍历数组
- 遍历对象
- 遍历数组对象
- 遍历数字
<div id="app">
<p v-for="(el,index) in arr" :key="el.index">{
{
el}}-->{
{
index}}</p>
<p v-for="(el,key,index) in obj " :key="el.index">{
{
el}}-->{
{
key}}-->{
{
index}}</p>
<p v-for="(el,index) in arrObj" :key="el.index">{
{
el}}-->{
{
index}}</p>
<p v-for="count in 3">{
{
count}}</p>
</div>
明确:
1 遍历数字时,下标问题?
下标从1开始.
2 在遍历是为什么要加上:key="值"
表示唯一,保证前端和后端数据一致和准确性
(8) v-if v-show 指令
- v-if 流程指令
- v-show 页面显示和隐藏指令
<div id="app">
<button @click="hidden"> 显示隐藏 </button>
<button @click="flag=!flag"> 显示隐藏 </button>
<h1 v-show="flag">{
{
msg}}</h1>
<h1 v-if="flag">{
{
msg}}</h1>
<input type="text" v-model="score">
<h1 v-if="score>90">优秀</h1>
<h1 v-else-if="score>60&&score<90" >良好</h1>
<h1 v-else>不及格</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:false,
score:88
},
methods:{
hidden(){
this.flag=!this.flag;
}
}
})
</script>
明确:
1 v-if和v-show区别?
(1)v-if 通过js控制dom元素的添加和删除 适合流程控制
(2)v-show 通过css控制元素的显示和隐藏 适合频繁点击操作
(3)都能控制页面上元素的消失和隐藏
2 案例分析和讲解
- 跑马灯
见day01 - 换肤优化
见day01
3 新内容 json-server
引入
为什么要使用json-server?
- 对前端人员来说,写接口是一个比较头疼的事,并且对json数据的遍历也是特别不方便的,json-server帮我们解决这种头疼的问题
优点?
- 帮前端测试人员将json数据生成接口,提高开发效率
讲解
- 使用
- CRUD
- 结合axios进行数据访问
- 案例:axios+json-server+bootstrap+vue实现对数据的增删改查
1 怎么使用
- 下载 全局安装
npm i json-server -g
- 使用
json-server list.json
- 使用案例
首先创建一个list.json文件
注意:这个json文件里面的数据一定是一个对象
{
"user": [
{
"id": 1,
"name": "lay",
"age": 20
},
{
"id": 2,
"name": "sheep",
"age": 27
},
{
"id": 3,
"name": "xing",
"age": 23
}
]
}
执行:
$ json-server list.json
\{
^_^}/ hi!
Loading list.json
Done
http://localhost:3000/user
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
访问:
CRUD
- C create
- R read
- U update
- D delete
结合axios进行数据访问
- 获取数据
axios.get(" http://localhost:3000/user") - 插入数据
axios.post(" http://localhost:3000/user",obj) - 更改数据
axios.put(" http://localhost:3000/user"+id,obj) - 删除数据
axios.delete(" http://localhost:3000/user"+id) - 分页操作
axios.get(" http://localhost:3000/user?_page=m,_limit=n")
案例:axios+json-server+bootstrap+vue实现对数据的增删改查
1 引入库 vue.js, bootstrap.min.js,axios.js
2 编写测试数据hero.json
{
"hero": [
{
"cname": "鲁班七号5",
"title": "机关造物",
"hero_type": 5,
"skin_name": "机关造物|木偶奇遇记|福禄兄弟|电玩小子|星空梦想",
"id": 112
},
{
"id": 113,
"cname": "庄周",
"title": "逍遥梦幻",
"new_type": 0,
"hero_type": 6,
"hero_type2": 3,
"skin_name": "逍遥幻梦|鲤鱼之梦|蜃楼王|云端筑梦师"
},
{
"id": 114,
"cname": "刘禅",
"title": "暴走机关",
"new_type": 0,
"hero_type": 6,
"hero_type2": 3,
"skin_name": "暴走机关|英喵野望|绅士熊喵|天才门将"
},
{
"id": 115,
"cname": "高渐离",
"title": "叛逆吟游",
"new_type": 0,
"hero_type": 2,
"skin_name": "叛逆吟游|金属狂潮|死亡摇滚"
},
{
"id": 116,
"cname": "阿轲",
"title": "信念之刃",
"new_type": 0,
"hero_type": 4,
"skin_name": "信念之刃|爱心护理|暗夜猫娘|致命风华|节奏热浪"
},
{
"id": 117,
"cname": "钟无艳",
"title": "野蛮之锤",
"new_type": 0,
"hero_type": 1,
"hero_type2": 3,
"skin_name": "野蛮之锤|生化警戒|王者之锤|海滩丽影"
},
{
"id": 118,
"cname": "孙膑",
"title": "逆流之时",
"new_type": 0,
"hero_type": 6,
"hero_type2": 2,
"skin_name": "逆流之时|未来旅行|天使之翼|妖精王"
},
{
"id": 119,
"cname": "扁鹊",
"title": "善恶怪医",
"new_type": 0,
"hero_type": 2,
"skin_name": "善恶怪医|救世之瞳|化身博士|炼金王"
},
{
"id": 120,
"cname": "白起",
"title": "最终兵器",
"new_type": 0,
"hero_type": 3,
"skin_name": "最终兵器|白色死神|狰|星夜王子"
},
{
"id": 152,
"cname": "王昭君",
"title": "冰雪之华",
"new_type": 0,
"hero_type": 2,
"skin_name": "冰雪之华|精灵公主|偶像歌手|凤凰于飞|幻想奇妙夜"
},
{
"id": 153,
"cname": "兰陵王",
"title": "暗影刀锋",
"new_type": 0,
"hero_type": 4,
"skin_name": "暗影刀锋|隐刃|暗隐猎兽者"
},
{
"id": 154,
"cname": "花木兰",
"title": "传说之刃",
"new_type": 0,
"hero_type": 1,
"hero_type2": 4,
"skin_name": "传说之刃|剑舞者|兔女郎|水晶猎龙者|青春决赛季|冠军飞将|瑞麟志"
},
{
"id": 156,
"cname": "张良",
"title": "言灵之书",
"new_type": 0,
"hero_type": 2,
"skin_name": "言灵之书|天堂福音|一千零一夜|幽兰居士"
},
{
"id": 157,
"cname": "不知火舞",
"title": "明媚烈焰",
"new_type": 0,
"hero_type": 2,
"hero_type2": 4,
"skin_name": "明媚烈焰"
},
{
"id": 162,
"cname": "娜可露露",
"title": "鹰之守护",
"new_type": 0,
"hero_type": 4,
"skin_name": "鹰之守护"
},
{
"id": 163,
"cname": "橘右京",
"title": "神梦一刀",
"new_type": 0,
"hero_type": 4,
"hero_type2": 1,
"skin_name": "神梦一刀"
},
{
"id": 166,
"cname": "亚瑟",
"title": "圣骑之力",
"pay_type": 11,
"new_type": 0,
"hero_type": 1,
"hero_type2": 3,
"skin_name": "圣骑之力|死亡骑士|狮心王|心灵战警"
},
{
"id": 167,
"cname": "孙悟空",
"title": "齐天大圣",
"new_type": 0,
"hero_type": 4,
"hero_type2": 1,
"skin_name": "齐天大圣|地狱火|西部大镖客|美猴王|至尊宝|全息碎影|大圣娶亲"
},
{
"id": 168,
"cname": "牛魔",
"title": "精英酋长",
"new_type": 0,
"hero_type": 3,
"hero_type2": 6,
"skin_name": "精英酋长|西部大镖客|制霸全明星"
},
{
"id": 187,
"cname": "东皇太一",
"title": "噬灭日蚀",
"new_type": 0,
"hero_type": 3,
"skin_name": "噬灭日蚀|东海龙王|逐梦之光"
},
{
"id": 182,
"cname": "干将莫邪",
"title": "淬命双剑",
"new_type": 0,
"hero_type": 2,
"skin_name": "淬命双剑|第七人偶|冰霜恋舞曲"
},
{
"id": 189,
"cname": "鬼谷子",
"title": "万物有灵",
"new_type": 0,
"hero_type": 6,
"skin_name": "万物有灵|阿摩司公爵|幻乐之宴"
},
{
"id": 193,
"cname": "铠",
"title": "破灭刃锋",
"new_type": 0,
"hero_type": 1,
"hero_type2": 3,
"skin_name": "破灭刃锋|龙域领主|曙光守护者|青龙志"
},
{
"id": 196,
"cname": "百里守约",
"title": "静谧之眼",
"new_type": 0,
"hero_type": 5,
"hero_type2": 4,
"skin_name": "静谧之眼|绝影神枪|特工魅影|朱雀志"
},
{
"id": 195,
"cname": "百里玄策",
"title": "嚣狂之镰",
"new_type": 0,
"hero_type": 4,
"skin_name": "嚣狂之镰|威尼斯狂欢|白虎志"
},
{
"id": 194,
"cname": "苏烈",
"title": "不屈铁壁",
"pay_type": 10,
"new_type": 0,
"hero_type": 3,
"hero_type2": 1,
"skin_name": "不屈铁壁|爱与和平|坚韧之力|玄武志"
},
{
"id": 198,
"cname": "梦奇",
"title": "入梦之灵",
"new_type": 0,
"hero_type": 3,
"skin_name": "入梦之灵|美梦成真|胖达荣荣"
},
{
"id": 179,
"cname": "女娲",
"title": "至高创世",
"new_type": 0,
"hero_type": 2,
"skin_name": "至高创世|尼罗河女神"
},
{
"id": 501,
"cname": "明世隐",
"title": "灵魂劫卜",
"new_type": 0,
"hero_type": 6,
"skin_name": "灵魂劫卜|占星术士|虹云星官"
},
{
"id": 199,
"cname": "公孙离",
"title": "幻舞玲珑",
"new_type": 0,
"hero_type": 5,
"skin_name": "幻舞玲珑|花间舞|蜜橘之夏"
},
{
"id": 176,
"cname": "杨玉环",
"title": "霓裳风华",
"new_type": 0,
"hero_type": 2,
"hero_type2": 6,
"skin_name": "风华霓裳|霓裳曲|遇见飞天"
},
{
"id": 502,
"cname": "裴擒虎",
"title": "六合虎拳",
"new_type": 0,
"hero_type": 4,
"hero_type2": 1,
"skin_name": "六合虎拳|街头霸王|梅西"
},
{
"id": 197,
"cname": "弈星",
"title": "天元之弈",
"pay_type": 10,
"new_type": 0,
"hero_type": 2,
"skin_name": "天元之弈|踏雪寻梅"
},
{
"id": 503,
"cname": "狂铁",
"title": "战车意志",
"new_type": 0,
"hero_type": 1,
"skin_name": "战车意志|命运角斗场|御狮"
},
{
"id": 504,
"cname": "米莱狄",
"title": "筑城者",
"pay_type": 10,
"new_type": 0,
"hero_type": 2,
"skin_name": "筑城者|精准探案法|御霄"
},
{
"id": 125,
"cname": "元歌",
"title": "无间傀儡",
"new_type": 0,
"hero_type": 4,
"skin_name": "无间傀儡|午夜歌剧院"
},
{
"id": 510,
"cname": "孙策",
"title": "光明之海",
"new_type": 0,
"hero_type": 3,
"hero_type2": 1,
"skin_name": "光明之海|海之征途|猫狗日记"
},
{
"id": 137,
"cname": "司马懿",
"title": "寂灭之心",
"new_type": 0,
"hero_type": 4,
"hero_type2": 2,
"skin_name": "寂灭之心|魇语军师"
},
{
"id": 509,
"cname": "盾山",
"title": "无尽之盾",
"new_type": 0,
"hero_type": 6,
"skin_name": "无尽之盾|极冰防御线"
},
{
"id": 508,
"cname": "伽罗",
"title": "破魔之箭",
"new_type": 0,
"hero_type": 5,
"skin_name": "破魔之箭|花见巫女"
},
{
"id": 312,
"cname": "沈梦溪",
"title": "爆弹怪猫",
"new_type": 0,
"hero_type": 2,
"skin_name": "爆弹怪猫|棒球奇才"
},
{
"id": 507,
"cname": "李信",
"title": "谋世之战",
"new_type": 0,
"hero_type": 1,
"skin_name": "谋世之战|灼热之刃"
},
{
"id": 513,
"cname": "上官婉儿",
"title": "惊鸿之笔",
"new_type": 0,
"hero_type": 2,
"hero_type2": 4,
"skin_name": "惊鸿之笔|修竹墨客"
},
{
"id": 515,
"cname": "嫦娥",
"title": "寒月公主",
"new_type": 0,
"hero_type": 2,
"hero_type2": 3,
"skin_name": "寒月公主|露花倒影"
},
{
"id": 511,
"cname": "猪八戒",
"title": "无忧猛士",
"new_type": 0,
"hero_type": 3,
"skin_name": "无忧猛士|年年有余"
},
{
"id": 529,
"cname": "盘古",
"title": "破晓之神",
"new_type": 0,
"hero_type": 1,
"skin_name": "破晓之神"
},
{
"id": 505,
"cname": "瑶",
"title": "鹿灵守心",
"new_type": 0,
"hero_type": 6,
"skin_name": "森"
},
{
"id": 506,
"cname": "云中君",
"title": "流云之翼",
"pay_type": 10,
"new_type": 0,
"hero_type": 4,
"hero_type2": 1,
"skin_name": "荷鲁斯之眼"
},
{
"id": 522,
"cname": "曜",
"title": "星辰之子",
"new_type": 0,
"hero_type": 1,
"skin_name": "归虚梦演"
},
{
"id": 518,
"cname": "马超",
"title": "冷晖之枪",
"new_type": 0,
"hero_type": 1,
"hero_type2": 4
},
{
"id": 523,
"cname": "西施",
"title": "幻纱之灵",
"new_type": 0,
"hero_type": 2,
"skin_name": "幻纱之灵|归虚梦演"
},
{
"id": 525,
"cname": "鲁班大师",
"title": "神匠",
"new_type": 0,
"hero_type": 6,
"skin_name": "神匠|归虚梦演"
},
{
"id": 524,
"cname": "蒙犽",
"title": "烈炮小子",
"new_type": 0,
"hero_type": 5,
"skin_name": "烈炮小子|归虚梦演"
},
{
"id": 531,
"cname": "镜",
"title": "破镜之刃",
"new_type": 0,
"hero_type": 4,
"skin_name": "破镜之刃|冰刃幻境"
},
{
"id": 527,
"cname": "蒙恬",
"title": "秩序统将",
"new_type": 0,
"hero_type": 1,
"skin_name": "秩序统将|秩序猎龙将"
}
]
}
3 通过json-server生成接口
$ json-server herolist.json
\{
^_^}/ hi!
Loading herolist.json
Done
Resources
http://localhost:3000/hero
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
4 页面的编写
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/axios.min.js">script>
<script src="lib/vue.js">script>
<link rel="stylesheet" href="./lib/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<div id="app">
<div class="container ">
<header>
<h1 >用户管理 h1>
<button class="btn btn-primary btn-success" data-toggle="modal" data-target="#myModal">添加英雄button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
button>
<h4 class="modal-title" id="myModalLabel">
添加英雄
h4>
div>
<div class="modal-body">
<form>
<div class="input-group">
<span class="input-group-addon">英雄名称:span>
<input type="text" class="form-control" placeholder="请输入英雄名称" v-model="cname">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄描述:span>
<input type="text" class="form-control" placeholder="请输入英雄描述" v-model="title">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄类型:span>
<input type="text" class="form-control" placeholder="请输入英雄类型" v-model="hero_type">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄皮肤名称:span>
<input type="text" class="form-control" placeholder="请输入英雄皮肤名称" v-model="skin_name">
div>
<br>
form>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
button>
<button type="button" class="btn btn-primary" @click="addHero">
确定添加
button>
div>
div>
div>
div>
header>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>英雄idth>
<th>英雄名称th>
<th>英雄描述th>
<th>英雄类型th>
<th>英雄皮肤th>
<th>英雄操作th>
tr>
thead>
<tbody>
<tr v-for="(hero,index) in heros" :key="hero.id">
<td>{
{hero.id}}td>
<td>{
{hero.cname}}td>
<td>{
{hero.title}}td>
<td>{
{hero.hero_type}}td>
<td>{
{hero.skin_name}}td>
<td>
<button class="btn btn-info" data-toggle="modal" data-target="#update" @click="getId(hero.id,hero.cname,hero.title,hero.hero_type,hero.skin_name)">编辑button>
<div class="modal fade" id="update" tabindex="0" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
button>
<h4 class="modal-title" >
编辑英雄
h4>
div>
<div class="modal-body">
<form >
<div class="input-group">
<span class="input-group-addon">英雄ID:span>
<input type="text" class="form-control" placeholder="请输入英雄ID" v-model="selectedId">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄名称:span>
<input type="text" class="form-control" placeholder="请输入英雄名称" v-model="cname1">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄描述:span>
<input type="text" class="form-control" placeholder="请输入英雄描述" v-model="title1">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄类型:span>
<input type="text" class="form-control" placeholder="请输入英雄类型" v-model="hero_type1">
div>
<br>
<div class="input-group">
<span class="input-group-addon">英雄皮肤名称:span>
<input type="text" class="form-control" placeholder="请输入英雄皮肤名称" v-model="skin_name1">
div>
<br>
form>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
button>
<button type="button" class="btn btn-primary" @click="update(selectedId)">
确定修改
button>
div>
div>
div>
div>
<button class="btn btn-danger" @click="deleteHero(hero.id)">删除button>
td>
tr>
tbody>
table>
div>
div>
<script src="js/hero.js">
script>
body>
html>
5 hero.js文件编写
new Vue({
el:"#app",
data:{
heros:[],
id:0,
cname:"",
title:"",
hero_type:"",
skin_name:"",
selectedId:0,
cname1:"",
title1:"",
hero_type1:"",
skin_name1:"",
},
created(){
this.getHero();
},
methods:{
//得到所有英雄
async getHero(){
const res=await axios.get(" http://localhost:3000/hero");
this.heros=res.data;
},
//添加英雄
async addHero(){
let obj={
cname:this.cname,
title:this.title,
hero_type:this.hero_type,
skin_name:this.skin_name,
}
const res=await axios.post(" http://localhost:3000/hero",obj);
this.getHero();
},
//删除英雄
async deleteHero(id){
const res=await axios.delete(" http://localhost:3000/hero/"+id);
this.getHero()
},
//修改英雄
async getId(id,name,title,type,skin){
this.selectedId=id;
this.cname1=name;
this.title1=title;
this.hero_type1=type;
this.skin_name1=skin;
},
async update(id){
// console.log(id)
console.log(id);
let updateData={
cname:this.cname1,
title:this.title1,
hero_type:this.hero_type1,
skin_name:this.skin_name1
}
const res=await axios.put(" http://localhost:3000/hero/"+id, updateData)
this.getHero()
}
}
})
6 访问和效果
