Vue事件及路由、NodeJs基础环境设置、Axios异步通信

标签: JavaEE框架

1、Vue快速入门

1、基础环境设置

1、NodeJs

Node 是一个让 JavaScript 运行在服务端的开发平台

入门案例

编写 sendData.js

// 设置http常量
const http = require("http")
// 创建server
http.createServer(function(request,response){
    // 设置响应头文件
    response.writeHead(200,{"Content-Type":"text/plain"})
    // 发送数据
    response.end("Hello,Server!")
}).listenerCount(8080)

// 控制台打印
console.log("Servler is running...port:8080")

点击文件,右键在终端打开,输入命令node 文件名运行,在浏览器输入http://localhost:8080/,显示出了从js中响应回的数据,运行结果如下:

在这里插入图片描述

2、npm

什么是npm

npm(Node package manager),和Maven作用类似,使用npm给前端项目导入依赖,前端所有的依赖在npm里面都能找到

npm基本环境设置

1、初始化基本的配置文件:npm init -y

2、安装环境

npm install express -g

在这里插入图片描述

3、设置淘宝镜像

npm config set regisry https://registry.npm.taobao.org

查看设置是否成功

npm config list

在这里插入图片描述
4、下载依赖

npm install jquery,下载jQuery的依赖

npm install 依赖名 要下载什么依赖就在后面加名字,可以在后面加@版本号下载指定的版本

什么都不加,也就是npm install命令会按照package-lock.json文件中的依赖名去下载

在这里插入图片描述

5、生产环境

–sava-dev(全称)或 -D(简写)代表这个依赖只在开发环境有效,不会打包出去

eslint 是开发的时候的语法检测工具

npm install --sava-dev eslint

npm install -D eslint

上面两个语句效果是一样的

在这里插入图片描述

6、webpack打包,自动将ES6代码打包成ES5语法

npm install -g webpack webpack-cli,全局安装webpack,第一次安装会有点久

webpack -v,查看是否安装成功

在这里插入图片描述
在这里插入图片描述

7、更新和卸载包

npm update 包名,自动更新包

npm uninstall 包名,卸载包

8、babel-cli 打包工具

npm install -g babel-cli,安装babel-cli打包工具

babel --version,检查是否安装成功

在这里插入图片描述

2、Vue

什么是Vue

是一个前端框架,只聚焦于视图层,简单灵活,核心思想:MVVM,

MVVM:全称为Model-View-ViewModel,本质就是MVC的改进版,MVVM将视图的状态和行为抽象化,让我们将视图UI和业务逻辑分开,可以取出Model中的数据同时帮忙处理View中由于需要展示内容而设计的业务逻辑

1、第一个Vue程序

新建包,导入vue依赖,创建lib目录,将导入的vue依赖中的vue.js文件复制进去,创建01-helloVue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 视图层代码 -->
    <div id="app">
        {{msg}}
    </div>

    <!-- vue层代码 -->
    <!-- 导入vue.js依赖 -->
    <script src="./lib/vue.js"></script>
    <script>
        // 创建vue对象,绑定视图层
        new Vue({
            // 绑定视图层
            el:"#app",
            data:{
                msg:"Hello,Vue!"
            }
        })
    </script>

</body>
</html>

使用快捷键ctrl+shift+x,搜索Live Server插件,点击Install安装

右键HTML文件,选择open with Live Server运行,运行结果如下,发现在vue对象中传递的参数展示在了前端页面

在这里插入图片描述

2、v-bind 单向绑定

v-bind:title="msg",简写形式为:title="msg"

创建02-data.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 视图 -->
    <div id="app">
        <h1 v-bind:title="msg">我是标题</h1>
        <!-- 
        简写形式
        <h1 :title="msg">我是标题</h1>
         -->
    </div>

    <!-- vue层,数据 -->
    <script src="./lib/vue.js"></script>
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'时间'+new Date().toLocaleString()
            }
        })
    </script>
    
</body>
</html>

3、v-model 双向绑定

v-bind:单向绑定,v-model:双向绑定

创建03-model.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 视图 -->
    <div id="app">
        <!-- v-bing绑定属性 -->
        <input type="text" v-bind:value="serachMap.keyword">
        <!-- v-model绑定属性 -->
        <input type="text" v-model="serachMap.keyword">
    </div>

    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                // 定义给前端传输的数据
                serachMap:{
                    keyword:"测试"
                }
            }
        })
    </script>
    
</body>
</html>

运行

在这里插入图片描述

当我们改变左边输入框中的数值的时候我们发现,右边的输入框的数值没有变化

在这里插入图片描述

但是当我们改变右边输入框的值的时候,我们发现左边的输入框的值也随之发生变化,这就是双向绑定。单项绑定的输入框的值不会影响vue对象中的值,而双向绑定的输入框中的值的改变会改变vue对象中的值,进而导致两个输入框的值都发生变化

在这里插入图片描述

4、事件

创建04-event.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 视图层 -->
    <div id="app">
        <!-- button按钮,绑定单击事件 -->
        <button @click="serach()">查询</button>
        <!-- 将查询的结果显示,数据从vue对象中获得 -->
        <p>你要查询的是:{{result.title}}</p>
        <p><a href="result.site" target="_blank">{{result.title}}</a></p>
    </div>

    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <script>
        // vue对象
        var vue = new Vue({
            el:"#app",
            data:{
                // 定义给视图层的数据
                serachMap:{
                    keyword:"百度"
                },
                // 查询结果
                result:{}
            },
            // 定义方法
            methods:{
                serach(){
                    console.log("serach")
                    // 给vue对象中的属性赋值
                    this.result={
                        "title":"百度",
                        "site":"https://www.baidu.com/"
                    }
                }
            }
        })
    </script>
</body>
</html>

执行结果,当点击查询按钮的时候出现百度标签,点击将跳转到百度页面

在这里插入图片描述

5、路由

导入vue-router依赖,将依赖文件中的vue-router.js复制一份到lib目录下

创建05-router.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 视图 -->
    <div id="app">
        <h1>Hello,router!</h1>
        <p>
            <router-link to="/">首页</router-link>
            <router-link to="/student">学员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>

        <!-- 显示view -->
        <router-view></router-view>
    </div>

    <!-- 导入依赖 -->
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>

    <script>
        // 1、定义路由组件
        const welcome = {template:"<div>欢迎</div>"}
        const student = {template:"<div>student List</div>"}
        const teacher = {template:"<div>teacher List</div>"}

        // 2、定义路由
        const routes = [
            {path:"/",redirect:"/welcome"},
            {path:"/welcome",component:welcome},
            {path:"/student",component:student},
            {path:"/teacher",component:teacher}
        ]

        // 3、创建路由实例
        const router = new VueRouter({
            routes:routes
        })

        // 4、将路由挂载在vue下
        new Vue({
            el:"#app",
            router
        })

    </script>

</body>
</html>

运行之后,在浏览器可以看到界面

在这里插入图片描述

当点击学员管理时,会出现学员的信息,当点击讲师的按钮,也会出现讲师的信息

在这里插入图片描述

路由的步骤

页面
	router-link,定义加载的页面信息
	显示信息
script
	引入lib目录
	定义路由组件
	定义路由
	创建路由实例
	将路由实例挂载到vue对象上

3、axios异步通信

新建文件夹,导入vue和axios依赖,创建lib目录,将vue.js和axios.js复制进lib目录

创建html页面:01-axios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 视图层 -->
    <div id="app">
        <button @click="getList()">测试</button>
        <table>
            <!-- 循环遍历取值 -->
            <tr v-for="list in lists">
                <td>{{list.id}}</td>
                <td>{{list.name}}</td>
            </tr>
        </table>
    </div>

    <script src="./lib/vue.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                lists:[]
            },
            methods:{
                // 前后端分离开发时,后端提供JSON数据,前端接收并渲染
                getList(){
                    axios.get("./data.json").then(resopnse=>{
                        console.log(Response)
                        this.lists=response;
                    })
                }
            }
        })
    </script>
    
</body>
</html>

4、如何启动一个前端项目

1、导入到自己的工作空间

2、下载依赖,npm install

3、启动npm run dev

4、对照页面功能查看目录,了解项目的结构

版权声明:本文为qq_44495081原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44495081/article/details/104622556