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

embedded/2024/12/23 22:48:52/

        前端使用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;项目入口文件。


http://www.ppmy.cn/embedded/148185.html

相关文章

【微服务】SpringBoot 整合Redis实现延时任务处理使用详解

目录 一、前言 二、延迟任务的高频使用场景 三、延迟任务常用解决方案 3.1 Quartz 3.2 DelayQueue 3.2.1 Timer + TimerTask 3.2.2 ScheduledExecutorService 3.3 Redis sorted set 3.4 RabbitMQ 四、Redis实现延时队列操作实战 4.1 Redis Sorted Set 概述 4.1.1 Re…

vue2实现word在线预览

实现附件在线预览是一个很常用的功能,这次正好碰到这样的需求,记录一下自己实现的过程。 首先是插件的选择,网上实现预览的方法主要有两种,一个是vue-office插件,另一个是docx-preivew插件。看网上其他网友的教程都能…

Spring(二)AOP、切入点表达式、AspecJ常用通知的类型、Spring中的事务管理

文章目录 一、AOP 1、定义 2、特点 3、AOP中的术语(连接点、切入点、通知、目标、代理) 4、配置 (1)下载AOP相关jar (2)启动AspectJ支持 5、使用 6、切入点表达式 7、AspecJ常用通知的类型 &…

DDR DRAM/UDIMM Clock DCD jitter分析

随着DDR系统运行速度的提高,不仅对DQ和DQS,而且对时钟和地址/控制信号的时序要求也变得非常具有挑战性。FPGA系统环境下,FPGA应根据客户需求支持不同的通道拓扑。如下图显示了一个DDR4分立SDRAM的示例配置,广泛用于减少系统的厚度…

Python连接MySQL数据库教程

目录 一、连接方法 二、pymysql模块用法 三、借助python运行sql语句 1、创建数据库连接对象 2、创建数据库操作对象 3、编写sql语句、执行sql语句 4、释放【关闭】与数据库的连接资源对象 总结 一、连接方法 要用Python连接数据库需要结束Python的外部库--pymysql&…

青少年编程与数学 02-004 Go语言Web编程 12课题、本地数据存储

青少年编程与数学 02-004 Go语言Web编程 12课题、本地数据存储 一、本地数据存储1. Cookies2. LocalStorage3. SessionStorage4. IndexedDB5. Web SQL实现客户端本地数据存储的示例注意事项 二、应用场景1. 用户偏好设置2. 表单数据保存3. 离线访问4. 购物车功能5. 游戏状态保存…

211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

一、板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集、1路2.5G DA回放的FMC、1路AD同步信号子卡。板卡采用标准FMC子卡架构,可方便地与其他FMC板卡实现高速互联,可广泛用于高频模拟信号采集等领域。 二、功能介绍 2.1 原理框图 2.2 硬件…

联合物种分布模型(JSDM)与Hmsc包:群落生态学数据分析与预测技术

联合物种分布模型(Joint Species Distribution Modelling,JSDM)在生态学领域,特别是群落生态学中发展最为迅速,它在分析和解读群落生态数据的革命性和独特视角使其受到广大国内外学者的关注。在学界不同研究团队研发出…