前后端入门:用idea运行一个前后端web小项目

任务:使用已有项目代码成功运行即可

准备工作

代码文件,提取码1rc6

 

安装配置idea

安装配置jdk

检查jdk安装配置是否成功

安装配置MySQL

安装配置node.js

安装配置redis

遇到的问题:

1.idea右侧并没有maven栏

解决方法:连续点击2次shift键(或者Ctrl+shift+A )à输入mavenà选择 add maven projects à找到工程的pom.xml文件,这样右侧出现了maven栏。

 

2.idea中打开Terminal页面时,显示Cannot open Local Terminal的问题

83f00e392941466ab4a31546785f03c7.png

解决方法:点击File------Settings...------Tools------Terminal将其中的Shell path中的 powershell.exe更改为cmd.exe

d0f0ecbc332542e79ccb42439a85a9e4.png

 

3.安装node.js时遇到如下4048报错

C:\Users\luoyingyue>npm install -g vue npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path F:\node\node-cache\_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir 'F:\node\node-cache\_cacache' npm ERR!  [Error: EPERM: operation not permitted, mkdir 'F:\node\node-cache\_cacache'] { npm ERR!   errno: -4048, npm ERR!   code: 'EPERM', npm ERR!   syscall: 'mkdir', npm ERR!   path: 'F:\\node\\node-cache\\_cacache' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.  npm ERR! Log files were not written due to an error writing to the directory: F:\node\node-cache\_logs npm

解决方法:

解决Node js安装过程中 error -4048错误_nodejs安装newman报错4048-CSDN博客

 

4.安装出现packages are looking for funding run `npm fund` for details问题

解决方法:

解决npm install安装出现packages are looking for funding run `npm fund` for details问题_4 packages are looking for funding run `npm fund` -CSDN博客

 

5.Redis的Lettuce连接池连接超时:io.lettuce.core.RedisCommandTimeoutException: Command timed out 

解决方法:

1)重启redis

Windows环境下redis重启_windowsredis怎么关闭-CSDN博客

2)长期运行方法

解决springboot项目中redis偶现超时问题-CSDN博客

 

6. 链接失败; Unable to connect to Redis_unable to connect to redis

springboot整合redis报错:链接失败; Unable to connect to Redis_unable to connect to redis; nested exception is or-CSDN博客

 

最终完成截图

7573576ec6914eafba19d94f8cc176b4.png

 916ddcf4bb3b460c8839c0328d7ced59.jpeg

 

 

通过此次两个半小时的安装+运行所得对前后端的感悟和认识 :

第一次接触前后端的小项目,下载配置好所需软件,跟着老师的指导视频,解决完所有遇到的问题并运行成功,小有成就感。这次的实验深刻意识到需要学习的东西还有很多,自己的知识是比较浅薄的,还好之前自己学着用了一下idea,不是完完全全的啥都不懂,做起来还是比较快。


总结所得收获:


1.下载软件新建文件夹。
下载软件之前,可以新建文件夹取名为即将下载的软件,后续下载都放在这个文件夹里,找起来更方便。


2.能用的才是最好的。
redis的下载安装配置,是花费我时间最多的,因为网上说没有Windows版本!网络上大家给的win版本的GitHub下载网址又打不开!下载好了又总是报错!最后成功的是一个redis古早版本,这让我明白:最新的不一定就是最好的,能用的才是最好的。


3.代码的美观漂亮可以省很多时间。
以前自己写的代码不能说是乱七八糟,但是肯定没有这次实验的漂亮,能够在找找错误的时候一看看到哪里不对,以前自己写的代码虽然也有注意格式,但难免打起来会有忘格式的时候,跑不起来回头找错的时候总是一些细枝末节的格式问题。


4.文件的进入与退出——cd命令
cd ..      从当前返到回上一目录
cd ../..   退回上两级目录
cd ~       进入的是当前用户默认的目录
cd /       表示进入根目录
X:        切换到X盘
通过dir查看目录文件
在某一个文件夹打开cmd:
3d125f37a1cc45e998989adb9639b943.png

 

具体步骤:

将代码下载解压,用idea打开项目文件夹

Terminal:终端方式运行前端代码

Database:加载数据库,使用MySQL功能

Maven:下载常用包(idea自带或自己下载别的)File→settings→搜索栏搜索maven设置如图

898c47ed53f64a4ea017336d6469806d.png

user setting file建议修改位置为idea自带位置:D:\opt\IntelliJIDEA2020.1\plugins\maven\lib\maven3\conf\settings.xml

local repository:建议在D盘(或其他)新建文件夹存放

 

编码格式设置

File→setting→Editor→File Encodings

如图

dbcc9534cda74b7fb588cad930b95957.png

 

jdk配置如图

94bfbd94678f4e66a1337192e3199557.png

 

下载所需的包

点开smart-admin-master里的pom.xml文件找到maven点击刷新即可

c6580ae8aaed467ca7e44337a78c1913.png

在这里遇到了第一个问题:右侧并没有maven栏解决方法:连续点击2次shift键(或者Ctrl+shift+A )输入maven选择 add maven projects 找到工程的pom.xml文件,这样右侧出现了maven栏。

 

连接数据库:点击右侧·Database栏点击加号找到MySQL(可能不在第一排),输入电脑mysql的用户名和密码

d6e9140011914c3da2d1ecc986242273.png

 10ad74bf417a48bbab87e2133b95a00e.png

随后点击sa-common→ src→main→resources→dev→sa-common.yaml,将代码里的用户名和密码改成自己电脑的

d42abe78ab8c4bb9b3ea297a12a209d8.png

 

建立smart_admin_v2 sql文件

90e9d83a36734d5abe49790a85d6f8e4.png

 输入创建数据库的sql语句

create database smart_admin_v2

c390e9534eec4ea3b6cc1807b7a445a6.png

 

但此时是空表,需要我们运行smart_admin_v2sql文件

右键sql文件点击run asmart_admin_v2

0661efcadcc94abda782610af3206d5c.png

 点击+号选择目标数据库

c5cd946cb63d4cae9f959d7c7c732d26.png

选择后点击Run,运行成功!

aa74b81427544700b54aa59aca16e55c.png

 

现在去运行项目

sa-common是从主函数提取的常用函数,为了代码更加精简。

sa-admin是主函数,找到sa-admin→src→main→java→net→

lab1024→sa→admin→SmartAdminApplication后,点击绿色小箭头运行。

1efeacfe82d54c62bd6876595dc2a3ea.png 923d03b3e5a4423cb52d651e295a9055.png

 成功界面

d5b036d0def341148d162e0f2282b5da.png

 

测试后端连接是否成功

a6d2c26adb2c4af88319999cc505e71e.jpg

 

但此时并不能访问前端,因为这是一个前后端分离的项目。

461d5edd21254fce911fb0fa0f3d28e6.png

 

需单独运行前端代码,进入package.json文件中smart-admin-master\smart-admin-master\smart-admin-web\javascript-ant-design-vue3\package.json输入npm install下载所需包,过程可能会比较慢。

fffa0272b99a44498d599b4023f6f56b.png

 50a9b7934d874cb58bf9175ecd1e5be2.png

 没有出现error就成功了(只有警告⚠️没关系)。 

d8f56529645d43b881f2c5e0f0b5fa01.jpeg

输入npm run 确定是那种运行方式,这里显示为dev

6b39f47b187945df84df298d0c014d59.png

 则输入 npm run dev

ad3ff744f42048cd9fe2357555acdc5d.png

 

到这里就成功运行了,点击网址登录。

可能会出现没有验证码或网络连接错误的状况,请检查你的redis是否成功安装启动。

 

相关推荐

  1. Web前后交互

    2024-04-01 19:18:01       26 阅读
  2. Linux部署前后项目

    2024-04-01 19:18:01       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-01 19:18:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-01 19:18:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-01 19:18:01       87 阅读
  4. Python语言-面向对象

    2024-04-01 19:18:01       96 阅读

热门阅读

  1. 每日一题 2580统计将重叠区间合并成组的方案数

    2024-04-01 19:18:01       38 阅读
  2. 力扣top100-两数之和

    2024-04-01 19:18:01       41 阅读
  3. Web 应用基础 - ServletContext:获取与应用

    2024-04-01 19:18:01       43 阅读
  4. 砍树c++

    砍树c++

    2024-04-01 19:18:01      35 阅读
  5. 达梦数据库ODBC驱动安装和配置

    2024-04-01 19:18:01       46 阅读
  6. mysql 索引类型 FULLTEXT NORMAL SPATIAL UNIQUE 区别

    2024-04-01 19:18:01       40 阅读
  7. 前端面试题

    2024-04-01 19:18:01       35 阅读
  8. Spring面试题系列-6

    2024-04-01 19:18:01       39 阅读
  9. SpringBoot定时任务

    2024-04-01 19:18:01       43 阅读
  10. 精进TypeScript--优先选择类型声明而不是类型断言

    2024-04-01 19:18:01       43 阅读
  11. adb基本命令

    2024-04-01 19:18:01       42 阅读
  12. inno setup 卸载程序 删除整个安装目录

    2024-04-01 19:18:01       42 阅读