Vue+Nodejs+MySQL简单实例开发

最新推荐文章于 2024-08-14 13:40:40 发布

欧怼怼

最新推荐文章于 2024-08-14 13:40:40 发布

阅读量6.2k

点赞数 9

文章标签： vue nodejs mysql

本文链接：https://blog.csdn.net/weixin_43803691/article/details/102641851

版权

本文介绍了如何使用Vue、Node.js和MySQL搭建一个简单的应用。首先，详细讲述了如何安装和配置环境，包括Node.js、Vue CLI、MySQL和XAMPP。接着，创建了数据库并初始化Node.js服务端项目，安装了必要的模块。在前端部分，通过Vue CLI搭建了项目，创建了一个简单的表单页面，并解决了跨域问题。最后，进行了测试，验证了前端提交的数据能够成功存储到数据库并展示出来。

摘要由CSDN通过智能技术生成

环境搭建

前期我们需先安装好Node和MySQL。

安装NodeJS

先去官网下载最新版的Node安装包。

安装一直点击下一步即可。

安装完成后，打开cmd，输入

node -v

显示版本号表示安装成功。
在这里插入图片描述

安装Vue-cli

安装好Node.js后，打开cmd，输入

npm install -g vue-cli

安装完成后，在cmd输入

vue -V

如显示版本号表示安装成功。

在这里插入图片描述

安装MySQL

去到官网下载MySQL的安装包。

在这里插入图片描述
选择第二个，点击Download下载。

安装步骤网上有很多教程，这里就不多讲。

安装完成配置好环境后，进入cmd，输入

mysql -uroot -p

然后输入密码后，就会进入MySQL。表示安装配置成功。

在这里插入图片描述

安装XAMPP

百度下载安装一个XAMPP。

安装完成后，找到你的安装目录，找到phpMyAdmin文件夹。
C:\xampp\phpMyAdmin（我这里安装在C盘）

打开里面的config.inc.php文件。
找到一下内容并进行修改。

$cfg['Servers'][$i]['user'] = 'root';           //修改成MySQL管理员账号
$cfg['Servers'][$i]['password'] = '123456';     //修改成MySQL管理员密码

$cfg['Servers'][$i]['controluser'] = 'root';     //修改成MySQL管理员账号
$cfg['Servers'][$i]['controlpass'] = '123456';   //修改成MySQL管理员密码

修改好之后，打开XAMPP。
打开里面的Apache和MySQL。

在这里插入图片描述

然后点击MySQL后面的Admin，进入phpMyAdmin即可。

在这里插入图片描述

搭建服务端

建立数据库

打开phpMyAdmin，在里面输入代码，新建一个test的数据库以及在里面建一个user的表。

-- 数据库： `test`
--
CREATE DATABASE IF NOT EXISTS `test` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `test`;


-- 表的结构 `user`

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `age` varchar(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;