Vue+MySQL+Springboot

article/2025/9/29 10:00:54

文章目录

  • 一、Vue前端
    • 1. 去官网下载Nodejs,如果希望稳定的开发环境则下LTS
    • 2. 安装好后win+r输入node -v查询是否安装成功
    • 3. 高版本的nodejs自带npm,则不必再下载,查询命令npm -v
    • 4. 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用
    • 5. 测试
    • 6. 安装vue/cli:`cnpm install -g @vue/cli`
    • 7. 基于vue模板创建名为“demo_fe”的项目、使用vite工具构建:
    • 8. 测试热加载:
  • 二、Springboot后端
    • 1. 安装JDK
    • 2. 安装MAVEN
    • 3. 环境变量
    • 4. 验证:新开CMD,运行命令
    • 5. Maven配置国内镜像
    • 6. springboot创建项目
  • 三、 MySQL数据库
    • 1. 新建连接connection
      • wrong:
      • ①手动启动服务
      • ==②cmd运行mysql==
      • ③cmd 启动服务
    • 2. 新建table
    • 3. 插入数据
    • 4.select测试

一、Vue前端

1. 去官网下载Nodejs,如果希望稳定的开发环境则下LTS

https://nodejs.org/en/download/

2. 安装好后win+r输入node -v查询是否安装成功

3. 高版本的nodejs自带npm,则不必再下载,查询命令npm -v

4. 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用

  • 淘宝的cnpm命令管理工具可以代替默认的npm管理工具:
npm install -g cnpm --registry=https://registry.npm.taobao.org;

npm install在哪个目录下执行就安装在这个目录的node_modules文件夹下。 local本地安装:npm install
xxx 安装到命令行所在目录的node_module目录。 global全局安装:npm install xxx -g 安装到
\AppData\Roaming\npm\node_modules目录。 From
https://blog.csdn.net/qq_46800734/article/details/117985001

5. 测试

node -v
npm -v
cnpm -v

6. 安装vue/cli:cnpm install -g @vue/cli

  • 验证:vue -V结果不低于"@vue/cli 4.5.14"

7. 基于vue模板创建名为“demo_fe”的项目、使用vite工具构建:

搭建第一个 Vite 项目 Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node
版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
https://cn.vitejs.dev/guide/#trying-vite-online

使用 NPM:$ npm create vite@latest
使用 Yarn:$ yarn create vite
使用 PNPM:$ pnpm create vite From

npm init vite@latest demo_fe -- --template vue
cd demo_fe
cnpm install
cnpm install axios --save
cnpm install element-plus --save
cnpm install vue-router@4 --save
cnpm install vuex@next --save
cnpm run dev

8. 测试热加载:

按照页面提示编辑demo_fe/src/components/HelloWorld.vue
找到并删除<p>Edit……to test HMR.</p>代码,保存后浏览器中页面该行应立即消灭,确认热加载功能正常。

Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。
https://juejin.cn/post/7041150408458240014

二、Springboot后端

1. 安装JDK

  • https://jdk.java.net/17/

2. 安装MAVEN

  • https://maven.apache.org/download.cgi

3. 环境变量

  • 创建JAVA_HOME变量,…\jdk-17.0.1
  • 创建MAVEN_HOME变量,…\apache-maven-3.8.3
  • 修改PATH变量,添加两项:%JAVA_HOME%\bin;%MAVEN_HOME%\bin。

4. 验证:新开CMD,运行命令

	○ java -version类似openjdk version "17.0.1" 2021-10-19……○ javac -version类似javac 17.0.1○ mvn -v类似Apache Maven 3.8.3……

5. Maven配置国内镜像

  • https://blog.csdn.net/eeeemon/article/details/109692826

6. springboot创建项目

  • https://start.spring.io/

    • 选择开发语言,版本号,填写项目名,打包方式,指定 Java 版本等,点击 GENERATE,网站自动生成并下载 SpringBoot 项目;
    • 解压下载的文件,用开发工具打开即可。
  • 经常使用的依赖:
    ①Spring Web:Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container.
    ②Spring Data JPA:Persist data in SQL stores with Java Persistence API using Spring Data and Hibernate.
    ③Spring Data Redis:Advanced and thread-safe Java Redis client for synchronous, asynchronous, and reactive usage. Supports Cluster, Sentinel, Pipelining, Auto-Reconnect, Codecs and much more.
    ④Spring Boot Actuator:Supports built in (or custom) endpoints that let you monitor and manage your application - such as application health, metrics, sessions, etc.
    ⑤MySQL Driver:MySQL JDBC and R2DBC driver.
    ⑥Java Mail Sender:Send email using Java Mail and Spring Framework’s JavaMailSender.
    ⑦Thymeleaf:A modern server-side Java template engine for both web and standalone environments. Allows HTML to be correctly displayed in browsers and as static prototypes.
    ⑧Lombok:Java annotation library which helps to reduce boilerplate code.

三、 MySQL数据库

1. 新建连接connection

(以MySQL Workbench为例)

  • https://dev.mysql.com/downloads/
  • 搜索mysql数据库安装指南教程很详细。
  • 直接下载,安装过程中,默认就会安装mysql
  • 注意保存安装过程中的用户和口令。
    在这里插入图片描述

wrong:

Failed to connect to MySQL at localhost:3306 with user root

  • 口令错误……
  • mysql未启动:

    ①手动启动服务

在这里插入图片描述在这里插入图片描述

②cmd运行mysql

mysql -hlocalhost -uroot -p

Enter后,输入口令,服务启动
在这里插入图片描述

③cmd 启动服务

net start mysql

如果错误:服务名无效。代表mysql有个别名。
在这里插入图片描述
这时候仅仅输入net start,会列出所有的服务。寻找最像的一个,输入尝试。
在这里插入图片描述
所以,我的应该是net start mysql80

2. 新建table

create table user(uid         int,uname       varchar(30),sid    varchar(30),phone     varchar(11),create_time     datetime,pass_hash   text,constraint user_pk primary key(user_id)
);

电话号不要用数值型
password 要用函数加密

3. 插入数据

insert into user(uid, uname, sid, phone, create_time,pass_hash) values (1, '张三','SC007', '13896543210', '2022-09-30', '123456');

4.select测试

select * from user


http://chatgpt.dhexx.cn/article/kLwyFKFq.shtml

相关文章

Vue.js下载与安装

windows系统 1. 特点 Vue.js&#xff1a;是一套构建用户界面的渐进式框架 Vue&#xff1a;只关注视图层&#xff0c;采用自底向上增量开发的设计 Vue&#xff1a;目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 2. Vue.js的下载与安装 1&#xff09;下载安装No…

MySQL的下载、配置(手把手)

一、MySQL下载 首先到官网下载MySQL,下载链接&#xff1a;https://downloads.mysql.com/archives/community/ 进入到页面&#xff1a; 选择你需要使用的MySQL版本&#xff08;我这里选择5.7.24&#xff0c;比较稳定的版本&#xff09;选择你的操作系统&#xff08;windows&a…

vue+nodejs+mysql上线部署(服务器CentOS8)

一.Liunx配置安装node(环境配置&#xff09; 建software文件夹 mkdir /opt/software 2.进入software文件夹 cd /opt/software 3.查看服务器系统&#xff0c;下载相应的node版本 uname -a 去nodejs 官网&#xff0c;找nodejs linux的下载链接 (推荐下载node-v16.5.0版本&#x…

[记录六]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——服务端图片上传与下载

大家好&#xff0c;我是小佑小佐&#xff1a;https://blog.csdn.net/Smell_rookie&#xff0c;是一名页面仔工程师&#xff0c;我会不定时在CSDN更新我的博客&#xff0c;有兴趣的可以点个关注来逛逛我的主页。 前言&#xff1a;本项目需要涉及前端上传图片与显示图片&#xff…

Vue.js 最新官方下载地址与项目导入

目录 VUE2下载网址 VUE2使用示例&#xff1a; VUE3下载与使用 VUE3示例&#xff1a; 在官网上下载vue.js或者是vue.min.js。并用<script>标签引入。 应小伙伴要求区分一下版本&#xff1a; VUE2下载网址 Installation — Vue.jsVue.js - The Progressive JavaScrip…

vue.js下载及安装的三种方法

vue.js下载及安装的三种方法 要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了&#xff0c;下面给大家介绍三种安装vue的方法。 1.直接在官网上下载 在官网上下载vue.js。并用<script>标签引入。 注意&#xff1a;下载时网址是 https://vu…

vue下载

第一步&#xff1a; 安装 node.js &#xff08;如果已安装就不用装了&#xff0c;当然如果你想安装最新版本的node.js最好是从新安装一遍&#xff09; node.js安装官网地址 https://nodejs.org/zh-cn/ 安装完成之后 winr 键 打开运行 输入cmd 打开命令行窗口 输入 node -v …

vue+node.js+express+axios实现连接mysql数据库(前后端分离,详细版)

这两个星期都在学vue技术&#xff0c;感觉真的是博大精深啊&#xff01; 今天&#xff0c;我给大家总结了用axios连接数据库的步骤&#xff0c;让大家少走弯路&#xff08;不像我&#xff0c;我用axios连了两天才连接成功。。。&#xff09; 1、首先&#xff0c;确保你已经有了…

VUE下载及安装

下载node.js node.js下载 &#xff0c;选择长期维护版安装NODE&#xff0c;直接全部默认&#xff0c;不要安装在C盘设置NODE 在nodejs安装路径下&#xff0c;新建node_global和node_cache两个文件夹&#xff0c;这是npm安装的全局模块所在的路径&#xff0c;以及缓存cache的路径…

全网最新的vue.js下载和安装的3种方法(2023年)

文章目录 1. 文章引言2. 环境搭建3. 安装vue.js3.1 方法一&#xff1a;官网下载vue.js源代码3.2 方法二&#xff1a;使用npm install创建3.3 方法三&#xff1a;使用bower下载 4. 总结 1. 文章引言 我主要从事java后端开发&#xff0c;但对前端也非常感兴趣&#xff0c;立志成…

Vue连接MySql数据库

一、vue-cli2 全局安装 npm install vue-cli -g 局部安装项目 vue init webpack 项目名称 例如&#xff1a;vue init webpack demo1 二、express-generator 1.全局安装 npm install express-generator -g 2.express --viewejs 项目名称 例如&#xff1a;express --view…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

vue下载与安装详细教程

1、安装node&#xff08;网址&#xff1a;https://www.bilibili.com/video/BV1LA411u7dE?t10&#xff09; ①、进入node官网https://nodejs.org/zh-cn/ 点击下载&#xff0c;选择适配的 ②、 双击安装&#xff0c;安装路径随意&#xff0c;勾选第四项&#xff0c;把node添加进…

Vue下载与安装

首先安装node.js环境&#xff1a; node.js安装推荐文章&#xff1a;https://www.cnblogs.com/zhouyu2017/p/6485265.html 基于node.js安装淘宝镜像npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd…

【Vue前端】Vue+MySQL(整体用到vue-vli、ElementUI)

提示&#xff1a;小白自学Vue前端&#xff0c;记录一些知识点 VueMySQL(整体用到vue-cli、ElementUI&#xff09; 目录一、相关准备1. 连接数据库2. 添加相关依赖 二、 使用步骤1. userApi.js2. db.js3. index.js4. server目录下新建sqlMap.js5. register.vue6. main.js7. 启动…

vue项目之js对Mysql数据库操作

vue项目之js对Mysql数据库操作 文章目录 vue项目之js对Mysql数据库操作前言一、相关插件安装二、搭建本地服务器三、启动服务器四、前端Vue访问接口进行数据交互结尾 前言 js对数据库的基本操作 一、相关插件安装 下载express&#xff0c;Express 的作用和 Node.js 内置的 htt…

Vue.js + express +mysql实现数据库增删改查

Vue.js express mysql实现数据库增删改查 1、 下载安装Node.js 在Node.js官网可下载 2、下载vue-cli脚手架 npm install vue-cli -g 3、 创建项目 后面是项目名称&#xff0c;在安装项目过程中需要选择安装vue-router vue init webpack mysqlconnect 4、安装vue-resource依赖…

vue、jdk、nodejs、maven、tomcat、git、MinGW、mysql、navicat下载与安装

常用Java工具配置操作 文章目录 常用Java工具配置操作一、Vue1.vue2.0安装与项目搭建1)基本环境安装2)项目搭建 2.vue3.0安装与项目搭建1)基本环境安装2)项目搭建 3.升级Vue3.0项目4.小操作 二、JDK三、NodeJs四、Maven五、Tomcat六、Git七、MinGW八、MySql1.下载mysql2.使用命…

生信技能树 linux下安装bowtie2和使用bowtie2进行初步比对

linux下安装软件 echo $PATH ##查看路径echo $PATH|tr ":" "\n"|xargs ls -lh ls -lh /usr/bin 下载安装Bowtie2 首先在root下新建一个Biosoft的文件夹&#xff0c;切换目录到该文件夹 cd Biosoft 再在该文件夹下&#xff0c;新建一个Bwotie2的文件夹 mk…

LCWGS(6)在Linux服务器上安装Bowtie2

Bowtie2是一种用于将序列读段与长参考序列进行比对的超快且内存高效的工具。它特别擅长对齐大约50到100或1000个字符的读段&#xff0c;并且特别擅长对齐相对较长的&#xff08;如哺乳动物&#xff09;基因组。Bowtie2用FM索引对基因组进行索引&#xff0c;以保持其占用的内存空…