SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 基于脚手架创建前端工程

        1.1 基于 Vue 开发前端项目的环境要求

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

        1.2.2 使用图形化来创建前端工程

        1.3 启动、停止项目

        1.4 前端项目中的重点文件

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        2.2 文本插值

        2.3 属性绑定

        2.4 事件绑定

        2.5 双向绑定

        2.6 条件渲染

        2.7 Axios

        2.7.1 axiox 创建的 API 与配置代理

        2.7.2 使用 axiox.post() 方法来发送请求 

        2.7.3 使用 axios.get() 方法来发送请求

        2.7.4 vue 统一使用方式 - axiox

        2.7.5 完整代码

        1.0 基于脚手架创建前端工程

        基于脚手架可以快速的创建前端工程，让开发者可以更快速地开始实际开发工作。脚手架工具提供了一些预设的配置选项和常用的功能模块，开发人员可以根据项目需求选择适合的模板和插件，并生成一个完整的项目结构。

        除了创建项目，脚手架工具还通常提供了一些命令来帮助开发人员进行开发、构建和部署等操作，例如启动开发服务器、打包代码、进行代码检查等功能，大大提高了开发效率。

        1.1 基于 Vue 开发前端项目的环境要求

        1）node.js：前端项目的运行环境。

        2）npm：JavaScript 的包管理工具。

        3）Vue CLI：基于 Vue 进行快速开发的完整系统，实现交互式的项目脚手架。

使用以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，您可以通过以下命令来验证 Vue CLI 的安装是否成功：

vue --version

运行结果：

C:\Users\86187>vue --version
@vue/cli 5.0.8

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

在命令框中输入：

vue create 项目名称

举个例子：

        首先，在没有中文的路径下创建前端工程：

        接着，输入 vue create 项目名称：

        需要注意的是，包名中包含非 URL 友好字符，例如空格、特殊符号等，就会出现错误。npm 的包名必须是 URL 友好的，只能包含小写字母、数字和连接符（-）。如果包名中包含其他字符，就会触发该错误。还要注意的是，最后不需要用 ";" 结尾。

        再接着，选择 Vue2 来创建前端工程项目：

        最后出现以下结果，则说明创建成功了。

        该路径下就会出现前端项目的文件夹。 

        1.2.2 使用图形化来创建前端工程

vue ui

举个例子：

        首先在命令框中输入：vue ui

        接着，就会跳转到以下网页：

        点击 vue-project 下拉框，再点击 Vue 项目管理器：

        再跳转到以下页面：

        点击创建项目：

        选择 Vue2 来创建：

        最后，文件中就会出现 vue-project1 文件夹了。

        1.3 启动、停止项目

        使用 VS code 来启动项目：

        在终端输入：npm run serve，这样前端工程就启动起来了。

        control + 点击左键连接就可以进入前端网页了：

        使用 control + c 来结束前端工程项目：

        1.4 前端项目中的重点文件

        1）node_modules：当前项目依赖的 js 包

        2）assets：静态资源存放目录

        比如说要展示的图片或者视频、音频之类的资源，都可以存放在该目录中。

        3）components：公共组件存放目录

        存放的公共的资源。这个文件夹中存放的是在整个应用中都会用到的通用性组件，比如按钮、输入框、模态框等。这些组件可以被多个页面或模块共享使用，有利于代码的复用和维护。

        4）App.vue：项目的主组件，页面的入口文件

        5）main.js：整个项目的入口文件

        6）package.json：项目的配置信息、依赖包管理

        7）vue.config.js：vue-cli 配置文件

        配置项目中的信息。

        比如说：前端项目启动后，服务端默认为 8080，很容易和后端 tomcat 端口号冲突。如何修改前端服务的端口号？

        这就可以通过 vue.config.js 文件来配置前端端口号：

        记得保存修改之后的信息，关闭前端服务之后，再来重新启动前端服务：

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        Vue 的组件文件以 .vue 结尾，每一个组件由三部分组成：

        1）<template>：结构，只有一个元素，由它生成 HTML 代码。

        2）<style>：样式，编写 css ，控制页面展示效果。全局样式：影响所有组件；局部样式：只作用于当前组件。

        3）<script>：逻辑，编写 js 代码，控制模板的数据来源和行为。

举个例子：

        在前端工程中，已经存在 vue 组件，如：App.vue 、HelloWorld.vue 组件文件：

        都是由结构、样式、逻辑三个部分组成。

        2.2 文本插值

        用来绑定 data 方法返回的对象属性，通过 {{}}  来使用。

代码演示：

运行结果：

        页面展示的结果：

        2.3 属性绑定

        为标签的属性绑定 data 方法中返回的属性。

        用法：v-bind:xxx，简写为 :xxx 。

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳手",
      age: 22,
    
    };
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面的展示结果：

        2.4 事件绑定

        为元素绑定对应的事件。

用法：v-on：xxx，简写为 @xxx 

代码演示：

网页展示的结果：

        2.5 双向绑定

        表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方。

用法：v-model

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");
    },
    change(){
      this.name = "小扳手"
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

        当要从页面表格中改变 name 的值：从表单输入项改变

        从 data 方法中改变：点击 “点击改变name的值”按钮

        2.6 条件渲染

        根据表达式的值来动态渲染页面元素。

用法：v-if、v-else、v-else-if 

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


    <div v-if="sex == 1">男生</div>
    <div v-else-if="sex == 2">女生</div>
    <div v-else>未知</div>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      sex: 1
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");
    },
    change(){
      this.name = "小扳手"
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面展示结果：

        2.7 Axios

        Axios 是一个基于 promise 的网络请求库，作用于浏览器和 node.js 中。

需要深入了解可以点击该连接：请求配置 | Axios中文文档 | Axios中文网 (axios-http.cn)

安装命令：

        在终端输入命令进行安装：

npm install axios

        就会出现在 package.json 文件中：

        接着导入 axios 包：

import axiox from 'axios'

        2.7.1 axiox 创建的 API 与配置代理

axiox 的 API 列表常见的请求方式：

        1）axiox.get(url[,config])：url 表示请求路径，config 表示配置对象，可以设置查询参数、请求头信息。

        2）axiox.post(url[,data[,config]])：url 表示请求路径，config 表示配置对象，可以设置查询参数、请求头信息，data 表示请求体数据，最常见的是 JSON 格式数据。

配置代理：

        为了解决跨域问题，可以在 vue.config.js 文件中配置代理。

代码演示：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api' : {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

        配置完代理后，就可以给后端发送请求了。

        2.7.2 使用 axiox.post() 方法来发送请求 

代码演示：

        绑定了一个发送请求的方法，使用 axiox.post() 方法来发送 post 类型的请求给后端，执行成功后，会自动调用 then() 方法。

        点击发送请求：

抓包结果：

        成功获取来后端返回来的数据。

        后端也成功接收到了前端发送过来的请求：

        2.7.3 使用 axios.get() 方法来发送请求

        可以用到的参数有 url 、config 。

代码演示：

sentGet(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
        axiox.get("/api/admin/employee/1",{
          headers: {
            token: ret.data.data.token
          }
        }).then(ret => {
          console.log(ret.data)
        })
      })
      
    }

        绑定发送 get 请求的方法，先获取到 token 字段的值，再将 token 字段的值设置为发送 get 的请求的请求头 token 的字段值。最后请求发送成功之后，获取返回回来的数据。

抓包结果：

        先发送 post 请求获取到令牌：

        再发送 get 请求：

        2.7.4 vue 统一使用方式 - axiox

        只有 url 是必需的。如果没有指定 method ，请求将默认使用 get 方法。

        使用方式：axiox(config) 

        method：指定请求的方法。

        url：指定请求的路径。

        data：post 请求中存放发送请求体的内容。

        params：get 请求中存放参数信息。

        headers：配置请求头中的消息。

代码演示：

        发送一个 post 请求：

      axiox({
        method: "post",
        url: '/api/admin/employee/login',
        data: {
            username: "admin",
            password: "123456"
        }
      }).then(ret => {
        alert(ret.data.data.token)
      })

        发送一个 get 请求：

axiox({
        method: 'get',
        url: '/api/admin/employee/1',
        headers: {
          token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"
        },
        params: {
          id: 1
        }
      }).then(ret => {
        console.log(ret.data)
      })

        2.7.5 完整代码

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


    <div v-if="sex == 1">男生</div> 
    <div v-else-if="sex == 2">女生</div> 
    <div v-else>未知</div>  <br>

    <br>
    <input type="button" value="发送post请求" @click="sentPost" />

    <input type="button" value="发送get请求" @click="sentGet" />

    <input type="button" value="发送统一方式请求" @click="sent1" />

    <input type="button" value="发送统一方式请求" @click="sent2" />

  </div>
</template>

<script>
import axiox from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      sex: 1
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");

    },
    change(){
      this.name = "小扳手"
    },
    sentPost(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
      })
    },
    sentGet(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
        axiox.get("/api/admin/employee/1",{
          headers: {
            token: ret.data.data.token
          }
        }).then(ret => {
          console.log(ret.data)
        })
      })
      
    },
    sent1(){
      axiox({
        method: "post",
        url: '/api/admin/employee/login',
        data: {
            username: "admin",
            password: "123456"
        }
      }).then(ret => {
        alert(ret.data.data.token)
      })
    },
    sent2(){
      axiox({
        method: 'get',
        url: '/api/admin/employee/1',
        headers: {
          token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"
        },
        params: {
          id: 1
        }
      }).then(ret => {
        console.log(ret.data)
      })

    }



  }
  

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/736499.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【计算机网络篇】数据链路层（13）共享式以太网与交换式以太网的对比

【计算机网络篇】数据链路层（13）共享式以太网与交换式以太网的对比

文章目录 &#x1f354;共享式以太网与交换式以太网的对比&#x1f50e;主机发送单播帧的情况&#x1f50e;主机发送广播帧的情况&#x1f50e;多对主机同时通信 &#x1f6f8;使用集线器和交换机扩展共享式以太网的区别 &#x1f354;共享式以太网与交换式以太网的对比 下图是…
阅读更多...
异地局域网纯软件组网如何设置？

异地局域网纯软件组网如何设置？

在现代社会中&#xff0c;随着企业的不断扩张和分布&#xff0c;异地办公成为一种常见的工作模式。随之而来的是&#xff0c;如何实现异地局域网的组网设置成为了一个挑战。在这种情况下&#xff0c;采用纯软件组网方案是一种有效的解决方案。本文将介绍异地局域网纯软件组网设…
阅读更多...
Qt——系统

Qt——系统

目录 概述 事件 鼠标事件 进入、离开事件 按下事件 释放事件 双击事件 移动事件 滚轮事件 按键事件 单个按键 组合按键 定时器 QTimerEvent QTimer 窗口事件 文件 输入输出设备 文件读写类 文件和目录信息类 多线程 常用API 线程安全 互斥锁 条件变量…
阅读更多...
vuex的深入学习[基于vuex3]----篇(二)

vuex的深入学习[基于vuex3]----篇(二)

store对象的创建 store的传递图 创建语句索引 创建vuex的语句为new Vuex.Store({…})Vuex的入口文件是index.js,store是index.js导出的store类store类是store.js文件中定义的。 Store的构造函数constructor 判断vuex是否被注入&#xff0c;就是将vue挂载在window对象上&am…
阅读更多...
【database2】redis：优化/备份/订阅

【database2】redis：优化/备份/订阅

文章目录 1.redis安装&#xff1a;加载.conf2.操作&#xff1a;set/get&#xff0c;push/pop&#xff0c;add/rem3.Jedis&#xff1a;java程序连接redis&#xff0c;拿到jedis4.案例_好友列表&#xff1a;json om.4.1 前端&#xff1a;index.html4.2 web&#xff1a;FriendSer…
阅读更多...
GIM： Learning Generalizable Image Matcher From Internet Videos

GIM： Learning Generalizable Image Matcher From Internet Videos

【引用格式】&#xff1a;Shen X, Yin W, Mller M, et al. GIM: Learning Generalizable Image Matcher From Internet Videos[C]//The Twelfth International Conference on Learning Representations. 2023. 【网址】&#xff1a;https://arxiv.org/pdf/2402.11095 【开源代…
阅读更多...
使用 axios 进行 HTTP 请求

使用 axios 进行 HTTP 请求

使用 axios 进行 HTTP 请求 文章目录 使用 axios 进行 HTTP 请求1、介绍2、安装和引入3、axios 基本使用4、axios 发送 GET 请求5、axios 发送 POST 请求6、高级使用7、总结 1、介绍 什么是 axios axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用于浏览器和 Node.js 中…
阅读更多...
高职人工智能专业实训课之“图像识别基础”

高职人工智能专业实训课之“图像识别基础”

一、前言 随着人工智能技术的迅猛发展&#xff0c;高职院校对人工智能专业实训课程的需求日益迫切。唯众人工智能教学实训平台作为一所前沿的教育技术平台&#xff0c;致力于为学生提供高效、便捷的人工智能实训环境&#xff0c;特别在“图像识别基础”这一关键课程中&#xf…
阅读更多...
JVM 相关知识整理

JVM 相关知识整理

文章目录 前言JVM 相关知识整理1. 新生代和老年代2. 对象的分配过程3. Full GC /Major GC 触发条件4. 逃逸分析4.1.示例4.2. 使用逃逸分析&#xff0c;编译器可以对代码做如下优化 5. 对象的内存分配6. Minor GC 与 Major GC/Full GC的比较:7. 什么对象进入老年代7.1. 大对象直…
阅读更多...
(4) cmake编译静态库和动态库

(4) cmake编译静态库和动态库

文章目录 静态库整体代码动态库编译整体代码执行结果(静态) 静态库整体代码 static.h #pragma onecevoid static_demo();static.cpp #include "static.h" #include <iostream>void static_demo(){std::cout<<"static demo"<<std::end…
阅读更多...
深度学习增强的非线性光纤单像素成像系统

深度学习增强的非线性光纤单像素成像系统

1、光子器件的逆向设计&#xff1a;通过机器学习&#xff0c;特别是深度学习&#xff0c;可以高效地进行光子器件的逆向设计&#xff0c;这在传统的多参数优化问题中尤为重要。 2、超构表面和超材料设计&#xff1a;机器学习被用于设计具有特定光学特性的超构表面和超材料&…
阅读更多...
上位机图像处理和嵌入式模块部署（mcu和swd接口）

上位机图像处理和嵌入式模块部署（mcu和swd接口）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 最近学习mcu的时候&#xff0c;接触了不少调试器&#xff0c;这里面有daplink、st-link v2、j-link v9。虽然模块的形状可能不太一样&#xff0c;但…
阅读更多...
力扣SQL50 销售分析III having + 条件计数

力扣SQL50 销售分析III having + 条件计数

Problem: 1084. 销售分析III &#x1f468;‍&#x1f3eb; 参考题解 Code select s.product_id,p.product_name from sales s left join product p on s.product_id p.product_id group by product_id having count(if(sale_date between 2019-01-01 and 2019-03-31,1,nu…
阅读更多...
OpenAPI

OpenAPI

大家好我是苏麟 , 今天带来一个前端生成接口的工具 . 官网 : GitHub - ferdikoomen/openapi-typescript-codegen: NodeJS library that generates Typescript or Javascript clients based on the OpenAPI specification 安装命令 npm install openapi-typescript-codegen --sa…
阅读更多...
对接Shopify电商平台的流程

对接Shopify电商平台的流程

对接Shopify平台的流程通常包括以下关键步骤&#xff0c;在整个对接过程中&#xff0c;需要密切关注Shopify的API使用限制、认证机制、数据隐私政策等&#xff0c;确保应用的安全性和合规性。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合…
阅读更多...
43 mysql insert select 的实现

43 mysql insert select 的实现

前言 我们这里 来探讨一下 insert into $fields select $fields from $table; 的相关实现, 然后 大致来看一下 为什么 他能这么快 按照 我的思考, 应该里里面有 批量插入才对, 但是 调试结果 发现令我有一些意外 呵呵 果然 只有调试才是唯一的真理 测试数据表如下 CREATE…
阅读更多...
企业中订单超时关闭是怎么做的？我说用延迟消息，面试官让我回去等消息?

企业中订单超时关闭是怎么做的？我说用延迟消息，面试官让我回去等消息?

文章目录 背景时序图方案对比方案一 被动关闭方案二 定时关闭方案三 Rocket MQ延迟消息 总结 背景 订单超时未支付是电商中的一个核心场景&#xff0c;当用户创建订单后&#xff0c;超过一定时间没有支付&#xff0c;平台需要及时将该订单关闭。需要关闭的主要原因有以下几个&…
阅读更多...
基于springboot实现问卷调查系统项目【项目源码+论文说明】

基于springboot实现问卷调查系统项目【项目源码+论文说明】

基于springboot实现问卷调查系统演示 摘要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;问卷信息因为其管理内容繁杂&#xff0c;管理数…
阅读更多...
【database3】oracle：数据交换/存储/收集

【database3】oracle：数据交换/存储/收集

文章目录 1.oracle安装&#xff1a;swap&#xff0c;dd1.1 创建swap交换区&#xff1a;grep MemTotal /proc/meminfo &#xff08;安装Oracle物理内存要求1024MB以上&#xff09;&#xff0c;grep SwapTotal /proc/meminfo1.2 安装依赖包及改系统核心参数&#xff1a;关闭一些系…
阅读更多...
Selenium进行Web自动化测试

Selenium进行Web自动化测试

Selenium进行Web自动化测试 SeleniumPython实现Web自动化测试一、环境配置 SeleniumPython实现Web自动化测试 一、环境配置 环境基于win10&#xff08;X64&#xff09; 安装Python&#xff1b;安装PyCham安装chomedriver chomedriver下载地址 可以查看本地chrome软件版本下载…
阅读更多...
最新文章

Copyright @ 2022~2023