1.前置工具安装
- jdk 1.8
- maven (后端项目管理工具)
- redis (缓存数据库)
- mysql
- MySQLWorkbench (mysql可视化工具)
- idea (后端开发工具)
- nodejs (js前端开发平台,本文主要用到包管理工具 npm)
- vscode (前端开发工具)
- svn (版本管理工具)
(maven建议3.8.6及以上,前端开发可使用idea)
- 代码地址
svn://47.122.9.107/projects/01_code
- node环境配置
一,下载及安装
http://nodejs.cn/
二,检查是否安装成功
cmd键入node -v和npm -v
三,自定义node配置文件夹
在node安装目录下新建两个文件夹node_cache,和node_global
配置node第三方命令地址:
npm config set prefix "E:\Program Files\nodejs\node_global"
(该配置加上系统环境变量配置用于后面使用vue时能够直接在命令行中使用,不做修改默认指向c盘的用户目录下,占用C盘空间)
配置node下载时缓存地址:
npm config set cache "E:\Program Files\nodejs\node_cache"
(该配置用于设定node下载时指定下载的第一地点在何处,为后续下载相关依赖时先从这里查询,不做修改默认指向c盘的用户目录下,占用C盘空间)
如图键入cmd命令
node的配置在c盘的用户目录下有一个文件保存:
(如果配置不起作用或者配置总出错,可以删除该文件重新配置,或进入文件进行编辑想要的配置)
四,配置node的变量路径
变量名为:NODE_PATH
变量值为:E:\Program Files\nodejs\node_global\node_modules
也就是全局依赖包下的node_modules
五,配置node第三方命令地址
在“用户变量”这一栏,找一个叫Path的变量。
其中有一个地址是用户目录\AppData\Roaming\npm,将其删除并且替换,其值为E:\Program Files\nodejs\node_global。
至此,node的基本环境变量配置成功。
六,配置淘宝镜像和cnpm
下载cnpm:npm i cnpm -g --registry=https://registry.npm.taobao.org
(npm下载的包,来源于一个基于web的仓储,此仓储建立在一个外国的网站上,域名是
https://registry.npmjs.org/,直接下载的话速度很慢
淘宝团队做了一件大好事,他做了一个npm的镜像网站,而且这个网站是国内的服务器,下载起来当然是飞快。这就是我们安装的cnpm)
当然也可以直接给npm换掉镜像源成淘宝镜像
npm config set registry https://registry.npm.taobao.org
这时我们查看我们的配置信息:npm config get registry
-g表示是全局安装 这个命令的意思是使用npm,从远程仓储https://registry.npm.taobao.org上下载一个叫做cnpm的包,并且安装至本地nodejs的根目录下的node_global目录下
这里npm i,这个i就是install的简写,你也可以写全这个单词
4.项目启动
- 启动redis,默认端口6379
2.数据库sql配置
关键步骤
- 后端启动:启动idea,导入后端项目,项目编译后,点击ruoyi-admin 子工程中的 src/main/java/com/ruoyi/RuoYiApplication.java,右键run RuoYiApplication.main() 启动项目。(如svn直接下载idea打开文件即可)
成功之后打开idea配置数据库,这里aaa是之前我导入测试数据库的名字,根据情况改成你本地的就ok了
- 前端部分vue需要vue.js插件和node环境
解压ruoyi-ui文件下node_modules压缩包,压缩包是vue依赖。
idea导入前端项目ruoyi-ui
vue.js可以在idea直接下载,node自行百度
然后cd加入对应的ui位置执行npm install
或者直接open in terminal进入文件位置也可以
或配置npm
下载好之后就可以启动了
访问地址
三种环境
开发环境 生产和测试 我们使用的是开发环境
- 关于若依的基本使用方法
声明一下我写基本使用方法的目的是为了更快地使用框架,这里讲解一些基本的使用方法,若果想学习更深入的原理可以访问若依前后端分离版,通俗易懂,快速上手
讲的还是挺好的深入浅出
1创建数据表
2在系统工具 -代码生成里选择导入 导入你的表
3可以选择编辑修改你的备注等信息
4点击生成代码-直接生成
5将生成的代码复制到你的项目对应位置(前后端xml都有)
6默认生成的add方法的id是自增方法,工作中一般会替代一个18为的id或者其他位数的id
IdUtils.simpleUUID()
7配置路由(你可以简单的理解为拦截器,由路由控制访问)
位置在系统管理-菜单管理
可以分为三个等级
关于api接口,若依自带了 swagger 的接口
将若依启动后,访问 http://localhost/swagger-ui.html (或者使用菜单系统工具 -> 系统接口)可以查看接口
使用时需要在方法上加@ApiOperation("XXXX")
在类上加@Api(tags={"XXXX"})
感兴趣可以自行百度,这里就不仔细讲了,我们在做前后端分离的时候不常用swagger,看你们公司的习惯了,
那我们怎么解决拦截跨域问题呢?
只需要在类上加注解@Anonymous就可以不用登录,下面的方法都可以访问到了
关于分页
若依框架自带的分页工具类在代码生成的时候我们也能看见
startPage();
这样的代码,只需在写接口的时候传
PageNum PageSize
就可以了