分布式电商项目五:使用人人开源搭建前后分离的后台管理系统
现在我们开始搭建一个后台管理系统,使用的是码云上面的开源项目:人人开源
需要使用两个开源项目:fast和fast-vue。
使用git把需要的项目克隆下来
使用git的bash控制台,默认克隆到桌面:
删除掉fast中的.git版本控制文件,把文件添加到项目的目录中:
然后在pom文件中添加模块:
<module>renren-fast</module>
随后根据开源项目/db/目录下的mysql文件创建mall_admin的数据库,方法同分布式电商项目四,不再演示。结构如下:
修改fast的配置文件
每次使用别人的开源项目,首先记得修改配置文件
配置文件如下:
# Tomcatserver:tomcat:uri-encoding: UTF-8max-threads: 1000min-spare-threads: 30port: 8080connection-timeout: 5000msservlet:context-path: /renren-fastspring:# 环境 dev|test|prodprofiles:active: dev# jackson时间格式化jackson:time-zone: GMT+8date-format: yyyy-MM-dd HH:mm:ssservlet:multipart:max-file-size: 100MBmax-request-size: 100MBenabled: trueredis:open: false # 是否开启redis缓存 true开启 false关闭database: 0host: localhostport: 6379password: # 密码(默认为空)timeout: 6000ms # 连接超时时长(毫秒)jedis:pool:max-active: 1000 # 连接池最大连接数(使用负值表示没有限制)max-wait: -1ms# 连接池最大阻塞等待时间(使用负值表示没有限制)max-idle: 10# 连接池中的最大空闲连接min-idle: 5 # 连接池中的最小空闲连接mvc:throw-exception-if-no-handler-found: true# resources:# add-mappings: false#mybatismybatis-plus:mapper-locations: classpath*:/mapper/**/*.xml#实体扫描,多个package用逗号或者分号分隔typeAliasesPackage: io.renren.modules.*.entityglobal-config:#数据库相关配置db-config:#主键类型 AUTO:"数据库ID自增", INPUT:"用户输入ID", ID_WORKER:"全局唯一ID (数字类型唯一ID)", UUID:"全局唯一ID UUID";id-type: AUTOlogic-delete-value: -1logic-not-delete-value: 0banner: false#原生配置configuration:map-underscore-to-camel-case: truecache-enabled: falsecall-setters-on-nulls: truejdbc-type-for-null: 'null'renren:redis:open: falseshiro:redis: false# APP模块,是通过jwt认证的,如果要使用APP模块,则需要修改【加密秘钥】jwt:# 加密秘钥secret: f4e2e52034348f86b67cde581c0f9eb5[www.renren.io]# token有效时长,7天,单位秒expire: 604800header: token
可以看到默认使用的是dev开发环境,所以我们先修改dev的配置文件中的mysql连接地址:
spring:datasource:type: com.alibaba.druid.pool.DruidDataSourcedruid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://47.99.247.20:3306/renren_fast?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: renrenpassword: 123456
把url,username, password修改正确。
然后可以运行这个开源项目,测试是否配置成功:
访问http://localhost:8080/renren-fast/返回有信息,说明配置完成。注意这里只配置了后台管理系统的后端,所以没有页面,需要再配置后台管理系统的前端才行
使用vscode配置renren-fast-vue开源项目
vscode需要系统安装有前端开发的相关软件才能进行开发
首先进入node.js的官网安装node.js
安装完成之后可以在终端输入命令node -v
查看node的版本:
C:\Users\yhm>node -vv12.17.0
随后要配置一下node.js的下载源,不然使用国外的源下载速度太慢了。
输入指令:npm config set registry http://registry.
C:\Users\yhm>npm config set registry http://registry.C:\Users\yhm>
完成node.js的配置。
在vscode中配置项目依赖
先在vscode的终端中输入npm -v
确认npm是否存在
注意使用管理员打开vscode,不然安装报错:
PS C:\Users\yhm\Desktop\renren-fast-vue> npm -vnpm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行:1 字符: 1+ npm -v+ ~~~+ CategoryInfo: ObjectNotFound: (npm:String) [], CommandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundException
之后输入npm install
安装依赖:
PS C:\Users\yhm\Desktop\renren-fast-vue> npm install[ .......] / extract:debug: sill extract replace-ext@1.0.0
报错:
gyp ERR! configure error gyp ERR! stack Error: Command failed: C:\Users\yhm\AppData\Local\Programs\Python\Python37-32\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];gyp ERR! stack File "<string>", line 1gyp ERR! stackimport sys; print "%s.%s.%s" % sys.version_info[:3];gyp ERR! stack ^gyp ERR! stack SyntaxError: invalid syntaxgyp ERR! stackgyp ERR! stackat ChildProcess.exithandler (child_process.js:303:12)gyp ERR! stackat ChildProcess.emit (events.js:315:20)gyp ERR! stackat maybeClose (internal/child_process.js:1021:16)gyp ERR! stackat Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) gyp ERR! System Windows_NT 10.0.18362gyp ERR! command "D:\\Program Files\\node.js\\node.exe" "C:\\Users\\yhm\\Desktop\\renren-fast-vue\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="gyp ERR! cwd C:\Users\yhm\Desktop\renren-fast-vue\node_modules\node-sassgyp ERR! node -v v12.17.0gyp ERR! node-gyp -v v3.8.0gyp ERR! not okBuild failed with error code: 1npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.9.0 postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the node-sass@4.9.0 postinstall script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
修改npm的安装驱动解决问题
先把项目下的文件夹node_modules全部删除,然后再npm install chromedriver --chromedriver_cdnurl=http://cdn./dist/chromedriver
,最后npm install。
显示下载完成:
+ chromedriver@2.27.2updated 2 packages in 19.481sPS C:\Users\yhm\Desktop\renren-fast-vue> npm installnpm WARN ajv-keywords@1.5.1 requires a peer of ajv@>=4.10.0 but none is installed. You must install peer dependencies yourself.npm WARN sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) up to date in 17.994s
之后输入指令运行前端项目:
npm run dev
此处有一个坑运行时候可能报错,原因是安装了最新版的node.js,默认不会安装这个开源项目依赖的node-sass4.9.0版本,
error in ./src/views/demo/echarts.vueModule build failed: Error: Cannot find module 'node-sass'Require stack:
需要自己安装node-sass,输入
npm i node-sass --sass_binary_site=/mirrors/node-sass/
安装之后在运行,成功:
DONE Compiled successfully in 16462ms 9:42:06 ├F10: AM┤I Your application is running here: http://localhost:8001
可以到http://localhost:8001看一下。
因为这个只是前端项目,所以之前在IDEA上面跑的后端项目不能停掉,需要保证在8080端口启动。
默认账号 admin,密码admin登录。