vue day02 笔记(回顾+json-server用法)

最新推荐文章于 2023-09-06 16:52:41 发布

laker Zhang

最新推荐文章于 2023-09-06 16:52:41 发布

阅读量828

点赞数

文章标签： vue html javascript vue.js node.js

本文链接：https://blog.csdn.net/layxing27/article/details/108855716

版权

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:'<i>hello</i>'
        })
    </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:"<i>我是标签文本内容</i>"
            }
        })
    </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库引入之前添加
 <style>
    [v-cloak]{
        display: none;
    }
</style>

(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 页面的编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">
                                &times;
                            </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><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </header>
        <table class="table table-hover  table-bordered table-striped">
            <thead>
            <tr>
                <th>英雄id</th>
                <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">
                                        &times;
                                    </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><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </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 访问和效果

在这里插入图片描述

laker Zhang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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+jso
复制链接

扫一扫