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

SSM整合项目(Vue3环境搭建)

SSM整合项目(Vue3环境搭建)

1.下载node.js

1.卸载原来的node.js

image-20240309195153123

2.检测是否卸载成功

image-20240309195335286

3.下载node.js(10.16.3)
一路next就可以

image-20240309195552302

4.检测是否安装成功

image-20240309195700343

2.全局安装Vue插件cli

命令行输入 npm install -g @vue/cli

image-20240309200016808

3.新建Vue项目

1.新建目录

image-20240309200616485

2.进入这个目录然后cmd

image-20240309200703079

3.创建Vue项目ssm_vue在该目录下
1.输入指令vue create ssm_vue

image-20240309201056166

2.使用上下键选择最后一个

image-20240309201016644

3.回车

image-20240309201137787

4.选择三个选项(按空格选择,上下键移动)

image-20240309201532255

5.回车

image-20240309201617275

6.选3.x回车

image-20240309201635353

7.输入y并回车

image-20240309201716258

8.选择 In package.json并回车

image-20240309201921229

9.输入y并回车,表示保存配置

image-20240309202052221

10.输入一个名字并回车,表示这个配置的名字

image-20240309202136530

11.选择 NPM并回车

image-20240309202314525

12.成功!

image-20240309202409070

4.运行这个项目
1.继续输入指令 cd ssm_vue

image-20240309202522412

2.输入指令 npm run serve

image-20240309202618787

3.选择允许访问

image-20240309202645145

4.打开浏览器输入localhost:8080,成功显示vue首页

image-20240309202741738

5.IDEA打开项目,并配置项目启动
1.把项目文件夹拖拽到IDEA

image-20240309202940823

2.Trust Project

image-20240309203019066

3.成功打开

image-20240309203055795

4.点击锤子右边的,然后点击加号,找到npm

image-20240309204111443

5.配置npm,然后点击ok

image-20240309205539365

6.驶入ctrl + c关闭刚才命令行开启Vue项目

image-20240309204547696

image-20240309204556086

image-20240309204624514

7.IDEA启动项目,点击绿色的箭头

image-20240309204705748

8.启动成功

image-20240309205605511

9.没有识别Vue文件就是没哟安装插件,去插件里面安装就可以了

image-20240309211218954

4.将这个前端项目交给Git远程仓库管理

1.在GitHub新建一个仓库

image-20240309211941009

2.随便创建一个文件夹

3.右键git bash here

image-20240309212331678

4.复制克隆地址

image-20240309212024360

5.输入git clone + 刚才复制的地址

image-20240309212533278

6.复制这个ssm_vue里面的文件,然后这个文件夹就没有用了

image-20240309212644702

7.找到前端项目的文件夹,将刚才复制的文件粘贴进来即可
此时这个文件夹就变成了本地仓库

image-20240309212923936

8.回到IDEA,发现本地仓库已经存在

image-20240309213209584

9.将代码提交到远程仓库

image-20240309214403992

5.Vue3前端工程路由机制

1.index.html

image-20240309213753705

2.App.vue

image-20240309214903098

3.router/index.js

image-20240309215629226

4.HomeView.vue

image-20240309220226716

5.HelloWorld.vue

image-20240309220428433

6.路由机制梳理
1.index.html的div会被app.vue来渲染

image-20240309221031360

2.App.vue的标签会被路由到的页面所渲染

image-20240309221206154

3.router/index.js是配置路由的页面这里以 “/” 来演示

image-20240309221406918

4.输入http://localhost:8080/则会找到HomeView.vue

image-20240309224429180

5.这是HomeView.vue引用的HelloWorld组件,这个组件的信息会渲染HomeView.vue组件然后再展示到App.vue的标签最后再挂载到index.html

image-20240309221832400

6.Vue3项目目录结构梳理

image-20240309225215531

相关文章:

SSM整合项目(Vue3环境搭建)

SSM整合项目(Vue3环境搭建) 1.下载node.js 1.卸载原来的node.js 2.检测是否卸载成功 3.下载node.js(10.16.3) 一路next就可以 4.检测是否安装成功 2.全局安装Vue插件cli 命令行输入 npm install -g vue/cli 3.新建Vue项目 1.…...

Golang 方法的接收器 receiver 指针和值的区别

一、如果receiver是指针类型 package mainimport "fmt"type Count struct {count int }func main() {c : Count{count: 0}c.incr()fmt.Println(c.count)c2 : &cc2.incr()fmt.Println(c2.count) }func (c *Count) incr() {c.count }//打印结果 1 2 incr 方法的 …...

【蓝桥杯】节省时间

一、对于string类型变量的连接,可以直接用“”或者“”来进行字符串的直接连接 string a"1"; string b"2"; string c; cab"12"; string操作符两边既可以都是string类型,也可是string与char类型 注意: (1)“”…...

矩阵乘法--Strassen算法

一、矩阵乘法 从中可以看出&#xff0c;计算两个矩阵的乘积&#xff0c;需要三个 for 循环&#xff0c;可以简单写出代码&#xff1a; for(int i1;i<m;i)for(int j1;j<p;j)for(int k1;k<n;k)c[i][j]a[i][k]*b[k][j]; 时间复杂度的分析&#xff1a;很明显&#xff0c;…...

Unity笔记:C#基础(1)

杂项 虚函数 CSDN - C虚函数详解 cnblog - C#中的虚函数virtual 常量池与new 在C#中&#xff0c;string是不可变的&#xff0c;这意味着对string对象的操作通常会返回一个新的string对象&#xff0c;而不会修改原始的string对象。因此&#xff0c;几乎所有涉及更改string内…...

计算机科技与心理学的紧密交织:一场跨学科的深度对话

随着信息技术的飞速发展&#xff0c;计算机科学与心理学这两门看似迥异的学科日益呈现出密不可分的关系。本文将深入探讨计算机科学与心理学之间的相互影响和融合&#xff0c;揭示二者在研究方法、应用实践以及对未来社会发展的影响等方面的高度关联性。 计算机科学为心理学研究…...

【JAVA类】利用接口的多继承实现———图书管理系统【附源码】

引言 在我们学习了一些java的基础语法之后&#xff0c;需要把这些知识点可以串起来&#xff0c;这里使用一个简单的小项目可以很好的帮助我们牢记这些知识点&#xff0c;今天就带大家学习一个有关java的小项目&#xff0c;很多学校也经常把这个项目作为他们的课程设计——经典的…...

Linux进程概念僵尸进程孤儿进程

文章目录 一、什么是进程二、进程的状态三、Linux是如何做的&#xff1f;3.1 R状态3.2 S状态3.3 D状态3.4 T状态3.5 t状态3.6 X状态3.7 Z状态 四、僵尸进程4.1 僵尸进程危害 五、孤儿进程 一、什么是进程 对于进程理解来说&#xff0c;在Windows上是也可以观察到的&#xff0c…...

实体店如何引流成交裂变?打造流量新引擎的秘诀

在数字化浪潮席卷的今天&#xff0c;实体店经营面临着前所未有的挑战与机遇。社区店作为连接居民日常生活的桥梁&#xff0c;如何在激烈的市场竞争中脱颖而出&#xff0c;实现引流、成交与裂变&#xff0c;成为摆在每一位实体店创业者面前的重要课题。 作为一名鲜奶吧开店5年的…...

蓝桥杯(日期问题纯暴力)

纯纯暴力&#xff0c;写的想吐&#xff0c;玛德服了。 但是复习了vector去重方法&#xff0c;日期的合法性判断。 #include <iostream> #include <vector> #include <cstring> #include <algorithm>using namespace std; vector<int> res; st…...

ES: ES+Kibana 环境部署

ESKibana 部署 机器信息 10.10.8.62 10.10.8.63 10.10.8.64版本选择&#xff1a;6.8.1 基础环境优化 所有节点 # 关闭防火墙 systemctl stop firewalld.service systemctl disable firewalld.service# 查看selinux getenforce # 关闭selinux setenforce 0 # 永久关闭se…...

Find My产品越来越得到市场认可,伦茨科技ST17H6x芯片赋能厂家

苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、AirPods、Apple Watch&#xff0c;如今的Find My已经不单单可以查找苹果的设备&#xff0c;随着第三方设备的加入&#xff0c;将丰富Find My Network的版图。产…...

Linux系统——Haproxy高性能负载均衡软件

目录 一、Haproxy介绍 1.Haproxy定义 2.Haproxy主要特性 二、安装Haproxy 1.yum安装 2.第三方rpm包安装 3.编译安装 3.1解决Lua环境 3.2编译安装Haproxy 三、配置文件详解 1.状态页 2.日志管理 2.1定义日志到其他主机站点 3.指定进程线程个数 4.cpu亲缘性 5.多进…...

Python办公自动化之PDF(二)

Python操作PDF二 1、PyMuPDF简介2、 1、PyMuPDF简介 PyMuPDF&#xff08;也称Fitz&#xff09;开源&#xff0c;提供了一整套用于处理PDF文件的综合工具。使用PyMuPDF&#xff0c;用户可以高效地执行打开PDF、提取文本、图像和表格、操作旋转和裁剪等页面属性、创建新PDF文档以…...

登录失败重试次数安全设计方案

1、登录失败重试次数设计方案 1、无论是账号还是密码错误&#xff0c;统一提示&#xff1a;用户名或密码错误&#xff0c;账号剩余登录次数N&#xff01; 2、同一账号连续登录失败5次&#xff0c;锁定该账号5分钟&#xff0c;5分钟后可以再重试登录。 开发设计 key&#xff…...

Django——模板

Django——模板 Django 提供一种动态生成 HTML 页面 —— 模板 1、模板语言 模板语言(DTL): 变量 &#xff0c; 注释 &#xff0c; 标签 &#xff0c; 过滤器 &#xff0c; 模板继承 1、变量 <body> <!-- 这个是前端中的注释 --> {# 这种是Django中模板语言的…...

角蜥优化算法 (Horned Lizard Optimization Algorithm ,HLOA)求解无人机路径优化

一、无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径,使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一,它可以通过算法和模型来确定无人机的航迹,以避开障碍物、优化飞行时间和节省能量消耗。 二、算法介…...

Windows下 OracleXE_21 数据库的下载与安装

Oracle 数据库的下载与安装 数据库安装包下载数据库安装访问数据库进行测试Navicat连接数据库 1. 数据库安装包的下载 1.1 下载地址 Oracle Database Express Edition | Oracle 中国 1.2 点击“下载 Oracle Database XE”按钮&#xff0c;进去到下载页面&#xff08;选择对…...

新手如何快速上手学习单片机?

读者朋友能容我&#xff0c;不使博文负真心 新开专栏&#xff0c;期待与诸君共享精彩 个人主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《单片机》 学习单片机是一个有趣且有挑战性的过程。单片机是一种微控制器&#xff0c;广泛应用于各种电子设备和嵌入式系统中。在这…...

grpc的验证器

简介 在使用grpc库时候 ,很多时候我们需要对反序列化的参数进行校验,代码中有很多参数校验的代码&#xff0c;如果手动实现&#xff0c;会非常繁琐&#xff0c;对于grpc来说&#xff0c;在定义proto的时候使用直接定义参数的限制规则是一种更合理、更优雅的方式&#xff0c;插…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...