当前位置：首页 > news >正文

使用Vue创建前后端分离项目的过程（前端部分）

news 来源：原创 2025/6/8 2:49:31

前端使用Vue.js作为前端开发框架，使用Vue CLI3脚手架搭建项目，使用axios作为HTTP库与后端API交互，使用Vue-router实现前端路由的定义、跳转以及参数的传递等，使用vuex进行数据状态管理，后端使用Node.js+express，连接Mysql数据库。

1. 确定电脑上已经安装了Node.js

如果已经安装了Node，可以通过cmd查看版本号。Node.js包含npm，这在之后要使用npm命令安装axios。

如果没有安装，可以直接到官网上下载最新版的node.js，官网地址：Node.js — 下载 Node.js®

2. 创建项目

（1）先创建一个项目的根目录，如在D盘创建项目文件夹：D：/MoreMall。（注：这个前后端的总文件夹）

（2）使用Vue CLI3脚手架搭建项目，先确保安装了Vue CLI3。

要检查是否安装了Vue CLI 3，可以在cmd命令行中运行以下命令：

vue --version

如果Vue CLI 3已安装，该命令将输出Vue CLI的版本号。如果没有安装或者不是最新版本，可以通过以下命令安装或更新：

npm install -g @vue/cli

Vue CLI 已经安装成功，且提示可以升级。

（3）可以直接在HBuilder X项目中，创建项目client。

创建好项目后如下:

3. 安装axios

axios作为HTTP库与后端API交互，所以要安装，但是在安装axios之前，要先创建配置文件，在项目的src目录下，创建配置文件夹config，在config文件夹下创建文件index.js文件。

（1）创建config文件夹：client右键->新建->目录。

（2）创建index.js文件：config右键->新建->js文件。

（3）填写index.js的内容

文件位置：client/src/config/index.js

export default{title:"MoreMall",baseURL:{//开发时后台接口development:"http:/127.0.0.1:3000/api",  //填写自己的API地址//生产时后台接口（test）product:"/"}
}

结果如下：

（4）安装axios

这个要通过cmd命令行来安装，先要进入项目的根目录文件夹。

之后使用命令：npm install axios

安装成功后后，会在项目的node_modules文件夹下增加很多组件。

4. 配置axios

安装完成后，在src文件夹下新建api子文件夹，在api下新建文件axios.js，完成相关配置。

（1）创建api文件夹：src右键->新建->目录。Api是插件目录，用来存放axios配置以及相关接口文件。

（2）创建axios.js文件：api右键->新建->js文件。

（3）填写axios.js的内容

文件位置：client/src/api/axios.js

结果如下：

5. 创建页面文件目录

在src目录下，创建views文件夹，用于存放页面文件。

6. 项目的目录说明

node_modules：存放组件文件（系统组件和第三方组件）；

Public：存放公共文件；

Src/api：Api是插件目录，用来存放axios配置以及相关接口文件；

Src/assets：资源文件目录；

Src/components：组件文件目录（自定义组件）

Src/config：配置文件目录；

Src/views：页面文件目录；

App.vue：项目入口根文件；

main.js；项目入口文件。

使用Vue创建前后端分离项目的过程（前端部分）

前端使用Vue.js作为前端开发框架，使用Vue CLI3脚手架搭建项目，使用axios作为HTTP库与后端API交互，使用Vue-router实现前端路由的定义、跳转以及参数的传递等，使用vuex进行数据状态管理，后端使用Node.jsexpress&#xf…...

编程日记 2025/5/30 13:06:46

4、交换机IP接口功能

这一篇是讲端口的功能的，应该放在路由前面的，不过关联不大，就这个顺序也行 1、DHCP功能作用：交换机端口的DHCP功能可以使网络中的设备（计算机、打印机等等）能够自动的获取IP地址或其它网络参数&#xff0…...

编程日记 2025/6/1 1:15:33

java 选择排序，涵盖工作原理、算法分析、实现细节、优缺点以及一些实际应用场景

选择排序的详细解析更深入地探讨选择排序的各个方面，包括其工作原理、算法分析、实现细节、优缺点以及一些实际应用场景。动画演示 1. 基本概念选择排序是一种简单的比较排序算法。它的核心思想是将数组分为两个部分：已排序部分和未排序部分。每…...

编程日记 2025/6/1 21:50:29

基于springboot+vue实现的医院急诊（病房）管理系统（源码+L文+ppt）4-122

摘要医院急诊（病房）管理系统旨在优化患者的就诊流程，提高医疗效率和服务质量。该系统通过电子化患者信息、实时床位监控和智能调度等功能，确保急诊患者能够快速得到必要治疗，同时协助医护人员高效管理病房资源。系统…...

编程日记 2025/6/4 9:30:18

前端模块化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言1.概述1.1什么是模块化1.2为什么要使用模块化 2.有哪些模块化规范3.CommonJS3.1导入3.1.1正常导入3.1.2解构导入 3.2导出3.2.1exports导出3.2.2module.exports导…...

编程日记 2025/6/3 8:20:45

在VMware虚拟机上设置Ubuntu与主机共享文件夹

‌在VMware虚拟机上设置Ubuntu与主机共享文件夹的步骤如下‌： ‌主机共享文件夹的设置‌：首先，在主机上选择一个磁盘分区创建一个文件夹，并设置其共享属性。右键点击该文件夹，选择“属性”，然后在“共享”选…...

编程日记 2025/6/2 18:23:31

无线信道常识（符号与多径、窄带与宽带）

符号长度与时延扩展符号长度： 符号长度是指一个符号（即一个信息单元）在传输过程中所占用的时间。符号长度通常与系统的带宽和调制方式有关。例如，在GSM系统中，符号长度大约为 5μs。时延扩展： 时延扩展是…...

编程日记 2025/6/4 6:55:30

人工智能 (AI) 模型的数据泄露问题

目录 1. 数据泄露:2. 模型泄露:3. 社会工程学攻击:参考文献:其他资源: 人工智能 (AI) 模型的数据泄露问题指的是模型训练过程中，训练数据的信息被泄露到模型输出中，导致模型对未见过的数据产生偏差或错误预测。这种泄露可能来自多个方面，包括…...

编程日记 2025/5/30 17:01:25

uniapp Vue3 语法实现浏览器中音频录制、停止、保存、播放、转码、实时音频输出

一、引言在现代 Web 应用开发中，音频处理功能变得越来越重要。本文将详细介绍如何使用 uniapp 结合 Vue3 语法在浏览器环境中实现音频录制、停止、保存、播放、转码以及实时音频输出等一系列功能。通过深入剖析代码结构和功能实现细节，帮助读者全面理解和掌握相关技术，以便…...

编程日记 2025/6/3 3:41:19

OSPF的基本配置

基本原理图 1. 要求： R1-3为区域0，R3-R4为区域1；其中r3的环回也在区域0。R1,R2也各有一个环回 R1-R3 R3为DR设备，没有BDR R4环回地址以固定，其他所有网段使用192.168.1.0/24进行合理的分配 R4环回不能宣告&#xff0…...

编程日记 2025/6/1 4:07:48

【Flutter_Web】Flutter编译Web第二篇（webview篇）：flutter_inappwebview如何改造方法，变成web之后数据如何交互

前言欢迎来到第二篇文章，这也是第二个难题，就是原有的移动端本身一些页面H5的形式去呈现（webview），例如某些需要动态更换内容的页面，某些活动页面、支付页面，不仅仅做页面呈现，还包…...

编程日记 2025/6/2 6:33:33

【游戏中orika完成一个Entity的复制及其Entity异步落地的实现】 1.ctrl+shift+a是飞书下的截图 2.落地实现

一、orika工具使用 1)工具类 package com.xinyue.game.utils;import ma.glasnost.orika.MapperFactory; import ma.glasnost.orika.impl.DefaultMapperFactory;/*** author 王广帅* since 2022/2/8 22:37*/ public class XyBeanCopyUtil {private static MapperFactory mappe…...

编程日记 2025/6/2 1:57:44

全局JDK环境和ES自带的JDK混用导致的ES集群创建失败

es配置安全集群es使用的自带的jdk环境，如果服务器全局在有jdk的配置。会导致秘钥解析出问题。各种问题异常密钥解析异常。错误日志1： [2024-12-20T17:10:44,700][WARN ][o.e.c.c.ClusterFormationFailureHelper] [es-node1] master not discovered yet…...

编程日记 2025/6/1 20:46:14

vmime.net_4.dll详解：它是什么，有何用途？

在.NET开发环境中，DLL（Dynamic Link Library，动态链接库）文件扮演着至关重要的角色。它们封装了代码和资源，使得多个应用程序可以共享这些功能，从而提高开发效率和代码复用性。本文将详细介绍vmime.net_4.d…...

编程日记 2025/6/3 16:50:35

K8s 节点 NotReady 后 Pod的变化

NotReady 后 Pod的变化当Kubernetes（K8s）节点进入NotReady状态时，该节点将无法接收新的Pod调度，这可能会影响服务的可用性。以下是节点变为NotReady后，其上Pod状态可能发生的一些情况和细节： Pod状态变为…...

编程日记 2025/6/2 0:01:58

使用 esrally race 测试 Elasticsearch 性能：实践指南

在 Elasticsearch 性能优化和容量规划中，使用 esrally 进行基准测试是官方推荐的方式。通过 esrally race 命令，您可以针对不同的数据集与挑战类型，对 Elasticsearch 集群进行精确的性能评估。本文将简要介绍常用的数据集与挑战类型&#xff…...

编程日记 2025/6/3 13:11:41

对象、函数、原型之间的关系

在 JavaScript 中，对象、函数和原型是三者紧密联系的核心概念。它们共同构成了 JavaScript 中面向对象编程的基石，并通过原型链实现了继承与代码复用。本文将从对象、函数、原型的基础概念到它们之间的关系进行详细的讲解，帮助你理解 Java…...

编程日记 2025/5/28 19:55:00

Showrunner AI技术浅析（二）：大型语言模型

1. GPT-3模型架构详解 GPT-3是基于Transformer架构的预训练语言模型，由OpenAI开发。其核心思想是通过自注意力机制（Self-Attention）处理输入序列，并生成自然语言文本。 1.1 Transformer架构基础 Transformer架构由Vaswani等人在…...

编程日记 2025/6/4 2:43:15

Web安全攻防入门教程——hvv行动详解

Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中，保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现，还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。本教程将带你入门Web安全攻防…...

编程日记 2025/6/3 13:26:11

买卖股票的最佳时机 - 合集

************* C 买卖股票问题合集 ************* Since I have finished some stocks problems. I wanna make a list of the stocks to figure out the similarities. Here is the storks topucs list, from easy to hard: 121. 买卖股票的最佳时机 - 力扣（L…...

编程日记 2025/6/1 3:57:57

gitlab window如何设置ssh

在GitLab中设置SSH需要以下步骤： 在GitLab账户中，导航到“用户设置”下的“SSH密钥”部分。生成SSH密钥对（如果你还没有的话）。在Windows上，你可以使用ssh-keygen命令来生成密钥。在命令提示符或PowerShell中运行以…...

编程日记 2025/5/29 6:09:49

go配置文件

https://github.com/spf13/viper viper golang中常用的配置文件工具为viper库，是一个第三方库。viper功能： 解析JSON、TOML、YAML、HCL等格式的配置文件。监听配置文件的变化(WatchConfig)，不需要重启程序就可以读到最新的值。...

编程日记 2025/6/4 1:58:10

深度学习之超分辨率算法——SRGAN

更新版本实现了生成对抗网络在超分辨率上的使用更新了损失函数，增加先验函数 SRresnet实现 import torch import torchvision from torch import nnclass ConvBlock(nn.Module):def __init__(self, kernel_size3, stride1, n_inchannels64):super(ConvBlock…...

编程日记 2025/6/4 16:30:57

GIT命令使用手册（详细实用版）

一、git常用操作参考第一次提交完整步骤： 1.git init; 2.git add . 3.git commit -m "初始化" 4.git remote add origin https://github.com/githubusername/demo.git 5.git pull origin master 6.git push -u origin master（使用-u选项可以将…...

编程日记 2025/5/30 13:51:33

数据分析实战—IMDB电影数据分析

1.实战内容 1.加载数据到movies_df，输出前5行，输出movies_df.info(),movies_df.describe() # （1）加载数据集，输出前5行 #导入库 import pandas as pd import numpy as np import matplotlib import matplotlib.pyplo…...

编程日记 2025/6/2 18:00:12

【SQL/MySQL 如何使用三种触发器】SQL语句实例演示

触发器介绍 – 触发器是与表有关的数据库对象，指在insert/update/delete之前(BEFORE)或之后(AFTER)，触发并执行触发器中定义的SQL语句集合。 – 使用别名OLD和NEW来引用触发器中发生变化的记录内容，这与其他的数据库是相似的。现在触发器还只…...

编程日记 2025/5/30 3:12:02

社区团购管理系统（源码+数据库）

355.基于SpringBoot的社区团购管理系统，系统包含两种角色：管理员、用户,系统分为前台和后台两大模块，主要功能如下二、项目技术编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue …...

编程日记 2025/6/3 23:36:03

时钟分频模块

实现时钟的二分频，四分频 1.时钟分频模块： module clk_div(input clk, //50Mhzinput rst_n,input [15:0] lcd_id,output reg lcd_pclk);reg clk_25m; reg clk_12_5m; reg …...

编程日记 2025/6/3 1:32:03

linux ipmitool配置机器的BMC（服务器管理后台）

前置：mgnt口和网卡1连接入内网，并分配静态ip 1. 安装 ipmitool Debian/Ubuntu: sudo apt-get update sudo apt-get install ipmitool CentOS/RHEL: sudo yum install ipmitool2. 配置 BMC 的 IP 地址 #打印当前ipmi 地址配置信息。 ipmitool lan p…...

编程日记 2025/6/2 19:21:34

【Springboot知识】Redis基础-springboot集成redis相关配置

文章目录 1. 添加依赖2. 配置Redis连接3. 配置RedisTemplate（可选）4. 使用RedisTemplate或StringRedisTemplate5. 测试和验证集群配置在application.properties中配置在application.yml中配置主从配置1. 配置Redis服务器使用配置文件使用命令行 2. 配置…...

编程日记 2025/6/4 6:49:59

【数据结构】八大排序

目录一、直接插入排序二、希尔排序三、选择排序四、堆排序五、冒泡排序六、快速排序七、归并排序八、计数排序稳定性结论稳定性：排序后相同元素之间的相对顺序是否保持不变。一、直接插入排序基本思想：通过构建有序序列&#xff…...

编程日记 2025/6/2 21:11:05

mmdetection：图片推理以及将预测标签转换为YOLO格式标签

本文记录了使用 mmdetection 进行图片推理，并将推理结果坐标格式转换为yolo格式保存在txt中的代码。文章目录一、图片推理二、批量处理一、图片推理一个图片推理的demo。 import os import mmcv from mmdet.apis import init_detector, inference_detector fr…...

编程日记 2025/5/31 10:33:56

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

论文标题 An Empirical Study of Scaling Law for OCR OCR 缩放定律的实证研究论文链接： An Empirical Study of Scaling Law for OCR论文下载论文作者 Miao Rang, Zhenni Bi, Chuanjian Liu, Yunhe Wang, Kai Han 内容简介本论文在光学字符识别&#xf…...

编程日记 2025/6/3 0:06:47

从混沌到秩序：Python的依赖管理工具分析

Python 的依赖管理工具一直没有标准化，原因主要包括： 历史发展的随意性：Python发展早期对于依赖管理的重视程度不足，缺乏从一开始就进行统一规划和设计的意识社区的分散性：Python社区庞大且分散，众多开发…...

编程日记 2025/6/2 14:11:45

【系统】Windows11更新解决办法，一键暂停

最近的windows更新整的我是措不及防，干啥都要关注一下更新的问题，有的时候还关不掉，我的强迫症就来了，非得关了你不可！ 经过了九九八十一难的研究之后，终于找到了一个算是比较靠谱的暂停更新的方法&#x…...

编程日记 2025/6/4 7:18:08

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书一、下载影刀： https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…...

编程日记 2025/5/31 6:34:39

【原生js案例】前端封装ajax请求及node连接 MySQL获取真实数据

上篇文章，我们封装了ajax方法来请求后端数据，这篇文章将介绍如何使用 Node.js 来连接 MySQL，并对数据库进行操作。实现效果代码实现后端接口处理 const express require("express"); const connection require("../da…...

编程日记 2025/6/3 4:59:26

Ubuntu将深度学习环境配置移植到新电脑

这里默认新电脑已经安装好了conda、CUDA这些，可以直接创建新的虚拟环境。参考链接： https://blog.csdn.net/Chujun123528/article/details/143788565https://blog.csdn.net/qq_41779275/article/details/122868946https://blog.csdn.net/YajunLin/art…...

编程日记 2025/6/2 23:26:17

vue基础作业实验十

vue基础作业实验十实验要求案例要点：代码以及思考style部分Vue.js 部分Vue 实例部分这段代码是一个基于 Vue.js 的静态页面，功能包括商品品牌的添加、删除和搜索。实验要求一、实验的基本内容 （1）Vue模板语法。 &#xff08…...

编程日记 2025/6/4 6:02:21

冒泡排序（JAVA）

package com.guangyunl.f_array;import java.util.Random; import java.util.Scanner;// 数组的冒泡排序 // 冒泡排序法是采用数组中相邻元素进行比较换位 public class Demo02Bubble {public static void main(String[] args) {Demo02Bubble demo02Bubble new Demo02Bubble()…...

编程日记 2025/6/1 5:55:16

如何测量分辨率

一、什么是分辨率？ 分辨率指的是分清物体细节的能力。分辨率是一个成像系统还原空间频率的能力。一些人只是简单的用分辨率去描述极限分辨率，但是相机在在不同的对比度的情况下还原低，中和高频率的能力，也可以显示全面综合的信息。…...

编程日记 2025/6/1 15:46:46

【Mysql索引优化】索引优化的最佳实现

文章目录【Mysql优化】索引优化的最佳实现1. 全值匹配：索引的最佳使用方式2. 最左前缀法则3. 尽量使用覆盖索引：优化查询性能。减少 select \* 语句4. 范围查询优化5. 不在索引列上做任何操作（计算、函数、（自动or手动&#xff0…...

编程日记 2025/6/3 1:48:39

centos使用mkisofs构建无人值守镜像（附官方学习文档）

安装mkisofs yum install -y mkisofs 挂载镜像并确认并拷贝文件(/mnt 为我们的工作目录) 1.3 准备自动应答文件(保存为 ins.ks) 修改系统引导实际上就是添加inst.ks 这个引导参数传递应答文件传统模式引导 UEFI模式引导打包镜像通用选项 -v：启用详细模式&a…...

编程日记 2025/6/3 0:21:51

Python获取当前系统中可用的串口设备

import serial.tools.list_portsdef checkDevice(self):port_data []for port in serial.tools.list_ports.comports():port_data.append(port.description)if port_data:for devInfo in port_data:self.toolLogPrinting(可用设备 devInfo)RET Trueelse:self.toolLogPrinti…...

编程日记 2025/6/1 1:00:21