文章目錄

• • 后臺代碼
  • • git clone 到本地
    • 創建數據庫
    • 配置項目
    • 測試
  • 前端項目
  • • git clone到本地
    • 下載node.js
    • 下載組件
    • 無法識別npm命令的解決
    • 運行結果
    • 附錄1：不想每次登錄都填寫用戶名密碼？
    • 附錄2：不想每次輸入驗證碼驗證？
    • 附錄3：想要局域網的其他電腦也能訪問到當前項目？
    • 附錄4：沒有權限又不想授權？
    • 跳過嚴格的編譯檢查
  • 代碼自動生成
  • • git clone項目
    • 修改數據庫信息
    • 修改代碼生成器
    • • 第一次使用
      • 第二次使用（相同項目不同模塊）
    • 修改controller配置
    • 可視化操作
    • 案例
    • • 1. common模塊：
      • 2. 其他模塊
  • 使用
  • • 新建自己的目錄、菜單
    • • 創建菜單目錄
      • 規范
      • 樹形組件
      • 將請求轉發給網關
      • 跨域問題
      • • 是什么
        • 可行的解決方案
        • 最終解決

后臺代碼

git clone 到本地

• git命令克隆到本地

git clone https://gitee.com/renrenio/renren-fast.git

• 刪除.git文件夾，拖入到自己的項目，作為一個模塊
• 打開該模塊，復制sql建表語句
  

創建數據庫

• sqlyog中建數據庫，例如：admin,并運行上面復制的語句

配置項目

• 項目中需要改變的東西

查看當前使用的環境

修改對應配置文件，修改四個位置

測試

• 啟動項目

• 如果main報紅
  先點擊右上角的這個
  添加sdk
  

• 訪問：
  http://localhost:8080/renren-fast/
  出現如下結果：
  

前端項目

git clone到本地

• git克隆

git clone https://gitee.com/renrenio/renren-fast-vue.git

• 刪除.git文件夾，拖入到vscode

下載node.js

網址:http://nodejs.cn/

除了安裝目錄，其他直接下一步

npm:類似maven，包管理工具，自動下載一些依賴

cmd中輸入node -v可查看版本

國內鏡像，cmd輸入：

npm config set registry https://registry.npm.taobao.org

下載組件

• vscode中進入前端項目，下載組件：

npm install

無法識別npm命令的解決

• 解決上述問題：
  win + s，搜索powershell，以管理員省份打開，cd進入到項目目錄，安裝
  

運行結果

• 運行

npm run dev

• 測試：用戶名admin，密碼admin
  http://localhost:8001/
  
• 登錄成功：
  

附錄1：不想每次登錄都填寫用戶名密碼？

• 在這個位置給它賦初始值：
  

附錄2：不想每次輸入驗證碼驗證？

• 前端去掉驗證碼校驗
  
• 后端去掉驗證碼校驗
  
• 最終效果：每次只用點登錄

附錄3：想要局域網的其他電腦也能訪問到當前項目？

打開電腦8001端口的防火墻

修改host

把localhost修改為你的ip地址，IP地址可通過命令行輸入ipconfig查看

附錄4：沒有權限又不想授權？

• 授權位置始終返回true
  

跳過嚴格的編譯檢查

• 沒有錯誤也提示？
  
• 關閉檢查：
  

代碼自動生成

git clone項目

• 克隆到本地

git clone https://gitee.com/renrenio/renren-generator.git

修改數據庫信息

修改代碼生成器

第一次使用

第二次使用（相同項目不同模塊）

• 對于其他需要自動生成代碼的模塊，只需修改如下內容：
  
  

修改controller配置

• 刪除如下內容
  
• 注釋如下內容（不止兩個）
  

可視化操作

• 瀏覽器訪問,以生成zip文件
  http://localhost:81/
  
• 用zip文件中的main替換自己項目的mian

案例

1. common模塊：

pom文件導入如下依賴

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpcore</artifactId><version>4.4.15</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency>

新建包com.ljy.common.utils

把renren-fast的下面的文件復制到該目錄

新建exception包,把renren-fast中的如下文件復制過來

新建xss包，把renre-fast的下面文件復制過來

新建validator包,把renren-fast如下內容復制過來

2. 其他模塊

引入公共模塊

配置文件：

spring:datasource:driverClassName: com.mysql.jdbc.Driverurl: jdbc:mysql://ip:端口/數據庫?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghaiusername: rootpassword: root mybatis-plus:mapper-locations: classpath:/mapper/**/*.xmlglobal-config:db-config:id-type: auto #主鍵自增

測試crud（略）

使用

新建自己的目錄、菜單

創建菜單目錄

• 啟動renren-fast的前臺和后臺項目
• 訪問http://localhost:8001/
• 新增 —— 目錄 ——
• 新增 —— 菜單 —— 設置上級菜單為剛剛創建的目錄 —— 菜單路由寫uri ——

規范

• 規范：
  • 路徑的/會被替換為-，頁面文件放在/views/modules/下
  • 路由：/product/category對應的頁面文件應該放在/views/modules/product/category.vue里，對應訪問路徑是：/product-category

樹形組件

• 使用element組件的 Tree樹形控件

• 替換其中的data數據，改為在后臺獲取

• 寫獲取后臺數據的方法（可參照當前項目其他頁面的寫法）,并將該方法寫在生命周期函數內

將請求轉發給網關

• 修改static/config/index.js中的baseUrl,讓其發請求給網關（gateway）
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

• renren-fast加入注冊中心：

bootstrap.yml

spring:application:name: renren-fastcloud:nacos:discovery:server-addr: 127.0.0.1:8848

mian
@EnableDiscoveryClient

• gateway模塊新建路由規則
  • 路徑改寫：filters：
  spring:cloud:gateway:routes:- id: renren_fasturi: lb://renren-fastpredicates:- Path=/api/**filters:# 路徑改寫，/api/** -> /renren-fast/**- RewritePath=/api(?<segment>/?.*), /renren-fast/$\{segment}

跨域問題

是什么

• cors，跨域問題,如圖，控制臺打印如下內容：
  
  • 什么是跨域
  • 跨域流程

可行的解決方案

• 解決-1：
  
• 解決-2
  

最終解決

• 在網關模塊加入允許跨域配置

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;@Configuration public class CorsConfig{@Beanpublic CorsWebFilter corsConfiguration() {UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedHeader("*");config.addAllowedMethod("*");config.addAllowedOrigin("*");config.setAllowCredentials(true);configSource.registerCorsConfiguration("/**",config);return new CorsWebFilter(configSource);} }

• 觀察到renren-fast后臺有跨域配置,注釋掉renren-fast模塊中的該部分內容
  

如果不注釋掉該部分，則有如下報錯：

總結

以上是生活随笔為你收集整理的人人开源（后台代码、前端项目、代码自动生成）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。