Vue3进阶使用详解(node.js、Vue3路由基础项目、axios的使用详细(实现数据分页---前后端分离)、axios加载失败)

news2024/10/6 10:34:34

Vue3进阶使用详解(node.js、Vue3路由基础项目、axios的使用详细(实现数据分页—前后端分离)、axios加载失败)

Vue cli

CLI是Commond-Line Interface，翻译为命令界面，又称脚手架。VueCLI是一个官方发布vue.js项目脚手架。使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

环境搭建

1、安装node.js

通过中文官网去下载：https://nodejs.cn

在这里插入图片描述

安装的过程是全程点击下一步，除了安装时要选择自己的安装路径（选择安装在c/d盘外）

node: 进入node.js环境

npm:安装模块

打开cmd终端输入：node -v

测试能否打印node.js的版本号：如下图表示已经安装成功：
在这里插入图片描述

2、安装vue-cli,打开cmd 窗口输入

npm install -g @vue/cli

如果下载成功则输入：vue -V (注意v字母要大写的)

进行测试：如下图则表示安装成功

在这里插入图片描述

Vue项目基础操作

1、创建项目

使用Dos窗口进行项目创建：

我使用的是首先在d盘下创建Web的文件夹：

然后通过Dos窗口切换到d盘：

d:

然后进入到Web文件中

cd Web

切换到Web中之后在里面创建项目：

vue create day16

1、选择模板

这里按上下键进行选择，别按回车键否则是直接确定了，选择好之后再直接回车确定，这里选择最后一个自定义

在这里插入图片描述

2、按上下键进行选择

通过空格的方式进行确认，小括号内会加上“ *”表示确认当前选项

在这里插入图片描述

3、选择版本

这里需要选择的版本是vue3

在这里插入图片描述

4、选择In package.json

先输入Y回车确认之后同样使用上下键进行选择，按下键选择In package.json

在这里插入图片描述

5、进入并启动项目

输入：切换到day16项目内

cd day16

启动项目：

输入：切记serve书写正确

npm run serve

网页访问：localhost:8080

效果：会显示创建项目里面默认的页面

在这里插入图片描述

6、使用VSCode前端开发工具打开项目day16

在这里插入图片描述

项目名
├── node_modules – 项目的依赖
├── public – 文件夹
├ ├── favicon.ico – 网站顶部小图标
├ └── index.html – 单页面开发，项目唯一页面
├── src – 文件夹，主要代码都在里面
├ ├── assets – img，js，css，都可以放在这里
├ ├── components – 小组件，放在页面组件中的
├ ├── store – 安装了vuex就会生成
├ ├── router – 安装了vue-router就会生成，配置路由
├ ├── views – 页面组件存放在这
├ ├── App.vue – 根组件，靠它和唯一的页面连接的
├ └── main.js – 整个项目的入口
├── .gitignore – git版本管理
├── babel.config.js – babel的配置，不用管
├── jsconfig.json
├── package.json – 项目的配置，和依赖的模块都在这
├── package-lock.json
├── README.md – 项目的介绍
└── vue.config.js – vue的配置信息

7、开启VSCode终端

启动项目（记得关掉之前开启的Dos窗口）

在这里插入图片描述

VSCode中安装识别vue内容的插件：

在这里插入图片描述

2、基本组件编写和使用

1、在views文件中创建自己的vue文件，MyFirst.vue

在这里插入图片描述

<template>
    <div id="ts">
        Hello World!
    </div>
</template>

<style>
    #ts{
        width:100px;
        height: 100px;
        background-color: aquamarine;
    }
</style>
<script></script>

2、在router路由中的index.js中注册路由

在这里插入图片描述

import { createRouter, createWebHistory } from 'vue-router'
import myfirstvue from "../views/MyFirstVue.vue"

const routes = [
  {
    path:"/mfv",
    component:myfirstvue
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3、在App.vue中编写路由的导航

在这里插入图片描述

<template>
  <router-link to="/mfv">测试</router-link>
  <router-view/>
</template>

4、重新访问指定的路径

在这里插入图片描述

在这里插入图片描述

5、在MyFirst.vue中编写数据解析代码

在这里插入图片描述

如果长时间没有反应可以常识把之前打开的终端删除重新打开终端手动启动：

向终端输入：

在这里插入图片描述

进行启动

这里因还没有连上后端，所以直接模拟数据进行测试：

<template>
    <table cellpadding="0" :cellspacing="0" width="500" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>邮件</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
        <tr v-for="(stu,index) in students" v-bind:key="index">
            <td>{{stu.sid}}</td>
            <td>{{stu.sname}}</td>
            <td>{{stu.sgender}}</td>
            <td>{{stu.sage}}</td>
            <td>{{stu.semail}}</td>
            <td>{{stu.sphoto}}</td>
            <td>
                <a href="javascript:void(0)"  >删除</a>&nbsp;&nbsp;
                <a href="javascript:void(0)"  >编辑</a>
            </td>
        </tr>
    </table>
</template>

<style>
</style>
<script>
export default {
    data(){
        return{
            students:[
                {sid:1,sname:"mary",sage:19,semail:"mary@qq.com",sphoto:"mary.jpg"},
                {sid:2,sname:"tom",sage:29,semail:"tom@qq.com",sphoto:"tom.jpg"},
                {sid:3,sname:"Jary",sage:20,semail:"Jary@qq.com",sphoto:"Jary.jpg"},
                {sid:4,sname:"Jack",sage:16,semail:"Jack@qq.com",sphoto:"Jack.jpg"}
            ]
        }
    }
}
</script>

axios的使用

1、安装axios

需要到Dos(cmd)窗口进行指令输入下载安装

npm install axios

在这里插入图片描述

2、修改上述讲述的静态数据：

即将由数据从后端拿到前端的方式进行前后端分离的方式进行演示：

首先延用上次（前后端分离开发整合的后端代码：https://blog.csdn.net/m0_56245143/article/details/130331830?spm=1001.2014.3001.5502）使用对前端代码进行修改：

对MyFirstVue.vue中代码进行修改：

<template>
    <table cellpadding="0" :cellspacing="0" width="500" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>邮件</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
        <tr v-for="(stu,index) in students" v-bind:key="index">
            <td>{{stu.sid}}</td>
            <td>{{stu.sname}}</td>
            <td>{{stu.sgender}}</td>
            <td>{{stu.sage}}</td>
            <td>{{stu.semail}}</td>
            <td>
                <img :src="'http://localhost:8888/db_img/student/'+stu.sphoto" alt="" width="50" style="border-radius: 50%;">
            </td>
            <td>
                <a href="javascript:void(0)"  >删除</a>&nbsp;&nbsp;
                <a href="javascript:void(0)"  >编辑</a>
            </td>
        </tr>
    </table>
    <div style="width:500px;margin: auto;text-align: right;">
        <a href="javascript:void(0)" @click="getStudentByPage(1)">首页</a>
        <a href="javascript:void(0)" @click="getStudentByPage(prevPage)">上一页</a>
        {{current}}/{{pages}}
        <a href="javascript:void(0)" @click="getStudentByPage(nextPage)">下一页</a>
        <a href="javascript:void(0)" @click="getStudentByPage(pages)">尾页</a>
    </div>
</template>

<style>
</style>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            students:"",
            current:1,
            size:5,
            pages:"",
            prevPage:"",
            nextPage:"",
        };
    },
    methods:{
        getStudentByPage(page){
            let content = new URLSearchParams();
            content.append("current",page);
            content.append("size",this.size);
            axios({
                url:"http://localhost:8888/student/page",
                method:"get",
                params:content
            }).then((resp) =>{
                this.students = resp.data.records;
                this.pages = resp.data.pages;
                this.current = resp.data.current;
                if(this.current == 1){
                    this.prevPage =1;
                }else{
                    this.prevPage = this.current - 1;
                }

                if(this.current == this.pages){
                    this.nextPage = this.pages;
                }else{
                    this.nextPage = this.current + 1;
                }
            });
        },
    },
    created(){
        this.getStudentByPage(1);
    }
};
</script>

axios导入报未找到axios未定义或未找到

导入axios的代码放置的位置为：

在这里插入图片描述

原因：一般情况下如果是第一次使用vue3且第一次导入会有一个问题：

我们想当然的通过：

npm install axios

在终端下载了axios就可以直接导入使用了但是，它任然会找不到报错，需要在终端运行：

npm add axios

再输入下面启动命令回车确定：

npm run serve

这样就能够解决axios导入的错误

最后的运行结果为：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【IAR工程】STM8S基于ST标准库读取DHT11数据

【IAR工程】STM8S基于ST标准库读取DHT11数据

【IAR工程】STM8S基于ST标准库读取DHT11数据 ✨申明&#xff1a;本文章仅发表在CSDN网站&#xff0c;任何其他网站&#xff0c;未注明来源&#xff0c;见此内容均为盗链和爬取&#xff0c;请多多尊重和支持原创!&#x1f341;对于文中所提供的相关资源链接将作不定期更换。&…
阅读更多...
HTTP协议 GET和POST区别 请求响应 Fiddler postman ajax

HTTP协议 GET和POST区别 请求响应 Fiddler postman ajax

&#x1f496; 欢迎来阅读子豪的博客&#xff08;JavaEE篇 &#x1f934;&#xff09; &#x1f449; 有宝贵的意见或建议可以在留言区留言 &#x1f4bb; 欢迎 素质三连 点赞 关注 收藏 &#x1f9d1;‍&#x1f680;码云仓库&#xff1a;补集王子的代码仓库 不要偷走我小火…
阅读更多...
Mac下nvm安装使用

Mac下nvm安装使用

​欢迎光临我的博客查看最新文章: https://river106.cn 1、简介 nvm 是 Mac 下的 node.js 管理工具。可以通过 nvm 安装和切换不同版本的 node.js。 官网&#xff1a;https://nvm.uihtm.com/ github&#xff1a;https://github.com/nvm-sh/nvm 2、安装 curl -o- https://raw…
阅读更多...
移动端适配rem方案

移动端适配rem方案

做移动端的适配我们就是要考虑&#xff0c;对于不同大小的手机屏幕&#xff0c;怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。 这个问题我们可以使用相对单位rem。 那么什么是 rem&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对…
阅读更多...
Linux-中断和时间管理（上）

Linux-中断和时间管理（上）

目录 中断的进入过程 中断的进入过程 为方便实验&#xff0c;本章以配套的目标板 FS4412为例来介绍 Linux 的中断子系统&#xff0c;并且编写相应的中断处理程序。FS4412 上的处理器是 SAMSUNG公司的 Exynos4412&#xff0c;该处理器使用的是4核的 Cortex-A9&#xff0c;&…
阅读更多...
c++Lambda匿名函数

c++Lambda匿名函数

cLambda匿名函数 &#xff08;1&#xff09; 定义a. [外部变量方位方式说明符]b. (参数)c. mutabled.noexcept/throw()e.->返回值类型f.函数体 2&#xff09;c11中的拉姆达表达式中的&#xff08;&#xff09;可以省略吗 所谓匿名函数&#xff0c;简单地理解就是没有名称的函…
阅读更多...
《C++ Primer Plus》（第6版）第17章编程练习

《C++ Primer Plus》（第6版）第17章编程练习

《C Primer Plus》&#xff08;第6版&#xff09;第17章编程练习 《C Primer Plus》&#xff08;第6版&#xff09;第17章编程练习1. 计算输入流中第一个\$之前的字符数目2. 将键盘输入&#xff08;直到模拟的文件尾&#xff09;复制到通过命令行指定的文件中3. 将一个文件复制…
阅读更多...
完全免费的基于区块链和 IPFS 的去中心化博客平台

完全免费的基于区块链和 IPFS 的去中心化博客平台

一、前言 xLog是一个基于Crossbell区块链的博客解决方案&#xff0c;专注于Web3数据由用户掌控。Crossbell是一个基于Web3技术的去中心化博客平台&#xff0c;用户可以在该平台上发布文章并进行交流和创作。社区提供多种交流平台和有奖创作活动。 xLog是基于 Crossbell 区块链…
阅读更多...
【AI回复】“我问它，你对五一调休怎么看”

【AI回复】“我问它，你对五一调休怎么看”

前言 马上就要到五一啦&#xff0c;放假打算去哪里玩呢&#xff1f; “我肯定是宅在家里写博客啊” 最近五一调休在某博上引起大家的共鸣&#xff0c;看了评论那叫一个惨不忍睹哇。 因为我比较对AI感兴趣&#xff0c;所以想看看它是怎么看待调休的。 首先&#xff0c;在百度…
阅读更多...
【UE】简易的水材质

【UE】简易的水材质

引擎版本&#xff1a;4.26 效果 步骤 1. 创建一个材质&#xff0c;命名为“M_Water” 2. 打开“M_Water”&#xff0c;将混合模式设为半透明&#xff0c; 光照模式设为表面半透明体积&#xff0c;在这种模式下我们可以使用金属度、粗糙度等接口 3. 创建一个4维常量节点&…
阅读更多...
Android 基于NumberPicker自定义弹出窗口Dialog整合日期选择器

Android 基于NumberPicker自定义弹出窗口Dialog整合日期选择器

Android实现把年月选择器放到AlertDialog中_左眼看成爱的博客-CSDN博客 Android使用NumberPicker实现年月滚动选择器_左眼看成爱的博客-CSDN博客 前面两篇文章我们分别讲了 1&#xff0c;如何用NumberPicker实现年月选择器 2&#xff0c;如何把1中的用NumberPicker实现的年…
阅读更多...
基于DE2-115平台实现VGA显示器的显示实验

基于DE2-115平台实现VGA显示器的显示实验

目录 什么是VGA协议VGA显示原理VGA时序图VGA参数图实验记录准备PLLROM取模代码data_drive.vkey_debounce.vvga_drive.vvga_top.v 实验现象 什么是VGA协议 这一部分摘录自野火的征途Pro《FPGA Verilog开发实战指南——基于Altera EP4CE10》2021.7.10&#xff08;上&#xff09;…
阅读更多...
ctfshow web入门phpcve web311-315

ctfshow web入门phpcve web311-315

1.web311 通过抓包发现php版本时为PHP/7.1.33dev 漏洞cve2019-11043 远程代码执行漏洞 利用条件&#xff1a; nginx配置了fastcgi_split_path_info 受影响系统&#xff1a; PHP 5.6-7.x&#xff0c;Nginx>0.7.31 下载工具进行利用 需要安装go环境 yum install golang -y …
阅读更多...
一文技术解析ART虚拟机method tracing

一文技术解析ART虚拟机method tracing

一、method tracing介绍 概述 这个是谷歌提供的对java的函数级trace工具&#xff0c;和systrace只支持打点不同&#xff0c;method tracing能支持到函数&#xff0c;看到具体的函数执行时间&#xff0c;准确的分析出来执行的时间短板。 1.生成trace的方式 sampling方式&…
阅读更多...
【数据结构初阶】第七节.树和二叉树的性质

【数据结构初阶】第七节.树和二叉树的性质

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 一、树 1.1 树的概念 1.2 树的结点分类 1.3 结点之间的关系 1.4 树的存储结构 1.5 其他相关概念 二、 二叉树 2.1 二叉树的概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4…
阅读更多...
快速上线chatGPT软件

快速上线chatGPT软件

ChatGPT是一个由OpenAI开发的自然语言处理模型&#xff0c;您无法将其直接上线。但是&#xff0c;如果您想要在您的应用程序中集成对话系统或聊天机器人&#xff0c;您可以探索以下步骤&#xff1a; 选择开发工具&#xff1a;选择一个适合您的编程语言和平台的开发工具&…
阅读更多...
C++ [STL之string的使用]

C++ [STL之string的使用]

本文已收录至《C语言和高级数据结构》专栏&#xff01; 作者&#xff1a;ARMCSKGT 文章目录 前言正文编码basic_string类说明basic_string实例成员关于string string类模块构造函数空间大小相关字符串长度及容量大小清空字符串和空串查询字符串大小和容量设置 访问与遍历头尾元…
阅读更多...
探索【Stable-Diffusion WEBUI】的插件：界面与中文翻译

探索【Stable-Diffusion WEBUI】的插件：界面与中文翻译

文章目录 &#xff08;零&#xff09;前言&#xff08;一&#xff09;主题&#xff08;kitchen Theme&#xff09;&#xff08;二&#xff09;对照翻译&#xff08;Bilingual Localization&#xff09;&#xff08;三&#xff09;自行翻译&#xff08;四&#xff09;提示词翻译…
阅读更多...
前端02：CSS选择器等基础知识

前端02：CSS选择器等基础知识

CSS基础选择器、设置字体样式、文本样式、CSS的三种引入方式、能使用Chrome调试工具调试样式 HTML专注做结构呈现&#xff0c;样式交给CSS&#xff0c;即结构&#xff08;HTML&#xff09;和样式CSS相分离 CSS主要由量分布构成&#xff0c;选择器以及一条或多条声明 选择器&…
阅读更多...
华为OD机试真题（Java），喊7的次数重排（100%通过+复盘思路）

华为OD机试真题（Java），喊7的次数重排（100%通过+复盘思路）

一、题目描述 喊7是一个传统的聚会游戏&#xff0c;N个人围成一圈&#xff0c;按顺时针从1到N编号。 编号为1的人从1开始喊数&#xff0c;下一个人喊的数字为上一个人的数字加1&#xff0c;但是当将要喊出来的数字是7的倍数或者数字本身含有7的话&#xff0c;不能把这个数字直…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023